/* ============================================================
   ADG Vantage — Components
   Buttons, cards, eyebrows, section heads, form primitives,
   nav, footer, hero, feature grids, CTA bands.
   Add primitives here only as pages need them.
   ============================================================ */

/* ─── Eyebrow / section label ──────────────────────────────── */
.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: var(--space-3);
}
.section-dark .eyebrow { color: var(--color-brand-on-dark); }

/* ─── Section head (h2 paired with sub-paragraph) ─────────── */
.section-head {
  color: var(--color-text-strong);
  margin-bottom: var(--space-3);
}
.section-sub {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 60ch;
}

/* ─── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background: var(--color-brand);
  color: var(--color-text-inverse);
  border-color: var(--color-brand);
}
.btn-primary:hover {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  /* Re-assert text color — base.css has `a:hover { color: var(--color-brand-hover) }`
     which would otherwise match brand-hover and make button text invisible. */
  color: var(--color-text-inverse);
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand);
}

.btn-outline {
  background: transparent;
  color: var(--color-text-strong);
  border-color: var(--color-border-strong);
}
.btn-outline:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}
.section-dark .btn-outline {
  color: var(--color-text-on-dark);
  border-color: var(--color-border-strong-on-dark);
}
.section-dark .btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-text-on-dark);
}

.btn-ghost {
  background: transparent;
  color: var(--color-brand);
  padding-inline: var(--space-3);
}
.btn-ghost:hover { color: var(--color-brand-hover); }

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
}

.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.btn .btn-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* ─── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.card-hover:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-brand-soft);
  color: var(--color-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.card-icon svg { width: 24px; height: 24px; }

.card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.card p  { font-size: var(--text-sm); }

/* ─── Badges / pills ───────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.badge-brand   { background: var(--color-brand-soft);   color: var(--color-brand-strong); }
.badge-success { background: var(--color-success-soft); color: var(--color-success); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge-neutral { background: var(--color-border-subtle); color: var(--color-text-muted); }

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.dot-success { background: var(--color-success); }
.dot-brand   { background: var(--color-brand); }

/* ─── Nav (rendered inside <site-nav>) ─────────────────────── */
/* Both element- and class-based selectors so styles apply even before
   the Web Component connectedCallback adds the class. The display:block
   matters: custom elements default to inline, and backdrop-filter below
   makes <site-nav> the containing block for the fixed-positioned mobile
   menu — without display:block, iOS Safari sizes it to its content and
   the mobile menu renders only as wide as the inline box. */
site-nav,
.site-nav {
  display: block;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.site-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: 72px;
}

.site-nav-logo {
  display: inline-flex;
  align-items: center;
}
.site-nav-logo img {
  height: 56px;
  width: auto;
}

.site-nav-links {
  display: none;
  align-items: stretch;          /* let li's fill the ul's height */
  gap: var(--space-8);
  list-style: none;
  align-self: stretch;           /* ul fills the nav-inner's full 72px */
}
@media (min-width: 1024px) {
  .site-nav-links { display: flex; }
}

.site-nav-links > li {
  position: relative;
  display: flex;                 /* let the <a> stretch vertically */
  align-items: stretch;
}
.site-nav-links > li > a {
  display: inline-flex;
  align-items: center;           /* text/caret centered visually */
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  /* Full nav-height hover surface so the mouse can travel from the
     text down to the fixed-positioned megamenu without leaving a
     hovered area. */
  padding-block: 0;
  height: 100%;
  transition: color var(--duration-fast) var(--ease-out);
}
.site-nav-links > li > a:hover,
.site-nav-links > li[data-active="true"] > a {
  color: var(--color-text-strong);
}

.caret {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--duration-fast) var(--ease-out);
}
.site-nav-links > li:hover .caret,
.site-nav-links > li:focus-within .caret { transform: rotate(180deg); }

.site-nav-dropdown {
  display: none;
  position: absolute;
  /* Sit directly under the trigger (no gap), with internal padding-top
     creating space between the trigger and the first link visually
     while keeping the hover area continuous. */
  top: 100%;
  left: -8px;
  min-width: 260px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  z-index: var(--z-dropdown);
}
.site-nav-links > li:hover .site-nav-dropdown,
.site-nav-links > li:focus-within .site-nav-dropdown {
  display: block;
}
.site-nav-dropdown a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.site-nav-dropdown a:hover {
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
}
.site-nav-dropdown a[aria-disabled="true"] {
  color: var(--color-text-subtle);
  pointer-events: none;
}
.site-nav-dropdown a[aria-disabled="true"]::after {
  content: "Coming soon";
  display: inline-block;
  margin-left: var(--space-2);
  font-size: 0.65rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  background: var(--color-border-subtle);
  padding: 2px 6px;
  border-radius: var(--radius-pill);
}

/* Rich variant — keeps the narrow dropdown shape but lets each row use the
   mega-menu item layout (icon tile + name + description). Used by the
   Platform dropdown where there are only a couple of entries but we still
   want the polished feel of the wider mega-menus.
   Important: do NOT set `display` here — the parent .site-nav-dropdown
   relies on display: none/block toggling for the hover reveal. The
   mega-menu items inside already declare display: grid !important, so
   they lay out correctly inside the default block container. */
.site-nav-dropdown-rich {
  min-width: 360px;
  padding: var(--space-3);
}
.site-nav-dropdown-rich .site-nav-megamenu-item {
  /* The mega-menu item declares !important overrides; this matches them so
     the row sits comfortably in the narrower dropdown shell. */
  padding: var(--space-3) !important;
}
.site-nav-dropdown-rich .site-nav-megamenu-item + .site-nav-megamenu-item {
  margin-top: 2px;
}

