/* Vantage public site.
   Shares the console's colour tokens so the marketing site and the product feel like one
   thing, but uses a larger, calmer type scale — a page you read, not a tool you operate. */

:root {
  --bg: #0b0f1a; --surface: #141b2b; --surface-2: #1c2436; --border: #29324a;
  --text: #eaeef7; --muted: #95a1ba;
  /* Brand matches the CONSOLE exactly, so the site and the product are one thing.
     The FILL and the LINK colour are separate tokens for the same reason as in
     app.css: a button label must contrast with the fill, a link with the page.
     White on --brand measures 4.55:1. */
  --brand: #3569ff; --on-brand: #ffffff; --brand-text: #8aa4ff; --brand-2: #8aa4ff;
  --ok: #34d399; --warn: #fbbf24; --bad: #f87171;
  --tint: 16%;
  --radius: 18px; --shadow: 0 20px 56px -16px rgba(0,0,0,.55);
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Display stack is system-only ON PURPOSE — a privacy-positioned product must not send
     visitor IPs to a font CDN. "Segoe UI Variable Display" / SF give a premium headline feel
     natively; the weight + tight tracking below carry the display treatment. */
  --display: 'Segoe UI Variable Display', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --wrap: 1140px;
  color-scheme: dark;

  /* The light palette lives here unapplied, so the OS rule and the manual
     override below share one set of values and cannot drift apart. */
  --lt-bg: #ffffff; --lt-surface: #ffffff; --lt-surface-2: #f4f7fd; --lt-border: #e6ebf5;
  --lt-text: #0d1321; --lt-muted: #566178; --lt-shadow: 0 20px 48px -18px rgba(15,23,42,.16);
  /* Light mode needs DIFFERENT status hues, not the same ones on a pale background:
     measured on white the dark-theme values land at 1.92 / 1.67 / 2.77 : 1. */
  --lt-brand-text: #2f5fe0; --lt-ok: #047857; --lt-warn: #8a5a02; --lt-bad: #c81e1e;
  --lt-tint: 10%;
}
/* Explicit choice from the theme toggle — wins whatever the OS reports. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: var(--lt-bg); --surface: var(--lt-surface); --surface-2: var(--lt-surface-2);
  --border: var(--lt-border); --text: var(--lt-text); --muted: var(--lt-muted);
  --shadow: var(--lt-shadow);
  --brand-text: var(--lt-brand-text); --brand-2: var(--lt-brand-text);
  --ok: var(--lt-ok); --warn: var(--lt-warn); --bad: var(--lt-bad); --tint: var(--lt-tint);
}
/* OS preference, unless the visitor has explicitly asked for dark. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: var(--lt-bg); --surface: var(--lt-surface); --surface-2: var(--lt-surface-2);
    --border: var(--lt-border); --text: var(--lt-text); --muted: var(--lt-muted);
    --shadow: var(--lt-shadow);
    --brand-text: var(--lt-brand-text); --brand-2: var(--lt-brand-text);
    --ok: var(--lt-ok); --warn: var(--lt-warn); --bad: var(--lt-bad); --tint: var(--lt-tint);
  }
}

* { box-sizing: border-box; }
/* Any later display rule would otherwise beat the UA sheet and leave [hidden] visible. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--sans);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img, svg { max-width:100%; }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.muted { color:var(--muted); }
.center { text-align:center; }

.skip { position:absolute; left:-9999px; }
.skip:focus { left:16px; top:16px; z-index:100; background:var(--brand); color:#fff;
  padding:10px 14px; border-radius:8px; }

/* ── Type ── */
h1 { font-size:clamp(34px, 5.2vw, 58px); line-height:1.08; letter-spacing:-.02em; margin:0 0 18px; }
h2 { font-size:clamp(26px, 3.4vw, 38px); line-height:1.15; letter-spacing:-.015em; margin:0 0 14px; }
h3 { font-size:18px; margin:0 0 8px; letter-spacing:-.01em; }
h4 { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0 0 12px; }
p { margin:0 0 14px; }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand-2); margin:0 0 12px; }
.lede { font-size:18px; color:var(--muted); max-width:56ch; }
.sub { color:var(--muted); max-width:60ch; margin-left:auto; margin-right:auto; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--brand); color:#fff; border:1px solid transparent; border-radius:10px;
  padding:10px 18px; font-size:14px; font-weight:600; cursor:pointer;
  transition:transform .12s ease, background .12s ease; font-family:inherit; }
.btn:hover { background:var(--brand-2); transform:translateY(-1px); }
.btn.ghost { background:transparent; border-color:var(--border); color:var(--text); }
.btn.ghost:hover { border-color:var(--brand); background:transparent; }
.btn.lg { padding:14px 26px; font-size:15px; border-radius:12px; }
.btn.full { width:100%; }
.btn:disabled { opacity:.6; cursor:not-allowed; transform:none; }

/* ── Nav ── */
.nav { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
.nav-inner { display:flex; align-items:center; gap:24px; height:66px; }
.logo { display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:17px; letter-spacing:-.01em; }
.logo-dot { width:10px; height:10px; border-radius:50%; background:var(--ok); box-shadow:0 0 10px var(--ok); }
/* The panel holds the links and the CTA cluster together. On a wide screen it is just the
   right-hand half of the bar; on a small one it becomes the whole drop-down menu. */
.nav-panel { display:flex; align-items:center; gap:24px; margin-left:auto; }
/* ADR-211: invisible until the parser has reached the menu button after it. A page painted while its header was still
   arriving (a busy machine) drew "Home" alone at the right edge, then each later link pushed it left: a layout shift
   (0.017 at 1280 px). Browsers without :has() show it as before. */
.nav-panel:not(:has(+ .nav-toggle)) { visibility:hidden; }
.nav-links { display:flex; gap:26px; font-size:14px; }
.nav-links a { color:var(--muted); }
.nav-links a:hover { color:var(--text); }
.nav-cta { display:flex; gap:10px; }
.nav-toggle { display:none; background:none; border:none; color:var(--text); font-size:22px; cursor:pointer; }

/* ── Hero ── */
.hero { padding:88px 0 72px; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:-30% 40% 40% -10%; pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%); }
.hero-inner { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; position:relative; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; margin:26px 0 14px; }
.hero-note { font-size:13px; color:var(--muted); margin:0; }

/* ── Strip ── */
.strip-inner { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:26px 24px; }
.strip-inner b { display:block; font-size:15px; }
.strip-inner span { font-size:13px; color:var(--muted); }

/* ── Sections ── */
.section { padding:84px 0; }
.section.alt { background:var(--surface-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.grid { display:grid; gap:18px; margin-top:38px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; }
.skel { color:var(--muted); text-align:center; }

.feature-grid { grid-template-columns:repeat(3, 1fr); }
.feat-ico { width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--brand) 14%, transparent); color:var(--brand-2); font-size:19px; margin-bottom:14px; }
.feat p { color:var(--muted); font-size:14px; margin:0; }

