/* Austin AI Hub, AI Readiness Check.
   Palette taken from austinaihub.org: blue hsl(217 91% 60%) primary,
   orange hsl(25 95% 53%) accent, with teal, emerald and purple as signal colors.

   The page commits to a dark theme rather than half-supporting a light one.
   `color-scheme: dark` tells the browser to match form controls and scrollbars,
   which is the part most dark sites forget.

   Motion is deliberate and rationed. The scan canvas earns continuous animation
   because it reports progress; the score ring earns a transition because it
   carries a number. Nothing else loops. Decorative perpetual motion was the main
   thing making this page feel unserious. */

:root {
  color-scheme: dark;

  /* Surfaces, dark to light */
  --bg: #080d1a;
  --bg-2: #0c1425;
  --surface: #101a33;
  --surface-2: #16213f;
  --surface-3: #1c2a4f;
  --line: #24325e;
  --line-soft: #1b2748;

  /* Ink */
  --ink: #eef2fb;
  --ink-2: #c6d0e6;
  --muted: #a2aecb;
  --faint: #7f8cad;

  /* Brand */
  --blue: #3b82f6;
  --blue-dim: #2563eb;
  --blue-deep: #1d4ed8;
  --accent: #f97316;
  --accent-dim: #ea580c;
  --teal: #20e3b2;
  --green: #10b981;
  --purple: #a855f7;
  --amber: #f59e0b;
  --red: #f87171;

  /* Space, 4px base */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 72px;

  /* Radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;

  /* Elevation */
  --e-1: 0 1px 2px rgba(0,0,0,0.30);
  --e-2: 0 4px 16px rgba(0,0,0,0.30);
  --e-3: 0 14px 40px rgba(0,0,0,0.42);

  /* Type */
  --font-display: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.0625rem;
  --fs-xl: clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
  --fs-2xl: clamp(1.35rem, 1vw + 1.1rem, 1.6rem);
  --fs-3xl: clamp(1.75rem, 3.6vw, 2.9rem);

  /* Motion */
  --dur-fast: 140ms;
  --dur: 220ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Z scale */
  --z-base: 0; --z-raised: 10; --z-sticky: 20; --z-overlay: 30; --z-skip: 50;

  /* One reading measure, shared by every prose column on the page. */
  --measure: 72ch;
}

*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute must win over display rules like .dashboard{display:grid}
   and .scanner{display:flex}, so panels stay hidden until a check runs. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink);
  background:
    radial-gradient(1100px 620px at 72% -12%, #16255a 0%, transparent 62%),
    radial-gradient(760px 500px at 8% 4%, #10204a 0%, transparent 58%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
}

h1, h2, h3, .brand-name, .r-domain, .cta-title, .roi-num, .rstat-num, .ring-inner span {
  font-family: var(--font-display);
}
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: 0.1em 0.38em;
  color: var(--teal);
}

/* Accessibility: skip link + visible keyboard focus everywhere. */
.skip-link {
  position: absolute; left: -9999px; top: var(--s-2); z-index: var(--z-skip);
  background: var(--accent); color: #10131f;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: var(--s-3); }

a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Outline line-icons. currentColor drives the color. */
.ico {
  width: 1em; height: 1em; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  display: inline-block; flex: none;
}
.ptico { width: 20px; height: 20px; color: var(--accent); }

/* --- Top bar ------------------------------------------------------------ */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-7);
  border-bottom: 1px solid var(--line-soft);
  background: rgba(8, 13, 26, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: var(--s-3); }
.brand-mark {
  width: 42px; height: 42px; border-radius: var(--r-md); flex: none;
  background: linear-gradient(150deg, var(--blue), var(--blue-deep));
  display: grid; place-items: center;
  box-shadow: var(--e-2);
}
.brand-mark svg { width: 23px; height: 23px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; }
.brand-name { font-weight: 700; letter-spacing: 0.01em; }
.brand-sub { font-size: var(--fs-xs); color: var(--muted); }
.site-link {
  color: var(--accent); text-decoration: none; font-size: var(--fs-md);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  min-height: 44px;
  transition: color var(--dur-fast) var(--ease);
}
.site-link:hover { text-decoration: underline; }
.site-link .ico { width: 13px; height: 13px; }