.site-nav-dd-label {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.site-nav-dd-divider {
  height: 1px;
  background: var(--color-border-subtle);
  margin: var(--space-2) 0;
}

/* ─── Mega-menu (Modules dropdown) ───────────────────────────
   Multi-column, icon-rich variant of .site-nav-dropdown for the
   Modules trigger. Desktop-only — the mobile menu is a separate
   flat list that's unaffected by these styles. */
.site-nav-megamenu {
  /* Fixed positioning so the wide panel is always centered on the
     viewport, not anchored to its narrow trigger. The dropdown stays
     a child of the trigger <li> in the DOM, so :hover continuity and
     the display: none / block toggle still work via the parent rule. */
  position: fixed;
  top: 72px;             /* nav-inner height — keep in sync if nav height changes */
  left: 50%;
  transform: translateX(-50%);
  /* Override the narrow-dropdown sizing */
  width: min(960px, calc(100vw - var(--space-8)));
  min-width: 0;
  max-width: none;
  padding: var(--space-6) var(--space-6) var(--space-5);
  /* The default dropdown z-index sits below the sticky nav (200);
     fixed positioning creates its own stacking context, so bump
     above the nav. */
  z-index: calc(var(--z-sticky) + 1);
}

.site-nav-megamenu-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
/* Solutions uses a 2-column layout (fewer items, each with longer copy).
   Any item can opt into spanning both columns via the -wide modifier —
   used for the catch-all "Special districts" row. */
.site-nav-megamenu-solutions .site-nav-megamenu-cols {
  grid-template-columns: repeat(2, 1fr);
}
.site-nav-megamenu-item-wide {
  grid-column: 1 / -1;
}
.site-nav-megamenu-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.site-nav-megamenu-heading {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  padding: 0 var(--space-2) var(--space-2);
  margin-bottom: 2px;
}

.site-nav-megamenu-item {
  display: grid !important;     /* override the default <a> block-row treatment */
  grid-template-columns: 36px 1fr;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) !important;
  border-radius: var(--radius-sm);
  align-items: flex-start;
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.site-nav-megamenu-item:hover {
  background: var(--color-brand-soft);
}
.site-nav-megamenu-item:hover .site-nav-megamenu-icon {
  background: var(--color-bg);
  color: var(--color-brand-strong);
}
.site-nav-megamenu-item:hover .site-nav-megamenu-name {
  color: var(--color-brand-strong);
}

.site-nav-megamenu-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.site-nav-megamenu-icon svg {
  width: 18px;
  height: 18px;
}

.site-nav-megamenu-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.site-nav-megamenu-name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-strong);
  line-height: 1.3;
  transition: color var(--duration-fast) var(--ease-out);
}
.site-nav-megamenu-code {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-subtle);
  background: transparent;
  padding: 1px 5px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  vertical-align: 1px;
}
.site-nav-megamenu-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* ─── Mega-menu feature row (CitizenLink) ──────────────────── */
.site-nav-megamenu-footer {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
}
.site-nav-megamenu-feature {
  display: grid !important;
  grid-template-columns: 44px 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-4) !important;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-brand-soft) 0%, rgba(0,159,225,0.10) 100%);
  border: 1px solid transparent;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.site-nav-megamenu-feature:hover {
  background: var(--color-brand-soft);
  border-color: var(--color-brand);
}
.site-nav-megamenu-feature:hover .site-nav-megamenu-feature-arrow {
  transform: translateX(2px);
}
.site-nav-megamenu-icon-feature {
  width: 44px;
  height: 44px;
  background: var(--color-brand);
  color: var(--color-text-inverse);
}
.site-nav-megamenu-feature:hover .site-nav-megamenu-icon-feature {
  background: var(--color-brand-hover);
  color: var(--color-text-inverse);
}
.site-nav-megamenu-icon-feature svg {
  width: 22px;
  height: 22px;
}
.site-nav-megamenu-feature-eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-brand-strong);
  margin-bottom: 2px;
}
.site-nav-megamenu-feature .site-nav-megamenu-name {
  font-size: var(--text-base);
}
.site-nav-megamenu-feature-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-text-inverse);
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out);
}
.site-nav-megamenu-feature-arrow svg {
  width: 14px;
  height: 14px;
}

.site-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
@media (max-width: 767px) {
  .site-nav-cta .btn-outline { display: none; }
}

/* Mobile menu toggle */
.site-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  color: var(--color-text-strong);
}
@media (min-width: 1024px) {
  .site-nav-toggle { display: none; }
}

.site-nav-mobile {
  display: none;
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-6) var(--container-pad);
  box-shadow: var(--shadow-md);
  z-index: var(--z-sticky);
}
.site-nav[data-mobile-open="true"] .site-nav-mobile { display: block; }
.site-nav-mobile ul { display: flex; flex-direction: column; gap: var(--space-1); }
.site-nav-mobile a {
  display: block;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-weight: 600;
  color: var(--color-text-strong);
}
.site-nav-mobile a:hover { background: var(--color-brand-soft); color: var(--color-brand-strong); }
.site-nav-mobile-section {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  padding: var(--space-3) var(--space-3) var(--space-1);
}

/* ─── Footer (rendered inside <site-footer>) ───────────────── */
/* Both element- and class-based selectors so styles apply even before
   the Web Component connectedCallback adds the class. */