/* ── Steps ── */
.steps { list-style:none; counter-reset:s; margin:38px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.steps li { position:relative; padding-top:6px; }
.step-n { display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:var(--brand); color:#fff; font-weight:700; font-size:14px; margin-bottom:14px; }
.steps p { color:var(--muted); font-size:14px; margin:0; }

/* ── Pricing ── */
.pricing-grid { grid-template-columns:repeat(3,1fr); align-items:stretch; }
/* The Free plan (ADR-049): a full-width compact card above the paid row. */
.pricing-grid .price-free { grid-column:1 / -1; display:grid; grid-template-columns:minmax(150px, 1fr) minmax(0, 3fr) auto; gap:6px 28px; align-items:center; padding:18px 24px; }
.price-free h3 { margin:0; }
.price-free .price { margin:2px 0 0; }
.price-free .pf-body p { margin:0 0 4px; }
.price-free .price-limits { margin:0; padding:0; border:0; }
 /* = the Free card at desktop widths */
/* Managed IT packages (ADR-053) */
.mit-card { display:flex; flex-direction:column; gap:8px; }
.mit-card h3 { margin:0; }
.mit-price { font-size:26px; font-weight:800; } .mit-price small { font-size:13px; font-weight:500; color:var(--muted); }
.mit-desc { color:var(--muted); font-size:14px; margin:0; }
.mit-hl { margin:4px 0 8px; padding-left:18px; font-size:14px; flex:1; }
.mit-hl li { margin:3px 0; }
.mit-av { margin:0 0 10px; font-size:13px; color:var(--muted); } /* ADR-110: antivirus set up by our team */
/* ADR-116 / 119: the finder's "Best fit" mark, the owner's badge, highlight and tagline on package cards */
.mit-card { position:relative; }
.mit-fit { position:absolute; top:-11px; right:16px; font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; background:var(--ok, #16a34a); color:#fff; }
.mit-card.mit-isfit { border-color:var(--ok, #16a34a); }
 /* ADR-119 */
.price-card { display:flex; flex-direction:column; }
.price-card.featured { border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); position:relative; }
.price { font-size:38px; font-weight:800; letter-spacing:-.02em; line-height:1.1; margin:10px 0 2px; }
.price small { font-size:14px; font-weight:500; color:var(--muted); }
.price-limits { font-size:13px; color:var(--muted); margin:10px 0 16px; padding-bottom:16px;
  border-bottom:1px solid var(--border); }
.price-feats li::before { content:'✓'; color:var(--ok); font-weight:700; }


/* ── Trust ── */
.check { list-style:none; margin:24px 0 0; padding:0; }
.check li { position:relative; padding:9px 0 9px 30px; font-size:15px; color:var(--muted);
  border-bottom:1px solid var(--border); }
.check li:last-child { border-bottom:none; }
.check li::before { content:'✓'; position:absolute; left:0; top:9px; color:var(--ok); font-weight:700; }
.check b { color:var(--text); }
.trust-card { background:var(--surface); }
.trust-card p { font-size:14px; color:var(--muted); }

/* ── Posts ── */
.posts-grid { grid-template-columns:repeat(3,1fr); }
.post-card h3 { margin-bottom:6px; }
.post-meta { font-size:12px; color:var(--muted); margin-bottom:10px; }
.post-card p { font-size:14px; color:var(--muted); margin:0; }

/* ── Lead form ── */
.demo-wrap { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.lead-form .row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.lead-form label { display:block; font-size:13px; color:var(--muted); margin-bottom:14px; }
.lead-form input, .lead-form select, .lead-form textarea {
  width:100%; margin-top:6px; padding:11px 13px; background:var(--surface-2);
  border:1px solid var(--border); border-radius:10px; color:var(--text);
  font-size:14px; font-family:inherit; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
  outline:none; border-color:var(--brand); }
.lead-form input[aria-invalid="true"] { border-color:var(--bad); }
.lead-form textarea { resize:vertical; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.formnote { font-size:12px; color:var(--muted); margin:12px 0 0; text-align:center; }
.formnote.err { color:var(--bad); }
.formnote.ok { color:var(--ok); }
.form-done { text-align:center; padding:26px 0; }
.form-done .tick { font-size:34px; color:var(--ok); }

/* ── Footer ── */
.footer { border-top:1px solid var(--border); padding:52px 0 26px; background:var(--surface-2); }
.footer-inner { display:grid; grid-template-columns:1.6fr repeat(4, 1fr); gap:26px; }
.footer-inner p { font-size:13px; margin-top:12px; max-width:38ch; }
.footer nav { display:flex; flex-direction:column; gap:9px; font-size:14px; }
.footer nav a { color:var(--muted); }
.footer nav a:hover { color:var(--text); }
.footer-base { margin-top:36px; padding-top:20px; border-top:1px solid var(--border); font-size:13px; }

/* ── Responsive ── */

/* The header swaps to the touch menu at 1024px because that is what the desktop bar
   actually needs, not because it is a round number. Measured at the site's own sizes:
   the logo lockup is ~82px, the seven link labels are ~360px of text plus six 26px gaps
   (~516px), the CTA cluster is a 36px toggle and two buttons with two 10px gaps (~254px),
   there are two 24px gaps between the three groups, and .wrap adds a 24px gutter each
   side — about 950px before anything is squeezed. The page's other breakpoint, 980px,
   would leave 30px of slack, which a wider font stack (Roboto, Helvetica) eats on its
   own, so the next step up is the honest one. It also puts tablets in both orientations
   on the touch menu rather than only in portrait. */
@media (max-width: 1024px) {
  .nav-panel { display:none; }
  .nav-toggle { display:block; margin-left:auto; }
  /* The open menu is one panel with the links and the buttons in normal flow inside it,
     so the CTA row always starts where the last link ends. It used to be two separately
     positioned boxes with the row pinned at a fixed offset that assumed five links, and
     it overlapped the moment a sixth was added. */
  /* The panel hangs from a position:sticky bar, so it is pinned to the top of the
     viewport and anything past its bottom edge can never be scrolled into view — the
     page scrolls behind it, not inside it. At seven links plus the CTA row it stands
     ~398px under a 66px bar, which overruns a landscape phone (375-430px tall) and
     strands the theme toggle, Sign in and Book a demo. So bound it to what is left
     below the bar and let the panel itself scroll. The vh line is the fallback for
     browsers without dvh; overscroll-behavior stops the page scrolling once the
     panel's own scroll reaches an end. */
  .nav.open .nav-panel { display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:0; right:0; padding:8px 24px 16px;
    max-height:calc(100vh - 66px); max-height:calc(100dvh - 66px);
    overflow-y:auto; overscroll-behavior:contain;
    background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow); }
  .nav.open .nav-links { flex-direction:column; gap:0; }
  .nav.open .nav-links a { padding:11px 0; border-bottom:1px solid var(--border); }
  .nav.open .nav-cta { padding-top:12px; flex-wrap:wrap; }
}
/* The hamburger is the only way into the menu at every width up to 1024px, so it needs
   a real target wherever the menu exists. Guaranteed TWO ways, the same form app.css
   uses for the console sidebar: `pointer: coarse` catches a touch device at any width,
   and the width floor catches browsers that misreport pointer capability (headless
   Chrome does — device-metrics emulation leaves the pointer media features alone) as
   well as touchscreen laptops and tablets that report a fine pointer. Either condition
   is enough; above 1024px the panel is the inline bar and the glyph is display:none. */
@media (pointer: coarse), (max-width: 1024px) {
  .nav-toggle { min-width:44px; min-height:44px; }
  .tour-tabs button, .btn { min-height:44px; }
  /* Under 16px, iOS Safari zooms the page when a field takes focus. */
  .lead-form input, .lead-form select, .lead-form textarea { font-size:16px; }
}
@media (max-width: 980px) {
  .hero-inner, .demo-wrap { grid-template-columns:1fr; }
  .hero-visual { order:-1; }
  .feature-grid, .pricing-grid, .posts-grid, .steps { grid-template-columns:1fr 1fr; }
  .strip-inner { grid-template-columns:1fr 1fr; }
  .footer-inner { grid-template-columns:1fr 1fr; }
}
@media (max-width: 680px) {
  .hero { padding:52px 0 44px; }
  .section { padding:56px 0; }
  .feature-grid, .pricing-grid, .posts-grid, .steps, .strip-inner, .footer-inner,
  .lead-form .row { grid-template-columns:1fr; }
  .pricing-grid .price-free { grid-template-columns:1fr; }
   /* = the stacked Free card on a phone */
}

/* ── Blog index cards become links ── */
a.post-card { display:flex; flex-direction:column; transition:border-color .12s, transform .12s; }
a.post-card:hover { border-color:var(--brand); transform:translateY(-2px); }
.post-more { margin-top:auto; padding-top:14px; color:var(--brand-2); font-size:14px; font-weight:600; }

/* ── Article ── */
.article .back { display:inline-block; color:var(--muted); font-size:14px; margin-bottom:22px; }
.article .back:hover { color:var(--text); }
.article h1 { font-size:clamp(28px, 4vw, 42px); }
.article .post-meta { margin-bottom:18px; }
.article .lede { font-size:19px; margin-bottom:28px; }
.article-body { font-size:17px; line-height:1.75; }
.article-body > *:first-child { margin-top:0; }
.article-body p { margin:0 0 20px; }
.article-body h2 { font-size:26px; margin:38px 0 14px; }
.article-body h3 { font-size:20px; margin:30px 0 10px; }
.article-body ul, .article-body ol { margin:0 0 20px; padding-left:24px; }
.article-body li { margin-bottom:8px; }
.article-body a { color:var(--brand-2); text-decoration:underline; text-underline-offset:2px; }
.article-body img { border-radius:10px; margin:22px 0; height:auto; }
.article-body blockquote { margin:24px 0; padding:4px 0 4px 20px; border-left:3px solid var(--brand);
  color:var(--muted); font-style:italic; }
.article-body pre { background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
  padding:16px; overflow-x:auto; font-size:14px; line-height:1.55; }
.article-body code { background:var(--surface-2); border:1px solid var(--border); border-radius:5px;
  padding:1px 6px; font-size:.9em; }
.article-body pre code { background:none; border:none; padding:0; }
.article-body table { width:100%; border-collapse:collapse; margin:22px 0; font-size:15px; }
.article-body th, .article-body td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--border); }
.article-body th { color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.04em; }
.article-cta { margin-top:48px; text-align:center; }
.article-cta h3 { margin-bottom:6px; }
.article-cta p { margin-bottom:16px; }

/* ═══════════════ Theme toggle ═══════════════ */
.theme-toggle { background:transparent; border:1px solid var(--border); color:var(--text);
  width:36px; height:36px; border-radius:9px; font-size:15px; cursor:pointer; line-height:1; }
.theme-toggle:hover { border-color:var(--brand); }

/* ═══════════════ Product tour ═══════════════ */
.tour { margin-top:36px; }
.tour-tabs { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-bottom:18px; }
.tour-tabs button { background:var(--surface); border:1px solid var(--border); color:var(--muted);
  padding:9px 18px; border-radius:20px; font-size:14px; font-weight:600; font-family:inherit; cursor:pointer;
  transition:border-color .12s, color .12s; }
.tour-tabs button:hover { color:var(--text); }
.tour-tabs button[aria-selected="true"] { background:color-mix(in srgb, var(--brand) 14%, transparent); border-color:var(--brand); color:var(--brand-2); }
.tour-stage { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px; min-height:330px; }
.tour-pane[hidden] { display:none; }
.tour-pane { animation:tfade .22s ease; }
@keyframes tfade { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .tour-pane { animation:none; } }

/* ═══════════════ Cost estimator ═══════════════ */
.calc { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:36px; align-items:start; }
.calc-field { display:block; margin-bottom:18px; }
.calc-field > span { display:block; font-size:13px; color:var(--muted); margin-bottom:8px; }
.calc-field input[type="range"] { width:100%; accent-color:var(--brand); }
.calc-field input[type="number"] { width:100%; padding:10px 12px; background:var(--surface-2);
  border:1px solid var(--border); border-radius:9px; color:var(--text); font-size:14px; font-family:inherit; }
.calc-field output { display:block; margin-top:6px; font-size:20px; font-weight:700; }
.calc-needs { border:1px solid var(--border); border-radius:10px; padding:14px; margin:0 0 16px; }
.calc-needs legend { font-size:13px; color:var(--muted); padding:0 6px; }
.calc-needs label { display:flex; align-items:center; gap:9px; font-size:14px; padding:5px 0; cursor:pointer; }
.calc-value { border-top:1px solid var(--border); padding-top:14px; }
.calc-value summary { cursor:pointer; font-size:14px; color:var(--brand-2); }
.calc-note { font-size:12px; color:var(--muted); margin:10px 0 14px; }
.calc-loading { color:var(--muted); text-align:center; padding:30px 0; }

.calc-plan { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.calc-plan b { display:block; font-size:26px; letter-spacing:-.01em; color:var(--text); text-transform:none; margin-top:2px; }
.calc-why { font-size:13px; color:var(--muted); margin:8px 0 16px; }
.calc-price { font-size:44px; font-weight:800; letter-spacing:-.02em; line-height:1.05; }
.calc-price small { font-size:15px; font-weight:500; color:var(--muted); }
.calc-break { font-size:13px; color:var(--muted); margin-top:6px; }
.calc-line { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border); font-size:14px; }
.calc-line:last-of-type { border-bottom:none; }
.calc-value-box { margin-top:16px; padding:14px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; }
.calc-value-box .vb-sum { font-size:20px; font-weight:700; }
.calc-value-box .vb-work { font-size:12px; color:var(--muted); margin-top:6px; font-variant-numeric:tabular-nums; }
.calc-cta { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.calc-warn { margin-top:14px; font-size:13px; color:var(--warn); }

/* ═══════════════ FAQ ═══════════════ */
.faq { margin-top:34px; }
.faq-item { border:1px solid var(--border); border-radius:10px; margin-bottom:9px; background:var(--surface); }
.faq-item summary { cursor:pointer; padding:15px 18px; font-weight:600; font-size:15px; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; color:var(--muted); font-size:20px; font-weight:400; flex-shrink:0; }
.faq-item[open] summary::after { content:'\2212'; }
.faq-item[open] summary { border-bottom:1px solid var(--border); }
.faq-item p { padding:14px 18px 16px; margin:0; color:var(--muted); font-size:14.5px; }

/* ═══════════════ Blog enrichment ═══════════════ */
.read-time { color:var(--muted); }
.read-bar { position:fixed; top:0; left:0; height:3px; background:var(--brand); width:0; z-index:60; }
.related-list { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.related-list a { display:block; padding:14px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:10px; font-size:14px; font-weight:600; }
.related-list a:hover { border-color:var(--brand); }
.related-list em { display:block; font-style:normal; font-weight:400; font-size:12px; color:var(--muted); margin-top:4px; }

@media (max-width: 980px) {
  .calc { grid-template-columns:1fr; }
}
@media (max-width: 680px) {
  .related-list { grid-template-columns:1fr; }
}

/* ═══════════════ Product screenshots ═══════════════ */
/* The captures are 3120x2000 of a dark console. They sit in a frame with a fixed
   aspect ratio so the page never reflows while they decode. */
.shot { display:block; width:100%; padding:0; border:1px solid var(--border); background:#0f1420;
  border-radius:12px; overflow:hidden; cursor:zoom-in; position:relative; line-height:0;
  box-shadow:0 24px 70px rgba(0,0,0,.34); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.shot:hover { transform:translateY(-2px); border-color:var(--brand); box-shadow:0 30px 80px rgba(0,0,0,.42); }
.shot:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
.shot img { width:100%; height:auto; display:block; aspect-ratio:3120/2000; object-fit:cover; object-position:top left; }

/* A magnifier hint, so it is discoverable that these enlarge. */
.shot::after { content:'⤢'; position:absolute; right:10px; bottom:10px; z-index:2;
  width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:rgba(15,20,32,.78); border:1px solid rgba(255,255,255,.16); color:#e6eaf2;
  font-size:14px; line-height:1; opacity:0; transition:opacity .18s ease; }
.shot:hover::after, .shot:focus-visible::after { opacity:1; }

figure.tour-pane, .hero-shot { margin:0; }
.tour-pane figcaption, .hero-shot figcaption { margin-top:12px; font-size:13.5px; color:var(--muted); text-align:center; }
.hero-shot figcaption { text-align:left; font-size:12.5px; }
.tour-stage { padding:18px; }

/* ═══════════════ Lightbox ═══════════════ */
.lightbox { position:fixed; inset:0; z-index:200; background:rgba(6,9,16,.92);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px;
  animation:lbin .16s ease; }
@keyframes lbin { from { opacity:0 } to { opacity:1 } }
@media (prefers-reduced-motion:reduce) { .lightbox { animation:none; } }
.lightbox img { max-width:100%; max-height:82vh; border-radius:10px; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 90px rgba(0,0,0,.6); }
.lightbox-cap { color:#93a0b8; font-size:13px; margin:0; text-align:center; }
.lightbox-x { position:absolute; top:16px; right:18px; width:40px; height:40px; border-radius:10px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff;
  font-size:22px; line-height:1; cursor:pointer; font-family:inherit; }
.lightbox-x:hover { background:rgba(255,255,255,.16); }

/* On a phone, fitting a 3120px console screen to the viewport makes it unreadable,
   which defeats the point of opening it. Show it tall and let the visitor pan. */
@media (max-width: 680px) {
  .lightbox { padding:56px 0 16px; justify-content:flex-start; }
  .lightbox-scroll { width:100%; overflow:auto; -webkit-overflow-scrolling:touch; }
  .lightbox img { max-width:none; width:auto; height:70vh; max-height:none; border-radius:0; }
  .lightbox-cap { padding:0 16px; }
}

/* ═══════════════ Reveal on scroll ═══════════════ */
/* .rv is only ever added by JS, so with JS off nothing is hidden. */
.rv { opacity:0; transform:translateY(14px); }
.rv-in { opacity:1; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); }

/* ═══════════════ Hero, with a real screenshot ═══════════════ */
.hero-visual { min-width:0; }
.hero-shot .shot { box-shadow:0 30px 90px rgba(0,0,0,.45); }

@media (max-width: 980px) {
  .tour-stage { padding:10px; }
  .hero-shot figcaption { text-align:center; }
}

/* ═══════════════ Transparency, with proof ═══════════════ */
/* The checklist is much taller than the figure; centring the figure against it
   avoids a column of dead space on the right. */
.trust-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; margin-top:34px; }
.trust-grid .check { margin-top:0; }
.trust-shot { margin:0; }
.trust-shot .shot img { aspect-ratio:3120/1120; }
.trust-shot figcaption { margin-top:12px; font-size:13.5px; color:var(--muted); }

/* The defaults list is the claim above made checkable, so it reads as a spec sheet
   rather than as marketing: even columns, tabular alignment, no persuasion. */
.defaults-list { list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:0 28px; }
.defaults-list li { display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--border); font-size:14.5px; }
.defaults-list span { color:var(--muted); }
.defaults-list b { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 10px; border-radius:20px; white-space:nowrap; }
.defaults-list b.off { background:rgba(148,163,184,.16); color:var(--muted); }
.defaults-list b.on { background:rgba(52,211,153,.16); color:var(--ok); }
.defaults-note { font-size:13px; margin-top:18px; }

#trust .trust-card { margin-top:34px; }

@media (max-width: 980px) {
  .trust-grid { grid-template-columns:1fr; gap:32px; }
  .defaults-list { grid-template-columns:1fr 1fr; }
}
@media (max-width: 620px) {
  .defaults-list { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Premium layer (2026-09-25)
   Builds on the tokens above — no new hues in rules, so both themes and the measured
   contrast pairs carry over. Two additions: --grad-* for the accent gradient (text-safe
   in both themes: ≥4.5:1 on the page background) and --glow for brand-tinted shadows.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --grad-a: #8aa4ff; --grad-b: #7dd3fc;
  --glow: color-mix(in srgb, var(--brand) 35%, transparent);
  --ring: color-mix(in srgb, var(--brand) 55%, transparent);
  --radius-lg: 20px;
  --ease: cubic-bezier(.2,.7,.2,1);
}
:root[data-theme="light"] { --grad-a: #2f5fe0; --grad-b: #7c3aed; --glow: color-mix(in srgb, var(--brand) 22%, transparent); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --grad-a: #2f5fe0; --grad-b: #7c3aed; --glow: color-mix(in srgb, var(--brand) 22%, transparent); }
}

body { font-feature-settings: "ss01", "cv11"; text-rendering: optimizeLegibility; }
h1 { font-weight: 800; letter-spacing: -.035em; font-size: clamp(38px, 5.6vw, 66px); line-height: 1.04; }
h2 { font-weight: 800; letter-spacing: -.028em; }
h3 { letter-spacing: -.015em; }
::selection { background: color-mix(in srgb, var(--brand) 35%, transparent); }

/* Icons from the inline sprite */
.i { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: -0.2em; }

/* Gradient accent text — solid fallback first, so a browser without background-clip
   still shows brand-coloured, readable text. */
.grad { color: var(--grad-a); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .grad { background: linear-gradient(100deg, var(--grad-a), var(--grad-b));
    -webkit-background-clip: text; background-clip: text; color: transparent; }
}

/* Eyebrows become quiet pills */
.eyebrow { display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent); font-size: 11.5px; }
.eyebrow.center { display: table; margin-left: auto; margin-right: auto; }

/* ── Page atmosphere: soft aurora at the top, fading into the page ── */
body { background:
  radial-gradient(1200px 600px at 12% -8%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 60%),
  radial-gradient(900px 520px at 92% 2%, color-mix(in srgb, var(--grad-b) 10%, transparent), transparent 60%),
  var(--bg);
  background-repeat: no-repeat; }

/* ── Buttons ── */
.btn { border-radius: 11px; transition: transform .16s var(--ease), background .16s ease, box-shadow .2s ease, border-color .16s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 18px -6px var(--glow); }
/* Hover used to lighten the fill to --brand-2 (#8aa4ff) behind white text — about 2.3:1.
   Darkening keeps the label readable (and above the resting 4.55:1). */
.btn:hover { background: color-mix(in srgb, var(--brand) 84%, #000); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 28px -8px var(--glow); }
.btn.ghost { box-shadow: none; background: color-mix(in srgb, var(--surface) 60%, transparent); }
.btn.ghost:hover { background: var(--surface); border-color: var(--ring); box-shadow: none; }
.btn:focus-visible, .theme-toggle:focus-visible, .nav-toggle:focus-visible, .tour-tabs button:focus-visible,
.hero-badge:focus-visible, .faq-item summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ── Header: transparent over the hero, glass once the page scrolls ── */
.nav { background: transparent; border-bottom-color: transparent; backdrop-filter: none;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.nav.scrolled, .nav.open { background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--border); box-shadow: 0 8px 30px -18px rgba(0,0,0,.5); }
.logo-mark { width: 26px; height: 26px; border-radius: 8px; position: relative; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--grad-b) 70%, var(--brand)));
  box-shadow: 0 6px 16px -6px var(--glow), inset 0 1px 0 rgba(255,255,255,.3); }
.logo-mark::after { content: ''; position: absolute; inset: 8px; border-radius: 50%;
  border: 2px solid #fff; border-right-color: transparent; transform: rotate(-45deg); }
.nav-links a { position: relative; transition: color .15s ease; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: var(--brand); transform: scaleX(0); transition: transform .2s var(--ease); }
.nav-links a:hover::after { transform: scaleX(1); }
.theme-toggle { display: inline-grid; place-items: center; border-radius: 10px; }
.theme-toggle .i { width: 17px; height: 17px; }
.nav-toggle { line-height: 0; padding: 10px; border-radius: 10px; }
.nav-toggle .i { width: 22px; height: 22px; }

/* ── Hero ── */
.hero { padding: 96px 0 84px; }
.hero::before { inset: -40% 30% 30% -20%; opacity: .9; }
/* A faint engineering grid behind the copy, masked so it fades out at the edges. */
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000 20%, transparent 75%); }
.hero-inner { z-index: 1; }
.hero-badge { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  padding: 5px 14px 5px 5px; border-radius: 999px; font-size: 13px; color: var(--muted);
  background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border);
  transition: border-color .15s ease, color .15s ease; }
.hero-badge:hover { border-color: var(--ring); color: var(--text); }
.hero-badge .i { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.hero-badge:hover .i { transform: translateX(3px); }
.hb-new { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: var(--brand); color: #fff; }
.lede { font-size: 18.5px; line-height: 1.65; }
.hero-note { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.hero-note li { display: inline-flex; align-items: center; gap: 6px; }
.hero-note .i { color: var(--ok); width: 15px; height: 15px; }

/* Browser frame around product captures */
.browser { position: relative; border-radius: 14px; padding: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 40px 100px -30px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb, var(--brand) 8%, transparent); }
.browser-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  border-bottom: 1px solid var(--border); background: var(--surface-2); line-height: 1; }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 45%, transparent); }
.browser-bar span { margin-left: 10px; font-size: 11.5px; color: var(--muted); letter-spacing: .01em; }
.browser .shot { border: 0; border-radius: 0; box-shadow: none; }
.browser .shot:hover { transform: none; }
.hero-shot { position: relative; }
@media (min-width: 981px) {
  .hero-visual { perspective: 1600px; }
  .hero-shot .browser { transform: rotateY(-7deg) rotateX(3deg); transform-origin: 30% 50%;
    transition: transform .6s var(--ease); }
  .hero-visual:hover .hero-shot .browser { transform: none; }
}
.hero-shot::before { content: ''; position: absolute; inset: 8% 6% -4% 6%; z-index: -1; filter: blur(50px);
  background: radial-gradient(closest-side, var(--glow), transparent); }
.float-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; z-index: 3;
  padding: 9px 14px; border-radius: 12px; font-size: 12.5px; font-weight: 600; color: var(--text);
  background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 14px 34px -14px rgba(0,0,0,.5);
  animation: floaty 6s ease-in-out infinite; }
.float-chip .i { color: var(--ok); }
.fc-1 { left: -26px; bottom: 58px; }
.fc-2 { right: -18px; top: -16px; animation-delay: -3s; }
.fc-2 .i { color: var(--grad-a); }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ── Principles strip ── */
.strip-inner { gap: 14px; padding: 8px 24px 12px; }
.strip-inner > div { position: relative; padding: 18px 18px 18px 58px; border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); }
.strip-inner .i { position: absolute; left: 18px; top: 19px; width: 26px; height: 26px; padding: 5px; border-radius: 8px;
  color: var(--grad-a); background: color-mix(in srgb, var(--brand) 12%, transparent); box-sizing: border-box; }

/* ── Sections ── */
.section { padding: 104px 0; position: relative; }
.section.alt { background: color-mix(in srgb, var(--surface-2) 65%, transparent); }
.sub { font-size: 17px; }
.card { border-radius: var(--radius-lg); transition: border-color .2s ease, transform .2s var(--ease), box-shadow .2s ease; }

/* Cursor spotlight on interactive cards — site.js sets --mx/--my; decorative only. */
.spot { position: relative; isolation: isolate; }
.spot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--brand) 12%, transparent), transparent 45%);
  transition: opacity .25s ease; pointer-events: none; }
.spot:hover::before { opacity: 1; }
.spot:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); transform: translateY(-3px);
  box-shadow: 0 24px 50px -28px var(--glow); }

/* ── Features: bento ── */
.bento { grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bento .feat { grid-column: span 2; display: flex; flex-direction: column; }
.bento .feat-wide { grid-column: span 4; }
.bento .feat:last-child { grid-column: span 6; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: start; }
.bento .feat:last-child .feat-ico { grid-row: span 2; margin: 0; }
.feat-ico { width: 46px; height: 46px; border-radius: 13px; color: var(--grad-a);
  background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 22%, transparent), color-mix(in srgb, var(--grad-b) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent); }
.feat-ico .i { width: 22px; height: 22px; }
.feat h3 { font-size: 19px; }
.feat p { font-size: 14.5px; line-height: 1.65; }
.feat-viz { display: flex; align-items: flex-end; gap: 6px; height: 88px; margin-top: auto; padding-top: 22px; }
.feat-viz span { flex: 1; height: var(--h); border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--grad-a), color-mix(in srgb, var(--brand) 25%, transparent)); opacity: .85;
  transform-origin: bottom; }
.rv-in .feat-viz span { animation: grow .9s var(--ease) both; }
@keyframes grow { from { transform: scaleY(.15); opacity: 0; } to { transform: none; opacity: .85; } }