main { max-width: 1080px; margin: 0 auto; padding: 0 var(--s-5) var(--s-10); }

/* --- Hero ----------------------------------------------------------------
   The constellation sits behind the headline at rest, every node lit and
   turning slowly. It comes alive only during a scan. A hero that already
   animates everything has nothing left to say when the work starts. */

.hero {
  position: relative;
  padding: clamp(var(--s-7), 6vw, 88px) 0 var(--s-8);
  text-align: center;
  isolation: isolate;
  /* The canvas is deliberately wider than the column. Without this it pushes the
     document 11px past the viewport at 375px and the whole page scrolls sideways. */
  overflow: hidden;
  overflow: clip;
}
.hero-canvas {
  position: absolute;
  top: -14%;
  left: 50%;
  translate: -50% 0;
  width: min(780px, 116%);
  height: min(780px, 116vw);
  z-index: -1;
  opacity: 0.8;
  pointer-events: none;
  /* The sphere's surface sits at ~66% of the canvas half-extent, so a mask that
     starts fading at 32% erased the constellation and left only dust. Hold full
     opacity out past the silhouette, then fall away before the edges. */
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, rgba(0,0,0,0.55) 82%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 62%, rgba(0,0,0,0.55) 82%, transparent 100%);
}
.hero-inner { position: relative; max-width: 780px; margin-inline: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: var(--accent); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin: 0 0 var(--s-5);
  padding: 6px 14px;
  border: 1px solid rgba(249,115,22,0.28);
  background: rgba(249,115,22,0.07);
  border-radius: var(--r-full);
}
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none;
}

.hero h1 {
  font-size: var(--fs-3xl); margin: 0 0 var(--s-5);
  letter-spacing: -0.026em; line-height: 1.08; text-wrap: balance;
}
/* A static two-stop gradient. It was animated across three hues; a headline that
   shimmers forever reads as a landing-page tic, and this page is asking to be
   trusted with a diagnosis. */
.grad {
  background: linear-gradient(96deg, var(--blue) 5%, var(--teal) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* At 375px the balancer stranded "an" on its own line and split the gradient
     across the break. The phrase is short enough to never need wrapping. */
  white-space: nowrap;
}
.lede {
  max-width: 60ch; margin: 0 auto var(--s-7);
  color: var(--ink-2); font-size: var(--fs-lg); text-wrap: pretty;
}
.lede code { font-size: 0.85em; }
.reassure { margin: var(--s-5) 0 0; color: var(--faint); font-size: var(--fs-sm); }

/* --- Check form ----------------------------------------------------------
   One pill, not a label stacked over a box next to a button. The old form put
   three differently-aligned things in a row and looked like a bug. */

.scan { margin: 0 auto; max-width: 620px; }
.scan-pill {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 6px 6px 6px var(--s-5);
  box-shadow: var(--e-3);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.scan-pill:focus-within {
  border-color: var(--blue);
  box-shadow: var(--e-3), 0 0 0 4px rgba(59,130,246,0.18);
}
.scan-globe { display: flex; align-items: center; color: var(--faint); flex: none; }
.scan-globe .ico { width: 19px; height: 19px; }
.scan-pill input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
  color: var(--ink); font-size: var(--fs-lg); font-family: inherit;
  padding: 16px 0;
}
.scan-pill input::placeholder { color: var(--faint); }

#scan-btn {
  background: linear-gradient(150deg, var(--accent), var(--accent-dim));
  color: #140d05; font-weight: 700; font-size: var(--fs-base);
  font-family: var(--font-display);
  border: 0; border-radius: var(--r-full);
  padding: 0 var(--s-6); cursor: pointer; min-height: 50px; flex: none;
  box-shadow: var(--e-1);
  transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
#scan-btn:hover { filter: brightness(1.07); }
#scan-btn:active { transform: translateY(1px); }
#scan-btn:disabled { opacity: 0.62; cursor: progress; filter: none; }

/* Example domains. Cheaper than a tooltip for teaching what the input wants. */
.examples {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: var(--s-2);
  margin: var(--s-5) 0 0;
}
.examples-label {
  font-size: var(--fs-xs); color: var(--faint);
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
  margin-right: var(--s-1);
}
.chip {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  background: var(--surface); border: 1px solid var(--line-soft);
  color: var(--ink-2); border-radius: var(--r-full);
  padding: 0 var(--s-4); min-height: 36px; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--accent); }