site-footer,
.site-footer {
  display: block;
  background: var(--color-bg-on-dark);
  color: var(--color-text-on-dark);
  padding-block: var(--space-16) var(--space-6);
}
site-footer h4,
.site-footer h4 {
  color: #FFFFFF;
  font-size: var(--text-base);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: var(--space-4);
}
site-footer p,
site-footer a,
.site-footer p,
.site-footer a {
  color: var(--color-text-muted-on-dark);
}
site-footer a,
.site-footer a {
  font-size: var(--text-sm);
}
site-footer a:hover,
.site-footer a:hover { color: var(--color-text-on-dark); }
site-footer ul,
.site-footer ul { display: flex; flex-direction: column; gap: var(--space-2); }

.site-footer-grid {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .site-footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: var(--space-8);
  }
}

.site-footer-brand p {
  font-size: var(--text-sm);
  max-width: 32ch;
}

.site-footer-address {
  font-style: normal;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text-muted-on-dark);
  margin-top: var(--space-4);
}

.site-footer-wordmark {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text-on-dark);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}

.site-footer-bottom {
  margin-top: var(--space-10);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-on-dark);
  font-size: var(--text-xs);
  color: var(--color-text-subtle-on-dark);
}

/* ─── Hero ─────────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(ellipse at top right, rgba(155, 200, 230, 0.32), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(57, 114, 165, 0.55), transparent 55%),
    linear-gradient(180deg, #0c2438 0%, #143553 50%, #1d4970 100%);
  color: var(--color-text-on-dark);
  padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}
.hero h1 {
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-5);
  text-wrap: balance;
}
.hero .eyebrow { color: #7DD3FC; }
.hero .lede {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: rgba(255, 255, 255, 0.82);
  max-width: 56ch;
  margin-bottom: var(--space-8);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.05fr 1fr; gap: var(--space-16); }
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-proof-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.78);
}

/* The hero is dark-by-design (not via .section-dark wrapper), so buttons
   inside it need the same on-dark treatment we give .section-dark scopes. */
.hero .btn-outline {
  background: transparent;
  color: var(--color-text-on-dark);
  border-color: rgba(255, 255, 255, 0.4);
}
.hero .btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-on-dark);
  border-color: var(--color-text-on-dark);
}
.hero .btn-primary {
  background: #FFFFFF;
  color: var(--color-brand-strong);
  border-color: #FFFFFF;
}
.hero .btn-primary:hover {
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
  border-color: var(--color-brand-soft);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Hero visual (decorative module grid) */
.module-grid-visual {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  max-width: 460px;
  margin-inline: auto;
}
.module-tile {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  transition: background var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.module-tile:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.24);
  transform: translateY(-2px);
}
.module-tile-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(56, 189, 248, 0.18);
  color: #7DD3FC;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.module-tile-icon svg { width: 18px; height: 18px; }
.module-tile-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.3;
}

/* ─── Logo wall ────────────────────────────────────────────── */
.logo-wall {
  background: var(--color-surface);
  border-block: 1px solid var(--color-border);
  padding-block: var(--space-12);
}
.logo-wall-label {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-8);
}
.logo-wall-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-12);
}
.org-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

/* ─── Stat block ───────────────────────────────────────────── */
.stat-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .stat-row { grid-template-columns: repeat(3, 1fr); }
}
.stat {
  text-align: left;
}
.stat-num {
  font-size: clamp(2.5rem, 4vw, 3.25rem);
  font-weight: 800;
  color: var(--color-brand);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-2);
}
.section-dark .stat-num { color: var(--color-brand-on-dark); }
.stat-lbl {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 600;
}

/* ─── Quote / testimonial ──────────────────────────────────── */
.quote {
  border-left: 3px solid var(--color-brand);
  padding-left: var(--space-6);
}
.quote-text {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-text-strong);
  margin-bottom: var(--space-4);
  font-weight: 500;
}
.quote-attr {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.quote-attr strong { color: var(--color-text-strong); }

/* ─── <lite-youtube> ──────────────────────────────────────── */
lite-youtube {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
}
.lty-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
lite-youtube::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, transparent 40%, transparent 60%, rgba(0,0,0,0.2) 100%);
  pointer-events: none;
  transition: background var(--duration-base) var(--ease-out);
}
lite-youtube:hover::before,
lite-youtube:focus-within::before {
  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.3) 100%);
}
.lty-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 1;
}
.lty-play-btn svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
.lty-play-bg {
  fill: #212121;
  fill-opacity: 0.8;
  transition: fill var(--duration-fast) var(--ease-out), fill-opacity var(--duration-fast) var(--ease-out);
}
lite-youtube:hover .lty-play-bg,
.lty-play-btn:focus-visible .lty-play-bg {
  fill: var(--color-brand);
  fill-opacity: 1;
}
.lty-play-btn:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
lite-youtube iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ─── CTA band ─────────────────────────────────────────────── */
.cta-band {
  background: var(--color-brand);
  color: var(--color-text-inverse);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-8);
  text-align: center;
}
.cta-band h2,
.cta-band h3 { color: var(--color-text-inverse); }
.cta-band p { color: rgba(255, 255, 255, 0.85); margin-bottom: var(--space-6); }
.cta-band .btn-primary {
  background: var(--color-bg);
  color: var(--color-brand-strong);
  border-color: var(--color-bg);
}
.cta-band .btn-primary:hover {
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
  border-color: var(--color-brand-soft);
}
.cta-band .btn-outline {
  color: var(--color-text-inverse);
  border-color: rgba(255, 255, 255, 0.4);
}
.cta-band .btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-text-inverse);
  border-color: var(--color-text-inverse);
}