/* ── Organisation section ── */
.org-inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.org-copy .btn { margin-top: 10px; }
.org-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.org-list li { display: flex; gap: 16px; padding: 18px 20px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border); }
.org-list b { display: block; font-size: 15.5px; margin-bottom: 3px; }
.org-list p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.6; }
.org-ico { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  color: var(--grad-a); background: color-mix(in srgb, var(--brand) 12%, transparent); }

/* ── How it works: connected timeline ── */
.steps { position: relative; }
.steps::before { content: ''; position: absolute; top: 24px; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 50%, transparent), transparent); }
.steps li { text-align: center; padding: 0 10px; }
.step-n { width: 48px; height: 48px; margin: 0 auto 18px; font-size: 16px; position: relative;
  background: linear-gradient(145deg, var(--brand), color-mix(in srgb, var(--brand) 70%, #000));
  box-shadow: 0 0 0 6px var(--bg), 0 10px 26px -8px var(--glow); }
.section.alt .step-n { box-shadow: 0 0 0 6px color-mix(in srgb, var(--surface-2) 100%, var(--bg)), 0 10px 26px -8px var(--glow); }

/* ── Tour ── */
.tour-tabs { display: inline-flex; margin: 0 auto 22px; padding: 5px; gap: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--border); }
.tour { text-align: center; }
.tour-stage { text-align: left; padding: 0; overflow: hidden; border-radius: 16px;
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.55); }
.tour-stage .tour-pane { padding: 18px; }
.tour-stage .shot { box-shadow: none; }
.tour-tabs button { border: 1px solid transparent; background: transparent; }
.tour-tabs button[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 6px 16px -6px var(--glow); }

/* ── Estimator & pricing ── */
.calc-result { position: relative; overflow: hidden; }
.calc-result::after { content: ''; position: absolute; right: -80px; top: -80px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none; }
.calc-price, .price { font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.price-card { padding: 28px; }
.price-card.featured { border: 1px solid transparent; box-shadow: 0 30px 70px -36px var(--glow);
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(150deg, var(--grad-a), color-mix(in srgb, var(--brand) 30%, var(--border)), var(--grad-b)) border-box; }
@media (min-width: 981px) { .price-card.featured { transform: translateY(-10px); } }
.price-feats li::before, .check li::before { content: ''; width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; border-radius: 50%;
  background: color-mix(in srgb, var(--ok) 16%, transparent) center / 12px no-repeat;
}
.price-feats li::before, .check li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E"); }
:root[data-theme="light"] .price-feats li::before, :root[data-theme="light"] .check li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .price-feats li::before, :root:not([data-theme="dark"]) .check li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E"); }
}
.check li::before { top: 11px; }

/* ── Transparency ── */
#trust .trust-card { border-left: 3px solid var(--bad); background: linear-gradient(90deg, color-mix(in srgb, var(--bad) 7%, var(--surface)), var(--surface) 40%); }

/* ── FAQ ── */
.faq-item { border-radius: 14px; transition: border-color .2s ease, background .2s ease; }
.faq-item[open] { border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
.faq-item summary { padding: 18px 20px; }
.faq-item summary::after { content: '+'; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); font-size: 17px; transition: transform .25s var(--ease), background .2s ease; }
.faq-item[open] summary::after { content: '+'; transform: rotate(45deg); background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--text); }
.faq-item[open] summary { border-bottom-color: transparent; }
.faq-item p { padding: 0 20px 20px; }

/* ── Demo form ── */
.lead-form { padding: 30px; box-shadow: 0 30px 80px -40px var(--glow); }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }

/* ── Closing CTA band ── */
.cta-band { padding: 24px 0 104px; }
.cta-card { position: relative; overflow: hidden; text-align: center; padding: 64px 32px; border-radius: 28px;
  background: radial-gradient(600px 300px at 20% 0%, color-mix(in srgb, var(--brand) 28%, transparent), transparent 70%),
    radial-gradient(500px 300px at 90% 100%, color-mix(in srgb, var(--grad-b) 16%, transparent), transparent 70%), var(--surface);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border)); }
.cta-card h2 { max-width: 20ch; margin: 0 auto 12px; font-size: clamp(28px, 3.6vw, 42px); }
.cta-card p { color: var(--muted); font-size: 17px; margin-bottom: 8px; }
.cta-card .hero-cta { justify-content: center; }

/* ── Footer ── */
.footer { background: transparent; border-top: 1px solid var(--border); }
.footer h4 { color: var(--text); letter-spacing: .06em; }

/* ── Reveal: gentler, staggered (site.js sets --d) ── */
.rv { transform: translateY(18px); }
.rv-in { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }

/* ── Responsive ── */
@media (max-width: 980px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento .feat, .bento .feat-wide { grid-column: span 1; }
  .bento .feat-wide, .bento .feat:last-child { grid-column: span 2; }
  .org-inner { grid-template-columns: 1fr; gap: 36px; }
  .steps::before { display: none; }
  .fc-1 { left: 8px; bottom: 44px; } .fc-2 { right: 8px; top: 44px; }
  .hero-note { justify-content: flex-start; }
}
@media (max-width: 680px) {
  .bento { grid-template-columns: 1fr; }
  .bento .feat, .bento .feat-wide, .bento .feat:last-child { grid-column: span 1; }
  .bento .feat:last-child { display: flex; }
  .section { padding: 72px 0; }
  .hero { padding: 56px 0 48px; }
  .float-chip { display: none; }
  .tour-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; justify-content: flex-start;
    border-radius: 14px; scrollbar-width: none; }
  .tour-tabs::-webkit-scrollbar { display: none; }
  .tour-tabs button { white-space: nowrap; }
  .cta-card { padding: 44px 20px; border-radius: 22px; }
  .strip-inner > div { padding-left: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .float-chip, .feat-viz span { animation: none !important; }
  .hero-shot .browser, .spot:hover, .btn:hover { transform: none !important; }
}

/* ROI calculator on touch: must follow the base .calc-field rules above to win. The number fields
   get 16px text (no zoom-on-focus) and 44px height; the sliders get a 44px-tall hit band. */
@media (pointer: coarse), (max-width: 1024px) {
  .calc-field input[type="number"] { font-size:16px; min-height:44px; }
  .calc-field input[type="range"] { height:44px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PREMIUM REDESIGN LAYER (2026-10) — appended so it wins by cascade order and
   touches none of the rules above. Token-driven, so it reskins home + blog +
   article together. Adds: the system display stack (--display; NO web font, by
   the privacy stance), the real robot brand mark, a full-screen native mobile
   nav, and richer depth. All existing JS hooks intact.
   ════════════════════════════════════════════════════════════════════════════ */

/* Display typeface on the things that set the tone. Body stays the fast system stack. */
h1, h2, h3, .logo, .hero-badge, .price, .calc-price, .step-n, .cta-card h2 {
  font-family: var(--display);
}
h1 { letter-spacing: -.03em; font-weight: 800; }
h2 { font-weight: 700; }
.logo { font-weight: 800; }

/* The real RobotAi brand mark instead of the generic square+dot. */
.logo-mark {
  width: 26px; height: 26px; border-radius: 8px; background: url('/favicon.svg') center/contain no-repeat;
  box-shadow: 0 3px 10px -2px color-mix(in srgb, var(--brand) 60%, transparent);
}
.logo-mark::after { content: none; }

/* Buttons: a touch more presence + a brand-tinted lift on the primary CTA. */
.btn { border-radius: 12px; font-weight: 700; letter-spacing: -.01em; transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.btn:not(.ghost) { box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--brand) 70%, transparent); }
.btn:not(.ghost):hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--brand) 75%, transparent); }
.btn.lg { border-radius: 14px; }

/* Cards: softer, deeper, with a quiet hover lift (desktop/fine-pointer only). */
.card { border-radius: var(--radius); }
@media (hover: hover) and (pointer: fine) {
  .feat, .price-card, .post-card { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
  .feat:hover, .price-card:hover, .post-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); box-shadow: var(--shadow); }
}

/* Hero: a richer, layered aura for a premium first impression. */
.hero::before { inset: -35% 30% 30% -15%; background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%); }
.hero::after { content: ''; position: absolute; inset: 20% -20% -40% 45%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ok) 14%, transparent), transparent 70%); }
.hero-badge { border-radius: 999px; }

/* Sticky header: deeper glass once scrolled. */
.nav { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(140%); }
.nav.scrolled { box-shadow: 0 10px 30px -18px rgba(0,0,0,.6); }

/* ── Native, full-screen mobile navigation ── */
@media (max-width: 1024px) {
  body.nav-lock { overflow: hidden; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 12px; }
  .nav.open .nav-panel {
    position: fixed; inset: 0; top: 0; left: 0; right: 0; bottom: 0;
    max-height: 100dvh; height: 100dvh; padding: 84px 22px calc(28px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    background: color-mix(in srgb, var(--bg) 97%, transparent); backdrop-filter: blur(20px);
    border: 0; box-shadow: none; overflow-y: auto; overscroll-behavior: contain;
    animation: navsheet .22s ease both;
  }
  @keyframes navsheet { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  .nav.open .nav-links { flex-direction: column; gap: 0; font-size: 17px; }
  .nav.open .nav-links a { padding: 16px 4px; border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text); }
  .nav.open .nav-cta { padding-top: 20px; gap: 12px; flex-direction: column; align-items: stretch; }
  .nav.open .nav-cta .btn { width: 100%; justify-content: center; min-height: 48px; }
  .nav.open .nav-cta .theme-toggle { align-self: flex-end; }
  /* The close affordance: the hamburger sits above the sheet and becomes an ✕ feel. */
  .nav.open .nav-toggle { position: fixed; top: 14px; right: 22px; z-index: 60; background: var(--surface); }
}
@media (prefers-reduced-motion: reduce) { .nav.open .nav-panel { animation: none; } }

/* Section rhythm: a bit more air on large screens, consistent gutters on small. */
@media (min-width: 981px) { .section { padding: 96px 0; } }
@media (max-width: 420px) { .wrap { padding: 0 16px; } }

/* ════════════════════════════════════════════════════════════════════════════
   PREMIUM REDESIGN LAYER v3 (2026-10-08) — a bolder pass on top of v2, plus the
   Vantage → RobotAiTechnology rebrand on the site wordmark. Appended so it wins
   by cascade order and touches none of the rules above; token-driven, so home +
   blog + article all inherit it. Every motion rule is gated on
   prefers-reduced-motion:no-preference, and no new hue is introduced in any rule,
   so the measured contrast pairs from v1/v2 carry over unchanged.

   Constraints honoured (see the design-system + public-site memories):
   • NO web font — --display stays the system stack (privacy stance).
   • .feat / .price-card already carry .spot, which owns ::before — card accents
     here use layered backgrounds, never a pseudo-element.
   • The bento last .feat is display:grid — no ::after on cards (it becomes a cell).
   • Primary-button hover still DARKENS the fill; the sheen below fades out before
     the vertically-centred white label, so white-on-brand keeps ≥4.55:1.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Brand wordmark: mirrors the console lockup (Robot + accent Ai + Technology) ── */
.logo { font-size: 16px; gap: 9px; }
.logo-wm { font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.logo .ai { color: var(--brand); }                 /* same accent token the console uses */
.logo-mark { box-shadow: 0 4px 14px -3px color-mix(in srgb, var(--brand) 60%, transparent); }

/* The wordmark is longer than "Vantage" was, so reclaim a little spacing on the
   inline desktop bar (≥1025px). Below that the panel is the full-screen sheet and
   these gaps are overridden there, so the mobile menu is unaffected. */
@media (min-width: 1025px) {
  .nav-inner { gap: 18px; }
  .nav-panel { gap: 18px; }
  .nav-links { gap: 20px; }
}

/* ── Hero: a slow-drifting aurora + an animated accent word for a premium first beat ── */
.hero h1 { font-size: clamp(40px, 5.8vw, 72px); letter-spacing: -.035em; }
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: auroraDrift 20s var(--ease) infinite alternate; }
  @keyframes auroraDrift {
    from { transform: translate3d(-3%, -2%, 0) scale(1); }
    to   { transform: translate3d(4%, 3%, 0) scale(1.08); }
  }
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .grad { background-size: 220% 100%; }
  @media (prefers-reduced-motion: no-preference) {
    .grad { animation: gradShift 9s ease-in-out infinite; }
    @keyframes gradShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
  }
}

/* ── Centred section headings get a short gradient rule, so each section opens deliberately ── */
.section > .wrap > h2.center { position: relative; }
.section > .wrap > h2.center::after {
  content: ''; display: block; width: 56px; height: 3px; margin: 18px auto 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
}

/* ── Cards: a whisper of brand light from the top edge (no pseudo — .spot owns ::before) ── */
.feat, .price-card, .post-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 5%, transparent), transparent 128px),
    var(--surface);
}
/* Keep the featured plan's gradient border (v2) winning over the wash above. */
.price-card.featured {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 7%, transparent), transparent 128px),
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(150deg, var(--grad-a), color-mix(in srgb, var(--brand) 30%, var(--border)), var(--grad-b)) border-box;
}

/* ── Primary buttons: a soft top sheen that fades before the label ── */
.btn:not(.ghost) { background-image: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 44%); }
.btn:not(.ghost):hover { background-image: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 44%),
  linear-gradient(color-mix(in srgb, var(--brand) 84%, #000), color-mix(in srgb, var(--brand) 84%, #000)); }

/* ── Principle strip: a touch more presence ── */
.strip-inner > div { background: color-mix(in srgb, var(--surface) 80%, transparent); }

/* ── Closing CTA: a slow conic sheen behind the content ── */
.cta-card::after {
  content: ''; position: absolute; inset: -40%; z-index: 0; pointer-events: none; opacity: .5;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    color-mix(in srgb, var(--brand) 16%, transparent) 70deg,
    transparent 150deg, transparent 360deg);
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent 72%);
  mask-image: radial-gradient(closest-side, #000, transparent 72%);
}
.cta-card > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .cta-card::after { animation: ctaSpin 24s linear infinite; }
  @keyframes ctaSpin { to { transform: rotate(1turn); } }
}

/* ── Footer: a brand hairline at the very top ── */
.footer { position: relative; }
.footer::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 40%, transparent), transparent); }