/* --- Value props + stats -------------------------------------------------- */

.valueprops {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4); margin-top: var(--s-8);
}
.vcard {
  background: linear-gradient(180deg, var(--bg-2), #0a1122);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: var(--s-6);
}
.vcard-ic {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: rgba(59,130,246,0.12); color: var(--blue);
  margin-bottom: var(--s-4);
}
.vcard-ic .ico { width: 20px; height: 20px; }
.vcard-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); margin: 0 0 6px; }
.vcard-body { margin: 0; color: var(--muted); font-size: var(--fs-md); }

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding: var(--s-6);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  background: rgba(16,26,51,0.4);
}
.stat { text-align: center; }
.stat-num {
  display: block; font-family: var(--font-display);
  font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, var(--teal), var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-lbl { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }

/* --- Scanner ------------------------------------------------------------ */

.scanner {
  display: flex; gap: var(--s-6); align-items: center;
  max-width: 700px; margin: var(--s-6) auto 0; padding: var(--s-6);
  background: linear-gradient(180deg, var(--bg-2), #0a1122);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--e-3);
}
.ai-canvas {
  width: 190px; height: 190px; flex: none; display: block;
  filter: drop-shadow(0 0 18px rgba(59,130,246,0.18));
}
.scanner-body { flex: 1; min-width: 0; }
.scanner-title { font-size: var(--fs-lg); margin: 0 0 var(--s-3); }
.scanner-title strong { color: var(--accent); font-weight: 600; }

.scan-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.scan-steps li {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-md); color: var(--muted);
  transition: color var(--dur) var(--ease);
}
.scan-steps li .dot {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2px solid var(--line); display: grid; place-items: center; font-size: 10px;
}
.scan-steps li.active { color: var(--ink); }
.scan-steps li.active .dot { border-color: var(--blue); border-top-color: transparent; animation: spin 0.7s linear infinite; }
.scan-steps li.done { color: var(--ink-2); }
.scan-steps li.done .dot { border-color: var(--green); background: var(--green); color: #061018; animation: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Dashboard shell ---------------------------------------------------- */

.dashboard { margin-top: var(--s-6); display: grid; gap: var(--s-5); }

.panel {
  background: linear-gradient(180deg, var(--bg-2), #0a1122);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--e-2);
}
/* Panels fade in once, on arrival. The stagger index is set from JS, and the
   `.in` class is re-applied per run so a second check animates like the first
   instead of snapping into place. */
.dashboard .panel { opacity: 0; transform: translateY(12px); }
.dashboard .panel.in {
  animation: reveal 0.45s var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 70ms);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

.p-title { margin: 0 0 var(--s-1); font-size: var(--fs-xl); display: flex; align-items: center; gap: var(--s-2); }
.p-sub { margin: 0 0 var(--s-4); color: var(--muted); font-size: var(--fs-md); max-width: 78ch; }

.ai-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-1); }
.ai-head .p-title { margin: 0; }

.ai-badge {
  font-size: var(--fs-xs); padding: 4px 10px; border-radius: var(--r-full);
  background: rgba(249,115,22,0.10); border: 1px solid var(--accent-dim);
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
  white-space: nowrap;
}
.ai-badge.alt { border-color: var(--line); color: var(--muted); background: var(--surface); }
.ai-badge.good { border-color: var(--green); color: var(--green); background: rgba(16,185,129,0.10); }
.ai-badge.warn { border-color: var(--amber); color: var(--amber); background: rgba(245,158,11,0.10); }
.ai-badge.bad  { border-color: var(--red);   color: var(--red);   background: rgba(248,113,113,0.10); }

/* --- Readiness hero ----------------------------------------------------- */

.readiness { display: flex; gap: var(--s-7); align-items: center; flex-wrap: wrap; }
.readiness-left { flex: none; }
.ring {
  --v: 0;
  position: relative; width: 150px; height: 150px; border-radius: 50%;
  background: conic-gradient(var(--blue) calc(var(--v) * 1%), var(--surface-3) 0);
  display: grid; place-items: center;
  box-shadow: 0 0 40px rgba(59,130,246,0.15);
}
.ring-inner {
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--surface-2); display: grid; place-items: center; text-align: center;
}
.ring-inner span { font-size: 42px; font-weight: 800; line-height: 1; }
.ring-inner small { color: var(--muted); font-size: var(--fs-sm); }