/* ─── Form ─────────────────────────────────────────────────── */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px) {
  .form-row-2 { grid-template-columns: 1fr 1fr; }
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-strong);
}
.field .req { color: var(--color-danger); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.field textarea {
  min-height: 120px;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: var(--shadow-focus);
}
.field [aria-invalid="true"] {
  border-color: var(--color-danger);
}
.field .help {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}
.field .error {
  font-size: var(--text-xs);
  color: var(--color-danger);
  font-weight: 600;
  display: none;
}
.field [aria-invalid="true"] ~ .error { display: block; }

.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
@media (min-width: 640px) {
  .checkbox-grid { grid-template-columns: 1fr 1fr; }
}
.checkbox-grid label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.checkbox-grid label:has(input:checked) {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
}

/* Honeypot — visually hidden, accessible-hidden, label-stripped.
   Real users don't fill this; bots often will. */
.honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}
.form-actions .privacy {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  flex: 1 1 240px;
}
.form-actions .privacy a { color: var(--color-brand); }

.form-status {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  display: none;
}
.form-status[data-state="error"] {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  display: block;
}
.form-status[data-state="success"] {
  background: var(--color-success-soft);
  color: var(--color-success);
  display: block;
}

.form-confirm {
  display: none;
  text-align: center;
  padding: var(--space-12) var(--space-6);
}
.form-confirm[data-active="true"] { display: block; }
.form-confirm-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-success-soft);
  color: var(--color-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.form-confirm-icon svg { width: 32px; height: 32px; }
.form-confirm h3 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}
.form-confirm-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-6);
}

/* ─── Contact split layout ─────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: start;
}
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 1.4fr 1fr; gap: var(--space-16); }
}

.contact-aside h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-subtle);
  margin-bottom: var(--space-3);
}
.contact-aside .contact-block {
  margin-bottom: var(--space-8);
}
.contact-aside .contact-block p,
.contact-aside .contact-block a {
  font-size: var(--text-base);
  color: var(--color-text);
}
.contact-aside .contact-block a { color: var(--color-brand); font-weight: 600; }
.contact-aside .what-to-expect {
  background: var(--color-brand-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.contact-aside .what-to-expect h4 { color: var(--color-brand-strong); }
.contact-aside .what-to-expect ol {
  list-style: decimal inside;
  font-size: var(--text-sm);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ─── Page hero (light variant — for non-homepage tops) ────── */
.page-hero {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem);
}
.page-hero h1 { margin-bottom: var(--space-5); text-wrap: balance; }
.page-hero .lede {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--color-text-muted);
  max-width: 60ch;
  margin-bottom: var(--space-8);
}
.page-hero-grid {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 1024px) {
  .page-hero-grid { grid-template-columns: 1.2fr 1fr; gap: var(--space-16); }
}

/* ─── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  margin-bottom: var(--space-6);
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-brand); }
.breadcrumb-sep { color: var(--color-text-subtle); }

/* ─── Feature list (checkmark items, single column) ────────── */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.feature-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-snug);
}
.feature-list li::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-brand-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233972a5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 14px no-repeat;
  flex-shrink: 0;
  margin-top: 2px;
}
.feature-list strong {
  color: var(--color-text-strong);
  display: block;
  margin-bottom: var(--space-1);
}

/* ─── Capability grid (cards with icon + text, 2 or 3 col) ─── */
.capability-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .capability-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
.capability {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.capability-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-brand-soft);
  color: var(--color-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.capability-icon svg { width: 22px; height: 22px; }
.capability h3 { font-size: var(--text-lg); }
.capability p  { font-size: var(--text-sm); }

/* ─── Vs-table (modern vs legacy comparison) ───────────────── */
.vs-table {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
@media (min-width: 768px) {
  .vs-table { grid-template-columns: 1fr 1fr 1fr; gap: 0; padding: 0; overflow: hidden; }
}
.vs-row,
.vs-head {
  display: contents;
}
.vs-cell {
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 768px) {
  /* Default: 3 columns. The :nth-child rule removes the right border on
     the rightmost cell of each row. Add a .vs-table-N modifier for other
     column counts so the right edge isn't drawn against the table's
     outer border, and internal columns keep their dividers. */
  .vs-cell { border-right: 1px solid var(--color-border); }
  .vs-cell:nth-child(3n) { border-right: none; }

  /* 4-column variant */
  .vs-table-4 .vs-cell:nth-child(3n) { border-right: 1px solid var(--color-border); }
  .vs-table-4 .vs-cell:nth-child(4n) { border-right: none; }

  /* 5-column variant */
  .vs-table-5 .vs-cell:nth-child(3n) { border-right: 1px solid var(--color-border); }
  .vs-table-5 .vs-cell:nth-child(5n) { border-right: none; }

  /* Drop the bottom border on the last row so it doesn't double up with
     the table's outer border. Reads the column count via the same
     modifier — 3/4/5. */
  .vs-cell:nth-last-child(-n+3) { border-bottom: none; }
  .vs-table-4 .vs-cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--color-border); }
  .vs-table-4 .vs-cell:nth-last-child(-n+4) { border-bottom: none; }
  .vs-table-5 .vs-cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--color-border); }
  .vs-table-5 .vs-cell:nth-last-child(-n+5) { border-bottom: none; }
}
.vs-cell-row-label {
  font-weight: 700;
  color: var(--color-text-strong);
  background: var(--color-bg);
}
.vs-cell-head {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  background: var(--color-bg);
}
.vs-cell-head.vantage {
  color: var(--color-brand);
}
.vs-cell-vantage {
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
  font-weight: 600;
}

/* ─── Related modules row ──────────────────────────────────── */
.related-modules {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .related-modules { grid-template-columns: repeat(3, 1fr); }
}
.related-modules .card h3 { font-size: var(--text-base); }
.related-modules .card p  { font-size: var(--text-xs); }