/* ── Mobile sheet: the rebranded wordmark reads as the primary beat at the top ── */
@media (max-width: 1024px) {
  .nav.open .logo { font-size: 17px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THEME SELECTION (shared with the console) — styles (data-skin) × palettes
   (data-accent). Same ids and localStorage keys (vantage_skin / vantage_accent) as
   the console, same origin, so a choice made there is honoured here (and vice-versa).
   The site uses --lt-* light vars, so a skin can set a dark value AND its --lt-*
   partner in ONE block and both modes resolve correctly. Palettes touch brand/accent
   only (the decorative --grad-* headline gradient is left at its tuned, contrast-safe
   defaults). index.html applies the attributes before paint; the Appearance popover in
   site.js lets a visitor change them.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Palettes (brand fill + accent text; --lt-brand-text drives light mode) ── */
:root[data-accent="azure"]    { --brand:#2563eb; --brand-text:#7aa2ff; --brand-2:#7aa2ff; --lt-brand-text:#1d4ed8; }
:root[data-accent="amethyst"] { --brand:#7c3aed; --brand-text:#c4b5fd; --brand-2:#c4b5fd; --lt-brand-text:#6d28d9; }
:root[data-accent="emerald"]  { --brand:#047857; --brand-text:#34d399; --brand-2:#34d399; --lt-brand-text:#047857; }
:root[data-accent="forest"]   { --brand:#166534; --brand-text:#4ade80; --brand-2:#4ade80; --lt-brand-text:#166534; }
:root[data-accent="sky"]      { --brand:#0369a1; --brand-text:#38bdf8; --brand-2:#38bdf8; --lt-brand-text:#0369a1; }
:root[data-accent="aurora"]   { --brand:#4f46e5; --brand-text:#a5b4fc; --brand-2:#a5b4fc; --lt-brand-text:#4338ca; }
:root[data-accent="rose"]     { --brand:#be123c; --brand-text:#fb7185; --brand-2:#fb7185; --lt-brand-text:#be123c; }
:root[data-accent="crimson"]  { --brand:#b91c1c; --brand-text:#f87171; --brand-2:#f87171; --lt-brand-text:#b91c1c; }
:root[data-accent="amber"]    { --brand:#9a3412; --brand-text:#fbbf24; --brand-2:#fbbf24; --lt-brand-text:#9a3412; }
:root[data-accent="teal"]     { --brand:#0f766e; --brand-text:#2dd4bf; --brand-2:#2dd4bf; --lt-brand-text:#0f766e; }
:root[data-accent="graphite"] { --brand:#334155; --brand-text:#cbd5e1; --brand-2:#cbd5e1; --lt-brand-text:#334155; }
:root[data-accent="royal"]    { --brand:#3557f0; --brand-text:#8fa2ff; --brand-2:#8fa2ff; --lt-brand-text:#2f4fe0; } /* Royal Aurora (ADR-130) */
/* Light mode: each palette's --lt-brand-text must win. The palette rules above set the DARK link colour at the same specificity
   as the light mapping (and later), so in light mode every non-default palette showed its pale dark-mode link on white
   (e.g. Aurora #a5b4fc, about 1.9:1). One rule a step more specific fixes all of them (found building ADR-130). */
:root[data-theme="light"][data-accent] { --brand-text: var(--lt-brand-text); --brand-2: var(--lt-brand-text); }
@media (prefers-color-scheme: light) { :root[data-accent]:not([data-theme="dark"]) { --brand-text: var(--lt-brand-text); --brand-2: var(--lt-brand-text); } }

/* ── Styles ── */
/* Modern Professional — airier: bigger radius, quieter borders */
:root[data-skin="modern"]    { --radius:20px; --border:#232c3f; --lt-border:#eef1f7; }
/* Corporate Enterprise — tighter radius, crisper borders */
:root[data-skin="corporate"] { --radius:10px; --border:#33405a; --lt-border:#cfd8e6; }
/* Dark Premium — deep dark, applied ONLY in a dark context (forced dark, or system + OS-dark) so
   a light context never mixes dark surfaces with light-mode ink. Inert in light mode by design. */
:root[data-skin="midnight"][data-theme="dark"] {
  color-scheme: dark;
  --bg:#070b14; --surface:#0f1626; --surface-2:#17213a; --border:#1f2b45;
  --shadow:0 24px 64px -16px rgba(0,0,0,.65);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="midnight"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#070b14; --surface:#0f1626; --surface-2:#17213a; --border:#1f2b45;
    --shadow:0 24px 64px -16px rgba(0,0,0,.65);
  }
}
/* Glassmorphism Premium — translucent surfaces + blur, with an opaque fallback. */
:root[data-skin="glass"] {
  --glass-blur:14px;
  --surface: color-mix(in srgb, #141b2b 84%, transparent);   --lt-surface: color-mix(in srgb, #ffffff 80%, transparent);
  --surface-2: color-mix(in srgb, #1c2436 84%, transparent);  --lt-surface-2: color-mix(in srgb, #f4f7fd 82%, transparent);
  --border: color-mix(in srgb, #ffffff 14%, transparent);     --lt-border: color-mix(in srgb, #0f172a 12%, transparent);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-skin="glass"] .card,
  :root[data-skin="glass"] .nav,
  :root[data-skin="glass"] .tour-stage,
  :root[data-skin="glass"] .browser,
  :root[data-skin="glass"] .faq-item {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(135%);
    backdrop-filter: blur(var(--glass-blur)) saturate(135%);
  }
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-skin="glass"] { --surface:#141b2b; --surface-2:#1c2436; --border:#29324a;
    --lt-surface:#ffffff; --lt-surface-2:#f4f7fd; --lt-border:#e6ebf5; }
}
/* Warm Minimal — paper-like warm neutrals (dark + its --lt-* light partner). */
:root[data-skin="warm"] {
  --radius:18px;
  --bg:#17130f; --surface:#211b15; --surface-2:#2b231b; --border:#3a2f24; --text:#f0e9df; --muted:#b7a894;
  --lt-bg:#f6f1e9; --lt-surface:#fcf9f4; --lt-surface-2:#f3ece2; --lt-border:#e7ddce; --lt-text:#1a1510; --lt-muted:#6b5d4a;
  --shadow:0 20px 48px -18px rgba(23,15,6,.4); --lt-shadow:0 20px 48px -18px rgba(80,60,30,.14);
}
/* High Contrast — pure grounds, bold borders, strong ink (accessibility). */
:root[data-skin="contrast"] {
  --bg:#000000; --surface:#0a0a0a; --surface-2:#141414; --border:#9aa4b2; --text:#ffffff; --muted:#e5e5e5;
  --lt-bg:#ffffff; --lt-surface:#ffffff; --lt-surface-2:#ffffff; --lt-border:#767676; --lt-text:#000000; --lt-muted:#1f2937;
  --shadow:0 0 0 1px var(--border); --lt-shadow:0 0 0 1px var(--lt-border);
}

/* Aurora White Premium (ADR-130) — light-only by construction: only the --lt-* partners change, which the light rules map in.
   In light, the gradient tokens take the royal → purple sweep and the page atmosphere gains the orange glow. */
:root[data-skin="aurora-white"] {
  --lt-bg:#f6f7ff; --lt-surface:#ffffff; --lt-surface-2:#f3f4fd; --lt-border:#e4e7f5; --lt-text:#10132a; --lt-muted:#555d78;
  --lt-shadow:0 24px 56px -22px rgba(40,50,140,.22);
}
:root[data-skin="aurora-white"][data-theme="light"] { --radius:18px; --grad-a:#3557f0; --grad-b:#9333ea; --glow: rgba(109,61,245,.30); }
@media (prefers-color-scheme: light) { :root[data-skin="aurora-white"]:not([data-theme="dark"]) { --radius:18px; --grad-a:#3557f0; --grad-b:#9333ea; --glow: rgba(109,61,245,.30); } }
:root[data-skin="aurora-white"][data-theme="light"] body { background:
  radial-gradient(1200px 600px at 12% -8%, rgba(53,87,240,.13), transparent 60%),
  radial-gradient(900px 520px at 92% 2%, rgba(147,51,234,.10), transparent 60%),
  radial-gradient(700px 420px at 60% -6%, rgba(249,115,22,.07), transparent 60%), var(--bg); background-repeat: no-repeat; }
@media (prefers-color-scheme: light) { :root[data-skin="aurora-white"]:not([data-theme="dark"]) body { background:
  radial-gradient(1200px 600px at 12% -8%, rgba(53,87,240,.13), transparent 60%),
  radial-gradient(900px 520px at 92% 2%, rgba(147,51,234,.10), transparent 60%),
  radial-gradient(700px 420px at 60% -6%, rgba(249,115,22,.07), transparent 60%), var(--bg); background-repeat: no-repeat; } }

/* ── Appearance popover (site.js) — a visitor's mode / style / palette chooser ── */
.appx { position: relative; display: inline-flex; }
.appx-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; width: 288px; max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 16px; text-align: left; }
.appx-panel[hidden] { display: none; }
.appx-panel h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 8px; font-weight: 700; }
.appx-grp { margin-bottom: 14px; }
.appx-grp:last-child { margin-bottom: 0; }
.appx-row { display: flex; gap: 6px; flex-wrap: wrap; }
.appx-chip { flex: 1 1 auto; min-height: 40px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.appx-chip[aria-pressed="true"] { border-color: var(--brand); color: var(--text); }
.appx-sw { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.appx-sw button { height: 36px; border-radius: 9px; border: 2px solid var(--border); cursor: pointer; padding: 0; }
.appx-sw button[aria-pressed="true"] { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); }
@media (max-width: 560px) {
  .appx-panel { position: fixed; right: 16px; left: 16px; bottom: 16px; top: auto; width: auto; }
}
@media (pointer: coarse) { .appx-chip { min-height: 44px; } .appx-sw button { height: 44px; } }

/* ── AMC & Field Service section ── */
.amc-auto { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; }
.amc-auto li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--muted); }
.amc-auto li b { color: var(--text); font-weight: 650; }
.amc-auto .i { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--grad-a); }
@media (min-width: 720px) { .amc-auto { grid-template-columns: 1fr 1fr; gap: 11px 26px; } }
.amc-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }

/* ── Premium typography polish (2026-10-08) — strictly ADDITIVE: modern layout-grade type features that
   refine credibility without overriding the existing sizes/whitespace/theme tokens. System fonts only;
   NO web font (privacy stance). Unknown props degrade silently on older browsers. ── */
/* Balanced heading line-breaks — the hallmark of high-end typesetting (no lone last word). */
h1, h2, h3, .hero h1, .cta-card h2, .cta-band h2, .price-card h3, .eyebrow { text-wrap: balance; }
/* Paragraphs avoid orphans/rivers for an even, editorial rag. */
p, .lede, .sub, .feat p, .org-list p, .steps p, .faq-a, .article p { text-wrap: pretty; }
/* Figures line up in a column (prices, estimator, step numbers) — a quiet precision cue. */
.price, .calc-price, .step-n, .est-total, .price-amt { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "ss01" 1; }
/* Anchor jumps (#features, #amc, #pricing…) clear the sticky header instead of hiding under it. */
section[id], [id].section, .hero[id] { scroll-margin-top: 92px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* A subtle editorial detail where the browser supports it (ignored elsewhere). */
body { hanging-punctuation: first last; }
/* Crisper optical rhythm: the lede sits a touch closer to its heading, sections breathe consistently. */
.hero-copy .lede { text-wrap: pretty; }

/* ════════════════════════════════════════════════════════════════════════════
   REDESIGN LAYER v4 (2026-10-08) — conversion-focused, appended so it wins by
   cascade and touches nothing above. Adds: the honest numbers band, the mobile
   conversion dock, nav scrollspy, a rotating hero accent word, and a two-column
   FAQ on wide screens. Every motion rule is reduced-motion-gated; every figure
   in the band is a product fact; no new hue is introduced.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Honest numbers band ── */
.stats-band { padding: 10px 0 26px; }
.stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat { text-align: center; padding: 22px 14px 20px; border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid var(--border); position: relative; overflow: hidden; }
.stat::after { content: ''; position: absolute; inset: auto 20% -1px 20%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 55%, transparent), transparent); }
.stat b { display: block; font-family: var(--display); font-size: clamp(30px, 3.4vw, 42px); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, var(--text), var(--brand-2)); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--text); }
.stat span { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
@media (max-width: 860px) { .stats-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .stat b { font-size: 30px; } .stat { padding: 16px 10px 15px; } }

/* ── Rotating hero accent word (site.js swaps the text; static without JS/with reduced motion) ── */
.rotor { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .rotor { transition: opacity .28s ease, transform .28s ease, filter .28s ease; }
  .rotor.swap { opacity: 0; transform: translateY(10px); filter: blur(4px); }
}

/* ── Nav scrollspy: the section on screen keeps its link underlined ── */
.nav-links a.active { color: var(--text); }
.nav-links a.active::after { transform: scaleX(1); }

/* ── FAQ: two balanced columns where there is room ── */
@media (min-width: 981px) {
  .faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .faq-item { margin-bottom: 0; }
}

/* ── Mobile conversion dock (≤860px): the next step is always one thumb away ── */
.cta-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-top: 1px solid var(--border); box-shadow: 0 -12px 34px -18px rgba(0,0,0,.5);
  visibility: hidden; transform: translateY(110%); }
.cta-dock .btn { flex: 1; justify-content: center; min-height: 46px; }
@media (max-width: 860px) {
  .cta-dock { display: flex; transition: transform .28s var(--ease), visibility .28s; }
  .cta-dock.show { visibility: visible; transform: none; }
  /* The page can always scroll past it to the footer's last line. */
  body.has-dock .footer { padding-bottom: 86px; }
}
@media (prefers-reduced-motion: reduce) { .cta-dock { transition: none; } }

/* ── v5: "Ask a question" — a quiet floating helper, bottom-right (above the dock on phones) ── */
.ask { position: fixed; right: 18px; bottom: 18px; z-index: 56; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.ask-fab { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px 11px 13px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 700; color: #fff; border: 1px solid transparent;
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--grad-b) 70%, var(--brand)));
  box-shadow: 0 14px 34px -12px var(--glow), inset 0 1px 0 rgba(255,255,255,.2); transition: transform .14s ease, box-shadow .14s ease; }
.ask-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -14px var(--glow), inset 0 1px 0 rgba(255,255,255,.2); }
.ask-fab .i { width: 16px; height: 16px; }
.ask-fab[aria-expanded="true"] span { display: none; }
.ask-panel { width: min(380px, calc(100vw - 36px)); max-height: min(560px, calc(100vh - 110px)); display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb, var(--brand) 10%, transparent); }
.ask-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 14px 14px 12px 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 9%, transparent), transparent); border-bottom: 1px solid var(--border); font-size: 14px; }
.ask-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.ask-x { border: 0; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.ask-x:hover { color: var(--text); background: var(--surface-2); }
.ask-log { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.ask-msg { max-width: 88%; min-width: 0; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ask-msg.me { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.ask-msg.bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.ask-msg.bot a { color: var(--brand-2); font-weight: 600; }
.ask-msg .src { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.ask-chip { font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 999px; cursor: pointer; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); }
.ask-chip:hover { border-color: var(--brand); }
.ask-form { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); }
.ask-form input, .ask-lead input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; font: inherit; font-size: 14px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.ask-form input:focus, .ask-lead input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.ask-lead { padding: 10px 14px 14px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--brand) 5%, transparent); }
.ask-lead-t { font-size: 13px; margin-bottom: 8px; }
.ask-lead .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.ask-note { font-size: 12px; color: var(--muted); margin-top: 8px; min-height: 14px; }
.ask-note.err { color: var(--bad); }
@media (max-width: 860px) {
  .ask { right: 12px; bottom: 12px; }
  body.has-dock .ask { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .ask-panel { width: calc(100vw - 24px); max-height: min(70vh, calc(100vh - 150px)); }
  .ask-lead .row { grid-template-columns: 1fr; }
  .ask-fab span { display: none; }  /* icon-only on phones; the label shows on wide screens */
  .ask-fab { padding: 12px; min-width: 44px; min-height: 44px; justify-content: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .ask-panel { animation: askIn .2s var(--ease) both; }
  @keyframes askIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Premium redesign v3 (2026-10-10) — BOLD, clearly-visible pass. Replaces the
   earlier too-subtle v2. Vivid gradient icon tiles, strongly-elevated cards with
   a surface gradient (so white-on-white light mode visibly lifts), 3-stop gradient
   CTAs, gradient stat/price numbers, tinted alt sections, glowing featured plan.
   Theme-aware (dark + light), reduced-motion safe, blur limited to the featured plan.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --radius-lg: 22px;
  --card-surface: linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, #ffffff), var(--surface));
  --elev-card: 0 2px 4px rgba(0,0,0,.30), 0 22px 54px -26px rgba(0,0,0,.72);
  --elev-hover: 0 16px 30px rgba(0,0,0,.48), 0 44px 96px -30px rgba(0,0,0,.82), 0 0 0 1px color-mix(in srgb, var(--brand) 48%, transparent);
  --glass-bg: color-mix(in srgb, var(--surface) 55%, transparent);
  --glass-hi: inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent);
  --cta-grad: linear-gradient(135deg, #4f7dff, #7c5cff 55%, #a855f7);
  --cta-glow: 0 12px 28px -8px color-mix(in srgb, #6d5cff 70%, transparent);
  --accent-grad: linear-gradient(135deg, var(--brand), #a855f7);
}
:root[data-theme="light"] {
  --card-surface: linear-gradient(180deg, #ffffff, #f3f6ff);
  --elev-card: 0 2px 8px rgba(15,23,42,.08), 0 22px 50px -24px rgba(15,23,42,.22);
  --elev-hover: 0 16px 32px rgba(15,23,42,.14), 0 44px 90px -30px rgba(15,23,42,.30), 0 0 0 1px color-mix(in srgb, var(--brand) 34%, transparent);
  --glass-bg: color-mix(in srgb, #fff 72%, transparent);
  --glass-hi: inset 0 1px 0 rgba(255,255,255,.9);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --card-surface: linear-gradient(180deg, #ffffff, #f3f6ff);
    --elev-card: 0 2px 8px rgba(15,23,42,.08), 0 22px 50px -24px rgba(15,23,42,.22);
    --elev-hover: 0 16px 32px rgba(15,23,42,.14), 0 44px 90px -30px rgba(15,23,42,.30), 0 0 0 1px color-mix(in srgb, var(--brand) 34%, transparent);
    --glass-bg: color-mix(in srgb, #fff 72%, transparent);
    --glass-hi: inset 0 1px 0 rgba(255,255,255,.9);
  }
}

/* Cards: surface gradient + larger radius + a clearly visible soft shadow + top highlight. */
.card { background: var(--card-surface); border-radius: var(--radius-lg);
  box-shadow: var(--elev-card), var(--glass-hi);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s ease; }

/* Obvious hover elevation on the browsable cards only (never the calculator / lead form). */
.feat:hover, .price-card:hover, .posts-grid .card:hover {
  transform: translateY(-8px); box-shadow: var(--elev-hover), var(--glass-hi);
  border-color: color-mix(in srgb, var(--brand) 50%, var(--border)); }
@media (prefers-reduced-motion: reduce) {
  .feat:hover, .price-card:hover, .posts-grid .card:hover { transform: none; }
}

/* Feature icon tiles → vivid brand→violet gradient with a soft glow (high-visibility signal). */
.feat-ico { background: var(--accent-grad); color: #fff;
  box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--brand) 60%, transparent); }
.feat-ico svg, .feat-ico .i { color: #fff; }

/* Big numbers → gradient text (stats band + pricing). Fallback colour first for safety. */
.stat b, .price { color: var(--brand-text);
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.price small { -webkit-text-fill-color: var(--muted); color: var(--muted); }

/* Alt sections → a subtle gradient tint for visible page rhythm. */
.section.alt { background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--brand) 6%, var(--surface-2))); }

/* Featured plan → frosted glass + strong brand ring + glow (the one blurred surface). */
.price-card.featured {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border-color: color-mix(in srgb, var(--brand) 60%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 60%, transparent),
    0 30px 80px -24px color-mix(in srgb, var(--brand) 55%, transparent), var(--elev-card), var(--glass-hi); }

/* Primary CTAs → blue→violet gradient + glow + a touch more lift (clearly not flat blue). */
.btn:not(.ghost) { background-image: var(--cta-grad); border: none; box-shadow: var(--cta-glow); }
.btn:not(.ghost):hover { background-image: var(--cta-grad); transform: translateY(-2px);
  box-shadow: 0 18px 36px -10px color-mix(in srgb, #6d5cff 74%, transparent); }
@media (prefers-reduced-motion: reduce) { .btn:not(.ghost):hover { transform: none; } }

/* Hero screenshot matches the new radius. */
.hero-shot .shot { border-radius: var(--radius-lg); }

/* ═══════════════════════════════════════════════════════════════════════════
   Premium motion + tri-colour v4 (2026-10-10) — a true THREE-colour scheme
   (blue → violet → cyan, theme-tuned), hero load entrance, animated gradient,
   CTA sheen, tactile press feedback, and native-app page transitions. Layers
   over v3. Theme-aware (dark + light), reduced-motion safe, performance-minded.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --c1: #3569ff; --c2: #7c5cff; --c3: #22d3ee;        /* blue · violet · cyan */
  --tri: linear-gradient(120deg, var(--c1), var(--c2) 50%, var(--c3));
}
:root[data-theme="light"] { --c1: #2f5fe0; --c2: #6d4bde; --c3: #0e9bb8;
  --tri: linear-gradient(120deg, var(--c1), var(--c2) 50%, var(--c3)); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --c1: #2f5fe0; --c2: #6d4bde; --c3: #0e9bb8;
    --tri: linear-gradient(120deg, var(--c1), var(--c2) 50%, var(--c3)); }
}

/* Native-app touch feel: no grey tap flash, no 300ms delay. */
body { -webkit-tap-highlight-color: transparent; }
.btn, .feat, .price-card, .feat-ico, .tour-tabs button, .theme-toggle, .nav-toggle, .posts-grid .card { touch-action: manipulation; }

/* Three-colour accents everywhere the brand shows. */
.feat-ico { background: var(--tri); color: #fff; }
.feat-ico svg, .feat-ico .i { color: #fff; }
.btn:not(.ghost) { background-image: var(--tri); background-size: 170% 170%; }
.stat b, .price { background: var(--tri); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.price small { -webkit-text-fill-color: var(--muted); }
/* Headline accent → tri-colour clipped text (keeps the existing rotor swap). */
.grad { background-image: var(--tri); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Tactile press feedback (mobile-native tap) — instantaneous, so it runs even under reduced motion. */
.btn:active { transform: translateY(0) scale(.97); }
.feat:active, .price-card:active, .posts-grid .card:active { transform: scale(.985); }
.tour-tabs button:active, .theme-toggle:active, .nav-toggle:active, .nav-links a:active { transform: scale(.94); }

@media (prefers-reduced-motion: no-preference) {
  /* Gentle tri-colour drift on the headline accent + CTAs. */
  .grad { background-size: 220% 100%; animation: triShift 10s ease-in-out infinite; }
  .btn:not(.ghost) { animation: triShift 12s ease-in-out infinite; }
  @keyframes triShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

  /* Hero entrance on load — staggered fade + slide-up, app-like intro. */
  .hero-copy > * { animation: heroUp .7s var(--ease) both; }
  .hero-copy .hero-badge { animation-delay: .02s; }
  .hero-copy h1 { animation-delay: .08s; }
  .hero-copy .lede, .hero-copy > p { animation-delay: .16s; }
  .hero-copy .hero-cta { animation-delay: .24s; }
  .hero-copy .hero-note { animation-delay: .32s; }
  .hero-visual { animation: heroPop .8s var(--ease) .14s both; }
  @keyframes heroUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes heroPop { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }

  /* CTA sheen sweep on hover (ctaSpin is on .cta-card::after — no conflict here). */
  .btn:not(.ghost) { position: relative; overflow: hidden; }
  .btn:not(.ghost)::after { content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-18deg);
    transition: left .55s var(--ease); pointer-events: none; }
  .btn:not(.ghost):hover::after { left: 150%; }
}

/* Native-app page transitions: same-origin navigations cross-fade (/, /pricing, /contact).
   Progressive enhancement — browsers without the View Transitions API just navigate normally. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vtOut .22s var(--ease) both; }
  ::view-transition-new(root) { animation: vtIn .28s var(--ease) both; }
  @keyframes vtOut { to { opacity: 0; transform: translateY(-6px); } }
  @keyframes vtIn { from { opacity: 0; transform: translateY(8px); } }
}

/* ════════════════════════════════════════════════════════════════════════════
   KNOWLEDGE BASE / HELP CENTER (/help, /help/:category) — appended layer.
   Token-driven (theme-aware) + reduced-motion safe. Reuses .card and .faq-item.
   ════════════════════════════════════════════════════════════════════════════ */

/* Search */

/* Search results */

/* Category grid */
.kb-cat { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; }

/* Popular / other-topic lists */
.kb-video { margin-top: 8px; }
.kb-video a { color: var(--brand-2); font-weight: 600; }


.kb-more-link { margin-top: 24px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Logo intro (first visit, ≤3s) + premium nav-logo hover — 2026-10-10.
   0.0–0.5s  neon particles converge onto circuit nodes
   0.5–1.5s  circuit traces + the mark's own outline draw in, data pulses flow
   1.5–2.5s  the logo emerges in 3D with neon glow, energy rings, light streak, holo scan
   2.5–3.0s  glow settles; the mark flies into the nav logo while the overlay fades
   Markup: <template id="intro-tpl"> in index.html (cloned only when html[data-intro]).
   Only transform / opacity / stroke-dashoffset animate — no filter or blur animation.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Layers */
/* The flyer is what the Web Animations API moves into the nav logo; the mark inside does the 3D reveal. */

/* SVG circuit network */

/* Timeline (seconds from first paint) */
@keyframes ixPart { 0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.4); } 25% { opacity: 1; }
  85% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(0, 0) scale(.3); } }
@keyframes ixPop { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ixDraw { to { stroke-dashoffset: 0; } }
@keyframes ixDim { to { opacity: .22; } }
@keyframes ixPulse { 0% { opacity: 0; stroke-dashoffset: .09; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -1; } }
@keyframes ixFade { to { opacity: 0; } }
@keyframes ixFadeIn { to { opacity: 1; } }
@keyframes ixRing { 0% { opacity: 0; transform: scale(.55); } 8% { opacity: .95; } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes ixGlass { to { opacity: 1; transform: scale(1); } }
@keyframes ixGlow { 0% { opacity: 0; transform: scale(1.25); } 35% { opacity: 1; transform: scale(1.12); } 100% { opacity: .5; transform: scale(1); } }
@keyframes ixMark { 0% { opacity: 0; transform: rotateY(-34deg) rotateX(14deg) scale(.76); }
  70% { opacity: 1; transform: rotateY(4deg) rotateX(-2deg) scale(1.05); } 100% { opacity: 1; transform: none; } }
@keyframes ixScan { 0% { opacity: 0; transform: translateY(-30%); } 30% { opacity: .55; } 100% { opacity: 0; transform: translateY(30%); } }
@keyframes ixStreak { 0% { opacity: 0; transform: translateX(0) skewX(-20deg); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(400%) skewX(-20deg); } }
@keyframes ixWm { to { opacity: 1; letter-spacing: -.01em; transform: none; } }

/* Hand-off to the homepage: the hero entrance waits for the intro, then plays as the overlay fades. */
html[data-intro="play"] .hero-copy > *, html[data-intro="play"] .hero-visual { animation-play-state: paused; }

/* Low-end devices / data saver: fewer particles, no second ring, no scanlines, no backdrop blur. */

/* ── Premium nav-logo interaction (every visit) ── */
.logo-mark { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.logo-mark::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .8) 48%, rgba(165, 243, 252, .45) 54%, transparent 68%);
  background-size: 260% 100%; background-position: 135% 0; }
.logo .ai { background: var(--tri, linear-gradient(120deg, #3569ff, #7c5cff 50%, #22d3ee)); background-size: 200% 100%;
  background-position: 0 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  transition: background-position .7s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .logo:hover .logo-mark { transform: perspective(320px) rotateY(-16deg) rotateX(8deg) scale(1.1);
    box-shadow: 0 0 0 1px rgba(34, 211, 238, .55), 0 0 14px rgba(34, 211, 238, .55), 0 0 30px rgba(124, 92, 255, .42); }
  .logo:hover .logo-mark::after { animation: logoSheen .9s var(--ease) both; }
  .logo:hover .ai { background-position: 100% 0; }
}
.logo:focus-visible .logo-mark { box-shadow: 0 0 0 2px var(--c3, #22d3ee), 0 0 18px rgba(34, 211, 238, .5); }
.logo:active .logo-mark { transform: scale(.93); }
.logo-mark.logo-landed { animation: logoLand .9s var(--ease); }
@keyframes logoSheen { 0% { opacity: 1; background-position: 135% 0; } 100% { opacity: 1; background-position: -35% 0; } }
@keyframes logoLand { 0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, .6), 0 0 0 rgba(34, 211, 238, 0); }
  35% { box-shadow: 0 0 0 4px rgba(34, 211, 238, .35), 0 0 28px rgba(34, 211, 238, .7); }
  100% { box-shadow: 0 3px 10px -2px color-mix(in srgb, var(--brand) 60%, transparent); } }
@media (prefers-reduced-motion: reduce) {
  .logo:hover .logo-mark { transform: none; }
  .logo:hover .logo-mark::after, .logo-mark.logo-landed { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PRICING ENHANCEMENT LAYER (2026-10-11) — upgrade framing + comparison matrix
   + trust row + a pricing-specific addendum FAQ. Appended, token-driven,
   theme-aware, adds no motion. Keeps every existing .price-* / .featured hook.
   ════════════════════════════════════════════════════════════════════════════ */

/* "Everything in <lower tier>, plus:" lead-in above the delta feature list. */

/* Reassurance row under the plan cards. */

/* Feature comparison matrix (built from the live catalogue by site.js, hidden until built). */
.compare { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.compare th, .compare td { padding: 13px 16px; text-align: center; border-bottom: 1px solid var(--border); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: none; }
.compare thead th { font-weight: 700; color: var(--text); background: var(--surface); }
.compare td.yes { color: var(--ok); font-weight: 800; }
.compare td.no { color: color-mix(in srgb, var(--muted) 55%, transparent); }
/* Featured column tint mirrors the "Most popular" card. */
.compare .is-featured { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.compare thead th.is-featured { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); color: var(--text); box-shadow: inset 0 3px 0 var(--brand); }
.compare tbody tr:hover td, .compare tbody tr:hover th { background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.compare tbody tr:hover .is-featured { background: color-mix(in srgb, var(--brand) 11%, var(--surface)); }
/* ADR-137: on a phone the table scrolls sideways; the feature names stay put, so every row keeps its label. */

/* Pricing-specific addendum FAQ — single column, distinct from the main #faq grid. */
.pricing-faq-h { margin-top: 60px; }

/* ════════════════════════════════════════════════════════════════════════════
   DESIGN POLISH & MOTION v5 (2026-10-12) — appended, additive, token-driven.
   NEW, non-duplicating polish only (card-spotlight + hero-tilt already exist):
   a scroll-progress bar on non-article pages, a nav scroll-state (lift + glass),
   a desktop back-to-top button (bottom-LEFT, clears the ask-FAB/dock), and a
   section-heading gradient underline that draws in on reveal. The bar + button
   are injected by site.js (no markup change). Theme-aware, reduced-motion safe.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Scroll-progress bar for non-article pages (articles keep their .read-bar) ── */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 61;
  background: var(--tri, linear-gradient(120deg, #3569ff, #7c5cff 50%, #22d3ee));
  box-shadow: 0 0 10px color-mix(in srgb, var(--c2, #7c5cff) 55%, transparent);
  border-bottom-right-radius: 3px; transition: width .08s linear; pointer-events: none; }

/* ── Nav scroll-state: once scrolled, the sticky header lifts with stronger glass + shadow ── */
.nav { transition: box-shadow .3s var(--ease), background-color .3s var(--ease); }
.nav.scrolled { background: color-mix(in srgb, var(--bg) 80%, transparent);
  box-shadow: 0 12px 30px -16px rgba(0,0,0,.55), 0 1px 0 var(--border); }
:root[data-theme="light"] .nav.scrolled { box-shadow: 0 12px 30px -18px rgba(15,23,42,.24), 0 1px 0 var(--border); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .nav.scrolled {
  box-shadow: 0 12px 30px -18px rgba(15,23,42,.24), 0 1px 0 var(--border); } }

/* ── Desktop back-to-top button (injected by site.js). Bottom-LEFT so it never
      collides with the bottom-right ask-FAB or the mobile CTA dock; desktop-only. ── */
.to-top { display: none; position: fixed; left: max(18px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom)); z-index: 54; width: 46px; height: 46px; border-radius: 50%;
  place-items: center; cursor: pointer; color: var(--text); border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 12px 28px -12px rgba(0,0,0,.5); opacity: 0; transform: translateY(14px) scale(.9);
  pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease), border-color .2s ease; }
@media (min-width: 981px) { .to-top { display: grid; } }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { border-color: color-mix(in srgb, var(--brand) 55%, var(--border)); transform: translateY(-2px); }
.to-top:active { transform: scale(.92); }
.to-top svg { width: 20px; height: 20px; }
.to-top:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 40%, transparent), 0 12px 28px -12px rgba(0,0,0,.5); }
@media (prefers-reduced-motion: reduce) { .to-top { transition: opacity .2s linear; } .to-top:hover { transform: none; } }

/* ── Section-heading gradient underline that draws in on reveal (motion only) ── */
@media (prefers-reduced-motion: no-preference) {
  .section > .wrap > h2.center::after { content: ''; display: block; width: 66px; height: 3px;
    margin: 16px auto 0; border-radius: 3px; background: var(--tri); transform: scaleX(0);
    transform-origin: center; transition: transform .6s var(--ease) .12s; }
  .section > .wrap > h2.center.rv-in::after { transform: scaleX(1); }
}

/* ── Refined, consistent focus-visible ring across the main interactive controls ── */
.nav-links a:focus-visible, .nav-cta a:focus-visible, .theme-toggle:focus-visible,
.nav-toggle:focus-visible, .tour-tabs button:focus-visible {
  outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 38%, transparent); border-radius: 12px; }

/* ════════════════════════════════════════════════════════════════════════════
   FEATURES-LED HOMEPAGE (2026-10-12) — the .fx-* component layer for the bold,
   visual homepage (hero + benefits panel, 8 capability cards with mini-mocks,
   dark trust/compliance band, 3 solution cards, demo CTA). Token-driven,
   theme-aware (dark + light), reduced-motion safe. Reuses .card/.btn/.cta-band.
   ════════════════════════════════════════════════════════════════════════════ */

/* Hero */
.fx-hero { padding-top: 60px; }
.fx-hero-inner { display: grid; grid-template-columns: 1.08fr .92fr; gap: 44px; align-items: center; }
.fx-hero-copy h1 { font-size: clamp(32px, 5vw, 54px); line-height: 1.04; letter-spacing: -.02em; margin: 10px 0 14px; }
.fx-hero-copy .lede { max-width: 540px; }
.fx-hero-panel { position: relative; border-radius: var(--radius-lg, 20px); padding: 26px; overflow: hidden;
  background: linear-gradient(140deg, color-mix(in srgb, var(--c1) 92%, #000), color-mix(in srgb, var(--c2) 86%, #000) 55%, color-mix(in srgb, var(--c3) 72%, #000));
  box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--c2) 60%, transparent), var(--glass-hi); }
.fx-hero-panel::after { content: ''; position: absolute; inset: -40% -20% auto auto; width: 70%; height: 140%;
  background: radial-gradient(circle, rgba(255,255,255,.2), transparent 60%); pointer-events: none; }
.fx-benefits { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fx-benefit { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 16px; color: #fff; }
.fx-benefit-ic { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; margin-bottom: 10px; background: rgba(255,255,255,.22); }
.fx-benefit-ic .i { width: 20px; height: 20px; color: #fff; }
.fx-benefit b { display: block; font-size: 15px; }
.fx-benefit small { color: rgba(255,255,255,.84); font-size: 12.5px; }

/* Feature grid + card */
.fx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; }
.fx-card { display: flex; flex-direction: column; padding: 22px; }
.fx-card h3 { margin: 14px 0 6px; font-size: 18px; letter-spacing: -.01em; }
.fx-card > p { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.fx-card, .fx-sol { transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s ease; }
.fx-card:hover, .fx-sol:hover { transform: translateY(-6px); box-shadow: var(--elev-hover), var(--glass-hi); border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
@media (prefers-reduced-motion: reduce) { .fx-card:hover, .fx-sol:hover { transform: none; } }
.fx-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-weight: 700; font-size: 13.5px; color: var(--brand-2); text-decoration: none; }
.fx-more .i { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.fx-more:hover .i { transform: translateX(3px); }

/* Mini-mocks inside cards */
.fx-mini { background: color-mix(in srgb, var(--surface-2) 70%, transparent); border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 16px; min-height: 104px; }
.fx-mini-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.fx-badge { color: var(--brand-2); font-weight: 800; }
.fx-pill { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); }
.fx-pill.live::before { content: '\25CF'; margin-right: 4px; font-size: 8px; vertical-align: middle; }
.fx-bars { display: flex; align-items: flex-end; gap: 6px; height: 56px; }
.fx-bars.sm { height: 40px; }
.fx-bars i { flex: 1; height: var(--h, 50%); border-radius: 4px 4px 0 0; background: var(--tri); opacity: .9; }
.fx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; color: var(--text); }
.fx-list li { display: flex; align-items: center; gap: 8px; }
.fx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.fx-dot.ok { background: var(--ok); }
.fx-dot.warn { background: #f59e0b; }
.fx-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 12.5px; color: var(--text); }
.fx-rows li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fx-chip { font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.fx-chip.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.fx-chip.prog { color: var(--brand-2); background: color-mix(in srgb, var(--brand) 16%, transparent); }
.fx-chip.pend { color: var(--muted); background: color-mix(in srgb, var(--muted) 16%, transparent); }
.fx-chip.open, .fx-chip.warn { color: #d97706; background: color-mix(in srgb, #f59e0b 16%, transparent); }
.fx-split { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.fx-split-r { min-width: 0; }
.fx-screen { height: 72px; width: 90px; flex: none; border-radius: 8px; border: 1px solid var(--border); padding: 9px; display: flex; flex-direction: column; gap: 7px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 32%, var(--surface)), color-mix(in srgb, var(--c2) 24%, var(--surface))); }
.fx-screen b { display: block; height: 7px; border-radius: 3px; background: rgba(255,255,255,.55); }
.fx-screen b:nth-child(2) { width: 72%; }
.fx-screen b:nth-child(3) { width: 48%; }
.fx-donut { position: relative; width: 78px; height: 78px; flex: none; display: grid; place-items: center; }
.fx-donut svg { width: 78px; height: 78px; transform: rotate(-90deg); }
.fx-donut-bg { fill: none; stroke: var(--border); stroke-width: 3.4; }
.fx-donut-fg { fill: none; stroke: var(--brand); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: calc(var(--pct) * 1) 100; }
.fx-donut b { position: absolute; font-size: 16px; font-weight: 800; color: var(--text); }
.fx-alert { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; margin-bottom: 12px;
  background: color-mix(in srgb, #f43f5e 10%, transparent); border: 1px solid color-mix(in srgb, #f43f5e 30%, transparent); }
.fx-alert-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; flex: none; background: #f43f5e; color: #fff; font-weight: 900; }
.fx-alert b { display: block; font-size: 13px; color: var(--text); }
.fx-alert small { color: var(--muted); font-size: 11.5px; }

/* Trust / compliance band (dark on every theme) */
.fx-trust { position: relative; padding: 68px 0; overflow: hidden; color: #eaf1ff;
  background: radial-gradient(1000px 520px at 82% -10%, #1b2a52, #0b1020 62%); }
.fx-trust-inner { display: grid; grid-template-columns: 1.1fr .8fr auto; gap: 40px; align-items: center; }
.fx-trust .eyebrow { color: #8aa4ff; }
.fx-trust h2 { font-size: clamp(24px, 3.4vw, 34px); line-height: 1.08; margin: 8px 0 12px; letter-spacing: -.01em; }
.fx-trust p { color: #b9c6e6; max-width: 440px; margin: 0 0 20px; }
.fx-trust .btn.ghost, .fx-trust .btn:not(.ghost) { color: #fff; }
.fx-trust-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fx-trust-list li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.fx-trust-list .i { width: 20px; height: 20px; color: #22d3ee; flex: none; }
.fx-shield { display: grid; place-items: center; }
.fx-shield svg { width: 118px; height: 140px; filter: drop-shadow(0 20px 42px rgba(34,211,238,.4)); }
.fx-shield-body { fill: rgba(80,120,255,.2); }
.fx-shield-ring { fill: none; stroke: #22d3ee; stroke-width: 2.6; }
.fx-shield-lock { fill: rgba(34,211,238,.18); stroke: #cdeeff; stroke-width: 2.4; }
.fx-shield-sh { fill: none; stroke: #cdeeff; stroke-width: 3; }

/* Solutions */
.fx-solutions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 30px; }
.fx-sol { overflow: hidden; padding: 0; }
.fx-sol-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.fx-sol-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.fx-sol-body { padding: 20px 22px 22px; }
.fx-sol-body h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.01em; }
.fx-sol-body p { color: var(--muted); font-size: 14px; margin: 0 0 14px; }

/* Responsive */
@media (max-width: 1080px) { .fx-grid { grid-template-columns: repeat(2, 1fr); } .fx-trust-inner { grid-template-columns: 1fr 1fr; } .fx-shield { grid-column: 1 / -1; } }
@media (max-width: 860px) { .fx-solutions { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .fx-hero-inner, .fx-trust-inner { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .fx-grid, .fx-benefits { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════════════════
   LIVE DASHBOARDS v7 (2026-10-12) — the feature-card mini-mocks come alive as each
   card reveals: bars grow, the SLA gauge fills, numbers count up (site.js), the
   "Live" dot + anomaly alert pulse, the trust shield floats, and the hero benefit
   chips stagger in. ALL under prefers-reduced-motion: no-preference, so the static
   final state (reduced-motion / no-JS) is unchanged.
   ════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .fx-bars i { transform: scaleY(.05); transform-origin: bottom; transition: transform .7s var(--ease); }
  .card.rv-in .fx-bars i { transform: scaleY(1); }
  .fx-bars i:nth-child(1) { transition-delay: .04s; }
  .fx-bars i:nth-child(2) { transition-delay: .09s; }
  .fx-bars i:nth-child(3) { transition-delay: .14s; }
  .fx-bars i:nth-child(4) { transition-delay: .19s; }
  .fx-bars i:nth-child(5) { transition-delay: .24s; }
  .fx-bars i:nth-child(6) { transition-delay: .29s; }
  .fx-bars i:nth-child(7) { transition-delay: .34s; }

  .fx-donut-fg { stroke-dasharray: 0 100; transition: stroke-dasharray 1s var(--ease) .15s; }
  .card.rv-in .fx-donut-fg { stroke-dasharray: calc(var(--pct) * 1) 100; }

  .fx-pill.live::before { animation: fxBlink 1.8s ease-in-out infinite; }
  @keyframes fxBlink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
  .fx-alert-ic { animation: fxPulse 2.2s ease-in-out infinite; }
  @keyframes fxPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(244,63,94,.5); } 50% { box-shadow: 0 0 0 7px rgba(244,63,94,0); } }

  .fx-shield svg { animation: fxFloat 5.5s ease-in-out infinite; }
  @keyframes fxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

  .fx-benefit { opacity: 0; transform: translateY(12px); animation: fxUp .6s var(--ease) both; }
  .fx-benefit:nth-child(1) { animation-delay: .20s; }
  .fx-benefit:nth-child(2) { animation-delay: .30s; }
  .fx-benefit:nth-child(3) { animation-delay: .40s; }
  .fx-benefit:nth-child(4) { animation-delay: .50s; }
  @keyframes fxUp { to { opacity: 1; transform: none; } }
}

/* ═══ QA LAYER v8 — phone tap targets (measured: links 21–22px tall at 390px) ═══ */
@media (max-width: 680px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .footer-inner > div:first-child { grid-column: 1 / -1; }
  .footer nav { gap: 0; }
  .footer nav h4 { margin: 0 0 4px; }
  .footer nav a { display: flex; align-items: center; min-height: 44px; } /* 44 = the console's touch contract (UI governance agent) */
  .nav .logo, .footer .logo { min-height: 44px; }
  .fx-more { position: relative; }
  .fx-more::after { content: ''; position: absolute; inset: -11px -6px; }
  .article .back { padding: 11px 0; margin: -11px 0 11px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   GLASS & DEPTH v9 (2026-10-12) — homepage only (.fx-hero and the sections after
   it). A soft gradient mesh behind every band so the glass has something to frost;
   frosted floating cards at 16–24px radii; a hero trust row, floating glass chips
   and a module ribbon; the trust band becomes a floating panel; phones get swipe
   rails with dots. Dark default + light (toggle and OS), skin-aware radii, blur
   behind @supports, all motion under prefers-reduced-motion: no-preference.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --r-card: clamp(16px, calc(var(--radius) + 6px), 24px);
  --r-inner: clamp(12px, calc(var(--radius) - 2px), 16px);
  --g-fill: rgba(20, 27, 45, .56);
  --g-fill-solid: rgba(20, 27, 45, .9);
  --g-line: rgba(255, 255, 255, .09);
  --g-hi: inset 0 1px 0 rgba(255, 255, 255, .08);
  --g-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 26px 60px -30px rgba(0, 0, 0, .85);
  --g-lift: 0 2px 6px rgba(0, 0, 0, .32), 0 42px 84px -32px rgba(0, 0, 0, .9);
  --orb-1: color-mix(in srgb, var(--brand) 32%, transparent);
  --orb-2: color-mix(in srgb, var(--c2, #7c5cff) 26%, transparent);
  --orb-3: color-mix(in srgb, var(--c3, #22d3ee) 15%, transparent);
  --dotgrid: rgba(255, 255, 255, .07);
}
:root[data-theme="light"] {
  --g-fill: rgba(255, 255, 255, .64);
  --g-fill-solid: rgba(255, 255, 255, .94);
  --g-line: rgba(255, 255, 255, .9);
  --g-hi: inset 0 1px 0 #fff;
  --g-shadow: 0 0 0 1px rgba(15, 23, 42, .05), 0 1px 2px rgba(15, 23, 42, .05), 0 24px 56px -30px rgba(40, 60, 150, .3);
  --g-lift: 0 0 0 1px rgba(15, 23, 42, .05), 0 2px 6px rgba(15, 23, 42, .06), 0 40px 80px -32px rgba(40, 60, 150, .4);
  --orb-1: color-mix(in srgb, var(--brand) 16%, transparent);
  --orb-2: color-mix(in srgb, var(--c2, #6d4bde) 13%, transparent);
  --orb-3: color-mix(in srgb, var(--c3, #0e9bb8) 12%, transparent);
  --dotgrid: rgba(15, 23, 42, .07);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --g-fill: rgba(255, 255, 255, .64);
    --g-fill-solid: rgba(255, 255, 255, .94);
    --g-line: rgba(255, 255, 255, .9);
    --g-hi: inset 0 1px 0 #fff;
    --g-shadow: 0 0 0 1px rgba(15, 23, 42, .05), 0 1px 2px rgba(15, 23, 42, .05), 0 24px 56px -30px rgba(40, 60, 150, .3);
    --g-lift: 0 0 0 1px rgba(15, 23, 42, .05), 0 2px 6px rgba(15, 23, 42, .06), 0 40px 80px -32px rgba(40, 60, 150, .4);
    --orb-1: color-mix(in srgb, var(--brand) 16%, transparent);
    --orb-2: color-mix(in srgb, var(--c2, #6d4bde) 13%, transparent);
    --orb-3: color-mix(in srgb, var(--c3, #0e9bb8) 12%, transparent);
    --dotgrid: rgba(15, 23, 42, .07);
  }
}

/* Soft gradient mesh behind each band (and a faint dot grid behind the hero) */
.fx-hero, .fx-hero ~ .section { position: relative; isolation: isolate; overflow: clip; }
.fx-hero::before, .fx-hero ~ .section::before {
  content: ''; position: absolute; inset: 0 -6%; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  background:
    radial-gradient(36% 44% at var(--o1, 10% 16%), var(--orb-1), transparent 70%),
    radial-gradient(32% 40% at var(--o2, 90% 30%), var(--orb-2), transparent 70%),
    radial-gradient(40% 48% at var(--o3, 56% 98%), var(--orb-3), transparent 72%);
}
.fx-hero ~ #features { --o1: 96% 10%; --o2: 2% 56%; --o3: 70% 100%; }
.fx-hero ~ #solutions { --o1: 8% 92%; --o2: 94% 14%; --o3: 50% 0%; }
.fx-hero ~ #demo { --o1: 86% 42%; --o2: 6% 30%; --o3: 40% 90%; }
.fx-hero ~ .section.alt { background: transparent; border-color: transparent; }
.fx-hero { padding-bottom: 30px; }
.fx-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--dotgrid) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 62% at 50% 32%, #000 18%, transparent 78%);
          mask-image: radial-gradient(70% 62% at 50% 32%, #000 18%, transparent 78%);
}

/* Frosted floating cards */
.fx-hero ~ .section .card {
  border-radius: var(--r-card);
  border: 1px solid var(--g-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 38%), var(--g-fill);
  box-shadow: var(--g-hi), var(--g-shadow);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .fx-hero ~ .section .card { -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .fx-hero ~ .section .card { background: var(--g-fill-solid); }
}
.fx-hero ~ .section .fx-card:hover, .fx-hero ~ .section .fx-sol:hover {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--g-line));
  box-shadow: var(--g-hi), var(--g-lift), 0 0 0 1px color-mix(in srgb, var(--brand) 38%, transparent);
}
.fx-hero ~ .section .fx-mini {
  border-radius: var(--r-inner);
  background: color-mix(in srgb, var(--surface-2) 52%, transparent);
  border-color: color-mix(in srgb, var(--border) 70%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}
.fx-hero ~ .section .feat-ico { border-radius: var(--r-inner); }
.fx-sol-img { margin: 10px 10px 0; border-radius: calc(var(--r-card) - 8px); border: 1px solid var(--g-line); }
.fx-demo .lead-form { padding: 30px; }
.fx-demo .lead-form input, .fx-demo .lead-form select, .fx-demo .lead-form textarea {
  border-radius: 12px; background: color-mix(in srgb, var(--surface) 72%, transparent);
}
.fx-hero .btn.lg, .fx-hero ~ .section .btn.lg { border-radius: 14px; }

/* Hero: trust row, floating panel + chips */
.fx-hero-trust { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: 13.5px; font-weight: 600; color: var(--muted); }
.fx-hero-trust li { display: inline-flex; align-items: center; gap: 7px; }
.fx-hero-trust .i { width: 16px; height: 16px; flex: none; color: var(--brand-2); }
.fx-hero-visual { position: relative; }
.fx-hero-panel { border-radius: var(--r-card); }
.fx-benefit { border-radius: var(--r-inner); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); transition: background .2s ease, border-color .2s ease; }
.fx-benefit:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .34); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .fx-benefit { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}
.fx-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; max-width: 250px;
  padding: 10px 14px 10px 10px; border-radius: 16px; color: var(--text);
  background: var(--g-fill-solid); border: 1px solid var(--g-line); box-shadow: var(--g-hi), var(--g-lift); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .fx-float { -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
}
.fx-float { max-width: 300px; }
.fx-float-a { left: -40px; bottom: -48px; }
.fx-float-b { right: -10px; top: -54px; }
@media (min-width: 1240px) { .fx-float-b { right: -34px; } }
.fx-float-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 11px; color: #fff;
  background: var(--tri); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--brand) 70%, transparent); }
.fx-float-ic .i { width: 18px; height: 18px; }
.fx-float b { display: block; font-size: 13.5px; line-height: 1.25; }
.fx-float small { display: block; font-size: 12px; line-height: 1.3; color: var(--muted); }

/* Module ribbon */
.fx-ribbon { margin-top: 64px; }
.fx-ribbon-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; padding: 0 24px; }
.fx-ribbon-t { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fx-ribbon-pause { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--border); background: var(--g-fill-solid); color: var(--muted); }
.fx-ribbon-pause:hover { color: var(--text); border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
.fx-ribbon-pause:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fx-ribbon-pause svg { width: 13px; height: 13px; fill: currentColor; }
.fx-ribbon-pause .g, .fx-ribbon-pause[aria-pressed="true"] .p { display: none; }
.fx-ribbon-pause[aria-pressed="true"] .g { display: inline; }
.fx-ribbon-view { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.fx-ribbon-track { display: flex; width: max-content; }
.fx-ribbon ul { display: flex; gap: 12px; list-style: none; margin: 0; padding: 4px 6px 16px; }
.fx-ribbon li { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; padding: 9px 16px;
  border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--text);
  background: var(--g-fill-solid); border: 1px solid var(--g-line);
  box-shadow: var(--g-hi), 0 0 0 1px color-mix(in srgb, var(--border) 50%, transparent), 0 10px 22px -16px rgba(20, 30, 80, .5); }
.fx-ribbon li::before { content: ''; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--tri); }

/* Trust band → a floating dark panel (dark on every theme, as before) */
.fx-trust { width: min(calc(100% - 32px), calc(var(--wrap) + 64px)); margin: 0 auto; border-radius: calc(var(--r-card) + 6px);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 50px 100px -50px rgba(11, 16, 32, .75), inset 0 1px 0 rgba(255, 255, 255, .07); }
.fx-trust::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 60% at 6% 100%, rgba(124, 92, 255, .28), transparent 70%),
              radial-gradient(30% 50% at 68% 0%, rgba(34, 211, 238, .14), transparent 70%); }
.fx-trust-inner { position: relative; }
.fx-trust-list li { padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }

/* Phone: swipe rails (feature + solution cards), compact hero, 2-up trust list */
.fx-pager { display: flex; justify-content: center; gap: 2px; margin-top: 2px; }
.fx-pg { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.fx-pg::before { content: ''; width: 7px; height: 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 45%, transparent); transition: width .25s var(--ease), background .25s ease; }
.fx-pg[aria-current]::before { width: 20px; background: var(--tri); }
.fx-pg:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-radius: 8px; }
@media (max-width: 760px) { .fx-float { display: none; } }
@media (max-width: 680px) {
  .fx-grid, .fx-solutions { --gut: 24px; display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%;
    gap: 14px; margin: 22px calc(-1 * var(--gut)) 0; padding: 10px var(--gut) 30px; scroll-padding-inline: var(--gut);
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .fx-grid::-webkit-scrollbar, .fx-solutions::-webkit-scrollbar { display: none; }
  .fx-grid > *, .fx-solutions > * { scroll-snap-align: start; scroll-snap-stop: always; }
  .fx-hero ~ .section .fx-card:hover, .fx-hero ~ .section .fx-sol:hover { transform: none; }
  .fx-hero-trust { gap: 8px 14px; font-size: 13px; }
  .fx-ribbon { margin-top: 44px; }
  .fx-trust { width: calc(100% - 24px); border-radius: var(--r-card); padding: 48px 0; }
  .fx-trust-list { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fx-trust-list li { padding: 10px 12px; font-size: 14px; }
}
@media (max-width: 520px) {
  .fx-benefits { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fx-benefit { padding: 12px; }
  .fx-benefit-ic { width: 32px; height: 32px; margin-bottom: 8px; border-radius: 10px; }
  .fx-benefit b { font-size: 14px; line-height: 1.25; }
  .fx-benefit small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; }
  .fx-hero-panel { padding: 14px; }
}
@media (max-width: 420px) { .fx-grid, .fx-solutions { --gut: 16px; } }

/* Motion */
@media (prefers-reduced-motion: no-preference) {
  .fx-hero::before, .fx-hero ~ .section::before { animation: fxMesh 26s ease-in-out infinite alternate; }
  @keyframes fxMesh { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(1.5%, -2%, 0) scale(1.05); } 100% { transform: translate3d(-1.5%, 1.5%, 0) scale(1.02); } }
  .fx-hero-panel { animation: fxBob 8s ease-in-out infinite; }
  .fx-float-a { animation: fxBob 7s ease-in-out -2s infinite; }
  .fx-float-b { animation: fxBob 9s ease-in-out -5s infinite; }
  @keyframes fxBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  .fx-ribbon-track { animation: fxMarquee 70s linear infinite; }
  .fx-ribbon:hover .fx-ribbon-track, .fx-ribbon:focus-within .fx-ribbon-track, .fx-ribbon.paused .fx-ribbon-track { animation-play-state: paused; }
  @keyframes fxMarquee { to { transform: translate3d(-50%, 0, 0); } }
  .fx-sol-img img { transition: transform .6s var(--ease); }
  .fx-sol:hover .fx-sol-img img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 680px) {
  /* Phones: keep scrolling cheap — the mesh and the panel hold still. */
  .fx-hero::before, .fx-hero ~ .section::before, .fx-hero-panel { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-ribbon-view { overflow-x: auto; scrollbar-width: none; }
  .fx-ribbon ul[aria-hidden="true"] { display: none; }
}

/* ── v9 · CONTRAST (measured on rendered pixels, glass + mesh included) ──────────
   White on the hero panel's cyan end and under its corner glow fell to 2.7–4.3:1;
   white on the cyan end of the button gradient to ~4.4:1 (and the hover gradient's
   violet end to ~4:1); amber chips to 2.7:1 (light) / 4.1:1 (dark); light-mode
   green/blue chips and eyebrows sat at ~4.3:1. Each gets just enough depth to clear AA. */
.fx-hero-panel { background: linear-gradient(140deg, color-mix(in srgb, var(--c1) 88%, #000), color-mix(in srgb, var(--c2) 82%, #000) 55%, color-mix(in srgb, var(--c3) 56%, #000)); }
.fx-hero-panel::after { opacity: .55; }
.fx-benefit { background: rgba(8, 10, 36, .26); border-color: rgba(255, 255, 255, .2); }
.fx-benefit:hover { background: rgba(8, 10, 36, .36); }
.fx-benefit small { color: rgba(255, 255, 255, .94); }
.btn:not(.ghost), .btn:not(.ghost):hover {
  background-image: linear-gradient(120deg, color-mix(in srgb, var(--c1) 90%, #000), color-mix(in srgb, var(--c2) 90%, #000) 50%, #0e7490); }
.fx-chip.open, .fx-chip.warn { color: #fbbf24; }
.fx-hero .eyebrow, .fx-hero ~ .section .eyebrow { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
:root[data-theme="light"] .fx-chip.ok, :root[data-theme="light"] .fx-pill { color: color-mix(in srgb, var(--ok) 78%, #000); }
:root[data-theme="light"] .fx-chip.prog { color: color-mix(in srgb, var(--brand-text) 76%, #000); }
:root[data-theme="light"] .fx-chip.open, :root[data-theme="light"] .fx-chip.warn { color: #92400e; }
:root[data-theme="light"] .fx-hero .eyebrow, :root[data-theme="light"] .fx-hero ~ .section .eyebrow { color: color-mix(in srgb, var(--brand-text) 86%, #000); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .fx-chip.ok, :root:not([data-theme="dark"]) .fx-pill { color: color-mix(in srgb, var(--ok) 78%, #000); }
  :root:not([data-theme="dark"]) .fx-chip.prog { color: color-mix(in srgb, var(--brand-text) 76%, #000); }
  :root:not([data-theme="dark"]) .fx-chip.open, :root:not([data-theme="dark"]) .fx-chip.warn { color: #92400e; }
  :root:not([data-theme="dark"]) .fx-hero .eyebrow, :root:not([data-theme="dark"]) .fx-hero ~ .section .eyebrow { color: color-mix(in srgb, var(--brand-text) 86%, #000); }
}

/* ════════════════════════════════════════════════════════════════════════════
   LUMINOUS v10 (2026-10-12) — homepage "futuristic, elegant" finish on top of v9.
   Light that behaves like light: a slow ring of light orbits the hero panel, glass
   edges are lit from above, a card's border glows where the cursor is, the hero
   visual tilts in 3D with its chips floating at a different depth, the trust panel
   carries a faint blueprint grid with a radar ping behind the shield, and section
   eyebrows wear a status light. Fine film grain under the hero. CSS + one tiny JS
   tilt handler; no markup. Every motion is under prefers-reduced-motion:
   no-preference; pointer effects need (hover: hover) and (pointer: fine).
   ════════════════════════════════════════════════════════════════════════════ */
@property --fx-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* Lit glass edges — a hairline of light along the top of every homepage glass card */
.fx-hero ~ .section .card {
  background:
    linear-gradient(90deg, transparent 8%, rgba(255, 255, 255, .28) 50%, transparent 92%) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 38%),
    var(--g-fill);
}

/* Cursor-following border glow (site.js already tracks --mx/--my on .spot cards) */
.fx-hero ~ .section .fx-card::after, .fx-hero ~ .section .fx-sol::after {
  content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--c3) 95%, transparent), color-mix(in srgb, var(--c2) 75%, transparent) 35%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s ease;
}
.fx-hero ~ .section .fx-card:hover::after, .fx-hero ~ .section .fx-sol:hover::after { opacity: 1; }

/* A ring of light around the hero panel (static highlight when motion is reduced) */
.fx-hero-panel::before {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--fx-ang), transparent 0 38%, rgba(255, 255, 255, .22) 54%,
    #fff 70%, color-mix(in srgb, var(--c3) 65%, #fff) 76%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* …and a calm gradient frame around the demo form */
.fx-demo .lead-form { position: relative; }
.fx-demo .lead-form::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, color-mix(in srgb, var(--c1) 70%, transparent), transparent 38%, transparent 62%, color-mix(in srgb, var(--c3) 60%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* Fine film grain + the dot grid, behind the hero */
.fx-hero::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(var(--dotgrid) 1px, transparent 1.4px);
  background-size: 180px 180px, 22px 22px;
}

/* Status-light eyebrows */
.fx-hero .eyebrow::before, .fx-hero ~ .section .eyebrow::before, .fx-trust .eyebrow::before {
  content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 8px 1px 0; border-radius: 50%; vertical-align: middle;
  background: var(--c3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c3) 18%, transparent), 0 0 10px var(--c3);
}

/* Trust panel: faint blueprint grid + radar ping behind the shield */
.fx-trust::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(60% 80% at 80% 50%, #000, transparent 75%);
          mask-image: radial-gradient(60% 80% at 80% 50%, #000, transparent 75%);
}
.fx-trust-inner { z-index: 1; }
.fx-shield { position: relative; }
.fx-shield::before, .fx-shield::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px;
  border-radius: 50%; border: 1px solid rgba(34, 211, 238, .28); pointer-events: none;
}
.fx-shield::after { width: 230px; height: 230px; margin: -115px 0 0 -115px; border-color: rgba(34, 211, 238, .14); }

/* 3D depth on the hero visual (site.js sets --tx/--ty in −1…1 from the pointer) */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .fx-hero-visual { transform-style: preserve-3d; transition: transform .6s var(--ease);
    transform: perspective(1400px) rotateX(calc(var(--ty, 0) * -5deg)) rotateY(calc(var(--tx, 0) * 7deg)); }
  .fx-float-a { translate: 0 0 40px; }
  .fx-float-b { translate: 0 0 30px; }
  .fx-hero-panel::after { transition: translate .6s var(--ease); translate: calc(var(--tx, 0) * -36px) calc(var(--ty, 0) * -24px); }
}

@media (prefers-reduced-motion: no-preference) {
  .fx-hero-panel::before { animation: fxOrbit 9s linear infinite; }
  @keyframes fxOrbit { to { --fx-ang: 360deg; } }
  .fx-hero .eyebrow::before, .fx-hero ~ .section .eyebrow::before, .fx-trust .eyebrow::before { animation: fxStatus 2.6s ease-in-out infinite; }
  @keyframes fxStatus { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
  .fx-shield::before, .fx-shield::after { animation: fxPing 3.6s cubic-bezier(.2, .6, .3, 1) infinite; }
  .fx-shield::after { animation-delay: 1.8s; }
  @keyframes fxPing { 0% { transform: scale(.55); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 680px) {
  .fx-hero-panel::before { animation-duration: 14s; }
}

/* ── v10 · light-mode eyebrows site-wide (measured 4.31–4.46:1 on pages without .fx-hero) ── */
:root[data-theme="light"] .eyebrow { color: color-mix(in srgb, var(--brand-text) 86%, #000); }
:root[data-theme="light"] .fx-trust .eyebrow { color: #8aa4ff; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .eyebrow { color: color-mix(in srgb, var(--brand-text) 86%, #000); }
  :root:not([data-theme="dark"]) .fx-trust .eyebrow { color: #8aa4ff; }
}

/* ════════════════════════════════════════════════════════════════════════════
   COMMAND CENTER & HOW IT WORKS v11 (2026-10-12) — two homepage bands.
   #command: a coded glass console window (illustrative, captioned) that stages in
   from a 3D tilt, draws its chart and runs a live alerts ticker. #how: three glass
   steps tied together by a line of light seen through the glass. Theme-aware,
   motion under prefers-reduced-motion: no-preference (via .armed/.in from site.js).
   ════════════════════════════════════════════════════════════════════════════ */
.fx-hero ~ #command { --o1: 50% 70%; --o2: 6% 24%; --o3: 94% 30%; padding-top: 64px; padding-bottom: 48px; overflow-x: clip; overflow-y: visible; }
.fx-hero ~ #how { --o1: 18% 40%; --o2: 86% 66%; --o3: 50% 100%; }

.fx-cc-stage { position: relative; max-width: 1080px; margin: 38px auto 0; }
.fx-cc-stage::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: 14%; height: 60%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 100%, color-mix(in srgb, var(--c2) 38%, transparent), transparent 72%); filter: blur(28px); }
.fx-cc-win { overflow: hidden; border-radius: 22px; color: var(--text); background: var(--g-fill-solid); border: 1px solid var(--g-line);
  box-shadow: var(--g-hi), 0 0 0 1px color-mix(in srgb, var(--border) 55%, transparent),
    0 70px 140px -56px rgba(10, 16, 48, .6), 0 30px 70px -36px color-mix(in srgb, var(--c1) 40%, transparent);
  transform-origin: 50% 0; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .fx-cc-win { -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
}
.fx-cc-bar { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.fx-cc-dots { display: flex; gap: 7px; }
.fx-cc-dots i { width: 11px; height: 11px; border-radius: 50%; background: #f87171; }
.fx-cc-dots i:nth-child(2) { background: #fbbf24; }
.fx-cc-dots i:nth-child(3) { background: #34d399; }
.fx-cc-url { flex: 1; max-width: 340px; margin: 0 auto; padding: 5px 12px; border-radius: 9px; text-align: center; font-size: 12px; color: var(--muted);
  background: color-mix(in srgb, var(--surface) 75%, transparent); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.fx-cc-body { display: grid; grid-template-columns: 62px 1fr; }
.fx-cc-side { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 0;
  border-right: 1px solid color-mix(in srgb, var(--border) 55%, transparent); background: color-mix(in srgb, var(--surface-2) 35%, transparent); }
.fx-cc-nav { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--muted); }
.fx-cc-nav .i { width: 18px; height: 18px; }
.fx-cc-nav.on { color: #fff; background: var(--tri); box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--c1) 75%, transparent); }
.fx-cc-main { display: grid; gap: 14px; min-width: 0; padding: 18px; }
.fx-cc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fx-cc-kpi, .fx-cc-panel { border-radius: 14px; padding: 12px 14px; background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent); }
.fx-cc-kpi small, .fx-cc-kpi em { display: block; font-size: 11.5px; font-weight: 600; font-style: normal; color: var(--muted); }
.fx-cc-kpi b { display: block; margin: 2px 0; font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fx-cc-kpi em.up { color: var(--ok); }
.fx-cc-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; }
.fx-cc-chart { grid-column: 1; grid-row: 1; }
.fx-cc-feed { grid-column: 2; grid-row: 1 / span 2; }
.fx-cc-devs { grid-column: 1; grid-row: 2; }
.fx-cc-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; font-size: 12.5px; font-weight: 700; }
.fx-cc-h span { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.fx-cc-chart svg { display: block; width: 100%; height: auto; aspect-ratio: 400 / 120; overflow: visible; }
.fx-cc-gl line { stroke: color-mix(in srgb, var(--border) 85%, transparent); stroke-width: 1; stroke-dasharray: 3 5; }
.fx-cc-prev { fill: none; stroke: color-mix(in srgb, var(--muted) 45%, transparent); stroke-width: 1.5; stroke-dasharray: 4 5; }
.fx-cc-area { fill: url(#cc-fill); }
.fx-cc-line { fill: none; stroke: url(#cc-stroke); stroke-width: 2.8; stroke-linecap: round;
  filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--c2) 45%, transparent)); }
.fx-cc-chart .sa { stop-color: var(--c1); stop-opacity: .34; }
.fx-cc-chart .sb { stop-color: var(--c1); stop-opacity: 0; }
.fx-cc-chart .s1 { stop-color: var(--c1); }
.fx-cc-chart .s2 { stop-color: var(--c2); }
.fx-cc-chart .s3 { stop-color: var(--c3); }
.fx-cc-feed ul, .fx-cc-devs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fx-cc-feed li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 70%, transparent); }
.fx-cc-t { min-width: 0; }
.fx-cc-t b { display: block; font-size: 12.5px; line-height: 1.3; }
.fx-cc-t small { display: block; font-size: 11.5px; color: var(--muted); }
.fx-cc-feed time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fx-cc-devs ul { grid-template-columns: 1fr 1fr; gap: 9px 18px; }
.fx-cc-devs li { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 12.5px; font-weight: 600; }
.fx-cc-devs .fx-chip { margin-left: auto; }
.fx-cc .fx-dot.bad { background: var(--bad); }
.fx-cc .fx-dot.prog { background: var(--brand); }
.fx-cc-cap { display: table; margin: 22px auto 0; padding: 6px 14px; border-radius: 999px; text-align: center; font-size: 13px; color: var(--muted);
  position: relative; background: var(--surface); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }

/* How it works */
.fx-steps { position: relative; list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.fx-steps::before { content: ''; position: absolute; top: 56px; left: 14%; right: 14%; height: 2px; border-radius: 2px; z-index: 0; pointer-events: none;
  background: var(--tri); box-shadow: 0 0 14px color-mix(in srgb, var(--c2) 60%, transparent); transform-origin: left center; }
.fx-steps > li { position: relative; z-index: 1; padding: 28px 24px 26px; text-align: center; }
.fx-step-n { position: absolute; top: 16px; right: 18px; font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--muted); font-variant-numeric: tabular-nums; }
.fx-step-ic { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 18px; color: #fff; background: var(--tri);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--c2) 14%, transparent), 0 16px 30px -12px color-mix(in srgb, var(--c1) 70%, transparent); }
.fx-step-ic .i { width: 24px; height: 24px; }
.fx-steps h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.01em; }
.fx-steps p { margin: 0; font-size: 14.5px; color: var(--muted); }

@media (max-width: 960px) {
  .fx-cc-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .fx-cc-body { grid-template-columns: 1fr; }
  .fx-cc-side, .fx-cc-url, .fx-cc-devs { display: none; }
  .fx-cc-bar { justify-content: space-between; height: 40px; }
  .fx-cc-main { gap: 10px; padding: 12px; }
  .fx-cc-kpis { gap: 10px; }
  .fx-cc-kpi b { font-size: 20px; }
  .fx-cc-grid { grid-template-columns: 1fr; gap: 10px; }
  .fx-cc-chart, .fx-cc-feed { grid-column: 1; grid-row: auto; }
  .fx-cc-feed li:nth-child(n+5) { display: none; }
  .fx-steps { grid-template-columns: 1fr; gap: 16px; }
  .fx-steps::before { top: 40px; bottom: 40px; left: 50%; right: auto; width: 2px; height: auto; margin-left: -1px; transform-origin: center top; }
}

@media (prefers-reduced-motion: no-preference) {
  .fx-cc-stage.armed .fx-cc-win { opacity: .55; transform: perspective(1800px) rotateX(18deg) translateY(36px) scale(.94);
    transition: transform 1.2s var(--ease), opacity 1s ease; }
  .fx-cc-stage.armed.in .fx-cc-win { opacity: 1; transform: none; }
  .fx-cc-stage.armed .fx-cc-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease) .5s; }
  .fx-cc-stage.armed.in .fx-cc-line { stroke-dashoffset: 0; }
  .fx-cc-stage.armed .fx-cc-area { opacity: 0; transition: opacity 1.2s ease 1.1s; }
  .fx-cc-stage.armed.in .fx-cc-area { opacity: 1; }
  .fx-cc-stage.armed .fx-cc-kpi { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s var(--ease); }
  .fx-cc-stage.armed.in .fx-cc-kpi { opacity: 1; transform: none; }
  .fx-cc-stage.armed .fx-cc-kpi:nth-child(1) { transition-delay: .35s; }
  .fx-cc-stage.armed .fx-cc-kpi:nth-child(2) { transition-delay: .45s; }
  .fx-cc-stage.armed .fx-cc-kpi:nth-child(3) { transition-delay: .55s; }
  .fx-cc-stage.armed .fx-cc-kpi:nth-child(4) { transition-delay: .65s; }
  .fx-cc-feed li.new { animation: ccIn .6s var(--ease) both; }
  @keyframes ccIn { from { opacity: 0; transform: translateY(-10px); background: color-mix(in srgb, var(--brand) 24%, transparent); } }
  .fx-steps.armed::before { transform: scaleX(0); transition: transform 1.4s var(--ease) .35s; }
  .fx-steps.armed.in::before { transform: none; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
  .fx-steps.armed::before { transform: scaleY(0); }
  .fx-steps.armed.in::before { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PREMIUM DETAIL v12 (2026-10-12) — bento feature grid (wide cards lay text beside a
   larger mini-dashboard), a staggered hero entrance, an honest facts row in the trust
   panel, the live pricing teaser (#plans) and magnetic CTAs. Theme-aware; motion under
   prefers-reduced-motion: no-preference; pointer effects need a fine pointer.
   ════════════════════════════════════════════════════════════════════════════ */

/* Bento: cards 1, 6, 7, 8 run two columns wide (4-up desktop; full width on tablets) */
@media (min-width: 681px) {
  .fx-grid > .fx-card:nth-child(1), .fx-grid > .fx-card:nth-child(6),
  .fx-grid > .fx-card:nth-child(7), .fx-grid > .fx-card:nth-child(8) {
    grid-column: span 2; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    grid-template-rows: auto auto 1fr auto; column-gap: 26px; align-items: start; padding: 26px; }
  .fx-grid > .fx-card:is(:nth-child(1), :nth-child(6), :nth-child(7), :nth-child(8)) > .feat-ico { grid-column: 1; grid-row: 1; }
  .fx-grid > .fx-card:is(:nth-child(1), :nth-child(6), :nth-child(7), :nth-child(8)) > h3 { grid-column: 1; grid-row: 2; font-size: 20px; }
  .fx-grid > .fx-card:is(:nth-child(1), :nth-child(6), :nth-child(7), :nth-child(8)) > p { grid-column: 1; grid-row: 3; font-size: 14.5px; }
  .fx-grid > .fx-card:is(:nth-child(1), :nth-child(6), :nth-child(7), :nth-child(8)) > .fx-more { grid-column: 1; grid-row: 4; align-self: end; }
  .fx-grid > .fx-card:is(:nth-child(1), :nth-child(6), :nth-child(7), :nth-child(8)) > .fx-mini {
    grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; padding: 16px; }
  .fx-grid > .fx-card:is(:nth-child(1), :nth-child(6), :nth-child(7), :nth-child(8)) .fx-bars { height: 92px; gap: 8px; }
  .fx-grid > .fx-card:is(:nth-child(1), :nth-child(6), :nth-child(7), :nth-child(8)) .fx-bars.sm { height: 64px; }
  .fx-grid > .fx-card:is(:nth-child(1), :nth-child(6), :nth-child(7), :nth-child(8)) .fx-rows { gap: 10px; font-size: 13.5px; }
}

/* Facts row inside the trust panel */
.fx-facts { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-top: 44px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .09); }
.fx-fact b { display: block; font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.fx-fact span { display: block; margin-top: 8px; font-size: 13.5px; color: #b9c6e6; }
.fx-fact b::after { content: ''; display: block; width: 28px; height: 3px; margin-top: 12px; border-radius: 3px; background: var(--tri); }

/* Pricing teaser */
.fx-hero ~ #plans { --o1: 50% 45%; --o2: 8% 80%; --o3: 92% 20%; }
.fx-plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.fx-plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px; color: inherit; text-decoration: none;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s ease; }
.fx-hero ~ .section .fx-plan:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--brand) 40%, var(--g-line));
  box-shadow: var(--g-hi), var(--g-lift), 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent); }
.fx-plan:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.fx-plan-name { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-2); }
.fx-plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.fx-plan-price b { font-size: 40px; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fx-plan-price small { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.fx-plan > p { margin: 0; font-size: 14px; color: var(--muted); }
.fx-plan-meta { list-style: none; display: grid; gap: 7px; margin: 4px 0 0; padding: 14px 0 0; font-size: 13.5px; font-weight: 600;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.fx-plan-meta li { display: flex; align-items: center; gap: 8px; }
.fx-plan-meta .i { width: 16px; height: 16px; flex: none; color: var(--ok); }
.fx-plan-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--brand-2); }
.fx-plan-go .i { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.fx-plan:hover .fx-plan-go .i { transform: translateX(3px); }
.fx-plans-foot { margin: 30px 0 0; text-align: center; }

/* Magnetic CTAs (site.js sets --bx/--by) */
.btn.magnet { translate: var(--bx, 0px) var(--by, 0px);
  transition: translate .3s var(--ease), transform .16s var(--ease), background .16s ease, box-shadow .2s ease, border-color .16s ease; }

@media (max-width: 860px) { .fx-plans-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
@media (max-width: 760px) { .fx-facts { grid-template-columns: 1fr 1fr; gap: 24px 14px; margin-top: 34px; } }
@media (max-width: 680px) { .fx-hero ~ .section .fx-plan:hover { transform: none; } }

/* Hero entrance: copy rises in sequence, the visual follows */
@media (prefers-reduced-motion: no-preference) {
  .fx-hero-copy > * { animation: fxRise .8s var(--ease) both; }
  .fx-hero-copy > :nth-child(1) { animation-delay: .05s; }
  .fx-hero-copy > :nth-child(2) { animation-delay: .13s; }
  .fx-hero-copy > :nth-child(3) { animation-delay: .23s; }
  .fx-hero-copy > :nth-child(4) { animation-delay: .33s; }
  .fx-hero-copy > :nth-child(5) { animation-delay: .43s; }
  .fx-hero-visual { animation: fxRiseT 1s var(--ease) .2s both; }
  .fx-ribbon { animation: fxFadeIn 1s ease .6s both; }
  @keyframes fxRise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
  @keyframes fxRiseT { from { opacity: 0; translate: 0 26px; filter: blur(8px); } }
  @keyframes fxFadeIn { from { opacity: 0; } }
}

/* ── v12 · plans rail: on phones the three plans swipe like the other card groups ── */
@media (max-width: 680px) {
  .fx-plans-grid { --gut: 24px; max-width: none; display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%;
    gap: 14px; margin: 22px calc(-1 * var(--gut)) 0; padding: 10px var(--gut) 30px; scroll-padding-inline: var(--gut);
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .fx-plans-grid::-webkit-scrollbar { display: none; }
  .fx-plans-grid > * { scroll-snap-align: start; scroll-snap-stop: always; }
  .fx-plans-foot { margin-top: 18px; }
}
@media (max-width: 420px) { .fx-plans-grid { --gut: 16px; } }

/* ════════════════════════════════════════════════════════════════════════════
   AI MOTION v13 (2026-10-12) — homepage motion with an intelligent feel, kept as
   texture (no claims): a neural field behind the hero (canvas from site.js), orbit
   rings with a travelling arc behind the hero visual, headings that resolve word by
   word, a light sweep across each glass card as it arrives, a comet along the steps
   line, a scan beam over the console chart and a typed insight line in the console.
   All motion under prefers-reduced-motion: no-preference.
   ════════════════════════════════════════════════════════════════════════════ */
:root { --sweep: rgba(255, 255, 255, .11); }
:root[data-theme="light"] { --sweep: color-mix(in srgb, var(--brand) 13%, transparent); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --sweep: color-mix(in srgb, var(--brand) 13%, transparent); } }

/* Neural field */
/* The canvas only covers where the network shows (behind the visual), not the whole hero. */
.fx-neural { position: absolute; inset: 0 0 0 48%; z-index: -1; width: 52%; height: 100%; pointer-events: none; will-change: transform; }
@media (max-width: 760px) { .fx-neural { inset: 40% 0 0 0; width: 100%; height: 60%; } }
/* Over a canvas that redraws every frame, backdrop blur would re-blur every frame; these hero
   surfaces are near-opaque anyway, so they drop it. */
.fx-float, .fx-benefit { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Orbit rings behind the hero visual */
@media (min-width: 761px) {
  .fx-hero-visual::before, .fx-hero-visual::after {
    content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; border-radius: 50%; pointer-events: none; }
  .fx-hero-visual::before { width: 520px; height: 520px; margin: -260px 0 0 -260px;
    border: 1px dashed color-mix(in srgb, var(--c3) 38%, transparent); opacity: .55; }
  .fx-hero-visual::after { width: 640px; height: 640px; margin: -320px 0 0 -320px;
    background: conic-gradient(from 0deg, transparent 0 68%, color-mix(in srgb, var(--c2) 55%, transparent) 86%, color-mix(in srgb, var(--c3) 80%, #fff) 92%, transparent 94%);
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
            mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
    opacity: .75; }
}

/* Words + sweep + comet + scan + insight: base (static) styling */
.fx-steps::after { content: ''; position: absolute; top: 56px; left: 14%; right: 14%; height: 2px; z-index: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent 0 44%, color-mix(in srgb, var(--c3) 75%, #fff) 50%, transparent 56% 100%) 100% 0 / 300% 100% no-repeat;
  filter: drop-shadow(0 0 6px var(--c3)); }
.fx-cc-chart { position: relative; overflow: hidden; }
.fx-cc-chart::after { content: ''; position: absolute; top: 38px; bottom: 10px; left: -56px; width: 56px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c3) 9%, transparent) 70%, color-mix(in srgb, var(--c3) 26%, transparent));
  border-right: 1px solid color-mix(in srgb, var(--c3) 55%, transparent); }
.fx-cc-insight { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; font-size: 13px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c2) 13%, transparent), color-mix(in srgb, var(--c3) 7%, transparent));
  border: 1px solid color-mix(in srgb, var(--c2) 30%, transparent); }
.fx-cc-ins-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #fff; background: var(--tri);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c3) 50%, transparent); }
.fx-cc-ins-ic .i { width: 15px; height: 15px; }
.fx-cc-ins-k { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-2); }
.fx-cc-ins-b { display: grid; min-width: 0; }
.fx-cc-ins-b > * { grid-area: 1 / 1; }
.fx-cc-ins-ghost { visibility: hidden; }
.fx-cc-ins-t { color: var(--text); }
.fx-cc-ins-t::after { content: ''; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; border-radius: 1px; background: var(--c3); }
@media (max-width: 760px) {
  .fx-cc-insight { grid-template-columns: auto 1fr; font-size: 12.5px; padding: 9px 12px; }
  .fx-cc-ins-k { display: none; }
  .fx-steps::after { top: 40px; bottom: 40px; left: 50%; right: auto; width: 2px; height: auto; margin-left: -1px;
    background: linear-gradient(180deg, transparent 0 44%, color-mix(in srgb, var(--c3) 75%, #fff) 50%, transparent 56% 100%) 0 100% / 100% 300% no-repeat; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Orbits */
  .fx-hero-visual::before { animation: fxSpin 70s linear infinite; }
  .fx-hero-visual::after { animation: fxSpin 11s linear infinite; }
  @keyframes fxSpin { to { transform: rotate(1turn); } }

  /* Headings resolve word by word */
  .fx-words .fx-wd { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(.35em); }
  .fx-words.rv-in .fx-wd { animation: fxWord .75s var(--ease) forwards; animation-delay: calc(var(--i) * 70ms + 80ms); }
  @keyframes fxWord { to { opacity: 1; filter: blur(0); transform: none; } }

  /* Light sweep across each glass card as it arrives */
  .fx-hero ~ .section .card {
    background:
      linear-gradient(110deg, transparent 38%, var(--sweep) 50%, transparent 62%) 0 0 / 260% 100% no-repeat,
      linear-gradient(90deg, transparent 8%, rgba(255, 255, 255, .28) 50%, transparent 92%) 50% 0 / 100% 1px no-repeat,
      linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 38%),
      var(--g-fill);
  }
  .fx-hero ~ .section .card.rv-in { animation: fxSweep 1.5s var(--ease) .2s 1 both; }
  @keyframes fxSweep { from { background-position: 100% 0, 50% 0, 0 0; } to { background-position: 0 0, 50% 0, 0 0; } }

  /* Comet along the steps line, scan beam over the chart, insight caret */
  .fx-steps.in::after { opacity: 1; animation: fxComet 3.6s ease-in-out 1.6s infinite; }
  @keyframes fxComet { from { background-position: 100% 0; } to { background-position: 0 0; } }
  .fx-cc-stage.in .fx-cc-chart::after { opacity: 1; animation: fxScan 5.5s linear 2.4s infinite; }
  @keyframes fxScan { from { left: -56px; } to { left: 100%; } }
  .fx-cc-ins-t::after { animation: fxCaret 1s steps(1) infinite; }
  @keyframes fxCaret { 50% { opacity: 0; } }
  .fx-cc-insight.typing .fx-cc-ins-ic { animation: fxThink 1.2s ease-out infinite; }
  @keyframes fxThink { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c3) 55%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
  .fx-steps.in::after { animation-name: fxCometV; }
  @keyframes fxCometV { from { background-position: 0 100%; } to { background-position: 0 0; } }
}

/* ── pager tap targets: the dots stay small, the buttons meet the 40px phone touch target ── */
.fx-pg { width: 32px; height: 40px; }

/* ── Website offers (ADR-025, W1): only while a genuine offer is live. The regular price struck through, the offer
   price, the offer's name, saving, real end date and terms; the site-wide bar above the header. ── */
.offer-bar { color:#fff; font-size:14px; background:linear-gradient(90deg, color-mix(in srgb, var(--brand) 86%, #000), color-mix(in srgb, var(--brand) 62%, #6d28d9)); }
.offer-bar[hidden] { display:none; }
.offer-bar-inner { display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px; padding-top:6px; padding-bottom:6px; }
.offer-bar-tag { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:999px; background:rgba(255,255,255,.18); }
.offer-bar-text { flex:1 1 280px; }
.offer-bar-text b { font-weight:800; }
.offer-bar-cta { color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px; min-height:44px; display:inline-flex; align-items:center; }
.offer-bar-x { width:44px; height:44px; border:0; border-radius:10px; background:transparent; color:#fff; font-size:22px; line-height:1; cursor:pointer; }
.offer-bar-x:hover, .offer-bar-x:focus-visible { background:rgba(255,255,255,.16); }
@media (max-width: 600px) { .offer-bar-tag { display:none; } .offer-bar-inner { gap:0 10px; padding-top:4px; padding-bottom:4px; } .offer-bar-text { flex-basis:calc(100% - 60px); font-size:13px; } .offer-bar-cta { order:3; min-height:36px; } .offer-bar-x { order:2; margin-left:auto; } }

/* ── Compare plans (W1): price + base + live offer in the header, module and limit groups, a CTA row; phones show one
   plan beside the feature names, chosen with tabs (no sideways scrolling). ── */
.compare .cmp-name { display:block; font-size:16px; font-weight:800; }
.compare td.lim { font-weight:600; color:var(--text); }
.compare tfoot td { padding-top:16px; border-bottom:none; }
@media (max-width: 700px) {
  .compare { min-width:0; }
  .compare[data-sel="0"] [data-col]:not([data-col="0"]) { display:none; }
  .compare[data-sel="1"] [data-col]:not([data-col="1"]) { display:none; }
  .compare[data-sel="2"] [data-col]:not([data-col="2"]) { display:none; }
  .compare[data-sel="3"] [data-col]:not([data-col="3"]) { display:none; }
  .compare[data-sel="4"] [data-col]:not([data-col="4"]) { display:none; }
  .compare[data-sel="5"] [data-col]:not([data-col="5"]) { display:none; }
  .compare th, .compare td { padding:11px 10px; }
}

/* ── ROI calculator (W1): the visitor's own numbers (every assumption a field), the plan's real price, the arithmetic
   shown. Inputs left, the result beside them (stacked on phones). Height reserved so it doesn't push the page. ── */
@media print { .nav, .offer-bar, footer, .roi-inputs, .roi-cta, .roi-quote, .cta-band { display:none !important; }   }
/* ── Pricing skeleton (W1): the plans' space is held while they load, so nothing below them jumps (CLS). ── */
/* Real cards are 957–1,153 px tall at every width (measured 2026-10-22); 900 px never overshoots them. */
@keyframes price-skel-pulse { from { opacity:.55; } to { opacity:1; } }

/* ── /pricing for two audiences (ADR-060) ── */
.fam-people { margin:0; font-size:13px; font-weight:600; color:var(--brand-text); }
.fam-notify-btn { margin-top:6px; }
 
  
 
  

/* Add-ons on /pricing (ADR-065): only add-ons on sale; phone-first, own grid (not .fx-grid — its bento widens card 1) */
.ao-tags { list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:auto 0 0; padding:6px 0 0; }
.ao-tags li { font-size:12px; font-weight:600; padding:2px 9px; border-radius:999px; background:var(--surface-2); color:var(--brand-text); border:1px solid var(--border); }
/* ── ADR-156: the measured trust strip (services/siteTrustService.js). The smart top bar's styles are in site/topbar.css,
   linked only on pages that show the bar. ── */
.ts-strip { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 14px; }
.ts-i { display:flex; min-width:0; }
.ts-i > a, .ts-i > .ts-ico + .ts-t, .ts-i > a .ts-t { color:inherit; }
.ts-i > a { display:inline-flex; align-items:center; gap:10px; min-height:32px; text-decoration:none; }
.ts-i > a:hover .ts-t b { text-decoration:underline; text-underline-offset:3px; }
.ts-i:not(:has(> a)) { align-items:center; gap:10px; min-height:32px; }
.ts-ico { flex:none; width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--brand) 12%, var(--surface)); color:var(--brand-text); }
.ts-ico .i { width:16px; height:16px; }
.ts-t { font-size:14px; line-height:1.35; color:var(--muted); }
.ts-t b { color:var(--text); font-weight:800; }
.ts-i.is-live[data-state="operational"] .ts-ico { background:color-mix(in srgb, var(--ok) 14%, var(--surface)); color:var(--ok); }
.ts-i.is-live[data-state="degraded"] .ts-ico { background:#fef3c7; color:#92400e; }
.ts-i.is-live[data-state="outage"] .ts-ico { background:#fee2e2; color:#b91c1c; }
.ts-i.is-fact .ts-ico { background:color-mix(in srgb, var(--text) 7%, var(--surface)); color:var(--text); }
.ts-wrap { margin-top:18px; }
.ts-chips { justify-content:flex-start; gap:8px; }
.aud-hero .ts-chips, .pg-hero-solo .ts-chips { justify-content:center; }
.ts-chips .ts-i { border:1px solid var(--border); border-radius:999px; background:var(--surface); padding:2px 12px 2px 3px; }
.ts-chips .ts-ico { width:26px; height:26px; }
.ts-chips .ts-t { font-size:13px; }
@media (max-width: 640px) {  .ts-t { font-size:13px; } }