.readiness-right { flex: 1; min-width: 260px; }
.r-domain { font-size: var(--fs-2xl); font-weight: 700; color: var(--accent); margin: 0; }
.r-orgtype { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--teal); margin: var(--s-1) 0 0; }
.r-orgtype .ico { width: 15px; height: 15px; }
.r-band { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 6px 0 0; }
.r-band span { color: var(--ink); font-weight: 700; }
.r-verdict { font-size: var(--fs-lg); margin: var(--s-3) 0 var(--s-4); text-wrap: pretty; }

.r-stats { display: flex; gap: var(--s-6); flex-wrap: wrap; }
.rstat { display: flex; flex-direction: column; }
.rstat-num { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rstat-lbl { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* --- Score components --------------------------------------------------- */

.components { display: grid; gap: var(--s-3); }
.comp { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-4); align-items: baseline; }
.comp-name { font-weight: 600; font-size: var(--fs-md); }
.comp-val { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.comp-val b { color: var(--ink); font-weight: 700; }
.comp-bar {
  grid-column: 1 / -1; height: 6px; border-radius: var(--r-full);
  background: var(--surface-3); overflow: hidden; margin-top: 2px;
}
.comp-bar > i {
  display: block; height: 100%; width: var(--w, 0%); border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--blue), var(--teal));
  transition: width 700ms var(--ease);
}
.comp.low .comp-bar > i { background: linear-gradient(90deg, var(--accent-dim), var(--accent)); }
.comp-hint { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--faint); margin-top: 2px; }

/* --- Briefing ----------------------------------------------------------- */