/* ─── Timeline / heritage ──────────────────────────────────── */
.timeline {
  position: relative;
  padding-left: var(--space-8);
}
.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-border);
}
.timeline-item {
  position: relative;
  padding-bottom: var(--space-8);
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-8) + 2px);
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 3px solid var(--color-brand);
}
.timeline-year {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: var(--space-2);
}
.timeline-item h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

/* ─── Customer story card (Customers page) ─────────────────── */
.story-card {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
@media (min-width: 768px) {
  .story-card { grid-template-columns: 1fr 2fr; gap: var(--space-10); }
}
.story-meta dt {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-top: var(--space-3);
}
.story-meta dt:first-child { margin-top: 0; }
.story-meta dd {
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: 600;
}
.story-meta dd + dd { margin-top: var(--space-1); }

/* ─── Prose (long-form text — privacy policy, etc.) ───────── */
.prose {
  max-width: 70ch;
  color: var(--color-text);
}
.prose h1 { margin-bottom: var(--space-6); }
.prose h2 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  font-size: var(--text-2xl);
}
.prose h3 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  font-size: var(--text-lg);
}
.prose p { margin-top: var(--space-4); }
.prose ul, .prose ol {
  margin-top: var(--space-4);
  padding-left: var(--space-6);
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: var(--space-2); }
/* Use brand-strong for prose links — passes WCAG AA contrast on white where
   plain brand sits closer to ~4:1. */
.prose a {
  color: var(--color-brand-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--duration-fast) var(--ease-out),
              text-decoration-color var(--duration-fast) var(--ease-out);
}
.prose a:hover {
  color: var(--color-brand);
  text-decoration-thickness: 2px;
}
.prose strong { color: var(--color-text-strong); }

/* ─── Submodule grid ────────────────────────────────────────
   Visual breakdown of a module's sub-modules. Use on /modules/<x>
   pages where a single module spans several capabilities (FMS most
   notably). Each cell: icon chip, name, short descriptor. */
.submodule-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .submodule-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .submodule-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .submodule-grid:not(.submodule-grid-4) { grid-template-columns: repeat(3, 1fr); }
}

.submodule {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  align-items: flex-start;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.submodule:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.submodule-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.submodule-icon svg { width: 18px; height: 18px; }
.submodule-name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-strong);
  margin-bottom: 2px;
}
.submodule-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* ─── Flow diagram ──────────────────────────────────────────
   Linear sequence of nodes connected by arrows. Used to visualize
   the interconnectedness story: how a transaction flows from one
   module through to GL with no manual handoffs. */
.flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  position: relative;
}
@media (min-width: 768px) {
  .flow {
    grid-template-columns: repeat(var(--flow-steps, 4), 1fr);
    gap: 0;
    align-items: stretch;
  }
}
.flow-step {
  position: relative;
  padding: var(--space-5) var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  z-index: 1;
}
@media (min-width: 768px) {
  .flow-step:not(:last-child) {
    margin-right: 24px; /* room for the arrow */
  }
  .flow-step:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -24px;
    top: 50%;
    width: 24px;
    height: 2px;
    background: var(--color-brand);
    transform: translateY(-50%);
  }
  .flow-step:not(:last-child)::before {
    content: "";
    position: absolute;
    right: -16px;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 8px solid var(--color-brand);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    transform: translateY(-50%);
    z-index: 2;
  }
}
.flow-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-text-inverse);
  font-weight: 800;
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}
.flow-step-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-strong);
  margin-bottom: var(--space-1);
}
.flow-step-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* ─── Live demo cards ──────────────────────────────────────
   For surfacing CitizenLink demo URLs from module pages. The
   "preview" area is a hand-coded miniature UI mock styled to
   suggest a screenshot — replaced with real screenshots when
   marketing supplies them. */
.demo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  /* Top-align so cards size to their own content. With two demo
     cards of different preview heights, stretching them to match
     leaves the shorter card with a big empty block. */
  align-items: start;
}
@media (min-width: 768px) {
  .demo-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

.demo-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.demo-card:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.demo-card-preview {
  position: relative;
  background:
    linear-gradient(135deg, rgba(57,114,165,0.12), rgba(91,158,208,0.07));
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.demo-card-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-text-strong);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  z-index: 2;
}
/* Generic pulsing "live" indicator dot — used inside demo card badges
   and the compact demo-tile pattern on the CitizenLink hub. */
.demo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ADE80;
  animation: demo-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes demo-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .demo-card-badge .demo-dot { animation: none; }
}


.demo-card-body {
  padding: var(--space-5);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.demo-card-body h3 {
  font-size: var(--text-lg);
  margin-bottom: 0;
}
.demo-card-body p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}
.demo-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  margin-top: auto;
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--text-sm);
  font-weight: 600;
}
.demo-card-host {
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.demo-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-brand-strong);
}
.demo-card:hover .demo-card-cta { color: var(--color-brand); }
.demo-card-cta svg { width: 14px; height: 14px; }

/* ─── CitizenLink portal preview ──────────────────────────
   Stylized miniature of an ADG CitizenLink portal page.
   Captures the chrome (Tripleview navy header, breadcrumb
   bar with home/history tiles and Login button) and a
   content area that can be filled per-portal — three-column
   infobox layout for payments-style pages, banner + table
   for ATK, single column with cards for other portals.
   Sized to fit inside a .demo-card-preview tile. */
.cl-preview {
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
  background: #EFF2F6;
  border: 1px solid #D5DBE3;
  border-radius: 6px;
  overflow: hidden;
  font-family: var(--font-sans);
  color: #2D3748;
  box-shadow: var(--shadow-md);
}

/* Navy gradient header band with stylized Tripleview logo
   on the left and portal title on the right. */
