/* 2026-10-31 (ADR-032 slimming): Homepage-only rules (the logo intro, the trust strip band) — moved out of the shared site.css / site-pages.css (every page downloads those) in their original order, before this file's own rules. */
.related { margin-top:44px; padding-top:28px; border-top:1px solid var(--border); }
.related h3 { font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:14px; }
.intro { display: none; }
html[data-intro] .intro { display: block; }
.intro {
  position: fixed; inset: 0; z-index: 9999; overflow: hidden; contain: strict; cursor: pointer;
  --ix-bg: radial-gradient(120% 90% at 50% 42%, #0e1833 0%, #070b16 58%, #04060d 100%);
  --ix-grid: rgba(56, 189, 248, .07); --ix-trace: #38bdf8; --ix-glow: #22d3ee; --ix-part: #a5f3fc;
  --ix-node: #e0f2fe; --ix-violet: #8b5cf6; --ix-pulse: #ffffff; --ix-ink: #eaf2ff; --ix-muted: rgba(234, 242, 255, .62);
  --ix-glass: rgba(255, 255, 255, .055); --ix-glass-brd: rgba(165, 243, 252, .28);
  --ix-halo: radial-gradient(circle, rgba(34, 211, 238, .55) 0%, rgba(124, 92, 255, .30) 36%, transparent 68%);
  color: var(--ix-ink);
}
:root[data-theme="light"] .intro {
  --ix-bg: radial-gradient(120% 90% at 50% 42%, #ffffff 0%, #eef3ff 58%, #e3eafb 100%);
  --ix-grid: rgba(37, 99, 235, .07); --ix-trace: #2563eb; --ix-glow: #06b6d4; --ix-part: #0ea5e9;
  --ix-node: #1d4ed8; --ix-violet: #7c3aed; --ix-pulse: #7c3aed; --ix-ink: #0d1321; --ix-muted: rgba(13, 19, 33, .6);
  --ix-glass: rgba(255, 255, 255, .6); --ix-glass-brd: rgba(37, 99, 235, .18);
  --ix-halo: radial-gradient(circle, rgba(14, 165, 233, .32) 0%, rgba(124, 92, 255, .16) 36%, transparent 68%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .intro {
    --ix-bg: radial-gradient(120% 90% at 50% 42%, #ffffff 0%, #eef3ff 58%, #e3eafb 100%);
    --ix-grid: rgba(37, 99, 235, .07); --ix-trace: #2563eb; --ix-glow: #06b6d4; --ix-part: #0ea5e9;
    --ix-node: #1d4ed8; --ix-violet: #7c3aed; --ix-pulse: #7c3aed; --ix-ink: #0d1321; --ix-muted: rgba(13, 19, 33, .6);
    --ix-glass: rgba(255, 255, 255, .6); --ix-glass-brd: rgba(37, 99, 235, .18);
    --ix-halo: radial-gradient(circle, rgba(14, 165, 233, .32) 0%, rgba(124, 92, 255, .16) 36%, transparent 68%);
  }
}
.intro-bg { position: absolute; inset: 0; background: var(--ix-bg); transition: opacity .42s var(--ease); }
.intro-bg::after { content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(var(--ix-grid) 1px, transparent 1px), linear-gradient(90deg, var(--ix-grid) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(60% 55% at 50% 45%, #000 0%, transparent 75%);
  mask-image: radial-gradient(60% 55% at 50% 45%, #000 0%, transparent 75%); }
.intro-center { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: clamp(8px, 2.2vmin, 18px); }
.intro-stage { position: relative; width: min(74vmin, 420px); aspect-ratio: 1; }
.intro-fx { position: absolute; inset: 0; transition: opacity .42s var(--ease); }
.intro-net { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intro-glass { position: absolute; left: 28%; top: 28%; width: 44%; height: 44%; border-radius: 30%;
  background: var(--ix-glass); border: 1px solid var(--ix-glass-brd);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 20px 60px -20px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  opacity: 0; transform: scale(.86); }
.intro-glow { position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; border-radius: 50%;
  background: var(--ix-halo); opacity: 0; transform: scale(1.25); }
.intro-fly { position: absolute; left: 35%; top: 35%; width: 30%; height: 30%; perspective: 800px; will-change: transform; }
.intro-mark { position: relative; width: 100%; height: 100%; border-radius: 25%; overflow: hidden; opacity: 0;
  transform: rotateY(-34deg) rotateX(14deg) scale(.76);
  box-shadow: 0 0 0 1px rgba(165, 243, 252, .35), 0 0 22px rgba(34, 211, 238, .55), 0 0 60px rgba(124, 92, 255, .35); }
.intro-mark svg { display: block; width: 100%; height: 100%; }
.intro-scan { position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: repeating-linear-gradient(180deg, rgba(165, 243, 252, .30) 0 1px, transparent 1px 4px); }
.intro-streak { position: absolute; top: -20%; left: -60%; width: 45%; height: 140%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), rgba(165, 243, 252, .5), transparent);
  transform: translateX(0) skewX(-20deg); }
.intro-wm { transition: opacity .42s var(--ease); font-family: var(--display); font-weight: 800;
  font-size: clamp(18px, 4.4vmin, 30px); letter-spacing: -.01em; color: var(--ix-ink); white-space: nowrap; }
.intro-wm span { display: inline-block; opacity: 0; letter-spacing: .38em; transform: translateY(6px); }
.intro-wm b { font-weight: inherit; background: linear-gradient(120deg, #3b82f6, #22d3ee 55%, #8b5cf6);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.intro-skip-wrap { position: absolute; left: 0; right: 0; bottom: max(22px, env(safe-area-inset-bottom)); display: flex;
  justify-content: center; transition: opacity .3s var(--ease); }
.intro-skip { font: inherit; font-size: 12.5px; letter-spacing: .04em; color: var(--ix-muted); background: var(--ix-glass);
  border: 1px solid var(--ix-glass-brd); border-radius: 999px; padding: 8px 16px; min-height: 36px; cursor: pointer; opacity: 0;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.intro-net .ix-tr path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.intro-net .ix-tr .g { stroke: var(--ix-glow); stroke-width: 6; opacity: .28; }
.intro-net .ix-tr .c { stroke: var(--ix-trace); stroke-width: 1.7; }
.intro-net .ix-pulse { fill: none; stroke: var(--ix-pulse); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: .09 .91; stroke-dashoffset: .09; opacity: 0; }
.intro-net .ix-n { fill: var(--ix-node); stroke: var(--ix-glow); stroke-width: 3; stroke-opacity: .45; opacity: 0;
  transform-box: fill-box; transform-origin: center; }
.intro-net .ix-e { fill: var(--ix-glow); opacity: 0; transform-box: fill-box; transform-origin: center; }
.intro-net .ix-p { fill: var(--ix-part); stroke: var(--ix-glow); stroke-width: 3.5; stroke-opacity: .4; opacity: 0;
  transform-box: fill-box; transform-origin: center; }
.intro-net .ix-ol path { fill: none; stroke: var(--ix-glow); stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; }
.intro-net .ix-ring { fill: none; stroke: var(--ix-glow); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.intro-net .ix-ring.r2 { stroke: var(--ix-violet); }
html[data-intro] .ix-p { animation: ixPart .56s cubic-bezier(.2, .8, .2, 1) var(--d) both; }
html[data-intro] .ix-n { animation: ixPop .5s var(--ease) var(--d) both; }
html[data-intro] .ix-tr path { animation: ixDraw .7s cubic-bezier(.45, .05, .35, 1) var(--d) forwards, ixDim .4s ease 2.3s forwards; }
html[data-intro] .ix-pulse { animation: ixPulse .9s cubic-bezier(.4, 0, .2, 1) var(--d) both; }
html[data-intro] .ix-e { animation: ixPop .35s var(--ease) var(--d) both; }
html[data-intro] .ix-ol path { animation: ixDraw .55s cubic-bezier(.45, .05, .35, 1) var(--d) forwards; }
html[data-intro] .ix-ol { animation: ixFade .4s ease 1.85s forwards; }
html[data-intro] .ix-ring.r1 { animation: ixRing .8s cubic-bezier(.2, .7, .2, 1) 1.5s both; }
html[data-intro] .ix-ring.r2 { animation: ixRing .8s cubic-bezier(.2, .7, .2, 1) 1.72s both; }
html[data-intro] .intro-glass { animation: ixGlass .45s var(--ease) 1.35s both; }
html[data-intro] .intro-glow { animation: ixGlow 1s var(--ease) 1.5s both; }
html[data-intro] .intro-mark { animation: ixMark .65s cubic-bezier(.2, .8, .2, 1) 1.5s both; }
html[data-intro] .intro-scan { animation: ixScan .9s ease 1.5s both; }
html[data-intro] .intro-streak { animation: ixStreak .5s cubic-bezier(.4, 0, .2, 1) 1.86s both; }
html[data-intro] .intro-wm span { animation: ixWm .55s var(--ease) 1.9s both; }
html[data-intro] .intro-skip { animation: ixFadeIn .4s ease .5s both; }
html[data-intro="out"] .intro { pointer-events: none; cursor: auto; }
html[data-intro="out"] .intro-bg, html[data-intro="out"] .intro-fx,
html[data-intro="out"] .intro-wm, html[data-intro="out"] .intro-skip-wrap { opacity: 0; }
.intro-quick .intro-fly { transition: opacity .24s ease; }
.intro-quick .intro-bg, .intro-quick .intro-fx, .intro-quick .intro-wm { transition-duration: .24s; }
html[data-intro="out"] .intro-quick .intro-fly { opacity: 0; }
html[data-intro-lite] .ix-p.p2, html[data-intro-lite] .ix-ring.r2,
html[data-intro-lite] .intro-scan, html[data-intro-lite] .ix-tr .g { display: none; }
html[data-intro-lite] .intro-glass, html[data-intro-lite] .intro-skip { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media print { .intro { display: none !important; } }
.fx-bars i.hot { background: linear-gradient(180deg, #f43f5e, #fb923c); opacity: 1; }
.ts-band { padding:14px 0 6px; }
.ts-band .ts-strip { padding:12px 16px; border-radius:16px; border:1px solid var(--border); background:var(--surface); box-shadow:var(--hx-card-shadow, 0 1px 2px rgba(0,0,0,.05)); }
.ts-note { margin:8px 0 0; text-align:center; font-size:12.5px; color:var(--muted); }
@media (max-width: 640px) {
  .ts-band .ts-strip { justify-content:flex-start; }
}
.intro-mark { border-radius: 0; overflow: visible; box-shadow: none;
  -webkit-mask: url('/site/img/brand/brand-mark-512.webp') center / contain no-repeat;
  mask: url('/site/img/brand/brand-mark-512.webp') center / contain no-repeat; }
.intro-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.intro-fly { left: 29%; top: 29%; width: 42%; height: 42%;
  filter: drop-shadow(0 0 16px rgba(34, 211, 238, .5)) drop-shadow(0 0 38px rgba(124, 92, 255, .32)); }
.intro-net .ix-ol { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   HOMEPAGE v14 (2026-10-17) — the "One Platform to Manage Your Entire IT Business" design.
   Loaded by the homepage only (linked from its mainHtml). Navy hero band in both themes (as in the
   design); everything else uses the site tokens, so light reads like the mockup and dark is its
   dark twin. Class prefix hx- (sections) and m- (the coded mini previews inside feature cards).
   All motion is gated on prefers-reduced-motion: no-preference.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

.hx { --hx-navy-1: #061331; --hx-navy-2: #0a1f5c; --hx-navy-3: #0b2c86; --hx-blue: #2563eb; --hx-sky: #38bdf8; --hx-ink-on-dark: #eaf1ff;
  --hx-muted-on-dark: #b9c8ea; --hx-card-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 14px 32px -24px rgba(15, 23, 42, .45); }
:root[data-theme="dark"] .hx, .hx { --hx-soft: color-mix(in srgb, var(--brand) 6%, var(--bg)); }
.hx .wrap { position: relative; }
.hx-sec { padding: 72px 0; }
.hx-sec.hx-soft { background: var(--hx-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.hx-head { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.hx-head h2 { margin: 0 0 10px; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.02em; }
.hx-head h2 em { font-style: normal; color: var(--brand-text); }
.hx-head p { margin: 0 auto; max-width: 640px; color: var(--muted); font-size: 16.5px; }
.hx-cap { margin: 18px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }

/* ── Buttons on the navy bands ── */
.hx .btn.hx-on-dark { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .38); box-shadow: none; }
.hx .btn.hx-on-dark:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .6); }
.hx .btn .i { width: 17px; height: 17px; }

/* ── Hero ── */
.hx-hero { position: relative; overflow: hidden; padding: 54px 0 58px; color: var(--hx-ink-on-dark);
  background:
    radial-gradient(820px 460px at 80% 28%, rgba(56, 132, 255, .38), transparent 62%),
    radial-gradient(600px 380px at 6% 96%, rgba(124, 92, 255, .26), transparent 60%),
    linear-gradient(160deg, var(--hx-navy-1) 0%, var(--hx-navy-2) 56%, var(--hx-navy-3) 100%); }
.hx-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.2px); background-size: 26px 26px;
  -webkit-mask: radial-gradient(70% 80% at 70% 40%, #000, transparent); mask: radial-gradient(70% 80% at 70% 40%, #000, transparent); }
.hx-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 36px; align-items: center; }
.hx-hero h1 { margin: 0 0 16px; color: #fff; font-size: clamp(32px, 3.7vw, 50px); line-height: 1.06; letter-spacing: -.025em; }
.hx-hero h1 .hx-grad { display: inline-block; font-size: 1.14em; background: linear-gradient(92deg, #60a5fa 0%, #38bdf8 55%, #22d3ee 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hx-lede { max-width: 540px; margin: 0; color: var(--hx-muted-on-dark); font-size: 17px; line-height: 1.6; }
.hx-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hx-cta .btn.lg { padding: 13px 20px; }
.hx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: 18px 34px; margin: 36px 0 0; padding: 0; list-style: none; }
.hx-stats b { display: block; color: #fff; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hx-stats span { display: block; margin-top: 2px; color: var(--hx-muted-on-dark); font-size: 13px; }
.hx-chips { position: absolute; top: 0; right: 0; z-index: 4; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hx-chips li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #fff;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hx-chips .i { width: 15px; height: 15px; color: #7dd3fc; }

.hx-visual { position: relative; min-height: 430px; padding-top: 52px; }
.hx-robot { position: absolute; left: -9%; top: 176px; z-index: 3; width: 33%; max-width: 210px; height: auto; filter: drop-shadow(0 24px 40px rgba(2, 8, 30, .6)) drop-shadow(0 0 30px rgba(56, 189, 248, .3)); }
.hx-laptop { position: relative; z-index: 2; margin-left: 21%; }
.hx-screen { position: relative; padding: 10px; border-radius: 16px 16px 6px 6px; background: linear-gradient(180deg, #1c2233, #0d111c); border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(56, 189, 248, .12), 0 0 60px -10px rgba(56, 132, 255, .45); }
.hx-base { height: 14px; margin: 0 -7%; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #c7cedc, #8c96aa); box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .7); }
.hx-base::after { content: ''; display: block; width: 18%; height: 5px; margin: 0 auto; border-radius: 0 0 8px 8px; background: #7a8397; }

/* The console preview inside the laptop: a light UI, like the product's light theme. */
.hx-ui { border-radius: 8px; overflow: hidden; background: #f4f7fd; color: #0d1321; font-size: 11px; }
.hx-ui-bar { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #fff; border-bottom: 1px solid #e6ebf5; }
.hx-ui-bar img { width: 16px; height: 16px; }
.hx-ui-bar b { font-size: 11px; color: #0d1321; }
.hx-ui-bar .hx-ui-live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: #047857; }
.hx-ui-bar .hx-ui-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #10b981; }
.hx-ui-body { padding: 10px; display: grid; grid-template-areas: 'pane'; }
/* Console views (Overview / Assets / Tickets / AMC): every pane shares one grid cell, so switching never
   changes the laptop's height; the hidden ones are visibility:hidden (out of the a11y tree too). */
.hx-ui-pane { grid-area: pane; display: grid; gap: 8px; align-content: start; min-width: 0; transition: opacity .3s ease, transform .3s ease; }
.hx-ui-pane:not(.on) { visibility: hidden; opacity: 0; transform: translateY(4px); }
.hx-ui-tabs { display: flex; gap: 2px; padding: 0 8px; background: #fff; border-bottom: 1px solid #e6ebf5; }
/* ADR-210: hold the tab bar's room until home.js reveals it (invisible, unfocusable), so the preview doesn't drop when it
   arrives after the first paint. !important only because site.css hides every [hidden] with !important. */
.hx-ui-tabs[hidden] { display: flex !important; visibility: hidden; }
.hx-ui-tabs button { position: relative; padding: 6px 9px 7px; border: 0; background: none; color: #566178; font: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer; }
.hx-ui-tabs button[aria-selected="true"] { color: #1d4ed8; }
.hx-ui-tabs button[aria-selected="true"]::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 2px; border-radius: 2px; background: #2563eb; }
.hx-ui-tabs button:hover { color: #0d1321; }
.hx-ui-tabs button:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; border-radius: 4px; }
.hx-ui-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hx-ui-head b { margin-right: auto; font-size: 11.5px; color: #0d1321; }
.hx-ui-chip, .hx-st { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 700; font-style: normal; white-space: nowrap; background: #e0e9ff; color: #1d4ed8; }
.hx-st { background: #eef2f8; color: #334155; }
.hx-ui-chip.ok, .hx-st.ok { background: #dcfce7; color: #047857; }
.hx-ui-chip.warn, .hx-st.warn { background: #fef3c7; color: #92400e; }
.hx-st.bad { background: #fee2e2; color: #b91c1c; }
.hx-ui-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 8px; background: #fff; border: 1px solid #e6ebf5; font-size: 10px; }
.hx-ui-table th { padding: 5px 6px; background: #f8fafc; color: #566178; font-weight: 600; text-align: left; }
.hx-ui-table td { padding: 6px; border-top: 1px solid #eef2f8; color: #0d1321; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-ui-table td:first-child { font-weight: 700; }
.hx-ui-table td.warn { color: #92400e; font-weight: 700; } .hx-ui-table td.bad { color: #b91c1c; font-weight: 700; }
.hx-ui-table th:nth-child(1), .hx-ui-table td:nth-child(1) { width: 19%; } .hx-ui-table th:nth-child(5), .hx-ui-table td:nth-child(5) { width: 19%; }
.hx-ui-tix, .hx-ui-amc { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.hx-ui-tix li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 56px; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px; background: #fff; border: 1px solid #e6ebf5; font-size: 10.5px; }
.hx-ui-tix li > span, .hx-ui-amc li > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #0d1321; }
.hx-ui-tix small, .hx-ui-amc small { display: block; overflow: hidden; text-overflow: ellipsis; color: #566178; font-size: 9px; }
.hx-sla { font-variant-numeric: tabular-nums; font-weight: 700; color: #1d4ed8; }
.hx-ui-tix .hx-sla { text-align: right; font-size: 10px; }
.hx-sla.warn { color: #b91c1c; }
.hx-ui-amc li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: #fff; border: 1px solid #e6ebf5; font-size: 10.5px; }
.hx-ui-amc li > span b { color: #0d1321; }
.hx-ui-ring { --p: 50; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#2563eb calc(var(--p) * 1%), #e2e8f0 0); }
.hx-ui-ring b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #0d1321; font-size: 8px; font-weight: 800; }

/* The guided tour card — sits under the laptop (never over the view it is describing); the assistant card
   steps aside while touring. */
.hx-tour { position: relative; z-index: 5; margin: 26px 0 0 21%; padding: 14px 16px; border-radius: 14px; color: #fff;
  background: linear-gradient(160deg, rgba(20, 40, 110, .97), rgba(12, 24, 70, .98)); border: 1px solid rgba(125, 211, 252, .5);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .75), 0 0 34px -6px rgba(56, 189, 248, .55); }
.hx-tour:focus { outline: none; }
.hx-tour:focus-visible { outline: 2px solid #7dd3fc; outline-offset: 2px; }
.hx-visual.touring .hx-chat { display: none; }
@media (min-width: 641px) {
  .hx-tour { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: end; }
  .hx-tour-top, .hx-tour > [aria-live] { grid-column: 1 / -1; }
  .hx-tour-dots { margin: 8px 0 0; align-self: center; }
  .hx-tour p { min-height: 2.9em; }
  .hx-tour-end { grid-column: 1 / -1; }
}
.hx-tour-top { display: flex; align-items: center; justify-content: space-between; }
.hx-tour-n { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9fd8ff; }
.hx-tour-x { display: grid; place-items: center; width: 28px; height: 28px; margin: -4px -4px 0 0; border: 0; border-radius: 8px; background: transparent; color: #dbe7ff; cursor: pointer; }
.hx-tour-x:hover, .hx-tour-x:focus-visible { background: rgba(255, 255, 255, .14); outline: none; }
.hx-tour-x .i { width: 16px; height: 16px; }
.hx-tour h3 { margin: 6px 0 4px; font-size: 15px; color: #fff; }
.hx-tour p { margin: 0; min-height: 4.4em; font-size: 12.5px; line-height: 1.45; color: #c7d6f5; }
.hx-tour-dots { display: flex; gap: 5px; margin: 10px 0; }
.hx-tour-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .28); transition: width .25s ease, background .25s ease; }
.hx-tour-dots i.on { width: 20px; background: #38bdf8; }
.hx-tour-nav, .hx-tour-end { display: flex; gap: 6px; }
.hx-tour-end { margin-top: 8px; }
.hx-tour-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 11px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .3); background: transparent;
  color: #fff; font: inherit; font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; }
.hx-tour-btn:hover, .hx-tour-btn:focus-visible { background: rgba(255, 255, 255, .12); outline: none; border-color: rgba(255, 255, 255, .6); }
.hx-tour-btn.pri { margin-left: auto; background: #2563eb; border-color: #2563eb; }
.hx-tour-btn.pri:hover, .hx-tour-btn.pri:focus-visible { background: #1d4ed8; }
.hx-tour-btn:disabled { opacity: .45; cursor: default; }
.hx-tour-end .btn { padding: 7px 12px; font-size: 12.5px; }
@media (max-width: 640px) {
  .hx-tour { margin: 14px 0 0; }
  .hx-ui-tabs button { padding: 6px 7px 7px; }
  .hx-ui-table th:nth-child(4), .hx-ui-table td:nth-child(4) { display: none; }
}
.hx .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.hx-kpi { padding: 8px; border-radius: 8px; background: #fff; border: 1px solid #e6ebf5; }
.hx-kpi small { display: block; color: #566178; font-size: 9.5px; }
.hx-kpi b { display: block; margin-top: 3px; font-size: 17px; font-weight: 800; color: #0d1321; font-variant-numeric: tabular-nums; }
.hx-kpi em { font-style: normal; font-size: 9.5px; font-weight: 700; color: #047857; }
.hx-kpi em.dn { color: #b91c1c; }
.hx-panels { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7px; }
.hx-panel { padding: 8px; border-radius: 8px; background: #fff; border: 1px solid #e6ebf5; }
.hx-panel h4 { margin: 0 0 6px; font-size: 10px; color: #334155; }
.hx-donut { --p: 94; position: relative; width: 74px; height: 74px; margin: 4px auto 0; border-radius: 50%;
  background: conic-gradient(#2563eb calc(var(--p) * 1%), #e2e8f0 0); display: grid; place-items: center; }
.hx-donut::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.hx-donut b { position: relative; font-size: 15px; font-weight: 800; color: #0d1321; }
.hx-bars { display: flex; align-items: flex-end; gap: 6px; height: 74px; padding-top: 4px; }
.hx-bars i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #38bdf8, #2563eb); }
.hx-bars i:nth-child(3n) { background: linear-gradient(180deg, #a78bfa, #6d28d9); }
.hx-legend { display: flex; gap: 10px; margin-top: 6px; font-size: 9px; color: #566178; }
.hx-legend span::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #2563eb; }
.hx-legend span:nth-child(2)::before { background: #94a3b8; } .hx-legend span:nth-child(3)::before { background: #7c3aed; }

/* Assistant card over the laptop (the real site assistant — its buttons ask it the question). */
/* Its top edge stays below the Overview panel headings (it may cover chart art, never a label). */
.hx-chat { position: absolute; right: -4%; bottom: -58px; z-index: 4; width: 232px; padding: 11px 12px 10px; border-radius: 14px; color: #fff;
  background: linear-gradient(160deg, rgba(20, 40, 110, .92), rgba(12, 24, 70, .95)); border: 1px solid rgba(125, 211, 252, .35);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .7), 0 0 30px -8px rgba(56, 189, 248, .45); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .hx-chat { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } }
.hx-chat-h { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; }
.hx-chat-h img { width: 26px; height: 26px; }
.hx-chat-h:focus-visible { outline: 2px solid #7dd3fc; outline-offset: 3px; border-radius: 6px; }
.hx-chat-chev { width: 14px; height: 14px; margin-left: auto; color: #9fd8ff; transform: rotate(90deg); transition: transform .25s ease; }
/* Tucked: only the header shows (desktop, while the preview shows a view whose lower-right holds data). */
.hx-chat-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s ease; }
.hx-chat-body > div { min-height: 0; overflow: hidden; }
.hx-chat.min .hx-chat-body { grid-template-rows: 0fr; }
.hx-chat.min .hx-chat-body > div { visibility: hidden; transition: visibility 0s .3s; }
.hx-chat.min .hx-chat-chev { transform: rotate(-90deg); }
.hx-chat p { margin: 4px 0 6px; color: #c7d6f5; font-size: 12px; }
.hx-chat ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.hx-chat ul button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .06);
  color: #eaf1ff; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.hx-chat ul button:hover, .hx-chat ul button:focus-visible { background: rgba(255, 255, 255, .14); outline: none; }
.hx-chat ul button .i { width: 14px; height: 14px; color: #7dd3fc; flex: none; }
.hx-chat-h:hover .hx-chat-chev { color: #fff; }
.hx-chat-note { margin: 6px 0 0 !important; font-size: 12px !important; color: #9fb3dd !important; } /* W4: ≥ 12 px body text */

@media (max-width: 1060px) {
  .hx-hero-in { grid-template-columns: minmax(0, 1fr); }
  .hx-visual { max-width: 640px; margin: 10px auto 0; width: 100%; }
}
@media (max-width: 640px) {
  .hx-hero { padding-top: 36px; }
  .hx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-visual { min-height: 0; padding-top: 0; }
  .hx-chips { position: static; justify-content: flex-start; margin-bottom: 14px; }
  .hx-robot { width: 27%; left: -3%; top: 104px; }
  .hx-laptop { margin-left: 19%; }
  .hx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-chat { position: relative; right: auto; bottom: auto; width: auto; margin-top: 14px; }
}

/* ── Module strip ── */
.hx-mods { position: relative; overflow-x: clip; background: var(--bg); border-bottom: 1px solid var(--border); }
.hx-mods-in { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; padding: 22px 0 20px; }
.hx-mods ul { display: flex; flex: 1; min-width: 0; gap: 4px; margin: 0; padding: 0; list-style: none; }
/* ADR-210: each module's share comes from the count the server writes on the list (--n), not from how many have arrived
   (the shares fill the row, so no space-between): with flex: 1 1 0 a page painted mid-download laid out 8 of the 10
   wider, then shrank them all (a layout shift). */
.hx-mods li { flex: 0 1 calc((100% + 4px) / var(--n, 10) - 4px); min-width: 0; display: flex; justify-content: center; }
.hx-mod { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 104px; padding: 4px 2px; border-radius: 12px; text-align: center;
  font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--text); text-decoration: none; }
.hx-mod:hover { color: var(--brand-text); }
.hx-mod:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hx-mod-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; color: #fff; background: var(--tone, linear-gradient(145deg, #3b82f6, #1d4ed8));
  box-shadow: 0 12px 22px -14px var(--tone-s, rgba(37, 99, 235, .9)), inset 0 1px 0 rgba(255, 255, 255, .3); transition: transform .2s ease; }
.hx-mod:hover .hx-mod-ic { transform: translateY(-3px); }
.hx-mod-ic .i { width: 25px; height: 25px; }
.hx-note { flex: none; display: flex; align-items: center; gap: 6px; margin-left: 8px; color: var(--text); transform: rotate(-7deg); }
.hx-note svg { width: 34px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.hx-note span { font-family: 'Segoe Script', 'Bradley Hand', 'Comic Sans MS', cursive; font-size: 15px; line-height: 1.3; }
@media (max-width: 1399px) { .hx-note { display: none; } }
@media (max-width: 980px) {
  .hx-mods ul { overflow-x: auto; justify-content: flex-start; gap: 6px; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
  .hx-mods ul::-webkit-scrollbar { display: none; }
  .hx-mods li { flex: none; }
  .hx-mod { width: 96px; scroll-snap-align: start; }
}

/* ── Feature cards ── */
.hx-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1200px) { .hx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 880px) { .hx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones: the 12 cards become a swipe rail (one card + a peek of the next) instead of a 4,700px column. */
@media (max-width: 560px) {
  .hx-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -16px; padding: 4px 16px 10px; scroll-padding: 0 16px; }
  .hx-grid::-webkit-scrollbar { display: none; }
  .hx-card { scroll-snap-align: start; }
  .hx-card:hover { transform: none; }
}
.hx-swipe { display: none; margin: 4px 0 0; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--muted); }
@media (max-width: 560px) { .hx-swipe { display: block; } }
/* position:relative keeps each card's screen-reader text (.sr-only, absolute) inside the phone swipe rail —
   anchored to .wrap instead, the off-screen cards' labels escaped the rail and stretched the page to 3,500px. */
.hx-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 12px 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--hx-card-shadow); scroll-margin-top: 96px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.hx-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
  box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 22px 44px -26px color-mix(in srgb, var(--brand) 60%, transparent); }
.hx-card:target { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent), var(--hx-card-shadow); }
.hx-card h3 { margin: 2px 2px 10px; font-size: 14.5px; letter-spacing: -.01em; color: var(--text); }
.hx-list { display: grid; gap: 5px; margin: 12px 2px 12px; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.35; color: var(--text); }
.hx-list li { display: flex; gap: 7px; align-items: flex-start; }
.hx-list li::before { content: ''; flex: none; width: 13px; height: 13px; margin-top: 1px; border-radius: 50%;
  background: color-mix(in srgb, var(--ok) 18%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.4' fill='none' stroke='%2310b981' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.hx-more { margin: auto 2px 0; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--brand-text); text-decoration: none; }
.hx-more .i { width: 14px; height: 14px; transition: transform .2s ease; }
.hx-card:hover .hx-more .i { transform: translateX(3px); }

/* Mini previews (illustrative; one per card) — dark app chrome, as in the design. */
.hx-shot { position: relative; height: 116px; overflow: hidden; border-radius: 10px; padding: 9px; color: #dbe7ff; font-size: 9.5px;
  background: radial-gradient(120% 90% at 85% 0%, rgba(56, 132, 255, .35), transparent 60%), linear-gradient(160deg, #0b1636, #0a2160); }
.m-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; margin-bottom: 4px; border-radius: 6px; background: rgba(255, 255, 255, .07); white-space: nowrap; overflow: hidden; }
.m-row b { font-weight: 700; color: #fff; }
.m-row span { overflow: hidden; text-overflow: ellipsis; }
.m-row .m-pill { margin-left: auto; flex: none; }
.m-pill { display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: 8.5px; font-weight: 800; letter-spacing: .02em; background: rgba(56, 189, 248, .22); color: #7dd3fc; }
.m-pill.ok { background: rgba(16, 185, 129, .22); color: #6ee7b7; } .m-pill.warn { background: rgba(251, 191, 36, .2); color: #fcd34d; } .m-pill.bad { background: rgba(248, 113, 113, .22); color: #fca5a5; }
.m-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #34d399; } .m-dot.warn { background: #fbbf24; } .m-dot.bad { background: #f87171; }
.m-meter { display: grid; grid-template-columns: 34px 1fr 26px; align-items: center; gap: 6px; margin: 6px 0; }
.m-meter i { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.m-meter i::before { content: ''; display: block; width: var(--v, 50%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #38bdf8, #2563eb); }
.m-meter.hot i::before { background: linear-gradient(90deg, #fbbf24, #f97316); }
.m-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; font-weight: 700; color: #fff; }
.m-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.m-tile { padding: 6px; border-radius: 7px; background: rgba(255, 255, 255, .08); }
.m-tile b { display: block; font-size: 15px; color: #fff; }
.m-ring { --p: 70; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#38bdf8 calc(var(--p) * 1%), rgba(255, 255, 255, .14) 0); }
.m-ring::before { content: attr(data-l); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #0b1a45; color: #fff; font-weight: 800; font-size: 10px; }
.m-flow { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 4px; }
.m-node { display: grid; place-items: center; gap: 3px; width: 46px; padding: 6px 2px; border-radius: 8px; background: rgba(255, 255, 255, .1); text-align: center; font-size: 8.5px; color: #e0eaff; }
.m-node .i { width: 16px; height: 16px; color: #7dd3fc; }
.m-node.on { background: rgba(37, 99, 235, .55); box-shadow: 0 0 14px rgba(56, 189, 248, .5); }
.m-link { flex: 1; height: 2px; margin: 0 2px; background: repeating-linear-gradient(90deg, #38bdf8 0 6px, transparent 6px 10px); }
.m-code { margin: 0; font: 9.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #c7d6f5; white-space: pre; }
.m-code .k { color: #7dd3fc; } .m-code .s { color: #86efac; } .m-code .c { color: #8193b6; }
.m-chart { width: 100%; height: 62px; display: block; }
.m-phone { position: absolute; right: 10px; top: 8px; bottom: -14px; width: 70px; border-radius: 12px; padding: 7px 5px; background: #0b1a45; border: 2px solid rgba(255, 255, 255, .25); }
.m-phone div { margin-bottom: 4px; padding: 4px 5px; border-radius: 5px; background: #2563eb; color: #fff; font-size: 8px; font-weight: 700; }
.m-phone div:nth-child(2) { background: #7c3aed; } .m-phone div:nth-child(3) { background: #0e7490; }
.m-map { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 16px 16px; }
.m-pin { position: absolute; width: 12px; height: 12px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #38bdf8; box-shadow: 0 0 10px rgba(56, 189, 248, .7); }
.m-pin.b { background: #a78bfa; } .m-pin.c { background: #34d399; }
.m-shield { width: 46px; height: 54px; margin: 0 auto; display: block; }

/* ── Built for (solutions) ── */
.hx-built { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1060px) { .hx-built { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hx-built { grid-template-columns: minmax(0, 1fr); } }
.hx-team { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--hx-card-shadow);
  color: inherit; text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
.hx-team:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
.hx-team:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hx-team .feat-ico { margin-bottom: 4px; }
.hx-team b { font-size: 15.5px; color: var(--text); }
.hx-team small { font-size: 13px; line-height: 1.5; color: var(--muted); }
.hx-team .hx-more { margin-top: auto; }
.hx-team[aria-current="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent), var(--hx-card-shadow); }

/* Feature filter (by team) — shown once home.js is running. */
.hx-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -12px 0 22px; }
/* ADR-211: its room is held until then (invisible, unfocusable), as the hero tabs' (ADR-210): revealed late on a busy machine
   with the cards in view, it pushed the whole grid down 72 px (one layout shift of 0.042). Same for Monthly / Yearly. */
.hx-filter[hidden], .hx-bill[hidden] { display: flex !important; visibility: hidden; }
.hx-filter button { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .15s ease, background .15s ease; }
.hx-filter button:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--border)); }
.hx-filter button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.hx-filter button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hx-filter-n { flex-basis: 100%; min-height: 1.4em; text-align: center; font-size: 12.5px; color: var(--muted); }

/* Feature drawer ("Learn more"). */
.hx-drawer { position: fixed; inset: 0; z-index: 90; }
.hx-drawer-scrim { position: absolute; inset: 0; background: rgba(4, 10, 30, .55); }
.hx-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); overflow-y: auto; overscroll-behavior: contain; padding: 26px 26px 30px;
  background: var(--surface); color: var(--text); border-left: 1px solid var(--border); box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .6); }
.hx-drawer-panel:focus { outline: none; }
.hx-drawer-x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; }
.hx-drawer-x:hover, .hx-drawer-x:focus-visible { border-color: var(--brand); outline: none; }
.hx-drawer-x .i { width: 18px; height: 18px; }
.hx-dr-k { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hx-drawer-panel h2 { margin: 6px 48px 10px 0; font-size: 24px; letter-spacing: -.02em; }
.hx-dr-desc { margin: 0 0 18px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.hx-drawer-panel h3 { margin: 22px 0 10px; font-size: 14px; letter-spacing: .02em; }
.hx-dr-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.hx-dr-steps li { position: relative; padding: 2px 0 0 38px; min-height: 28px; font-size: 14px; line-height: 1.45; counter-increment: s; }
.hx-dr-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand); color: var(--on-brand); font-size: 12.5px; font-weight: 800; }
.hx-dr-plans { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hx-dr-plans li { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.hx-dr-plans b { display: block; font-size: 13.5px; }
.hx-dr-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.hx-dr-chips span { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--ok) 16%, var(--surface)); color: var(--text); border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--border)); }
.hx-dr-chips span.none { background: var(--surface); border-color: var(--border); color: var(--muted); font-weight: 600; }
.hx-dr-note { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.hx-dr-kb { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hx-dr-kb a { display: flex; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--border); color: var(--text); font-size: 14px; text-decoration: none; }
.hx-dr-kb a::before { content: '?'; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 800; background: color-mix(in srgb, var(--brand) 16%, var(--surface)); color: var(--brand-text); }
.hx-dr-kb a:hover { color: var(--brand-text); }
.hx-dr-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
html.hx-lock, html.hx-lock body { overflow: hidden; }

/* ── Assistant + every-device panels ── */
.hx-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; }
@media (max-width: 980px) { .hx-duo { grid-template-columns: minmax(0, 1fr); } }
.hx-asst { position: relative; overflow: hidden; padding: 26px; border-radius: 18px; color: var(--hx-ink-on-dark);
  background: radial-gradient(500px 300px at 85% 30%, rgba(56, 132, 255, .4), transparent 62%), linear-gradient(160deg, var(--hx-navy-1), var(--hx-navy-2) 60%, var(--hx-navy-3));
  box-shadow: 0 30px 60px -36px rgba(2, 8, 30, .8); }
.hx-asst h3 { margin: 0 0 4px; color: #fff; font-size: 22px; }
.hx-asst > p { margin: 0 0 16px; max-width: 300px; color: var(--hx-muted-on-dark); font-size: 14px; }
.hx-asst ul { position: relative; z-index: 2; display: grid; gap: 6px; max-width: 290px; margin: 0; padding: 0; list-style: none; }
.hx-asst button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px;
  background: rgba(255, 255, 255, .05); color: #eaf1ff; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; transition: background .16s ease, border-color .16s ease; }
.hx-asst button:hover, .hx-asst button:focus-visible { background: rgba(255, 255, 255, .12); border-color: rgba(125, 211, 252, .45); outline: none; }
.hx-asst button .i { flex: none; width: 17px; height: 17px; color: #7dd3fc; }
.hx-asst-robot { position: absolute; right: -14px; top: 118px; width: 40%; max-width: 220px; height: auto; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .55)) drop-shadow(0 0 28px rgba(56, 189, 248, .3)); }
.hx-bubble { position: relative; z-index: 2; max-width: 300px; margin: 18px 0 0; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: #fff; color: #0d1321; font-size: 13px; line-height: 1.45; }
.hx-bubble b { display: block; margin-bottom: 2px; }
.hx-asst .hx-fine { position: relative; z-index: 2; margin: 12px 0 0; font-size: 12px; color: #9fb3dd; }
@media (max-width: 560px) { .hx-asst-robot { width: 38%; top: 16px; opacity: .9; } .hx-asst ul { max-width: 64%; } }

.hx-dev { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 18px; padding: 26px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--hx-card-shadow); }
@media (max-width: 560px) { .hx-dev { grid-template-columns: minmax(0, 1fr); } }
.hx-dev h3 { margin: 0 0 4px; font-size: 22px; }
.hx-dev > div > p { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.hx-dev .hx-list { font-size: 13.5px; gap: 8px; margin: 0 0 16px; }
.hx-dev .hx-list li::before { width: 15px; height: 15px; background-size: 12px; }
.hx-qr { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--brand) 40%, var(--border)); background: var(--surface-2); }
.hx-qr-code { flex: none; width: 76px; height: 76px; padding: 5px; border-radius: 8px; background: #fff; }
.hx-qr-code svg { display: block; width: 100%; height: 100%; }
.hx-qr small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.hx-qr b { display: block; font-size: 13.5px; color: var(--text); }
.hx-phone { position: relative; align-self: center; justify-self: center; width: 190px; height: 360px; padding: 10px; border-radius: 30px; background: #0b1020;
  box-shadow: 0 0 0 2px #2a3550, 0 30px 60px -30px rgba(2, 8, 30, .7), 0 0 40px -12px color-mix(in srgb, var(--brand) 60%, transparent); }
.hx-phone-ui { height: 100%; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; background: linear-gradient(180deg, #1d4ed8 0, #2563eb 34%, #f4f7fd 34.1%); color: #0d1321; font-size: 10px; }
.hx-phone-top { padding: 22px 12px 10px; color: #fff; }
.hx-phone-top b { display: block; font-size: 14px; }
.hx-phone-top small { color: #dbeafe; font-size: 10px; }
.hx-phone-body { flex: 1; min-height: 0; display: grid; grid-template-areas: 'scr'; padding: 0 10px; }
.hx-phone-scr { grid-area: scr; min-width: 0; transition: opacity .25s ease; }
.hx-phone-scr:not(.on) { visibility: hidden; opacity: 0; }
.hx-phone-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; align-content: start; }
.hx-phone-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hx-phone-list li { padding: 7px 8px; border-radius: 10px; background: #fff; box-shadow: 0 6px 14px -10px rgba(15, 23, 42, .5); }
.hx-phone-list b { display: block; font-size: 10.5px; color: #0d1321; }
.hx-phone-list small { display: block; margin-top: 2px; color: #566178; font-size: 9px; }
.hx-phone-list li.done b { color: #566178; }
.hx-phone-list li.add b { color: #1d4ed8; }
.hx-phone-list.menu li { display: flex; align-items: center; gap: 8px; }
.hx-phone-list.menu .i { width: 15px; height: 15px; color: #2563eb; }
.hx-phone-tiles div { padding: 8px; border-radius: 10px; background: #fff; box-shadow: 0 6px 14px -10px rgba(15, 23, 42, .5); }
.hx-phone-tiles .i { width: 16px; height: 16px; color: #2563eb; }
.hx-phone-tiles small { display: block; margin-top: 3px; color: #566178; font-size: 9px; }
.hx-phone-tiles b { font-size: 13px; }
.hx-phone-tabs { display: flex; justify-content: space-around; padding: 8px 4px 10px; background: #fff; border-top: 1px solid #e6ebf5; }
.hx-phone-tabs button { display: grid; justify-items: center; gap: 2px; padding: 2px 4px; border: 0; border-radius: 6px; background: none; color: #566178; font: inherit; font-size: 9px; font-weight: 600; cursor: pointer; }
.hx-phone-tabs button[aria-selected="true"] { color: #1d4ed8; font-weight: 800; }
.hx-phone-tabs button:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
.hx-phone-tabs .i { width: 14px; height: 14px; }

/* ── Pricing ── */
.hx-price-band { padding: 46px 0 50px; border-radius: 22px; color: var(--hx-ink-on-dark);
  background: radial-gradient(600px 300px at 80% 0%, rgba(56, 132, 255, .35), transparent 62%), linear-gradient(160deg, var(--hx-navy-1), var(--hx-navy-2) 60%, var(--hx-navy-3)); }
.hx-price-band .hx-head h2 { color: #fff; }
.hx-price-band .hx-head p { color: var(--hx-muted-on-dark); }
.hx-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1000px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 860px) { .hx-plans { grid-template-columns: minmax(0, 1fr); max-width: 460px; } }
.hx-plan { position: relative; display: flex; flex-direction: column; padding: 24px; border-radius: 16px; background: var(--surface); color: var(--text); border: 1px solid var(--border); text-align: center; }
.hx-plan.pop { border: 2px solid #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .15), 0 30px 60px -30px rgba(0, 0, 0, .6); }
.hx-plan h3 { margin: 0; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.hx-badge { padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; color: #fff; background: #b45309; } /* white on #b45309 ≈ 5:1 (amber #f59e0b was 2.2:1) */
.hx-amt { margin: 8px 0 0; font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--brand-text); font-variant-numeric: tabular-nums; }
.hx-per { color: var(--muted); font-size: 12.5px; }
.hx-plan .hx-list { margin: 16px 0 20px; text-align: left; font-size: 13.5px; gap: 8px; }
.hx-plan .btn { margin-top: auto; }
/* The owner's "every plan includes" lines (ADR-189 K4), as on /pricing's cards: open on a wide screen (home.js), a tap away on a phone. */
.hx-every { margin: -6px 0 20px; text-align: left; }
.hx-every summary { cursor: pointer; min-height: 44px; padding-top: 12px; font-size: 14px; font-weight: 700; }
.hx-every-l { display: grid; gap: 5px; margin: 2px 0 0; padding: 0; list-style: none; }
.hx-every-l li { position: relative; padding-left: 22px; font-size: 13.5px; }
.hx-every-l li::before { content: '✔'; position: absolute; left: 0; color: var(--ok); }
.hx-fee { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
/* Monthly / Yearly switch (the operator's annual term discount). */
.hx-bill { display: flex; gap: 4px; width: max-content; max-width: calc(100% - 32px); margin: -12px auto 24px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); }
.hx-bill button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: #eaf1ff; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.hx-bill button[aria-pressed="true"] { background: #fff; color: #0b1a45; }
.hx-bill button:focus-visible { outline: 2px solid #7dd3fc; outline-offset: 2px; }
.hx-save { padding: 2px 7px; border-radius: 999px; background: #047857; color: #fff; font-size: 11px; font-weight: 800; }
/* Journeys: Business Platform | Managed IT | Home & Family (only while the owner shows packages on the website). */
.hx-jx { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; max-width: 1000px; margin: 0 auto 26px; padding: 0 24px; }
.hx-jx-b { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; min-height: 60px; padding: 12px 16px; text-align: left;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #eaf1ff; font: inherit; cursor: pointer; }
.hx-jx-b .i { grid-row: 1 / span 2; width: 22px; height: 22px; }
.hx-jx-b span { font-size: 15px; font-weight: 800; }
.hx-jx-b small { font-size: 12.5px; color: var(--hx-muted-on-dark); }
.hx-jx-b:hover { border-color: rgba(255, 255, 255, .5); }
.hx-jx-b[aria-selected="true"] { background: #fff; border-color: #fff; color: #0b1a45; }
.hx-jx-b[aria-selected="true"] small { color: #3b4a6b; }
.hx-jx-b:focus-visible { outline: 2px solid #7dd3fc; outline-offset: 2px; }
@media (max-width: 700px) { .hx-jx { grid-auto-flow: row; } }
.hx-jp-sub { max-width: 640px; margin: -8px auto 22px; padding: 0 24px; text-align: center; color: var(--hx-muted-on-dark); font-size: 15px; }
/* The packages: four to a row (five or six sit 3 + 2/3), the last row centred; two on tablets, one on phones. */
.hx-pkgs { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; max-width: 1000px; margin: 0 auto; padding: 0 24px; }
.hx-pkgs > .card { flex: 0 1 calc((100% - 54px) / 4); min-width: 0; color: var(--text); }
.hx-pkgs.n1 > .card { flex-basis: 420px; }
.hx-pkgs.n2 > .card, .hx-pkgs.n3 > .card, .hx-pkgs.n5 > .card, .hx-pkgs.n6 > .card { flex-basis: calc((100% - 36px) / 3); }
.hx-pkgs.n2 > .card { max-width: 340px; }
@media (max-width: 980px) { .hx-pkgs > .card, .hx-pkgs[class] > .card { flex-basis: calc((100% - 18px) / 2); max-width: none; } }
@media (max-width: 600px) { .hx-pkgs > .card, .hx-pkgs[class] > .card { flex-basis: 100%; } }
/* The plan builder — /pricing's (site/pricing.js + pricing.css, fetched when the band comes near): light panels on the dark band. */
.hx-builder { width: calc(100% - 48px); max-width: 952px; margin: 34px auto 0; }
.hx-b-head { max-width: 640px; margin: 0 auto 18px; text-align: center; }
.hx-b-head h3 { margin: 0 0 6px; font-size: 22px; color: #fff; }
.hx-b-head p { margin: 0; font-size: 14.5px; color: var(--hx-muted-on-dark); }
.hx-builder .card { color: var(--text); }
.hx-builder noscript p { text-align: center; color: var(--hx-muted-on-dark); }
.hx-builder noscript a { color: #fff; font-weight: 700; }
/* Its room is held before pricing.css arrives, so nothing below jumps when it fills in. */
.hx-pb { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 22px; align-items: start; min-height: 540px; }
.hx-pb[aria-busy="true"] > .card { min-height: 500px; }
.hx-pb .skel { color: var(--muted); }
@media (max-width: 860px) {
  .hx-pb { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hx-pb[aria-busy="true"] > .pb-in { min-height: 620px; }
  .hx-pb[aria-busy="true"] > .pb-out { display: none; }
}
/* The plan cards follow the builder: the best fit for this team is tagged, the chosen one ringed, each priced for the team. */
.hx-rec-tag { display: none; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 3px 11px; border-radius: 999px;
  background: #047857; color: #fff; font-size: 11.5px; font-weight: 800; white-space: nowrap; } /* white on #047857 ≈ 5.5:1 */
.hx-plan.pb-rec .hx-rec-tag { display: inline-block; }
.hx-plan.pb-chosen { box-shadow: 0 0 0 3px #7dd3fc, 0 30px 60px -30px rgba(0, 0, 0, .6); }
.hx-plan .pb-team { margin: 12px 0 0; font-size: 13.5px; }
.hx-plan.pb-over .pb-team { color: var(--muted); }
.hx-price-more { margin: 20px 0 0; text-align: center; font-size: 14px; color: var(--hx-muted-on-dark); }
.hx-price-more a { color: #fff; font-weight: 700; }

/* ── Closing CTA + demo form ── */
.hx-cta-band { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 30px; align-items: center; padding: 34px; border-radius: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, var(--surface)), var(--surface)); border: 1px solid var(--border); box-shadow: var(--hx-card-shadow); }
@media (max-width: 980px) { .hx-cta-band { grid-template-columns: minmax(0, 1fr); } }
.hx-cta-band h2 { margin: 0 0 8px; font-size: clamp(26px, 3.2vw, 36px); letter-spacing: -.02em; }
.hx-cta-band > div > p { margin: 0 0 20px; color: var(--muted); font-size: 16px; max-width: 520px; }
.hx-cta-robot { display: block; width: 150px; height: auto; margin: 22px 0 0; filter: drop-shadow(0 18px 30px color-mix(in srgb, var(--brand) 35%, transparent)); }
.hx-cta-hand { display: inline-block; margin: 10px 0 0 6px; font-family: 'Segoe Script', 'Bradley Hand', 'Comic Sans MS', cursive; font-size: 17px; color: var(--text); transform: rotate(-5deg); }
.hx-cta-side { display: flex; align-items: flex-end; gap: 12px; }
.hx-cta-band .lead-form { margin: 0; }

/* ── Motion (only when allowed) ── */
@media (prefers-reduced-motion: no-preference) {
  /* Hero entrance: copy rises in, then the console visual. The first-visit logo intro holds it (below). */
  .hx-hero-copy > * { animation: hxRise .7s cubic-bezier(.2, .8, .2, 1) both; }
  .hx-hero-copy > :nth-child(2) { animation-delay: .08s; } .hx-hero-copy > :nth-child(3) { animation-delay: .16s; } .hx-hero-copy > :nth-child(4) { animation-delay: .24s; }
  .hx-visual { animation: hxRise .9s cubic-bezier(.2, .8, .2, 1) .18s both; }
  @keyframes hxRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .hx-robot { animation: hxFloat 6s ease-in-out infinite; }
  .hx-asst-robot, .hx-cta-robot { animation: hxFloat 7s ease-in-out -2s infinite; }
  @keyframes hxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  .hx-bars i { transform-origin: bottom; animation: hxGrow .9s cubic-bezier(.2, .8, .2, 1) both; }
  .hx-bars i:nth-child(2) { animation-delay: .06s; } .hx-bars i:nth-child(3) { animation-delay: .12s; } .hx-bars i:nth-child(4) { animation-delay: .18s; }
  .hx-bars i:nth-child(5) { animation-delay: .24s; } .hx-bars i:nth-child(6) { animation-delay: .3s; } .hx-bars i:nth-child(7) { animation-delay: .36s; }
  @keyframes hxGrow { from { transform: scaleY(.05); } to { transform: none; } }
  .hx-card:target { animation: hxPing 1.4s ease 1; }
  @keyframes hxPing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
  .m-node.on { animation: hxNode 2.4s ease-in-out infinite; }
  @keyframes hxNode { 50% { box-shadow: 0 0 22px rgba(56, 189, 248, .8); } }
  .m-link { animation: hxDash 1.2s linear infinite; background-size: 10px 2px; }
  @keyframes hxDash { to { background-position: 10px 0; } }
  .m-dot { animation: hxBlink 2s ease-in-out infinite; }
  @keyframes hxBlink { 50% { opacity: .35; } }
  .hx-drawer:not([hidden]) .hx-drawer-panel { animation: hxSlide .32s cubic-bezier(.2, .8, .2, 1) both; }
  .hx-drawer:not([hidden]) .hx-drawer-scrim { animation: hxFade .25s ease both; }
  @keyframes hxSlide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes hxFade { from { opacity: 0; } to { opacity: 1; } }
  .hx-tour:not([hidden]) { animation: hxRise .35s cubic-bezier(.2, .8, .2, 1) both; }
  .hx-card.hx-in { animation: hxRise .4s cubic-bezier(.2, .8, .2, 1) both; }
}

/* The logo intro (site.js / template) holds the hero entrance until the logo lands in the header. */
html[data-intro="play"] .hx-hero-copy > *, html[data-intro="play"] .hx-visual { animation-play-state: paused; }

/* Touch: every control on the homepage is thumb-sized (44px) on touch screens and phones — the UI governance
   agent measured the preview tabs, chat questions, filters, the Monthly/Yearly switch and the "Learn more" links
   at 20–38px. The plan builder's own controls are 44px+ (pricing.css). */
@media (pointer: coarse), (max-width: 860px) {
  .hx-ui-tabs button, .hx-phone-tabs button { min-height: 44px; min-width: 44px; }
  .hx-chat-h, .hx-chat ul button, .hx-asst button { min-height: 44px; }
  .hx-filter button, .hx-bill button, .hx-tour-btn, .hx-tour-x { min-height: 44px; min-width: 44px; }
  .hx-more { min-height: 44px; }
  .hx-price-more a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── Website offers (ADR-025, W1): a live offer on a plan card, as on /pricing — the regular price struck through, the
   offer price, the offer's name, saving, real end date and terms. Once it ends, site.js's countdown adds .offer-over and
   the card shows the regular price plainly. ── */
.hx-amt-offer { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 10px; }
.hx-was, .hx-fee-was { color: var(--muted); font-weight: 600; text-decoration-thickness: 2px; }
.hx-amt .hx-was { font-size: 20px; }
.hx-offer { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; color: var(--text);
  background: color-mix(in srgb, var(--ok) var(--tint, 10%), transparent); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); }
.hx-offer-save { color: var(--ok); font-weight: 700; }
.hx-offer small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.hx-plan.offer-over .hx-now, .hx-plan.offer-over .hx-fee-now, .hx-plan.offer-over .hx-offer-save, .hx-plan.offer-over .hx-offer small { display: none; }
.hx-plan.offer-over .hx-was, .hx-plan.offer-over .hx-fee-was { text-decoration: none; color: inherit; font-size: inherit; font-weight: inherit; }
.hx-plan.offer-over .hx-offer { background: transparent; border-color: var(--border); }

/* W3 (ADR-028): links to the full product tour / the demo videos, under the hero CTAs (only when they exist) */
.hx-alt { margin: 14px 0 0; color: var(--hx-muted-on-dark); font-size: 14px; }
.hx-alt a { display: inline-flex; align-items: center; min-height: 26px; color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 3px; }
.hx-alt a:hover { text-decoration-color: #fff; }

/* The technology section (siteIntegrations.forHome, 2026-10-26): real connections only; "Partner" only with a record */
/* auto-fit + a capped column: any number of tiles sits centred under the centred heading; phones get full-width tiles */
.hx-tech-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 290px)); justify-content: center; gap: 12px; }
@media (max-width: 640px) { .hx-tech-list { grid-template-columns: 1fr; } }
.hx-tech-i { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; }
a.hx-tech-i { transition: border-color .15s ease; }
a.hx-tech-i:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
a.hx-tech-i:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hx-tech-art { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.hx-tech-art .i { width: 22px; height: 22px; }
.hx-tech-art.is-logo { background: #fff; border: 1px solid var(--border); padding: 5px; } /* official logos sit on white in both themes */
.hx-tech-art.is-logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.hx-tech-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hx-tech-txt b { font-size: 15px; font-weight: 700; }
.hx-tech-txt small { font-size: 13px; line-height: 1.45; color: var(--muted); }
.hx-tech-tag { margin-left: auto; flex: none; align-self: flex-start; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: var(--brand-text, var(--brand)); background: color-mix(in srgb, var(--brand) 12%, transparent); }
@media (prefers-reduced-motion: reduce) { a.hx-tech-i { transition: none; } }

/* ── Aurora White hero (ADR-141) ──
   Under Aurora White Premium in LIGHT mode only, the navy hero band turns white: the Aurora atmosphere (royal, violet and
   orange washes, kept faint), dark ink, a royal → violet headline sweep and gradient primary button. Every other theme (and
   Aurora in dark, where the style is inert) keeps the navy band. The laptop, the tour card and the assistant card keep their
   own dark surfaces. Measured (t-ui-gap-fixes, against the strongest wash): ink 12.8, muted 5.4, link 5.4, headline stops
   ≥ 4.4, white on the button stops ≥ 5.6. The same rules twice: forced light, and a light device. */
:root[data-skin="aurora-white"][data-theme="light"] .hx-hero { color: #10132a; border-bottom: 1px solid #e4e7f5; background:
  radial-gradient(820px 460px at 82% 24%, rgba(53, 87, 240, .10), transparent 62%),
  radial-gradient(620px 380px at 4% 100%, rgba(147, 51, 234, .08), transparent 60%),
  radial-gradient(520px 320px at 98% 96%, rgba(249, 115, 22, .06), transparent 60%),
  linear-gradient(180deg, #ffffff 0%, #f6f7ff 100%); }
:root[data-skin="aurora-white"][data-theme="light"] .hx-hero::before { opacity: .6; background-image: radial-gradient(rgba(53, 87, 240, .16) 1px, transparent 1.2px); }
:root[data-skin="aurora-white"][data-theme="light"] .hx-hero h1, :root[data-skin="aurora-white"][data-theme="light"] .hx-stats b { color: #10132a; }
:root[data-skin="aurora-white"][data-theme="light"] .hx-hero h1 .hx-grad { background-image: linear-gradient(92deg, #2f4fe0 0%, #5b2ee0 55%, #7e22ce 100%); }
:root[data-skin="aurora-white"][data-theme="light"] .hx-lede, :root[data-skin="aurora-white"][data-theme="light"] .hx-alt, :root[data-skin="aurora-white"][data-theme="light"] .hx-stats span { color: #4b5270; }
:root[data-skin="aurora-white"][data-theme="light"] .hx-alt a { color: #2a44c4; text-decoration-color: rgba(42, 68, 196, .45); }
:root[data-skin="aurora-white"][data-theme="light"] .hx-alt a:hover { text-decoration-color: #2a44c4; }
:root[data-skin="aurora-white"][data-theme="light"] .hx-cta .btn:not(.hx-on-dark) { color: #fff; background: linear-gradient(92deg, #3557f0, #6d3df5); box-shadow: 0 12px 26px -12px rgba(109, 61, 245, .55); }
:root[data-skin="aurora-white"][data-theme="light"] .hx-cta .btn:not(.hx-on-dark):hover { background: linear-gradient(92deg, #2f4fe0, #5b2ee0); }
:root[data-skin="aurora-white"][data-theme="light"] .hx .btn.hx-on-dark { color: #10132a; background: rgba(255, 255, 255, .72); border-color: rgba(16, 19, 42, .24); }
:root[data-skin="aurora-white"][data-theme="light"] .hx .btn.hx-on-dark:hover { background: #fff; border-color: rgba(53, 87, 240, .55); }
:root[data-skin="aurora-white"][data-theme="light"] .hx-chips li { color: #10132a; background: rgba(255, 255, 255, .78); border-color: #e4e7f5; box-shadow: 0 6px 16px -10px rgba(40, 50, 140, .35); }
:root[data-skin="aurora-white"][data-theme="light"] .hx-chips .i { color: #3557f0; }
:root[data-skin="aurora-white"][data-theme="light"] .hx-robot { filter: drop-shadow(0 22px 34px rgba(40, 50, 140, .28)) drop-shadow(0 0 26px rgba(109, 61, 245, .18)); }
:root[data-skin="aurora-white"][data-theme="light"] .hx-screen { box-shadow: 0 40px 80px -34px rgba(40, 50, 140, .45), 0 0 0 1px rgba(53, 87, 240, .14), 0 0 60px -14px rgba(109, 61, 245, .35); }
@media (prefers-color-scheme: light) {
  :root[data-skin="aurora-white"]:not([data-theme="dark"]) .hx-hero { color: #10132a; border-bottom: 1px solid #e4e7f5; background:
    radial-gradient(820px 460px at 82% 24%, rgba(53, 87, 240, .10), transparent 62%),
    radial-gradient(620px 380px at 4% 100%, rgba(147, 51, 234, .08), transparent 60%),
    radial-gradient(520px 320px at 98% 96%, rgba(249, 115, 22, .06), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f6f7ff 100%); }
  :root[data-skin="aurora-white"]:not([data-theme="dark"]) .hx-hero::before { opacity: .6; background-image: radial-gradient(rgba(53, 87, 240, .16) 1px, transparent 1.2px); }
  :root[data-skin="aurora-white"]:not([data-theme="dark"]) .hx-hero h1, :root[data-skin="aurora-white"]:not([data-theme="dark"]) .hx-stats b { color: #10132a; }
  :root[data-skin="aurora-white"]:not([data-theme="dark"]) .hx-hero h1 .hx-grad { background-image: linear-gradient(92deg, #2f4fe0 0%, #5b2ee0 55%, #7e22ce 100%); }
  :root[data-skin="aurora-white"]:not([data-theme="dark"]) .hx-lede, :root[data-skin="aurora-white"]:not([data-theme="dark"]) .hx-alt, :root[data-skin="aurora-white"]:not([data-theme="dark"]) .hx-stats span { color: #4b5270; }
  :root[data-skin="aurora-white"]:not([data-theme="dark"]) .hx-alt a { color: #2a44c4; text-decoration-color: rgba(42, 68, 196, .45); }
  :root[data-skin="aurora-white"]:not([data-theme="dark"]) .hx-alt a:hover { text-decoration-color: #2a44c4; }
  :root[data-skin="aurora-white"]:not([data-theme="dark"]) .hx-cta .btn:not(.hx-on-dark) { color: #fff; background: linear-gradient(92deg, #3557f0, #6d3df5); box-shadow: 0 12px 26px -12px rgba(109, 61, 245, .55); }
  :root[data-skin="aurora-white"]:not([data-theme="dark"]) .hx-cta .btn:not(.hx-on-dark):hover { background: linear-gradient(92deg, #2f4fe0, #5b2ee0); }
  :root[data-skin="aurora-white"]:not([data-theme="dark"]) .hx .btn.hx-on-dark { color: #10132a; background: rgba(255, 255, 255, .72); border-color: rgba(16, 19, 42, .24); }
  :root[data-skin="aurora-white"]:not([data-theme="dark"]) .hx .btn.hx-on-dark:hover { background: #fff; border-color: rgba(53, 87, 240, .55); }
  :root[data-skin="aurora-white"]:not([data-theme="dark"]) .hx-chips li { color: #10132a; background: rgba(255, 255, 255, .78); border-color: #e4e7f5; box-shadow: 0 6px 16px -10px rgba(40, 50, 140, .35); }
  :root[data-skin="aurora-white"]:not([data-theme="dark"]) .hx-chips .i { color: #3557f0; }
  :root[data-skin="aurora-white"]:not([data-theme="dark"]) .hx-robot { filter: drop-shadow(0 22px 34px rgba(40, 50, 140, .28)) drop-shadow(0 0 26px rgba(109, 61, 245, .18)); }
  :root[data-skin="aurora-white"]:not([data-theme="dark"]) .hx-screen { box-shadow: 0 40px 80px -34px rgba(40, 50, 140, .45), 0 0 0 1px rgba(53, 87, 240, .14), 0 0 60px -14px rgba(109, 61, 245, .35); }
}

/* ADR-147 — smart automation, business benefits, trust band (data: services/siteShowcase.js) */
.hx-au-grid, .hx-bn-grid, .hx-tr-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hx-au-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hx-bn-grid, .hx-tr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .hx-bn-grid, .hx-tr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hx-au-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hx-au-grid, .hx-bn-grid, .hx-tr-grid { grid-template-columns: minmax(0, 1fr); } }
.hx-au-card, .hx-bn-card, .hx-tr-i { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--hx-card-shadow); min-width: 0; }
.hx-au-card .feat-ico, .hx-bn-card .feat-ico, .hx-tr-i .feat-ico { margin-bottom: 2px; }
.hx-au-card h3, .hx-bn-card h3 { margin: 0; font-size: 16.5px; line-height: 1.3; }
.hx-au-card p, .hx-bn-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.hx-au-card .hx-au-ctl { color: var(--text); font-size: 13px; }
.hx-au-card .hx-au-meta { margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 12.5px; }
.hx-au-card .hx-au-meta a { color: var(--brand-text); display: inline-flex; align-items: center; min-height: 26px; position: relative; } /* a stand-alone link when the rule has no "Included in" text: 24 px+ target */
.hx-au-card .hx-au-meta a::after { content: ''; position: absolute; inset: -9px -6px; } /* a roomier touch area than the visible box, as .fx-more does */
.hx-bn-card .hx-more { margin-top: auto; }
.hx-tr-i { text-decoration: none; color: inherit; height: 100%; transition: transform .2s ease, border-color .2s ease; }
.hx-tr-i:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
.hx-tr-i:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hx-tr-i b { font-size: 15px; line-height: 1.3; color: var(--text); }
.hx-tr-i small { font-size: 13px; line-height: 1.5; color: var(--muted); }
.hx-tr-statusrow { margin: -10px 0 22px; text-align: center; }
.hx-tr-status { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; }
.hx-tr-status small { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.hx-tr-status i { width: 10px; height: 10px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 4px color-mix(in srgb, #16a34a 22%, transparent); }
.hx-tr-status.is-degraded i { background: #d97706; box-shadow: 0 0 0 4px color-mix(in srgb, #d97706 22%, transparent); }
.hx-tr-status.is-outage i { background: #dc2626; box-shadow: 0 0 0 4px color-mix(in srgb, #dc2626 22%, transparent); }
.hx-tr-links { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; align-items: center; font-size: 14px; }
.hx-tr-links a:not(.btn) { color: var(--brand-text); display: inline-flex; align-items: center; min-height: 44px; } /* the policy links sit beside 44 px buttons: same height, easy to hit */
@media (max-width: 640px) { .hx-tr-links > span { display: none; } } /* the decorative dot would dangle at the end of a wrapped line */

/* ── "Our promise" (services/siteAssurance.js) — right before pricing. The money-back card shows only under a full-refund
   policy; the six assurances always. Links are stand-alone targets (26 px+, t-ui-site-mobile). ── */
.hx-pr-g { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; margin: 0 0 18px; padding: 20px 22px; border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ok) 11%, var(--surface)), var(--surface) 68%); border: 1px solid color-mix(in srgb, var(--ok) 38%, var(--border)); box-shadow: var(--hx-card-shadow); }
.hx-pr-seal { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 86px; height: 86px; border-radius: 50%; flex: none;
  background: var(--surface); border: 3px solid var(--ok); color: var(--ok); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 13%, transparent); }
.hx-pr-seal b { font-size: 30px; line-height: 1; font-weight: 800; }
.hx-pr-seal small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hx-pr-g h3 { margin: 0 0 6px; font-size: 21px; line-height: 1.25; color: var(--text); }
.hx-pr-g p { margin: 0; color: var(--muted); line-height: 1.6; max-width: 760px; }
.hx-pr-g .hx-pr-glinks { margin-top: 6px; }
.hx-pr-g .hx-pr-glinks a, .hx-pr-i a { display: inline-flex; align-items: center; min-height: 26px; color: var(--brand-text); font-weight: 600; font-size: 14px; }
.hx-pr-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .hx-pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hx-pr-grid { grid-template-columns: minmax(0, 1fr); } .hx-pr-g { grid-template-columns: 1fr; padding: 18px; } .hx-pr-seal { width: 70px; height: 70px; } .hx-pr-seal b { font-size: 24px; } }
.hx-pr-i { display: flex; gap: 14px; align-items: stretch; padding: 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--hx-card-shadow); min-width: 0; }
.hx-pr-i .feat-ico { flex: none; align-self: flex-start; }
.hx-pr-i > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.hx-pr-i b { font-size: 15px; line-height: 1.3; color: var(--text); }
.hx-pr-i small { font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.hx-pr-i a { align-self: flex-start; margin-top: auto; padding-top: 4px; } /* links line up along the row's bottom edge */