.briefing { background: linear-gradient(180deg, rgba(22,37,90,0.5), #0a1122); border-color: var(--line); }
.briefing-text {
  font-size: var(--fs-lg); line-height: 1.7; margin: var(--s-4) 0 0;
  min-height: 3em; white-space: pre-wrap; max-width: 74ch;
}
.tw-cursor {
  display: inline-block; width: 8px; height: 1.05em; background: var(--accent);
  vertical-align: text-bottom; margin-left: 1px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* --- AI surface --------------------------------------------------------- */

.surface-panel { background: linear-gradient(180deg, rgba(16,32,74,0.55), #0a1122); }
.surface-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.surface-facts { display: grid; gap: var(--s-2); align-content: start; }
.fact {
  display: flex; align-items: flex-start; gap: var(--s-3);
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 11px var(--s-3);
}
.fact .ico { width: 17px; height: 17px; margin-top: 2px; }
.fact.yes .ico { color: var(--green); }
.fact.no .ico { color: var(--faint); }
/* "We never got to look" is its own state, and it must not read as a failure. */
.fact.unknown { border-style: dashed; }
.fact.unknown .ico { color: var(--amber); }
.fact.unknown .fact-note { font-style: italic; }
.fact-body { min-width: 0; }
.fact-name { font-size: var(--fs-md); font-weight: 600; }
.fact-note { font-size: var(--fs-xs); color: var(--muted); }

.crawler-head {
  font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.07em; font-weight: 600; margin: 0 0 var(--s-2);
}
.crawler-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 5px;
  max-height: 264px; overflow-y: auto;
}
.crawler {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); padding: 6px 10px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-sm);
}
.crawler .ico { width: 14px; height: 14px; flex: none; }
.crawler.allowed .ico { color: var(--green); }
.crawler.blocked .ico { color: var(--red); }
.crawler.unknown { border-style: dashed; color: var(--muted); }
.crawler.unknown .ico { color: var(--amber); }
.crawler-name { font-family: var(--font-mono); font-size: var(--fs-xs); }
.crawler-purpose {
  margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--faint); border: 1px solid var(--line); border-radius: var(--r-full); padding: 1px 7px;
}
.crawler.blocked.search { border-color: rgba(248,113,113,0.4); background: rgba(248,113,113,0.06); }

/* --- Capacity ----------------------------------------------------------- */

.roi-panel { background: linear-gradient(180deg, rgba(23,37,81,0.5), #0a1122); }
.roi-stats { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.roi-stat {
  flex: 1 1 160px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-5); text-align: center;
}
.roi-stat.roi-hero { flex: 1 1 200px; border-color: var(--accent-dim); background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); }
.roi-stat.roi-hero .roi-num { font-size: 40px; }
.roi-num {
  display: block; font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, var(--teal), var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.roi-lbl { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* --- Systems ------------------------------------------------------------ */

.systems { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sysnode {
  display: flex; align-items: center; gap: var(--s-2);
  background: var(--surface-2); border: 1px dashed var(--line);
  border-radius: var(--r-sm); padding: 9px 13px; font-size: var(--fs-md);
}
.sysnode small { color: var(--muted); font-size: var(--fs-xs); display: block; }
.sys-ic { display: flex; align-items: center; color: var(--teal); }
.sys-ic .ico { width: 17px; height: 17px; }
.systems .empty { color: var(--muted); font-size: var(--fs-md); font-style: italic; }

/* --- Technology inventory ----------------------------------------------- */

.techgroups { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s-3); }
.techgroup { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: var(--s-4); }
.techgroup-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.techgroup-head .ico { width: 17px; height: 17px; color: var(--blue); }
.techgroup.system .techgroup-head .ico { color: var(--teal); }
.techgroup-name { font-size: var(--fs-md); font-weight: 600; }
.techgroup-n { margin-left: auto; font-size: var(--fs-xs); color: var(--faint); font-variant-numeric: tabular-nums; }
.techlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.techlist li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); }
.tech-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tech-conf {
  margin-left: auto; font-size: 10px; color: var(--faint);
  font-variant-numeric: tabular-nums; font-family: var(--font-mono);
}
.tech-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); flex: none; }
.techgroup.system .tech-dot { background: var(--teal); }

/* --- Signals ------------------------------------------------------------ */

.signals { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--s-3); }
.signal {
  display: flex; gap: var(--s-3); background: var(--surface-2);
  border: 1px solid var(--line); border-left-width: 3px;
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4);
}
.signal.strength { border-left-color: var(--green); }
.signal.opportunity { border-left-color: var(--blue); }
.signal.risk { border-left-color: var(--amber); }
.signal.responsibility { border-left-color: var(--purple); }
.sig-ic { display: flex; align-items: flex-start; padding-top: 2px; }
.sig-ic .ico { width: 16px; height: 16px; }
.signal.strength .sig-ic { color: var(--green); }
.signal.opportunity .sig-ic { color: var(--blue); }
.signal.risk .sig-ic { color: var(--amber); }
.signal.responsibility .sig-ic { color: var(--purple); }
.sig-label { font-weight: 700; font-size: var(--fs-md); }
.sig-detail { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }

/* --- Security checks ---------------------------------------------------- */

.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s-2); }
.check {
  display: flex; align-items: center; gap: var(--s-2);
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 10px var(--s-3); font-size: var(--fs-sm);
}
.check .ico { width: 15px; height: 15px; flex: none; }
.check.pass .ico { color: var(--green); }
.check.fail .ico { color: var(--red); }
.check-w { margin-left: auto; font-size: 10px; color: var(--faint); }

/* --- Free next steps ---------------------------------------------------- */