.cl-preview-header {
  background: linear-gradient(135deg, #2A4870 0%, #3D5E89 100%);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cl-preview-logo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #FFFFFF;
}
.cl-preview-logo svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.cl-preview-logo-text {
  font-family: 'Lato', sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: -0.02em;
}
.cl-preview-title {
  color: #FFFFFF;
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-align: right;
  line-height: 1.2;
}

/* White thin bar under the header: home & history tiles
   on the left, Login button pinned right. */
.cl-preview-bar {
  background: #FFFFFF;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #DFE5EC;
}
.cl-preview-bar-icons {
  display: inline-flex;
  gap: 3px;
}
.cl-preview-icon-tile {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(180deg, #4DAEDB 0%, #2F92CA 100%);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cl-preview-icon-tile svg { width: 9px; height: 9px; }
.cl-preview-login {
  background: linear-gradient(180deg, #4F94CC 0%, #2E6FAA 100%);
  color: #FFFFFF;
  font-size: 7.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 3px;
  line-height: 1;
}

/* The content area below the bar. Defaults to a small inset
   so cards sit on the grey backplate. */
.cl-preview-body {
  padding: 4px;
}

/* Three-column flex layout for portals that use Other
   Services / main / New & Existing customers infoboxes. */
.cl-preview-cols {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 78px;
  gap: 4px;
}

/* White infobox card used in each column. */
.cl-preview-box {
  background: #FFFFFF;
  border: 1px solid #DFE5EC;
  border-radius: 5px;
  padding: 6px 7px;
}
.cl-preview-box h3 {
  font-size: 8px;
  font-weight: 800;
  color: #1F3955;
  margin: 0 0 3px 0;
  line-height: 1.25;
}
.cl-preview-box h4 {
  font-size: 7.5px;
  font-weight: 700;
  color: #1F3955;
  margin: 4px 0 2px 0;
  line-height: 1.25;
}
.cl-preview-box p {
  font-size: 6.5px;
  color: #4A5568;
  line-height: 1.4;
  margin: 0 0 3px 0;
}
.cl-preview-box a,
.cl-preview-box .cl-preview-link {
  display: block;
  font-size: 6.5px;
  color: #6E5BD0;
  text-decoration: underline;
  text-underline-offset: 1px;
  margin: 1.5px 0;
  line-height: 1.35;
}
.cl-preview-box strong { color: #1F3955; font-weight: 700; }
.cl-preview-box hr {
  border: none;
  border-top: 1px solid #E5EAF1;
  margin: 4px 0;
}

/* Banner used by portals that lead with an image (e.g. ATK). */
.cl-preview-banner {
  height: 38px;
  border-radius: 5px 5px 0 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0) 40%),
    linear-gradient(90deg, #34629B 0%, #4A85B8 60%, #6FA8CE 100%);
  position: relative;
  overflow: hidden;
}
.cl-preview-banner::after {
  /* Subtle "city skyline" silhouette to suggest the photo banner */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 14px;
  background:
    linear-gradient(to top, rgba(20,40,68,0.55), transparent),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'><path d='M0 14 V8 H6 V10 H10 V4 H14 V8 H18 V6 H22 V9 H28 V3 H34 V8 H40 V5 H46 V9 H52 V2 H58 V8 H64 V6 H70 V9 H76 V4 H82 V8 H88 V7 H94 V10 H100 V14 Z' fill='rgba(20,40,68,0.6)'/></svg>") bottom/100% 14px no-repeat;
}

/* Table-style rows for job listings, case lists, etc. */
.cl-preview-row {
  background: #FFFFFF;
  border: 1px solid #DFE5EC;
  border-radius: 4px;
  padding: 5px 7px;
  margin-bottom: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.cl-preview-row-title {
  font-size: 8px;
  font-weight: 700;
  color: #1F3955;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cl-preview-row-meta {
  font-size: 6.5px;
  color: #6B7385;
  margin-top: 1px;
}
.cl-preview-status {
  font-size: 6.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 5px;
  border-radius: 99px;
  flex-shrink: 0;
}
.cl-preview-status-open   { color: #16A34A; background: #DCFCE7; }
.cl-preview-status-filled { color: #6B7385; background: #E5EAF1; }

/* Pair of action buttons used at the bottom of some portals. */
.cl-preview-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.cl-preview-actions > * { flex: 1; text-align: center; padding: 5px; border-radius: 4px; font-size: 8px; font-weight: 700; }
.cl-preview-btn-primary {
  background: linear-gradient(180deg, #4F94CC 0%, #2E6FAA 100%);
  color: #FFFFFF;
}
.cl-preview-btn-outline {
  background: #FFFFFF;
  border: 1px solid #2E6FAA;
  color: #2E6FAA;
}

/* ─── CitizenLink "custom banner" variant ──────────────────
   Used by portals where the customer supplies their own banner
   image instead of relying on the standard Tripleview header,
   e.g. ATK. Drops the navy chrome and replaces it with a beige
   banner band, then a single-column document body with
   jQuery-UI-themed underlined H1s, a bullet list, a login form,
   and a multi-column job-listings table.
   Wrap with .cl-preview .cl-preview-atk to opt in. */
.cl-preview-atk { background: #FFFFFF; }

.cl-preview-atk-banner {
  background: #B6D1B0;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 52px;
}
.cl-atk-banner-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.cl-atk-banner-city {
  font-family: 'Lato', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 11px;
  color: #1A1A1A;
}
.cl-atk-banner-name {
  font-family: 'Lato', sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 22px;
  color: #1A1A1A;
  letter-spacing: -0.01em;
  line-height: 0.95;
}
.cl-atk-banner-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.cl-atk-banner-seal {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #FFE9A0 0%, #C2A04A 40%, #8B6B1F 80%, #6B4F12 100%);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cl-atk-banner-seal::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 40%, #6FA8CE 0%, #2C5A85 60%, #1F3F60 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}
.cl-atk-banner-dept {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 8px;
  color: #1A1A1A;
  margin-right: 2px;
}

.cl-preview-doc {
  padding: 8px 10px 10px;
  background: #FFFFFF;
  border: 1px solid #C8C8C8;
  border-top: none;
}
.cl-doc-h1 {
  font-size: 9px;
  font-weight: 700;
  color: #5A2A5A;
  margin: 6px 0 3px 0;
  padding-bottom: 2px;
  border-bottom: 1px solid #E8A87C;
  line-height: 1.2;
}
.cl-doc-h1:first-child { margin-top: 0; }
.cl-doc-p {
  font-size: 7px;
  color: #333333;
  line-height: 1.35;
  margin: 2px 0;
}
.cl-doc-ul {
  font-size: 7px;
  color: #333333;
  line-height: 1.4;
  padding-left: 14px;
  margin: 3px 0;
}
.cl-doc-ul li { margin: 1px 0; }

.cl-doc-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin: 4px 0 6px;
}
.cl-doc-form-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 7px;
}
.cl-doc-form-row > span:first-child {
  color: #333333;
  font-weight: 600;
}
.cl-doc-input {
  display: inline-block;
  height: 9px;
  width: 110px;
  background: #FFFFFF;
  border: 1px solid #B5B5B5;
  border-radius: 1px;
}
.cl-doc-btn {
  display: inline-block;
  padding: 3px 12px;
  font-size: 7.5px;
  font-weight: 600;
  color: #2E6FAA;
  background: linear-gradient(180deg, #FFFFFF 0%, #E6EFF5 100%);
  border: 1px solid #B5C8DA;
  border-radius: 3px;
  line-height: 1;
}
.cl-doc-btn-center { text-align: center; margin: 4px 0 6px; }

.cl-doc-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  font-size: 6.5px;
  border: 1px solid #B5B5B5;
}
.cl-doc-table th {
  background: #F0EFE5;
  color: #333333;
  font-weight: 700;
  text-align: left;
  padding: 3px 4px;
  border-bottom: 1px solid #B5B5B5;
  font-size: 6px;
}
.cl-doc-table td {
  padding: 3px 4px;
  color: #5A4F43;
  border-bottom: 1px solid #EAE6DC;
  vertical-align: middle;
}
.cl-doc-table tr:last-child td { border-bottom: none; }
.cl-doc-table td.cl-doc-status-open    { color: #4A9655; font-weight: 700; }
.cl-doc-table td.cl-doc-status-filled  { color: #888888; font-weight: 700; }
.cl-doc-btn-mini {
  display: inline-block;
  padding: 1px 5px;
  font-size: 6px;
  font-weight: 600;
  color: #2E6FAA;
  background: linear-gradient(180deg, #FFFFFF 0%, #E6EFF5 100%);
  border: 1px solid #B5C8DA;
  border-radius: 2px;
  line-height: 1.3;
}

/* ─── Compact demo tiles ────────────────────────────────────
   Lighter variant of .demo-card used when surfacing many demos in
   one place (e.g. the /citizenlink hub's 8-up grid). Builds on top
   of the existing .card / .card-hover pattern — no large preview
   mock, just a header row, body text, and a meta row at the foot. */
.demo-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.demo-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.demo-tile-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-text-strong);
  color: var(--color-text-inverse);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.demo-tile h3 {
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}
.demo-tile p {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-3) 0;
}
.demo-tile-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-3);
  margin-top: auto;
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--text-xs);
}
.demo-tile-host {
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.demo-tile-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-brand-strong);
  font-weight: 700;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out);
}
.demo-tile:hover .demo-tile-cta {
  color: var(--color-brand);
  transform: translateX(2px);
}

/* ─── Get Started wizard ───────────────────────────────────── */
.wizard {
  width: 100%;
}
.wizard-shell {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: clamp(var(--space-6), 3vw, var(--space-10));
}

/* ─── Progress steps ───────────────────────────────────────── */
.wizard-progress {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border-subtle);
}
.wizard-progress-step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.wizard-progress-step:hover:not(:disabled) {
  background: var(--color-surface);
  color: var(--color-text-strong);
}
.wizard-progress-step:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.wizard-progress-step[data-state="current"] {
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
  border-color: var(--color-brand);
}
.wizard-progress-step[data-state="done"] {
  color: var(--color-brand);
}
.wizard-progress-step[data-state="done"] .wizard-progress-num {
  background: var(--color-brand);
  color: var(--color-text-inverse);
  border-color: var(--color-brand);
}
.wizard-progress-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid currentColor;
  font-size: 0.7rem;
  font-weight: 800;
  flex-shrink: 0;
}
.wizard-progress-label {
  white-space: nowrap;
}
@media (max-width: 639px) {
  .wizard-progress-label {
    display: none;
  }
  .wizard-progress-step[data-state="current"] .wizard-progress-label {
    display: inline;
  }
}

/* ─── Step panels ──────────────────────────────────────────── */
.wizard-panel h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: var(--space-3);
  outline: none;
}
.wizard-panel h2:focus-visible {
  outline: 2px solid transparent;
}
.wizard-step-desc {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  max-width: 70ch;
  margin-bottom: var(--space-8);
}

.wizard-section {
  margin-top: var(--space-10);
}
.wizard-section:first-child {
  margin-top: 0;
}
.wizard-section-head {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-strong);
  margin-bottom: var(--space-2);
}
.wizard-section-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
  max-width: 70ch;
}

/* ─── Option cards (checkboxes for modules / CL / services) ── */
.wizard-option-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .wizard-option-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.wizard-option {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-raised);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.wizard-option:hover {
  border-color: var(--color-brand);
  background: var(--color-bg);
}
.wizard-option:has(input:checked) {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
}
.wizard-option > input[type="checkbox"],
.wizard-option > input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 6px;
  background: var(--color-bg);
  margin-top: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.wizard-option > input[type="checkbox"]:checked,
.wizard-option > input[type="radio"]:checked {
  background: var(--color-brand);
  border-color: var(--color-brand);
}
.wizard-option > input[type="checkbox"]:checked::after {
  content: "";
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
}
.wizard-option-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.wizard-option-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
}
.wizard-option-label {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-strong);
}
.wizard-option-code {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-subtle);
  margin-left: var(--space-1);
}
.wizard-option-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-brand-strong);
  background: var(--color-brand-soft);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-brand);
}
.wizard-option-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}
.wizard-option-link {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-brand-strong);
  margin-top: var(--space-1);
  align-self: flex-start;
}
.wizard-option-link:hover {
  text-decoration: underline;
}

/* ─── Pickable cards (modules + CitizenLink with Existing/Add toggles) */
.wizard-pickable {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface-raised);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.wizard-pickable:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg);
}
.wizard-pickable[data-pick-state="have"]:hover {
  border-color: #16A34A;
}
.wizard-pickable[data-pick-state="want"]:hover {
  border-color: var(--color-brand);
}
.wizard-pickable:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-color: var(--color-brand);
}
/* Inner links and buttons get their own focus rings — make sure they
   don't blur into the card's focus state. */