.referral { background: linear-gradient(180deg, rgba(22,37,90,0.5), #0a1122); }
.referral-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-3); }
.rcard { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); }
.rcard-top { display: flex; align-items: center; gap: var(--s-2); margin-bottom: 6px; }
.rcard-icon { display: flex; color: var(--accent); }
.rcard-icon .ico { width: 22px; height: 22px; }
.rcard-name { font-weight: 700; font-size: var(--fs-md); line-height: 1.3; }
.rcard-fit { font-size: var(--fs-xs); color: var(--accent); font-weight: 700; float: right; font-variant-numeric: tabular-nums; }
.rcard-blurb { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s-3); }
.rcard-reason { font-size: var(--fs-xs); color: var(--ink-2); border-top: 1px solid var(--line); padding-top: var(--s-2); }
.fitbar { height: 5px; border-radius: var(--r-full); background: var(--surface-3); margin: var(--s-1) 0 var(--s-3); overflow: hidden; }
.fitbar > i {
  display: block; height: 100%; width: var(--fit, 0%); border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--blue), var(--teal));
  transition: width 800ms var(--ease);
}

/* --- Capabilities ------------------------------------------------------- */

.caps-panel { background: linear-gradient(180deg, rgba(22,37,90,0.5), #0a1122); }
.caps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.caps li {
  display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-md);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 11px 13px;
}
.caps li .cap-check {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: rgba(16,185,129,0.16); color: var(--green); display: grid; place-items: center;
}
.caps li .cap-check .ico { width: 13px; height: 13px; stroke-width: 2.4; }

/* --- Roadmap ------------------------------------------------------------ */

.roadmap { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-4); }
.phase { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); }
.phase-tag {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700;
  color: #140d05; background: var(--accent); border-radius: 6px; padding: 2px 8px;
}
.phase-title { font-size: var(--fs-xl); font-weight: 700; margin: var(--s-2) 0 2px; }
.phase-window { font-size: var(--fs-xs); color: var(--muted); }
.phase-blurb { font-size: var(--fs-sm); color: var(--muted); margin: var(--s-2) 0 var(--s-3); }
.phase-svc { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); padding: 6px 0; }
.phase-svc + .phase-svc { border-top: 1px solid var(--line-soft); }
.phase-svc .fit { margin-left: auto; font-size: var(--fs-xs); color: var(--accent); font-variant-numeric: tabular-nums; }
.phase-svc .ico { width: 16px; height: 16px; color: var(--accent); flex: none; }

/* --- CTA ---------------------------------------------------------------- */

.cta-panel {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
  background: linear-gradient(150deg, #1e3a8a, #0f1c3a); border-color: var(--accent-dim);
}
.cta-title { font-size: var(--fs-xl); font-weight: 700; margin: 0; font-family: var(--font-display); }
.cta-sub { color: #b9c6e2; font-size: var(--fs-md); margin: 2px 0 0; }
.cta {
  background: linear-gradient(150deg, var(--accent), var(--accent-dim));
  color: #140d05; font-weight: 700; border: 0; border-radius: var(--r-md);
  padding: 14px var(--s-6); cursor: pointer; font-size: var(--fs-lg);
  white-space: nowrap; text-decoration: none; display: inline-block;
  min-height: 44px;
  transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.cta:hover { filter: brightness(1.07); }
.cta:active { transform: translateY(1px); }

.scan-foot {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--muted); font-size: var(--fs-sm); gap: var(--s-3); flex-wrap: wrap;
}
.ghost {
  background: transparent; border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--r-sm); padding: 10px var(--s-4); cursor: pointer;
  font-size: var(--fs-sm); font-family: inherit; min-height: 44px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ghost .ico { width: 15px; height: 15px; }
.ghost:hover { border-color: var(--accent); color: var(--accent); }

.status {
  margin: var(--s-6) auto; max-width: 660px; text-align: center;
  padding: var(--s-4); border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface-2);
}
.status.error { border-color: #7f2d2d; background: #2a1620; color: var(--red); }
.status .ico { width: 16px; height: 16px; vertical-align: -0.18em; }

/* Partial-analysis warning: the target refused our request. */
.notice {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4); border-radius: var(--r-md);
  border: 1px solid var(--amber); border-left-width: 3px;
  background: #26200f; color: #f4d9a6; font-size: var(--fs-md); line-height: 1.6;
}
.notice .ico { width: 17px; height: 17px; color: var(--amber); margin-top: 2px; flex: none; }

/* --- Explainer, methodology, FAQ -----------------------------------------
   One measure for every prose column. These sections used to disagree about
   their own width, which read as a bug rather than a rhythm. */

.section-head { text-align: center; max-width: 62ch; margin: 0 auto var(--s-6); }
.section-head h2 { font-size: var(--fs-2xl); margin: 0 0 var(--s-2); }
.section-sub { color: var(--muted); font-size: var(--fs-md); margin: 0; text-wrap: pretty; }

.explainer { max-width: var(--measure); margin: var(--s-10) auto 0; }
.explainer h2 { font-size: var(--fs-2xl); margin: 0 0 var(--s-4); text-align: center; }
.definition {
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, rgba(249,115,22,0.06), transparent 60%);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-4) var(--s-5);
  font-size: var(--fs-lg); color: var(--ink); margin: 0; text-wrap: pretty;
}