.wizard-pickable a:focus-visible,
.wizard-pickable button:focus-visible {
  position: relative;
  z-index: 1;
}
@media (min-width: 640px) {
  .wizard-pickable {
    grid-template-columns: 1fr auto;
    align-items: flex-start;
  }
}
.wizard-pickable[data-pick-state="have"] {
  border-color: #16A34A;
  background: #F0FDF4;
  box-shadow: var(--shadow-sm);
}
.wizard-pickable[data-pick-state="want"] {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
  box-shadow: var(--shadow-sm);
}
.wizard-pickable .wizard-option-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.wizard-pick-toggles {
  display: inline-flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-self: flex-start;
}
@media (max-width: 639px) {
  .wizard-pick-toggles {
    grid-column: 1 / -1;
    width: 100%;
  }
}

.wizard-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
  flex: 1 1 auto;
  justify-content: center;
}
@media (min-width: 640px) {
  .wizard-toggle { flex: 0 0 auto; }
}
.wizard-toggle svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.wizard-toggle:hover {
  border-color: var(--color-text-strong);
  color: var(--color-text-strong);
}

.wizard-toggle-have[aria-pressed="true"] {
  background: #16A34A;
  border-color: #16A34A;
  color: #FFFFFF;
}
.wizard-toggle-have[aria-pressed="true"]:hover {
  background: #138A3F;
  border-color: #138A3F;
}

.wizard-toggle-want[aria-pressed="true"] {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-text-inverse);
}
.wizard-toggle-want[aria-pressed="true"]:hover {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
}

.wizard-pick-legend {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-8);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.wizard-pick-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.wizard-pick-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}
.wizard-pick-swatch-have { background: #16A34A; }
.wizard-pick-swatch-want { background: var(--color-brand); }

/* ─── Radio cards (org type, status, CL style) ─────────────── */
.wizard-radio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .wizard-radio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .wizard-radio-grid:not(.wizard-radio-grid-2) {
    grid-template-columns: repeat(3, 1fr);
  }
}
.wizard-radio-grid-2 {
  grid-template-columns: 1fr !important;
}
@media (min-width: 640px) {
  .wizard-radio-grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.wizard-radio {
  position: relative;
  display: block;
  padding: var(--space-5);
  background: var(--color-surface-raised);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.wizard-radio:hover {
  border-color: var(--color-brand);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.wizard-radio:has(input:checked) {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
  box-shadow: var(--shadow-sm);
}
.wizard-radio > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.wizard-radio-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: flex-start;
}
.wizard-radio:has(.wizard-radio-icon) .wizard-radio-body {
  grid-template-columns: auto 1fr;
}
.wizard-radio-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-brand-soft);
  color: var(--color-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wizard-radio-icon svg {
  width: 22px;
  height: 22px;
}
.wizard-radio-label {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-strong);
  margin-bottom: var(--space-1);
}
.wizard-radio:has(input:checked) .wizard-radio-label {
  color: var(--color-brand-strong);
}
.wizard-radio-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}

/* ─── Summary / review ─────────────────────────────────────── */
.wizard-summary-block {
  margin-bottom: var(--space-6);
}
.wizard-summary-block-head {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: var(--space-2);
}
.wizard-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-10);
}
@media (min-width: 768px) {
  .wizard-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}
.wizard-summary-section h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-subtle);
  margin-bottom: var(--space-3);
}
.wizard-summary-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.wizard-summary-list li {
  padding: var(--space-1) 0;
}
.wizard-summary-list li strong {
  color: var(--color-text-strong);
  font-weight: 700;
  margin-right: var(--space-1);
}
.wizard-summary-empty {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  font-style: italic;
}
.wizard-summary-meta {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin-top: var(--space-2);
}

.wizard-contact {
  margin-top: var(--space-8);
}
.wizard-contact h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}

/* ─── Nav footer ───────────────────────────────────────────── */
.wizard-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
}
.wizard-nav-right {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: auto;
}
.wizard-cart-count {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.wizard-error {
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
}

.wizard-skip-note {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.wizard-skip-note strong {
  color: var(--color-text-strong);
}