.method { margin: var(--s-10) auto 0; }
/* Two columns, so the four cards land as a clean 2x2 and the wide one closes the
   block. At 320px the third column appeared and left one card marooned beside a
   hole. */
/* min(100%, 360px) because a bare 360px minimum cannot fit the 343px column at
   375px, and grid happily overflows the viewport rather than shrink it. */
.mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--s-4); }
.mcard {
  background: linear-gradient(180deg, var(--bg-2), #0a1122);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: var(--s-6);
}
.mcard-wide { grid-column: 1 / -1; }
.mcard-ic {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: rgba(32,227,178,0.10); color: var(--teal);
  margin-bottom: var(--s-3);
}
.mcard-ic.warn { background: rgba(245,158,11,0.10); color: var(--amber); }
.mcard-ic .ico { width: 18px; height: 18px; }
.mcard h3 { font-size: var(--fs-lg); margin: 0 0 var(--s-2); }
.mcard p { color: var(--muted); font-size: var(--fs-md); margin: 0; text-wrap: pretty; }

.faq { max-width: var(--measure); margin: var(--s-10) auto 0; }
.faq details {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 0 var(--s-5); margin-bottom: var(--s-2);
  transition: border-color var(--dur-fast) var(--ease);
}
.faq details:hover { border-color: var(--line); }
.faq details[open] { background: var(--surface-2); border-color: var(--line); }
.faq summary {
  cursor: pointer; font-weight: 600; font-size: var(--fs-lg);
  font-family: var(--font-display);
  padding: var(--s-4) 0; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 22px; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 var(--s-5); color: var(--muted); font-size: var(--fs-md); text-wrap: pretty; }

.page-foot {
  text-align: center; color: var(--faint); font-size: var(--fs-sm);
  padding: var(--s-6) var(--s-5); border-top: 1px solid var(--line-soft); line-height: 1.8;
}
.page-foot p { margin: 0 0 4px; }
.page-foot a { color: var(--muted); }
.page-foot .updated { color: var(--muted); }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 860px) {
  .surface-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .topbar { padding: var(--s-3) var(--s-4); }
  .brand-sub { display: none; }
  main { padding-inline: var(--s-4); }
  .hero { padding-top: var(--s-6); }
  .hero-canvas { opacity: 0.34; }
  .scanner { flex-direction: column; text-align: center; }
  .scan-steps li { text-align: left; }
  .readiness { justify-content: center; text-align: center; }
  .r-orgtype { justify-content: center; }
  .r-stats { justify-content: center; gap: var(--s-5); }
  .caps { grid-template-columns: 1fr; }

  /* The pill collapses into a stacked card. A 44px button squeezed beside an
     input at 375px leaves neither of them usable. */
  .scan-pill {
    flex-wrap: wrap; border-radius: var(--r-lg);
    padding: var(--s-2) var(--s-4) var(--s-4);
  }
  .scan-pill input { flex-basis: calc(100% - 34px); font-size: var(--fs-base); }
  #scan-btn { width: 100%; margin-top: var(--s-2); }
  .stats { padding: var(--s-5) var(--s-4); gap: var(--s-5); }
}

/* --- Reduced motion ------------------------------------------------------
   Everything that moves, stops. The scan canvas draws a single composed frame
   instead (see scene.js), and progressive bars land at their final width. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .dashboard .panel, .dashboard .panel.in { opacity: 1; transform: none; }
  .tw-cursor { display: none; }
}