/* ============================================================
   STONECROW MEDIA — styles.css
   Premium mixed-mode digital services styling layered over USWDS.
   Loaded after uswds.min.css so these tokens and components win.
   ============================================================ */

/* ------------------------------------------------------------
   1. DESIGN TOKENS
------------------------------------------------------------ */
:root {
  /* Dark palette */
  --ink-950: #060910;        /* near-black */
  --navy-900: #0b1424;       /* deep navy */
  --navy-800: #11203a;
  --navy-700: #1a2c4d;

  /* Accents */
  --cyan-400: #34d9f2;       /* electric cyan */
  --cyan-300: #7be8fa;       /* cyan for text on dark */
  --purple-500: #8b6cf6;     /* electric purple glow */
  --gold-400: #d2a84f;       /* refined gold */
  --gold-300: #e5c078;

  /* Light palette */
  --paper: #faf8f4;          /* warm white */
  --mist: #eef2f7;           /* pale blue-gray */
  --mist-deep: #e3e9f1;
  --line: #d8e0ea;

  /* Text */
  --text-dark-strong: #f4f8fc;   /* on dark bg */
  --text-dark-muted: #aebdd2;
  --text-light-strong: #16202e;  /* on light bg */
  --text-light-muted: #43506a;

  /* Type */
  --font-display: "Manrope", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Layout */
  --container: 74rem;
  --radius-sm: 0.5rem;
  --radius: 0.875rem;
  --radius-lg: 1.5rem;
  --section-pad: clamp(4rem, 9vw, 7.5rem);

  /* Effects */
  --shadow-soft: 0 10px 30px rgba(13, 24, 44, 0.08);
  --shadow-card: 0 16px 40px rgba(13, 24, 44, 0.12);
  --shadow-dark: 0 24px 60px rgba(0, 0, 0, 0.45);

  /* Focus indicator (light context default) */
  --focus-ring: #1456c9;
}

/* ------------------------------------------------------------
   2. BASE
------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-light-strong);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }

/* Material Symbols sizing defaults */
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  vertical-align: middle;
  user-select: none;
}

/* Strong, always-visible focus styles */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}
.sc-dark :focus-visible,
.sc-hero :focus-visible,
.sc-footer :focus-visible {
  outline-color: var(--gold-300);
}

/* Containers */
.sc-container {
  width: min(var(--container), 100% - 2.5rem);
  margin-inline: auto;
}

/* Skip link — keep USWDS behavior, brand the visible state */
.sc-skipnav:focus {
  background: var(--gold-300);
  color: var(--ink-950);
  font-weight: 600;
  outline-color: var(--ink-950);
}

/* ------------------------------------------------------------
   3. TYPOGRAPHY
------------------------------------------------------------ */
.sc-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  color: var(--text-light-strong);
}

.sc-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.3;
  margin: 0 0 0.5rem;
  color: var(--text-light-strong);
}

.sc-dark .sc-h2,
.sc-h3--dark { color: var(--text-dark-strong); }

.sc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2e5fb0;
  margin: 0 0 0.9rem;
}
.sc-eyebrow .material-symbols-outlined { font-size: 1.05rem; }
.sc-eyebrow--dark { color: var(--cyan-300); }

.sc-lede {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  color: var(--text-light-muted);
  max-width: 46rem;
}
.sc-lede--dark { color: var(--text-dark-muted); }

.sc-gold { color: var(--gold-300); }

/* ------------------------------------------------------------
   4. BUTTONS
------------------------------------------------------------ */
.sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;                 /* accessible tap target */
  padding: 0.8rem 1.5rem;
  border-radius: 0.65rem;
  border: 2px solid transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease,
              background-color 160ms ease, color 160ms ease;
}
.sc-btn--lg { min-height: 54px; padding: 0.95rem 1.85rem; }

.sc-btn--primary {
  background: linear-gradient(135deg, var(--cyan-400), #1fb6d8);
  color: #04222b;
  box-shadow: 0 8px 24px rgba(52, 217, 242, 0.28);
}
.sc-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(52, 217, 242, 0.4); }

.sc-btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dark-strong);
  border-color: rgba(174, 189, 210, 0.45);
}
.sc-btn--ghost:hover { border-color: var(--cyan-300); color: var(--cyan-300); }

/* Light-section buttons (accessibility showcase) */
.sc-btn--solid { background: #16385f; color: #ffffff; }
.sc-btn--solid:hover { background: #1d4a7e; }
.sc-btn--outline { background: transparent; color: #16385f; border-color: #16385f; }
.sc-btn--outline:hover { background: rgba(22, 56, 95, 0.08); }

.sc-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.75rem;
}

/* ------------------------------------------------------------
   5. HEADER / NAV
------------------------------------------------------------ */
.sc-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(6, 9, 16, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(174, 189, 210, 0.14);
}

.sc-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}

/* Brand mark: abstract stone + crow wing, pure CSS */
.sc-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.sc-brand__mark {
  position: relative;
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
}
.sc-brand__stone {
  position: absolute;
  inset: 0.2rem;
  background: linear-gradient(150deg, var(--navy-700), var(--navy-900));
  border: 1px solid rgba(123, 232, 250, 0.5);
  border-radius: 0.45rem 0.9rem 0.45rem 0.9rem;
  transform: rotate(8deg);
}
.sc-brand__wing {
  position: absolute;
  top: 0.05rem;
  right: -0.1rem;
  width: 1.1rem;
  height: 1.1rem;
  background: linear-gradient(135deg, var(--gold-300), var(--gold-400));
  clip-path: polygon(0 35%, 100% 0, 55% 100%);
}
.sc-brand__text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--text-dark-strong);
}
.sc-brand__accent { color: var(--cyan-300); font-weight: 600; }

/* Nav (desktop) */
.sc-nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
}
.sc-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-dark-muted);
  text-decoration: none;
  transition: color 140ms ease, background-color 140ms ease;
}
.sc-nav__link:hover { color: var(--cyan-300); background: rgba(123, 232, 250, 0.08); }
.sc-nav__cta-item { margin-left: 0.6rem; }
.sc-nav__cta { min-height: 44px; padding: 0.55rem 1.1rem; font-size: 0.95rem; }

/* Hamburger toggle (hidden on desktop) */
.sc-nav-toggle {
  display: none;
  align-items: center;
  gap: 0.45rem;
  min-height: 48px;
  min-width: 48px;
  padding: 0.5rem 0.85rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(174, 189, 210, 0.35);
  border-radius: 0.6rem;
  color: var(--text-dark-strong);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}
.sc-nav-toggle__icon-close { display: none; }
.sc-nav-toggle[aria-expanded="true"] .sc-nav-toggle__icon-open { display: none; }
.sc-nav-toggle[aria-expanded="true"] .sc-nav-toggle__icon-close { display: inline-block; }

/* ------------------------------------------------------------
   6. DARK / LIGHT SECTION SHELLS
------------------------------------------------------------ */
.sc-section { padding-block: var(--section-pad); }

.sc-dark {
  background:
    radial-gradient(60rem 30rem at 80% -10%, rgba(139, 108, 246, 0.12), transparent 60%),
    linear-gradient(180deg, var(--ink-950), var(--navy-900));
  color: var(--text-dark-strong);
}

.sc-light { background: var(--paper); }
.sc-light--slate {
  background: linear-gradient(180deg, var(--mist), var(--paper));
}

.sc-section__head { max-width: 50rem; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }

/* Glassmorphism — used sparingly */
.sc-glass {
  background: rgba(17, 32, 58, 0.55);
  border: 1px solid rgba(123, 232, 250, 0.18);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-dark);
}

/* ------------------------------------------------------------
   7. HERO
------------------------------------------------------------ */
.sc-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 10vw, 8rem) clamp(5rem, 10vw, 8.5rem);
}

.sc-hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.sc-hero__glow--cyan {
  width: 34rem; height: 34rem;
  top: -12rem; right: -8rem;
  background: rgba(52, 217, 242, 0.14);
}
.sc-hero__glow--purple {
  width: 30rem; height: 30rem;
  bottom: -14rem; left: -10rem;
  background: rgba(139, 108, 246, 0.16);
}

.sc-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.sc-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 1.4rem + 3.8vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0 0 1.1rem;
  color: var(--text-dark-strong);
}

.sc-hero__sub {
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
  color: var(--text-dark-muted);
  max-width: 34rem;
}

.sc-hero__note {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-dark-muted);
  max-width: 32rem;
}

/* Hero visual composition */
.sc-hero__visual {
  position: relative;
  min-height: 33rem;
}

/* Data-flow lines */
.sc-dataline {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan-400), var(--purple-500), transparent);
  opacity: 0.55;
  border-radius: 2px;
}
.sc-dataline--1 { width: 70%; top: 28%; left: 8%; transform: rotate(-8deg); }
.sc-dataline--2 { width: 55%; bottom: 22%; right: 0; transform: rotate(6deg); }

/* Endpoint nodes */
.sc-node {
  position: absolute;
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  background: var(--cyan-400);
  box-shadow: 0 0 0 5px rgba(52, 217, 242, 0.16), 0 0 18px rgba(52, 217, 242, 0.7);
}
.sc-node--a { top: 24%; left: 5%; }
.sc-node--b { top: 60%; left: 1%; background: var(--purple-500); box-shadow: 0 0 0 5px rgba(139,108,246,.16), 0 0 18px rgba(139,108,246,.7); }
.sc-node--c { bottom: 14%; right: 4%; background: var(--gold-300); box-shadow: 0 0 0 5px rgba(229,192,120,.16), 0 0 18px rgba(229,192,120,.6); }

/* Phone mockups */
.sc-phone {
  width: 16.5rem;
  border-radius: 2.2rem;
  background: linear-gradient(180deg, #1d2a44, #0d1730);
  border: 1px solid rgba(123, 232, 250, 0.22);
  padding: 0.55rem;
  box-shadow: var(--shadow-dark);
}
.sc-phone__notch {
  width: 7rem; height: 1.1rem;
  margin: 0.15rem auto 0.4rem;
  background: #060910;
  border-radius: 0 0 0.8rem 0.8rem;
}
.sc-phone__screen {
  background: linear-gradient(180deg, #0c1626, #0a1120);
  border-radius: 1.6rem;
  padding: 0.9rem 0.85rem 1rem;
  min-height: 25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.sc-phone--front {
  position: absolute;
  top: 1.5rem; left: 14%;
  z-index: 3;
  transform: rotate(-3deg);
}
.sc-phone--back {
  position: absolute;
  top: 5.5rem; right: 2%;
  z-index: 2;
  transform: rotate(5deg) scale(0.92);
  opacity: 0.92;
}

/* In-app UI pieces */
.sc-app-bar {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--text-dark-strong);
}
.sc-app-bar .material-symbols-outlined { font-size: 1.2rem; color: var(--text-dark-muted); }
.sc-app-bar__title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }

.sc-app-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dark-muted);
  margin: 0 0 0.15rem;
}
.sc-app-strong { font-weight: 600; font-size: 0.86rem; color: var(--text-dark-strong); margin: 0; }
.sc-app-dim { font-size: 0.74rem; color: var(--text-dark-muted); margin: 0; }
.sc-app-amt { margin-left: auto; font-family: var(--font-mono); font-size: 0.8rem; color: var(--cyan-300); }

.sc-app-balance {
  background: linear-gradient(135deg, rgba(52,217,242,0.12), rgba(139,108,246,0.12));
  border: 1px solid rgba(123, 232, 250, 0.22);
  border-radius: 0.9rem;
  padding: 0.75rem 0.85rem;
}
.sc-app-balance__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--text-dark-strong);
  margin: 0.1rem 0 0.2rem;
}
.sc-app-balance__num--sm { font-size: 1.15rem; margin: 0; }
.sc-app-up {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.72rem; color: var(--gold-300); margin: 0;
}
.sc-app-up .material-symbols-outlined { font-size: 0.95rem; }

.sc-app-row {
  display: flex; align-items: center; gap: 0.6rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(174, 189, 210, 0.12);
  border-radius: 0.75rem;
  padding: 0.55rem 0.7rem;
}
.sc-app-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: none; }
.sc-app-dot--cyan { background: var(--cyan-400); }
.sc-app-dot--gold { background: var(--gold-300); }
.sc-app-dot--purple { background: var(--purple-500); }

.sc-app-row__icon { font-size: 1.25rem; color: var(--text-dark-muted); flex: none; }
.sc-app-row__icon--cyan { color: var(--cyan-300); }
.sc-app-row__icon--gold { color: var(--gold-300); }
.sc-app-row__icon--purple { color: #b9a3ff; }

.sc-app-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(174, 189, 210, 0.12);
  border-radius: 0.75rem;
  padding: 0.6rem 0.75rem;
}

.sc-app-cta {
  margin-top: auto;
  text-align: center;
  background: linear-gradient(135deg, var(--cyan-400), #1fb6d8);
  color: #04222b;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 0.7rem;
  padding: 0.65rem;
}

.sc-app-tabbar {
  display: flex; justify-content: space-around;
  border-top: 1px solid rgba(174, 189, 210, 0.14);
  padding-top: 0.55rem;
  margin-top: auto;
}
.sc-app-tabbar .material-symbols-outlined { font-size: 1.2rem; color: var(--text-dark-muted); }
.sc-app-tabbar .material-symbols-outlined:first-child { color: var(--cyan-300); }

.sc-app-credit {
  background: linear-gradient(135deg, #1c2d4f, #101c34 55%, #15264a);
  border: 1px solid rgba(229, 192, 120, 0.35);
  border-radius: 0.9rem;
  padding: 0.85rem 0.9rem;
  box-shadow: inset 0 0 30px rgba(139, 108, 246, 0.12);
}
.sc-app-credit__name { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--gold-300); margin: 0 0 0.6rem; }
.sc-app-credit__num { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.08em; color: var(--text-dark-strong); margin: 0 0 0.6rem; }
.sc-app-credit__row { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text-dark-muted); margin: 0; }

.sc-app-toggle {
  margin-left: auto;
  width: 2rem; height: 1.15rem;
  border-radius: 1rem;
  background: var(--cyan-400);
  position: relative;
  flex: none;
}
.sc-app-toggle::after {
  content: "";
  position: absolute;
  top: 0.12rem; right: 0.12rem;
  width: 0.9rem; height: 0.9rem;
  border-radius: 50%;
  background: #04222b;
}

.sc-app-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-500), var(--cyan-400));
  color: #04101a;
  font-family: var(--font-display);
  font-weight: 800;
}
.sc-app-center { text-align: center; }

/* Hero architecture mini-card */
.sc-hero__arch {
  position: absolute;
  bottom: -1rem;
  left: -2%;
  z-index: 4;
  width: 15.5rem;
  padding: 1rem 1.1rem;
}
.sc-hero__arch-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cyan-300);
  margin: 0 0 0.6rem;
}
.sc-hero__arch-list { list-style: none; display: grid; gap: 0.45rem; }
.sc-hero__arch-list li {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; font-weight: 500;
  color: var(--text-dark-strong);
}
.sc-hero__arch-list .material-symbols-outlined { font-size: 1.05rem; color: var(--gold-300); }

/* ------------------------------------------------------------
   8. CARD GRIDS (light sections)
------------------------------------------------------------ */
.sc-grid { display: grid; gap: 1.4rem; }
.sc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sc-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow-soft);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.sc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: #b9c8da;
}
.sc-card p { color: var(--text-light-muted); font-size: 0.97rem; }

.sc-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  margin-bottom: 1rem;
  border-radius: 0.8rem;
  background: linear-gradient(135deg, #10243f, #1a3a63);
  color: var(--cyan-300);
  font-size: 1.5rem;
}

.sc-card--compact { padding: 1.35rem 1.25rem; }
.sc-card--compact .sc-card__icon { width: 2.6rem; height: 2.6rem; font-size: 1.3rem; margin-bottom: 0.8rem; }
.sc-card--compact p { font-size: 0.92rem; }

.sc-card--trust { border-top: 3px solid var(--gold-400); }

/* Transferable strength tags */
.sc-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1rem;
}
.sc-tags li {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #1c4a86;
  background: #e8f0fa;
  border: 1px solid #cdddf2;
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
}

/* ------------------------------------------------------------
   9. DEMO SECTION (tabs + phone)
------------------------------------------------------------ */
.sc-demo__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

.sc-demo__tabs {
  display: grid;
  gap: 0.6rem;
  align-content: center;
}
.sc-tab {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 52px;
  width: 100%;
  padding: 0.7rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(174, 189, 210, 0.22);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-dark-muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.sc-tab .material-symbols-outlined { font-size: 1.3rem; }
.sc-tab:hover { color: var(--cyan-300); border-color: rgba(123, 232, 250, 0.5); }
.sc-tab[aria-selected="true"] {
  background: linear-gradient(135deg, rgba(52, 217, 242, 0.16), rgba(139, 108, 246, 0.14));
  border-color: var(--cyan-400);
  color: var(--text-dark-strong);
  box-shadow: 0 0 24px rgba(52, 217, 242, 0.18);
}

.sc-demo__stage { position: relative; display: grid; place-items: center; }
.sc-demo__halo {
  position: absolute;
  width: 22rem; height: 22rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 108, 246, 0.22), transparent 65%);
  filter: blur(20px);
}
.sc-phone--demo { position: relative; z-index: 2; width: 17.5rem; }
.sc-phone--demo .sc-phone__screen { min-height: 27rem; }

/* Screens toggle */
.sc-screen {
  display: none;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}
.sc-screen.is-active { display: flex; animation: sc-screen-in 280ms ease; }
@keyframes sc-screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.sc-screen__center {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  margin: auto 0;
  text-align: center;
}
.sc-screen__center--top { margin: 0.5rem 0 0.4rem; }
.sc-screen__bigicon {
  font-size: 3.4rem;
  color: var(--cyan-300);
  margin-bottom: 0.4rem;
  filter: drop-shadow(0 0 14px rgba(52, 217, 242, 0.55));
}

.sc-demo__copy { max-width: 24rem; }
.sc-demo__desc { color: var(--text-dark-muted); }
.sc-demo__points { list-style: none; display: grid; gap: 0.6rem; margin-top: 1.1rem; }
.sc-demo__points li {
  display: flex; align-items: flex-start; gap: 0.5rem;
  font-size: 0.95rem; color: var(--text-dark-strong);
}
.sc-demo__points .material-symbols-outlined { font-size: 1.15rem; color: var(--gold-300); margin-top: 0.1rem; }

/* ------------------------------------------------------------
   10. ARCHITECTURE DIAGRAM
------------------------------------------------------------ */
.sc-arch__diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  margin-bottom: 2.75rem;
}

.sc-arch__node {
  background: rgba(17, 32, 58, 0.7);
  border: 1px solid rgba(123, 232, 250, 0.22);
  border-radius: var(--radius);
  padding: 1.25rem 1rem;
  text-align: center;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.4rem;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
}
.sc-arch__node .material-symbols-outlined {
  font-size: 1.9rem;
  color: var(--cyan-300);
}
.sc-arch__node--core {
  border-color: rgba(229, 192, 120, 0.55);
  box-shadow: 0 14px 36px rgba(0,0,0,.4), 0 0 30px rgba(229, 192, 120, 0.15);
}
.sc-arch__node--core .material-symbols-outlined { color: var(--gold-300); }

.sc-arch__node-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-dark-strong);
  margin: 0;
}
.sc-arch__node-sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dark-muted);
  margin: 0;
}

/* Connecting lines with glowing data pulse */
.sc-arch__link {
  position: relative;
  width: clamp(1.25rem, 3vw, 3rem);
  align-self: center;
  height: 2px;
  background: linear-gradient(90deg, rgba(52,217,242,0.5), rgba(139,108,246,0.5));
}
.sc-arch__pulse {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: var(--cyan-400);
  box-shadow: 0 0 12px rgba(52, 217, 242, 0.9);
  transform: translateY(-50%);
  animation: sc-pulse 2.4s linear infinite;
}
@keyframes sc-pulse {
  from { left: -0.3rem; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  to { left: calc(100% - 0.25rem); opacity: 0; }
}

/* Integration badges */
.sc-badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
}
.sc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(174, 189, 210, 0.3);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-dark-strong);
}
.sc-badge .material-symbols-outlined { font-size: 1.1rem; color: var(--gold-300); }

/* ------------------------------------------------------------
   11. ACCESSIBILITY SHOWCASE
------------------------------------------------------------ */
.sc-a11y__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
  align-items: start;
}

.sc-showcase,
.sc-accordion {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-soft);
}

.sc-showcase__label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-light-muted);
  margin: 0 0 1.1rem;
}

.sc-showcase__alert { margin-bottom: 1.4rem; border-radius: 0.6rem; overflow: hidden; }

.sc-showcase__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.4rem 0 1rem;
}

/* Form fields */
.sc-field { margin-bottom: 1.2rem; }
.sc-field__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text-light-strong);
  margin-bottom: 0.2rem;
}
.sc-field__hint {
  font-size: 0.85rem;
  color: var(--text-light-muted);
  margin: 0 0 0.45rem;
}
.sc-input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 0.85rem;
  font: inherit;
  color: var(--text-light-strong);
  background: #ffffff;
  border: 2px solid #6b7a92;
  border-radius: 0.55rem;
}
.sc-input::placeholder { color: #6b7a92; }
.sc-textarea { min-height: 7rem; resize: vertical; }

/* Toggle switch (accessible role="switch") */
.sc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 48px;
  padding: 0.4rem 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  color: var(--text-light-strong);
}
.sc-toggle__track {
  position: relative;
  width: 3.1rem; height: 1.7rem;
  border-radius: 999px;
  background: #8b99ad;
  transition: background-color 160ms ease;
  flex: none;
}
.sc-toggle__thumb {
  position: absolute;
  top: 0.2rem; left: 0.2rem;
  width: 1.3rem; height: 1.3rem;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 160ms ease;
}
.sc-toggle[aria-checked="true"] .sc-toggle__track { background: #15634d; }
.sc-toggle[aria-checked="true"] .sc-toggle__thumb { transform: translateX(1.4rem); }
.sc-toggle__text { font-weight: 600; font-size: 0.98rem; }
.sc-toggle__state {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-light-muted);
  margin-left: 0.35rem;
}

/* Focus ring demo */
.sc-focus-demo { margin-top: 1.5rem; }
.sc-focus-demo__ring {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border: 2px dashed #6b7a92;
  border-radius: 0.55rem;
  font-weight: 600;
}
.sc-focus-demo__caption { font-size: 0.88rem; color: var(--text-light-muted); margin-top: 0.6rem; }

/* Accordion */
.sc-accordion__item { border-bottom: 1px solid var(--line); }
.sc-accordion__item:last-child { border-bottom: none; }
.sc-accordion__heading { margin: 0; }
.sc-accordion__btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 56px;
  padding: 0.9rem 0.3rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-light-strong);
  text-align: left;
}
.sc-accordion__btn > .material-symbols-outlined:first-child { color: #1c4a86; font-size: 1.35rem; }
.sc-accordion__chev { margin-left: auto; transition: transform 180ms ease; }
.sc-accordion__btn[aria-expanded="true"] .sc-accordion__chev { transform: rotate(180deg); }
.sc-accordion__panel { padding: 0 0.3rem 1.1rem 2.35rem; }
.sc-accordion__panel p { color: var(--text-light-muted); font-size: 0.95rem; }
.sc-accordion__panel code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--mist);
  padding: 0.1rem 0.35rem;
  border-radius: 0.3rem;
}

/* ------------------------------------------------------------
   12. PROCESS TIMELINE
------------------------------------------------------------ */
.sc-timeline {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.25rem;
  position: relative;
}
/* Progress line behind steps (desktop) */
.sc-timeline::before {
  content: "";
  position: absolute;
  top: 1.55rem;
  left: 3%;
  right: 3%;
  height: 3px;
  background: linear-gradient(90deg, #1c4a86, var(--gold-400));
  border-radius: 3px;
}

.sc-timeline__step {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.6rem 1.1rem 1.3rem;
  box-shadow: var(--shadow-soft);
  margin-top: 3rem;
}
.sc-timeline__step .sc-h3 { font-size: 1.02rem; }
.sc-timeline__step p { font-size: 0.88rem; color: var(--text-light-muted); }

.sc-timeline__num {
  position: absolute;
  top: -3rem;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: #16385f;
  border: 3px solid var(--paper);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  z-index: 1;
}
.sc-timeline__icon {
  position: absolute;
  top: 0.85rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.35rem;
  color: var(--gold-400);
}

/* ------------------------------------------------------------
   13. STATS STRIP
------------------------------------------------------------ */
.sc-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 2.75rem 0 0;
}
.sc-stats__item {
  background: #ffffff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold-400);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem;
}
.sc-stats__item dt {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-light-muted);
  margin-bottom: 0.25rem;
}
.sc-stats__item dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--text-light-strong);
}

/* ------------------------------------------------------------
   14. FINAL CTA + FORM
------------------------------------------------------------ */
.sc-cta { position: relative; overflow: hidden; }
.sc-cta__glow {
  position: absolute;
  width: 40rem; height: 40rem;
  top: -16rem; left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 217, 242, 0.12), transparent 65%);
  filter: blur(40px);
  pointer-events: none;
}

.sc-cta__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.sc-form { padding: clamp(1.5rem, 3vw, 2.25rem); }
.sc-form__hint { font-size: 0.88rem; color: var(--text-dark-muted); margin-bottom: 1.4rem; }
.sc-req { color: var(--gold-300); text-decoration: none; font-weight: 700; }

.sc-field__label--dark { color: var(--text-dark-strong); }
.sc-field__hint--dark { color: var(--text-dark-muted); }

.sc-input--dark {
  background: rgba(6, 9, 16, 0.55);
  border-color: rgba(174, 189, 210, 0.45);
  color: var(--text-dark-strong);
}
.sc-input--dark::placeholder { color: var(--text-dark-muted); }
.sc-input--dark:focus-visible { border-color: var(--cyan-300); }

.sc-form__submit { width: 100%; margin-top: 0.4rem; }

.sc-form__success {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 1.2rem;
  padding: 0.95rem 1.1rem;
  border-radius: 0.7rem;
  background: rgba(52, 217, 242, 0.12);
  border: 1px solid rgba(123, 232, 250, 0.45);
  color: var(--text-dark-strong);
  font-weight: 500;
}
.sc-form__success .material-symbols-outlined { color: var(--cyan-300); flex: none; }
.sc-form__success[hidden] { display: none; }

/* Inline field error state (structure ready) */
.sc-input[aria-invalid="true"] { border-color: #c43d3d; }
.sc-field__error {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #ffb3b3;
}

/* ------------------------------------------------------------
   15. FOOTER
------------------------------------------------------------ */
.sc-footer {
  background: var(--ink-950);
  border-top: 1px solid rgba(174, 189, 210, 0.14);
  padding-block: 2.75rem;
  color: var(--text-dark-muted);
}
.sc-footer__inner {
  display: grid;
  gap: 1.4rem;
  justify-items: start;
}
.sc-footer__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}
.sc-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-dark-muted);
  text-decoration: none;
  font-weight: 500;
}
.sc-footer__links a:hover { color: var(--cyan-300); }
.sc-footer__note { font-size: 0.88rem; margin: 0; }
.sc-footer :focus-visible { outline-color: var(--gold-300); }

/* ------------------------------------------------------------
   16. SCROLL REVEAL
------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms ease;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
/* If JS never runs, content must remain visible */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   17. REDUCED MOTION
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .sc-arch__pulse { animation: none; left: 40%; }
}

/* ------------------------------------------------------------
   18. RESPONSIVE — TABLET (<= 64em)
------------------------------------------------------------ */
@media (max-width: 64em) {
  .sc-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Hero stacks */
  .sc-hero__grid { grid-template-columns: 1fr; }
  .sc-hero__visual { min-height: 30rem; max-width: 34rem; margin-inline: auto; width: 100%; }

  /* Demo: tabs above phone, copy below */
  .sc-demo__layout { grid-template-columns: 1fr; justify-items: center; }
  .sc-demo__tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: 36rem;
  }
  .sc-demo__copy { max-width: 36rem; text-align: center; }
  .sc-demo__points { justify-items: center; }
  .sc-demo__points li { justify-content: center; }

  /* Architecture: simplified 2-col flow with vertical joins */
  .sc-arch__diagram {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 26rem;
    margin-inline: auto;
  }
  .sc-arch__link {
    width: 2px;
    height: 2.25rem;
    justify-self: center;
    background: linear-gradient(180deg, rgba(52,217,242,0.5), rgba(139,108,246,0.5));
  }
  .sc-arch__pulse { animation-name: sc-pulse-v; left: 50%; transform: translateX(-50%); }
  @keyframes sc-pulse-v {
    from { top: -0.3rem; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    to { top: calc(100% - 0.25rem); opacity: 0; }
  }

  .sc-a11y__grid { grid-template-columns: 1fr; }

  /* Timeline: 2 columns, no horizontal line */
  .sc-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-timeline::before { display: none; }

  .sc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .sc-cta__grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   19. RESPONSIVE — MOBILE NAV + SMALL SCREENS (<= 52em)
------------------------------------------------------------ */
@media (max-width: 52em) {
  .sc-nav-toggle { display: inline-flex; }

  .sc-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(6, 9, 16, 0.97);
    border-bottom: 1px solid rgba(174, 189, 210, 0.18);
    display: none;
    padding: 0.75rem 1.25rem 1.25rem;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
  }
  .sc-nav.is-open { display: block; }
  .sc-nav__list { flex-direction: column; align-items: stretch; gap: 0.2rem; }
  .sc-nav__link {
    width: 100%;
    min-height: 48px;
    font-size: 1.05rem;
    padding: 0.6rem 0.8rem;
  }
  .sc-nav__cta-item { margin: 0.6rem 0 0; }
  .sc-nav__cta { width: 100%; min-height: 52px; }
}

@media (max-width: 40em) {
  .sc-grid--3,
  .sc-grid--4 { grid-template-columns: 1fr; }

  .sc-btn-row { flex-direction: column; align-items: stretch; }
  .sc-btn-row .sc-btn { width: 100%; }

  /* Hero visual simplifies: single centered phone + card below */
  .sc-hero__visual { min-height: 0; display: grid; justify-items: center; gap: 1.25rem; }
  .sc-phone--front { position: static; transform: none; }
  .sc-phone--back,
  .sc-dataline,
  .sc-node { display: none; }
  .sc-hero__arch { position: static; width: 100%; max-width: 18rem; }

  .sc-demo__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-tab { font-size: 0.92rem; }

  .sc-timeline { grid-template-columns: 1fr; }
  .sc-stats { grid-template-columns: 1fr; }

  .sc-phone--demo { width: 100%; max-width: 17.5rem; }
}


/* ============================================================
   BROADER DIGITAL SERVICES REFRESH
   Adds website/app/SEO/campaign visuals while preserving the original system.
   ============================================================ */
.sc-service-card { min-height: 100%; }
.sc-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.55rem; height: 2.55rem; border-radius: 0.8rem; background: rgba(52,217,242,0.11); color: #175a74; margin-bottom: 1rem; }
.sc-card--dark { background: rgba(255,255,255,0.045); border-color: rgba(123,232,250,0.18); color: var(--text-dark-muted); }
.sc-card--dark .sc-h3 { color: var(--text-dark-strong); }
.sc-card--dark .sc-card__icon { color: var(--cyan-300); background: rgba(52,217,242,0.1); }
.sc-card--dark p { color: var(--text-dark-muted); }
.sc-tagline { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; list-style:none; }
.sc-tagline li, .sc-tags li { display:inline-flex; align-items:center; min-height:1.85rem; padding:.25rem .55rem; border-radius:999px; background: rgba(22,56,95,.08); color:#24425f; font-size:.75rem; font-weight:700; }
.sc-card--dark .sc-tagline li { background: rgba(123,232,250,.1); color: var(--cyan-300); }
.sc-capability-hero { position:relative; min-height:34rem; }
.sc-hero-dashboard { position:absolute; top:1rem; left:1rem; width:25rem; max-width:80%; padding:1rem; z-index:1; }
.sc-browser-bar, .sc-desktop-bar { display:flex; align-items:center; gap:.35rem; border-bottom:1px solid rgba(174,189,210,.16); padding-bottom:.7rem; margin-bottom:.85rem; }
.sc-browser-dot { width:.55rem; height:.55rem; border-radius:50%; background:rgba(174,189,210,.55); }
.sc-browser-title, .sc-desktop-title { margin-left:.45rem; font-family:var(--font-mono); font-size:.72rem; color:var(--text-dark-muted); }
.sc-dashboard-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:.7rem; }
.sc-dashboard-hero, .sc-dashboard-card { min-height:4.4rem; border-radius:.9rem; background:rgba(255,255,255,.055); border:1px solid rgba(174,189,210,.13); padding:.75rem; }
.sc-dashboard-hero { grid-column:1/-1; background:linear-gradient(135deg, rgba(52,217,242,.14), rgba(139,108,246,.13)); }
.sc-line { height:.55rem; border-radius:999px; background:rgba(244,248,252,.84); margin-bottom:.45rem; }
.sc-line--short { width:45%; } .sc-line--med { width:70%; } .sc-line--muted { opacity:.35; }
.sc-hero-mobile { position:absolute; right:1rem; top:3.5rem; z-index:3; transform:rotate(4deg); }
.sc-hero-desktop { position:absolute; right:0; bottom:1.4rem; width:18rem; padding:.9rem; z-index:2; }
.sc-desktop-body { display:grid; gap:.6rem; }
.sc-desktop-row { display:flex; gap:.55rem; align-items:center; background:rgba(255,255,255,.045); border:1px solid rgba(174,189,210,.13); border-radius:.75rem; padding:.55rem; }
.sc-desktop-row span { color:var(--gold-300); }
.sc-floating-card { position:absolute; z-index:4; width:13rem; padding:.85rem; border-radius:1rem; background:rgba(17,32,58,.82); border:1px solid rgba(123,232,250,.22); box-shadow:var(--shadow-dark); }
.sc-floating-card--seo { left:0; bottom:7rem; }
.sc-floating-card--campaign { left:7.8rem; bottom:0; }
.sc-floating-card--a11y { right:2.5rem; top:0; width:auto; display:flex; gap:.45rem; align-items:center; color:var(--gold-300); font-weight:800; font-family:var(--font-display); }
.sc-floating-card__kicker { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan-300); margin:0 0 .25rem; }
.sc-floating-card__title { color:var(--text-dark-strong); font-weight:800; margin:0; }
.sc-mini-chart { display:flex; align-items:end; gap:.28rem; height:2.8rem; margin-top:.65rem; }
.sc-mini-chart span { flex:1; min-width:.42rem; border-radius:.35rem .35rem 0 0; background:linear-gradient(180deg,var(--cyan-400),var(--purple-500)); opacity:.9; }
.sc-api-node { position:absolute; width:2.4rem; height:2.4rem; border-radius:50%; display:grid; place-items:center; background:rgba(52,217,242,.14); border:1px solid rgba(123,232,250,.35); color:var(--cyan-300); box-shadow:0 0 24px rgba(52,217,242,.24); }
.sc-api-node--1 { left:2rem; top:13rem; } .sc-api-node--2 { right:8rem; top:17rem; } .sc-api-node--3 { left:18rem; bottom:6rem; }
.sc-phone--compact { width:12.5rem; }
.sc-phone--compact .sc-phone__screen { min-height:20rem; }
.sc-section-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4rem); align-items:center; }
.sc-feature-list { display:grid; gap:.8rem; list-style:none; margin-top:1.4rem; }
.sc-feature-list li { display:flex; align-items:flex-start; gap:.65rem; color:var(--text-light-muted); }
.sc-feature-list .material-symbols-outlined { color:#216b86; margin-top:.16rem; }
.sc-seo-visual, .sc-apps-visual { position:relative; min-height:28rem; }
.sc-seo-board { padding:1.1rem; }
.sc-seo-score { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem; border-radius:1rem; background:linear-gradient(135deg, rgba(52,217,242,.12), rgba(139,108,246,.10)); border:1px solid rgba(123,232,250,.18); }
.sc-score-ring { width:5.2rem; height:5.2rem; border-radius:50%; display:grid; place-items:center; border:.6rem solid rgba(52,217,242,.75); color:var(--text-dark-strong); font-weight:800; font-family:var(--font-display); }
.sc-map-list { display:grid; gap:.55rem; margin-top:.9rem; }
.sc-map-item { display:flex; justify-content:space-between; gap:.75rem; padding:.65rem; border-radius:.75rem; background:rgba(255,255,255,.045); border:1px solid rgba(174,189,210,.12); color:var(--text-dark-muted); font-size:.86rem; }
.sc-funnel { display:grid; gap:.45rem; margin-top:1rem; text-align:center; font-size:.76rem; font-weight:800; color:#04101a; }
.sc-funnel span { justify-self:center; background:var(--gold-300); padding:.38rem .7rem; border-radius:.4rem; }
.sc-funnel span:nth-child(1){width:100%}.sc-funnel span:nth-child(2){width:78%}.sc-funnel span:nth-child(3){width:56%}.sc-funnel span:nth-child(4){width:38%}
.sc-app-product { display:grid; gap:1rem; }
.sc-device-card { min-height:18rem; }
.sc-window-frame, .sc-desktop-frame, .sc-phone-frame { background:rgba(17,32,58,.88); border:1px solid rgba(123,232,250,.18); border-radius:1.1rem; padding:1rem; box-shadow:var(--shadow-card); }
.sc-phone-frame { width:12rem; min-height:20rem; margin-inline:auto; border-radius:2rem; }
.sc-window-content { display:grid; grid-template-columns: .72fr 1fr; gap:.7rem; }
.sc-sidebar-lines span, .sc-content-lines span { display:block; height:.65rem; border-radius:99px; background:rgba(244,248,252,.2); margin:.45rem 0; }
.sc-content-lines span:first-child { height:4rem; border-radius:.8rem; background:linear-gradient(135deg, rgba(52,217,242,.18), rgba(139,108,246,.16)); }
.sc-architecture-flow { display:grid; grid-template-columns:repeat(7, auto); gap:.6rem; align-items:center; margin-top:2rem; }
.sc-flow-node { min-width:9rem; text-align:center; padding:1rem; border-radius:1rem; background:rgba(255,255,255,.05); border:1px solid rgba(123,232,250,.18); }
.sc-flow-node span { color:var(--cyan-300); display:block; margin-bottom:.3rem; }
.sc-flow-arrow { color:var(--gold-300); font-size:1.7rem; }
.sc-process-note { max-width:42rem; margin-top:1.5rem; color:var(--text-light-muted); }
@media (max-width: 68rem) { .sc-section-split { grid-template-columns:1fr; } .sc-capability-hero { min-height:42rem; } .sc-hero-mobile { right:0; } .sc-architecture-flow { grid-template-columns:1fr; } .sc-flow-arrow { transform:rotate(90deg); justify-self:center; } }
@media (max-width: 45rem) { .sc-capability-hero { min-height:52rem; } .sc-hero-dashboard { left:0; max-width:100%; width:100%; } .sc-hero-mobile { top:18rem; right:.5rem; } .sc-hero-desktop { left:0; right:auto; bottom:3.5rem; width:15.5rem; } .sc-floating-card--seo { bottom:13rem; } .sc-floating-card--campaign { left:1rem; bottom:0; } .sc-floating-card--a11y { right:auto; left:0; top:14rem; } }

/* ------------------------------------------------------------
   SERVICE DETAIL PAGES
------------------------------------------------------------ */
.sc-card-link {
  color: inherit;
  text-decoration: none;
}
.sc-card-link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.sc-card-link .sc-tags li:first-child {
  background: rgba(52, 217, 242, 0.15);
  color: #14566b;
}
.sc-service-detail-hero {
  padding-block: clamp(4.25rem, 9vw, 7rem);
}
.sc-breadcrumb {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  font-size: .8rem;
}
.sc-breadcrumb a { color: var(--cyan-300); text-decoration: none; }
.sc-breadcrumb a:hover { text-decoration: underline; }
.sc-service-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .62fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.sc-service-detail__panel {
  padding: 1.25rem;
}
.sc-service-detail__panel h2,
.sc-service-detail__panel h3 {
  color: var(--text-dark-strong);
}
.sc-service-list {
  display: grid;
  gap: .8rem;
  list-style: none;
  margin-top: 1.1rem;
}
.sc-service-list li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  color: var(--text-light-muted);
}
.sc-service-list .material-symbols-outlined {
  color: #216b86;
  margin-top: .15rem;
}
.sc-service-list--dark li { color: var(--text-dark-muted); }
.sc-service-list--dark .material-symbols-outlined { color: var(--gold-300); }
.sc-related-services {
  margin-top: 2rem;
}
@media (max-width: 58rem) {
  .sc-service-detail__grid { grid-template-columns: 1fr; }
}


/* ------------------------------------------------------------
   SERVICE CARD LINKS — full-card click targets
------------------------------------------------------------ */
.sc-service-card.sc-card-link,
.sc-card-link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}
.sc-service-card.sc-card-link {
  min-height: 100%;
}
.sc-service-card.sc-card-link::after,
.sc-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.sc-service-card.sc-card-link:hover,
.sc-card-link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: #90b8d6;
}
.sc-service-card.sc-card-link:focus-visible,
.sc-card-link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
}
.sc-card-link__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  margin-top: auto;
  padding-top: 1.15rem;
  font-family: var(--font-display);
  font-weight: 800;
  color: #14566b;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.sc-card-link:hover .sc-card-link__cta,
.sc-card-link:focus-visible .sc-card-link__cta {
  color: #0f3f54;
}

/* Contrast fix: tags inside dark cards/sections must remain readable. */
.sc-dark .sc-tags li,
.sc-card--dark .sc-tags li,
.sc-dark .sc-tagline li,
.sc-card--dark .sc-tagline li,
.sc-dark .sc-card-link .sc-tags li:first-child,
.sc-card--dark.sc-card-link .sc-tags li:first-child {
  color: var(--cyan-300);
  background: rgba(123, 232, 250, 0.12);
  border-color: rgba(123, 232, 250, 0.55);
}

.sc-dark .sc-tags li:hover,
.sc-card--dark .sc-tags li:hover {
  background: rgba(123, 232, 250, 0.18);
  color: var(--text-dark-strong);
}


/* ------------------------------------------------------------
   NAVIGATION PAGE + READABILITY UPDATES
------------------------------------------------------------ */
.sc-page-hero {
  padding-block: clamp(3.75rem, 8vw, 6rem);
}
.sc-page-title {
  max-width: 58rem;
}
.sc-dark .sc-lede,
.sc-dark p,
.sc-card--dark p,
.sc-demo__desc,
.sc-feature-list li,
.sc-map-item,
.sc-service-list--dark li {
  color: #d7e3f4;
}
.sc-dark .sc-h2,
.sc-dark .sc-h3,
.sc-h3--dark {
  color: #ffffff;
}
.sc-card--dark,
.sc-flow-node,
.sc-window-frame,
.sc-desktop-frame,
.sc-phone-frame {
  background: rgba(9, 20, 37, 0.94);
  border-color: rgba(123, 232, 250, 0.34);
}
.sc-tags li,
.sc-tagline li {
  border: 1px solid rgba(22, 56, 95, 0.22);
}
.sc-dark .sc-tags li,
.sc-card--dark .sc-tags li,
.sc-dark .sc-tagline li,
.sc-card--dark .sc-tagline li,
.sc-dark .sc-card-link .sc-tags li:first-child,
.sc-card--dark.sc-card-link .sc-tags li:first-child {
  color: #f2fcff;
  background: rgba(52, 217, 242, 0.20);
  border: 1px solid rgba(123, 232, 250, 0.80);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.sc-card-link__cta {
  color: #0d4f68;
}
.sc-card-link:hover .sc-card-link__cta,
.sc-card-link:focus-visible .sc-card-link__cta {
  color: #083447;
}
.sc-dark .sc-card-link__cta,
.sc-card--dark .sc-card-link__cta {
  color: #9ff2ff;
}
.sc-dark .sc-card-link:hover .sc-card-link__cta,
.sc-dark .sc-card-link:focus-visible .sc-card-link__cta,
.sc-card--dark .sc-card-link:hover .sc-card-link__cta,
.sc-card--dark .sc-card-link:focus-visible .sc-card-link__cta {
  color: #ffffff;
}
.sc-nav__link[aria-current="page"] {
  color: var(--cyan-300);
  background: rgba(123, 232, 250, 0.12);
}
.sc-cta-lite {
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
}

/* ============================================================
   STONECROW BRAND / FUNCTIONALITY PASS
   Red, black, and white visual system with readable non-button chips.
   ============================================================ */
:root {
  --ink-950: #050505;
  --navy-900: #0b0b0d;
  --navy-800: #141417;
  --navy-700: #242428;
  --cyan-400: #d71920;      /* Stonecrow red accent */
  --cyan-300: #ffccd0;      /* light red for dark backgrounds */
  --purple-500: #8f1117;
  --gold-400: #ffffff;
  --gold-300: #ffffff;
  --paper: #ffffff;
  --mist: #f5f5f5;
  --mist-deep: #ececec;
  --line: #d9d9d9;
  --text-light-strong: #121212;
  --text-light-muted: #3f3f46;
  --text-dark-strong: #ffffff;
  --text-dark-muted: #e5e7eb;
  --focus-ring: #d71920;
}

body { background: #ffffff; color: #121212; }

.sc-header,
.sc-footer {
  background: rgba(0, 0, 0, 0.94);
  border-color: rgba(255, 255, 255, 0.16);
}

.sc-dark {
  background:
    radial-gradient(46rem 24rem at 85% -10%, rgba(215, 25, 32, 0.22), transparent 62%),
    linear-gradient(180deg, #050505, #151515);
}

.sc-brand__stone {
  background: #000000;
  border: 2px solid #ffffff;
  box-shadow: inset 0 0 0 3px rgba(215, 25, 32, 0.26);
}
.sc-brand__wing {
  background: #d71920;
}
.sc-brand__accent,
.sc-nav__link:hover,
.sc-nav__link[aria-current="page"],
.sc-eyebrow,
.sc-feature-list .material-symbols-outlined,
.sc-service-list .material-symbols-outlined {
  color: #d71920;
}
.sc-eyebrow--dark,
.sc-footer__links a:hover,
.sc-breadcrumb a {
  color: #ffccd0;
}

.sc-nav__link[aria-current="page"],
.sc-nav__link:hover {
  background: rgba(215, 25, 32, 0.16);
}

.sc-btn--primary,
.sc-app-cta {
  background: #d71920;
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(215, 25, 32, 0.28);
}
.sc-btn--primary:hover {
  box-shadow: 0 14px 34px rgba(215, 25, 32, 0.38);
}
.sc-btn--ghost {
  border-color: rgba(255, 255, 255, 0.72);
  color: #ffffff;
}
.sc-btn--ghost:hover {
  border-color: #ffffff;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}
.sc-btn--solid { background: #111111; color: #ffffff; }
.sc-btn--solid:hover { background: #d71920; }
.sc-btn--outline { color: #111111; border-color: #111111; }
.sc-btn--outline:hover { background: rgba(215, 25, 32, 0.08); border-color: #d71920; color: #a50f16; }

.sc-card,
.sc-window-frame,
.sc-desktop-frame,
.sc-phone-frame,
.sc-flow-node {
  border-color: #d7d7d7;
}
.sc-card__icon {
  background: rgba(215, 25, 32, 0.10);
  color: #b31319;
}
.sc-card--dark,
.sc-flow-node,
.sc-window-frame,
.sc-desktop-frame,
.sc-phone-frame,
.sc-glass,
.sc-floating-card {
  background: rgba(12, 12, 14, 0.96);
  border-color: rgba(255, 255, 255, 0.22);
}
.sc-card--dark .sc-card__icon {
  background: rgba(215, 25, 32, 0.20);
  color: #ffffff;
}

.sc-hero__glow--cyan,
.sc-hero__glow--purple { background: rgba(215, 25, 32, 0.18); }
.sc-dataline,
.sc-mini-chart span {
  background: linear-gradient(90deg, transparent, #d71920, #ffffff, transparent);
}
.sc-api-node,
.sc-node,
.sc-app-dot--cyan {
  background: #d71920;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 5px rgba(215,25,32,.16), 0 0 18px rgba(215,25,32,.55);
}
.sc-app-row__icon--cyan,
.sc-flow-node span,
.sc-app-amt { color: #ffccd0; }
.sc-app-row__icon--gold,
.sc-app-dot--gold,
.sc-flow-arrow { color: #ffffff; }
.sc-app-balance,
.sc-dashboard-hero,
.sc-seo-score {
  background: linear-gradient(135deg, rgba(215,25,32,.18), rgba(255,255,255,.07));
  border-color: rgba(255, 255, 255, 0.22);
}
.sc-score-ring { border-color: #d71920; }

/* Chips are labels, not controls. Make them readable and stop them from looking like dead buttons. */
.sc-tags,
.sc-tagline { gap: .45rem; }
.sc-tags li,
.sc-tagline li {
  min-height: auto;
  padding: .28rem .58rem;
  border-radius: .45rem;
  border: 1px solid #d6d6d6;
  background: #f4f4f5;
  color: #111111;
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.2;
  text-shadow: none;
  pointer-events: none;
}
.sc-dark .sc-tags li,
.sc-card--dark .sc-tags li,
.sc-dark .sc-tagline li,
.sc-card--dark .sc-tagline li,
.sc-dark .sc-card-link .sc-tags li:first-child,
.sc-card--dark.sc-card-link .sc-tags li:first-child,
.sc-card--dark .sc-tagline li {
  color: #111111;
  background: #ffffff;
  border-color: #ffffff;
  text-shadow: none;
}
.sc-dark .sc-tags li::before,
.sc-card--dark .sc-tags li::before,
.sc-dark .sc-tagline li::before,
.sc-card--dark .sc-tagline li::before {
  content: "";
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: #d71920;
  margin-right: .35rem;
}
.sc-dark .sc-tags li:hover,
.sc-card--dark .sc-tags li:hover {
  background: #ffffff;
  color: #111111;
}

/* Make service cards unmistakably functional. */
.sc-service-card.sc-card-link,
.sc-card-link {
  border: 2px solid #d7d7d7;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.sc-service-card.sc-card-link:hover,
.sc-card-link:hover,
.sc-service-card.sc-card-link:focus-visible,
.sc-card-link:focus-visible {
  border-color: #d71920;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16);
}
.sc-card-link__cta {
  color: #b31319;
  text-decoration: none;
  border-top: 1px solid #e1e1e1;
  width: 100%;
  padding-top: 1rem;
}
.sc-card-link__cta::before {
  content: "Open page";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: .6rem;
  padding: .22rem .5rem;
  border-radius: .4rem;
  background: #d71920;
  color: #ffffff;
  font-size: .72rem;
  line-height: 1;
}
.sc-card-link:hover .sc-card-link__cta,
.sc-card-link:focus-visible .sc-card-link__cta,
.sc-dark .sc-card-link:hover .sc-card-link__cta,
.sc-dark .sc-card-link:focus-visible .sc-card-link__cta,
.sc-card--dark .sc-card-link:hover .sc-card-link__cta,
.sc-card--dark .sc-card-link:focus-visible .sc-card-link__cta {
  color: #d71920;
}
.sc-dark .sc-card-link__cta,
.sc-card--dark .sc-card-link__cta {
  color: #ffffff;
  border-top-color: rgba(255,255,255,.22);
}
.sc-dark .sc-card-link__cta::before,
.sc-card--dark .sc-card-link__cta::before {
  background: #ffffff;
  color: #111111;
}

/* ============================================================
   STONECROW APPROVED PALETTE PASS
   Classic Crimson / Prussian Blue / Dodger Blue / Pacific Cyan / Sky Blue.
   Designed so dark sections stay readable and card links are obvious.
   ============================================================ */
:root {
  --sc-crimson: #d7263d;
  --sc-prussian: #02182b;
  --sc-dodger: #0197f6;
  --sc-pacific: #448fa3;
  --sc-sky: #68c5db;

  --ink-950: #02182b;
  --navy-900: #02182b;
  --navy-800: #06243d;
  --navy-700: #0b3652;
  --cyan-400: #0197f6;
  --cyan-300: #68c5db;
  --purple-500: #448fa3;
  --gold-400: #d7263d;
  --gold-300: #ffffff;
  --paper: #ffffff;
  --mist: #f3f8fb;
  --mist-deep: #e6f3f7;
  --line: #c9dce5;
  --text-light-strong: #02182b;
  --text-light-muted: #31475d;
  --text-dark-strong: #ffffff;
  --text-dark-muted: #d9f2f8;
  --focus-ring: #d7263d;
}

body { background: #ffffff; color: var(--sc-prussian); }

.sc-header,
.sc-footer {
  background: rgba(2, 24, 43, 0.96);
  border-color: rgba(104, 197, 219, 0.28);
}

.sc-dark {
  background:
    radial-gradient(48rem 28rem at 82% -12%, rgba(1, 151, 246, 0.22), transparent 60%),
    radial-gradient(38rem 24rem at 10% 110%, rgba(215, 38, 61, 0.18), transparent 62%),
    linear-gradient(180deg, #02182b, #041120);
  color: #ffffff;
}

.sc-light,
.sc-light--slate { background: linear-gradient(180deg, #ffffff, #f3f8fb); }

.sc-brand__stone {
  background: var(--sc-prussian);
  border: 2px solid #ffffff;
  box-shadow: inset 0 0 0 3px rgba(215, 38, 61, 0.36);
}
.sc-brand__wing { background: var(--sc-crimson); }
.sc-brand__accent { color: var(--sc-sky); }

.sc-nav__link { color: #d9f2f8; }
.sc-nav__link:hover,
.sc-nav__link[aria-current="page"] {
  color: #ffffff;
  background: rgba(215, 38, 61, 0.24);
}

.sc-eyebrow { color: var(--sc-crimson); }
.sc-eyebrow--dark,
.sc-footer__links a:hover,
.sc-breadcrumb a { color: var(--sc-sky); }

.sc-btn--primary,
.sc-app-cta {
  background: var(--sc-crimson);
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(215, 38, 61, 0.30);
}
.sc-btn--primary:hover {
  background: #b91d31;
  box-shadow: 0 14px 34px rgba(215, 38, 61, 0.42);
}
.sc-btn--ghost {
  border-color: rgba(104, 197, 219, 0.82);
  color: #ffffff;
}
.sc-btn--ghost:hover {
  border-color: #ffffff;
  color: #ffffff;
  background: rgba(104, 197, 219, 0.14);
}
.sc-btn--solid { background: var(--sc-prussian); color: #ffffff; }
.sc-btn--solid:hover { background: var(--sc-crimson); }
.sc-btn--outline { color: var(--sc-prussian); border-color: var(--sc-prussian); }
.sc-btn--outline:hover { background: rgba(215, 38, 61, 0.08); border-color: var(--sc-crimson); color: #9e1728; }

.sc-card,
.sc-window-frame,
.sc-desktop-frame,
.sc-phone-frame,
.sc-flow-node {
  border-color: #c9dce5;
}
.sc-card__icon {
  background: rgba(104, 197, 219, 0.22);
  color: var(--sc-prussian);
}
.sc-card--dark,
.sc-flow-node,
.sc-window-frame,
.sc-desktop-frame,
.sc-phone-frame,
.sc-glass,
.sc-floating-card {
  background: rgba(2, 24, 43, 0.96);
  border-color: rgba(104, 197, 219, 0.34);
}
.sc-card--dark .sc-card__icon {
  background: rgba(104, 197, 219, 0.22);
  color: #ffffff;
}

.sc-hero__glow--cyan { background: rgba(1, 151, 246, 0.20); }
.sc-hero__glow--purple { background: rgba(215, 38, 61, 0.18); }
.sc-dataline,
.sc-mini-chart span {
  background: linear-gradient(90deg, transparent, var(--sc-dodger), var(--sc-sky), transparent);
}
.sc-api-node,
.sc-node,
.sc-app-dot--cyan {
  background: var(--sc-dodger);
  color: #ffffff;
  border-color: rgba(104, 197, 219, 0.55);
  box-shadow: 0 0 0 5px rgba(1,151,246,.16), 0 0 18px rgba(1,151,246,.55);
}
.sc-app-dot--gold,
.sc-node--c { background: var(--sc-crimson); }
.sc-app-row__icon--cyan,
.sc-flow-node span,
.sc-app-amt { color: var(--sc-sky); }
.sc-app-row__icon--gold,
.sc-flow-arrow { color: #ffffff; }
.sc-app-balance,
.sc-dashboard-hero,
.sc-seo-score {
  background: linear-gradient(135deg, rgba(1,151,246,.16), rgba(104,197,219,.10));
  border-color: rgba(104, 197, 219, 0.34);
}
.sc-score-ring { border-color: var(--sc-crimson); }

/* Tags/chips: readable labels, not fake controls. */
.sc-tags,
.sc-tagline { gap: .5rem; }
.sc-tags li,
.sc-tagline li {
  min-height: auto;
  padding: .34rem .62rem;
  border-radius: .5rem;
  border: 1px solid #b8d5df;
  background: #eef9fc;
  color: var(--sc-prussian);
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.2;
  text-shadow: none;
  pointer-events: none;
  cursor: default;
}
.sc-dark .sc-tags li,
.sc-card--dark .sc-tags li,
.sc-dark .sc-tagline li,
.sc-card--dark .sc-tagline li,
.sc-dark .sc-card-link .sc-tags li:first-child,
.sc-card--dark.sc-card-link .sc-tags li:first-child {
  color: var(--sc-prussian);
  background: #ffffff;
  border-color: #ffffff;
  text-shadow: none;
}
.sc-tags li::before,
.sc-tagline li::before,
.sc-dark .sc-tags li::before,
.sc-card--dark .sc-tags li::before,
.sc-dark .sc-tagline li::before,
.sc-card--dark .sc-tagline li::before {
  content: "";
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--sc-crimson);
  margin-right: .35rem;
  flex: none;
}
.sc-dark .sc-tags li:hover,
.sc-card--dark .sc-tags li:hover,
.sc-tags li:hover { background: #ffffff; color: var(--sc-prussian); }

/* Service cards: full-card links with a visible action, strong focus, and clear hover. */
.sc-service-card.sc-card-link,
.sc-card-link {
  border: 2px solid #c9dce5;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.sc-service-card.sc-card-link:hover,
.sc-card-link:hover,
.sc-service-card.sc-card-link:focus-visible,
.sc-card-link:focus-visible {
  border-color: var(--sc-crimson);
  box-shadow: 0 18px 42px rgba(2, 24, 43, 0.18);
  transform: translateY(-3px);
}
.sc-card-link__cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: #ffffff;
  background: var(--sc-prussian);
  border-top: 0;
  border-radius: .55rem;
  width: fit-content;
  margin-top: auto;
  padding: .68rem .9rem;
  font-family: var(--font-display);
  font-weight: 800;
  text-decoration: none;
}
.sc-card-link__cta::before { content: none; }
.sc-card-link:hover .sc-card-link__cta,
.sc-card-link:focus-visible .sc-card-link__cta {
  background: var(--sc-crimson);
  color: #ffffff;
}
.sc-dark .sc-card-link__cta,
.sc-card--dark .sc-card-link__cta {
  background: #ffffff;
  color: var(--sc-prussian);
  border-top: 0;
}
.sc-dark .sc-card-link:hover .sc-card-link__cta,
.sc-dark .sc-card-link:focus-visible .sc-card-link__cta,
.sc-card--dark .sc-card-link:hover .sc-card-link__cta,
.sc-card--dark .sc-card-link:focus-visible .sc-card-link__cta {
  background: var(--sc-crimson);
  color: #ffffff;
}

:focus-visible {
  outline: 3px solid var(--sc-crimson);
  outline-offset: 4px;
}
.sc-dark :focus-visible,
.sc-hero :focus-visible,
.sc-footer :focus-visible {
  outline-color: #ffffff;
}

/* ============================================================
   USWDS alignment + crisp data visuals pass
   - Keeps custom Stonecrow art direction while leaning on USWDS
     component classes for buttons, forms, tags, alerts, accordions,
     sections, and navigation semantics.
   - Replaces blurred gradient chart bars with crisp, high-contrast
     CSS shapes that do not stretch across their containers.
   ============================================================ */

/* Keep USWDS classes from overriding the custom sticky nav layout. */
.sc-nav.usa-nav {
  padding: 0;
  background: transparent;
  border: 0;
}
.sc-nav__list.usa-nav__primary {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  width: auto;
}
.sc-nav__list.usa-nav__primary > li {
  margin: 0;
  max-width: none;
}
.sc-nav__list.usa-nav__primary a.sc-nav__link {
  color: #d9f2f8;
  text-decoration: none;
}
.sc-nav__list.usa-nav__primary a.sc-nav__link:hover,
.sc-nav__list.usa-nav__primary a.sc-nav__link[aria-current="page"] {
  color: #ffffff;
  background: rgba(215, 38, 61, 0.24);
}

/* USWDS buttons, Stonecrow palette. */
.sc-btn.usa-button {
  border-radius: 0.65rem;
  background-color: var(--sc-crimson);
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(215, 38, 61, 0.30);
  margin-right: 0;
}
.sc-btn.usa-button:hover,
.sc-btn.usa-button:focus-visible {
  background-color: #ad1729;
  color: #ffffff;
}
.sc-btn--ghost.usa-button--outline,
.sc-btn--outline.usa-button--outline {
  background-color: transparent;
  box-shadow: none;
}
.sc-dark .sc-btn--ghost.usa-button--outline,
.sc-hero .sc-btn--ghost.usa-button--outline {
  color: #ffffff;
  border-color: #ffffff;
}
.sc-light .sc-btn--outline.usa-button--outline,
.sc-showcase .sc-btn--outline.usa-button--outline {
  color: var(--sc-prussian);
  border-color: var(--sc-prussian);
}

/* USWDS form components with custom dark-mode skin. */
.sc-form.usa-form {
  max-width: none;
}
.sc-field__label.usa-label {
  margin-top: 0;
  font-weight: 800;
}
.sc-field__hint.usa-hint {
  color: var(--text-light-muted);
  margin-top: 0.2rem;
}
.sc-field__hint--dark.usa-hint {
  color: #d9f2f8;
}
.sc-input.usa-input,
.sc-textarea.usa-textarea {
  max-width: none;
  border-radius: 0.55rem;
  border: 2px solid #b8d5df;
  min-height: 2.75rem;
}
.sc-input--dark.usa-input,
.sc-input--dark.usa-textarea {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(104, 197, 219, 0.65);
}
.sc-input.usa-input:focus,
.sc-textarea.usa-textarea:focus {
  outline: 0.25rem solid var(--sc-crimson);
  outline-offset: 0.125rem;
}

/* USWDS tag class applied, but styled as non-interactive labels. */
.sc-tags li.usa-tag,
.sc-tagline li.usa-tag {
  text-transform: none;
  letter-spacing: 0.01em;
  margin-right: 0;
  max-width: 100%;
  white-space: normal;
}
.sc-dark .sc-tags li.usa-tag,
.sc-card--dark .sc-tags li.usa-tag,
.sc-dark .sc-tagline li.usa-tag,
.sc-card--dark .sc-tagline li.usa-tag {
  background: #ffffff;
  color: var(--sc-prussian);
  border: 1px solid #ffffff;
}

/* USWDS accordion classes, custom visual treatment retained. */
.sc-accordion.usa-accordion {
  font-family: var(--font-body);
}
.sc-accordion__btn.usa-accordion__button {
  background-image: none;
  border-radius: 0;
  color: var(--sc-prussian);
}
.sc-accordion__panel.usa-accordion__content {
  border: 0;
  padding: 1rem 1.15rem 1.15rem;
}

/* Crisp, non-blurry mini charts. These are decorative, so aria-hidden remains on the visual containers. */
.sc-mini-chart {
  display: flex;
  align-items: end;
  justify-content: flex-start;
  gap: 0.5rem;
  height: 3.25rem;
  width: min(11rem, 100%);
  margin-top: 0.8rem;
  padding: 0 0.1rem;
}
.sc-mini-chart span {
  flex: 0 0 1.35rem;
  min-width: 1.35rem;
  max-width: 1.35rem;
  border-radius: 0.22rem 0.22rem 0 0;
  background: var(--sc-sky);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 -0.35rem 0 rgba(2, 24, 43, 0.16);
  opacity: 1;
  transform: translateZ(0);
}
.sc-mini-chart span:nth-child(2) { background: var(--sc-pacific); }
.sc-mini-chart span:nth-child(3) { background: var(--sc-dodger); }
.sc-mini-chart span:nth-child(4) { background: var(--sc-crimson); }

/* Hero floating analytics cards: stop the cards/charts from stretching or overlapping awkwardly. */
.sc-capability-hero {
  min-height: clamp(34rem, 52vw, 41rem);
}
.sc-floating-card {
  width: clamp(12rem, 24vw, 16rem);
  overflow: hidden;
}
.sc-floating-card--seo {
  left: 0.25rem;
  bottom: 8.5rem;
}
.sc-floating-card--campaign {
  left: clamp(7rem, 18vw, 11rem);
  bottom: 1.2rem;
}
.sc-floating-card .sc-mini-chart {
  width: 9.5rem;
  height: 3rem;
}
.sc-floating-card .sc-mini-chart span {
  flex-basis: 1.1rem;
  min-width: 1.1rem;
  max-width: 1.1rem;
}

/* SEO visual chart/funnel: cleaner shapes and less horizontal smear. */
.sc-seo-board {
  overflow: hidden;
}
.sc-seo-score,
.sc-map-item {
  border: 1px solid rgba(104, 197, 219, 0.36);
}
.sc-funnel {
  align-items: center;
  color: var(--sc-prussian);
}
.sc-funnel span {
  background: #ffffff;
  border: 2px solid var(--sc-sky);
  color: var(--sc-prussian);
  box-shadow: none;
}
.sc-funnel span:nth-child(1){width:min(18rem,100%)}
.sc-funnel span:nth-child(2){width:min(15rem,88%)}
.sc-funnel span:nth-child(3){width:min(12rem,72%)}
.sc-funnel span:nth-child(4){width:min(9rem,56%)}

/* Make service/detail cards read as functional links without looking like disabled controls. */
.sc-card-link__cta.usa-button {
  background-color: var(--sc-prussian);
  color: #ffffff;
  border: 2px solid var(--sc-prussian);
  box-shadow: none;
}
.sc-card-link:hover .sc-card-link__cta.usa-button,
.sc-card-link:focus-visible .sc-card-link__cta.usa-button {
  background-color: var(--sc-crimson);
  border-color: var(--sc-crimson);
  color: #ffffff;
}

@media (max-width: 45rem) {
  .sc-nav__list.usa-nav__primary {
    display: grid;
    align-items: stretch;
  }
  .sc-floating-card {
    width: min(16rem, calc(100vw - 3rem));
  }
  .sc-floating-card--seo { bottom: 14rem; }
  .sc-floating-card--campaign { left: 0.5rem; bottom: 1rem; }
  .sc-mini-chart span {
    flex-basis: 1rem;
    min-width: 1rem;
    max-width: 1rem;
  }
}

/* Homepage crawl-friendly overview refinements */
.sc-card--link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.sc-card--link:hover,
.sc-card--link:focus-visible {
  border-color: var(--crimson, #d7263d);
  box-shadow: 0 18px 46px rgba(2, 24, 43, 0.16);
  transform: translateY(-2px);
}
.sc-card__action {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: auto;
  padding-top: 1rem;
  color: var(--crimson, #d7263d);
  font-family: var(--font-display);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: .18em;
}
.sc-mini-map {
  padding: clamp(1.25rem, 3vw, 2rem);
}
.sc-home-cta .sc-btn-row {
  justify-content: flex-start;
}
.sc-card--feature .usa-tag,
.sc-card--link .usa-tag {
  color: #02182b;
  background: #e7f7fb;
  border: 1px solid #68c5db;
}


/* Industry detail pages and linked industry cards */
.sc-card-link[role="listitem"] { display: flex; flex-direction: column; }
.sc-card-link[role="listitem"] .sc-card-link__cta { margin-top: auto; align-self: flex-start; }
.sc-breadcrumb a { color: inherit; font-weight: 700; }
.sc-breadcrumb { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.5rem; font-family: var(--font-mono); font-size: .82rem; }

/* ============================================================
   SECTION 508 / WCAG AA HARDENING PASS
   These overrides preserve the Stonecrow palette while tightening
   keyboard visibility, contrast, and non-color affordances.
   ============================================================ */
:root {
  --focus-ring: #d7263d;
  --sc-accessible-dark: #02182b;
  --sc-accessible-light: #ffffff;
  --sc-accessible-muted-on-dark: #e9f7fb;
  --sc-accessible-link: #005ea8;
}

#main-content:focus {
  outline: none;
}

a:not(.sc-btn):not(.usa-button):not(.sc-card-link):not(.sc-brand):not(.sc-nav__link) {
  text-decoration-thickness: max(2px, .12em);
  text-underline-offset: .18em;
}

a:not(.sc-btn):not(.usa-button):not(.sc-card-link):not(.sc-brand):not(.sc-nav__link):hover {
  text-decoration-style: double;
}

:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 4px solid var(--focus-ring);
  outline-offset: 4px;
  box-shadow: 0 0 0 2px #ffffff;
}

.sc-dark :focus-visible,
.sc-header :focus-visible,
.sc-footer :focus-visible,
.sc-glass :focus-visible {
  outline-color: var(--sc-sky);
  box-shadow: 0 0 0 2px var(--sc-prussian), 0 0 0 6px var(--sc-sky);
}

.sc-skipnav:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 1000;
  background: #ffffff;
  color: var(--sc-prussian);
  border: 3px solid var(--sc-crimson);
  padding: .75rem 1rem;
  border-radius: .25rem;
}

.sc-dark,
.sc-header,
.sc-footer {
  color: #ffffff;
}

.sc-dark p,
.sc-dark li,
.sc-dark .sc-lede,
.sc-dark .sc-hero__sub,
.sc-dark .sc-app-dim,
.sc-dark .sc-demo__desc,
.sc-footer__note {
  color: var(--sc-accessible-muted-on-dark);
}

.sc-eyebrow--dark,
.sc-breadcrumb a,
.sc-footer__links a:hover,
.sc-dark a:not(.sc-btn):not(.usa-button):not(.sc-card-link) {
  color: var(--sc-sky);
}

.sc-eyebrow {
  color: #b51d32;
}

.sc-btn--primary,
.usa-button.sc-btn--primary,
.sc-app-cta {
  background-color: var(--sc-crimson);
  border-color: var(--sc-crimson);
  color: #ffffff;
}

.sc-btn--primary:hover,
.usa-button.sc-btn--primary:hover,
.sc-btn--primary:focus-visible,
.usa-button.sc-btn--primary:focus-visible {
  background-color: #a3182a;
  border-color: #a3182a;
  color: #ffffff;
}

.sc-btn--ghost,
.sc-dark .usa-button--outline,
.sc-header .usa-button--outline {
  color: #ffffff;
  border-color: var(--sc-sky);
  background-color: transparent;
}

.sc-nav__link {
  color: #e9f7fb;
}

.sc-nav__link:hover,
.sc-nav__link[aria-current="page"] {
  color: #ffffff;
  background: rgba(215, 38, 61, .34);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.sc-card,
.sc-card-link {
  color: var(--sc-prussian);
}

.sc-card-link {
  cursor: pointer;
  text-decoration: none;
  border-width: 2px;
}

.sc-card-link:hover,
.sc-card-link:focus-visible {
  border-color: var(--sc-crimson);
  transform: translateY(-2px);
}

.sc-card-link__cta {
  color: var(--sc-prussian) !important;
  background: #ffffff !important;
  border: 2px solid var(--sc-crimson) !important;
  text-decoration: underline;
  text-underline-offset: .18em;
}

.sc-card-link:hover .sc-card-link__cta,
.sc-card-link:focus-visible .sc-card-link__cta {
  color: #ffffff !important;
  background: var(--sc-crimson) !important;
}

.sc-dark .sc-card-link__cta,
.sc-card--dark .sc-card-link__cta {
  color: #ffffff !important;
  background: transparent !important;
  border-color: var(--sc-sky) !important;
}

.sc-dark .sc-card-link:hover .sc-card-link__cta,
.sc-dark .sc-card-link:focus-visible .sc-card-link__cta,
.sc-card--dark .sc-card-link:hover .sc-card-link__cta,
.sc-card--dark .sc-card-link:focus-visible .sc-card-link__cta {
  color: var(--sc-prussian) !important;
  background: var(--sc-sky) !important;
}

.sc-tags,
.sc-tagline {
  gap: .45rem;
}

.sc-tags li,
.sc-tagline li,
.usa-tag {
  color: var(--sc-prussian) !important;
  background: #eefaff !important;
  border: 1px solid #448fa3 !important;
  font-weight: 800;
  cursor: default;
  text-decoration: none;
}

.sc-dark .sc-tags li,
.sc-dark .sc-tagline li,
.sc-dark .usa-tag,
.sc-card--dark .sc-tags li,
.sc-card--dark .usa-tag {
  color: #ffffff !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid var(--sc-sky) !important;
}

.sc-tags li::before,
.sc-tagline li::before {
  background: currentColor;
}

.sc-input,
.usa-input,
.usa-textarea,
textarea,
input,
select {
  color: var(--sc-prussian);
  background: #ffffff;
  border: 2px solid #637083;
}

.sc-input--dark,
.sc-form .usa-input,
.sc-form .usa-textarea {
  color: #ffffff;
  background: rgba(255,255,255,.08);
  border-color: var(--sc-sky);
}

.sc-field__hint,
.usa-hint {
  color: #3a4f63;
}

.sc-field__hint--dark,
.sc-form__hint,
.sc-form .usa-hint {
  color: #e9f7fb;
}

.sc-field__error,
[aria-invalid="true"] + .sc-field__error {
  color: #ffffff;
  background: #8f1020;
  border-left: 4px solid #ffffff;
  padding: .35rem .55rem;
}

[aria-invalid="true"] {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 3px var(--sc-crimson);
}

.sc-accordion__btn {
  color: var(--sc-prussian);
  background: #ffffff;
  border: 2px solid #c9dce5;
}

.sc-accordion__btn[aria-expanded="true"] {
  border-color: var(--sc-crimson);
}

.sc-accordion__panel {
  border-left: 4px solid var(--sc-crimson);
}

.sc-mini-chart {
  align-items: end;
  gap: .55rem;
  height: 4.25rem;
}

.sc-mini-chart span {
  min-width: 1rem;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: .18rem .18rem 0 0;
  background: var(--sc-sky);
  box-shadow: none;
  filter: none;
}

.sc-floating-card {
  color: #ffffff;
  border-color: var(--sc-sky);
  background: rgba(2,24,43,.96);
}

.sc-a11y-statement .usa-alert__heading,
.sc-a11y-statement .usa-alert__text {
  color: var(--sc-prussian);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

@media (forced-colors: active) {
  .sc-card,
  .sc-card-link,
  .sc-btn,
  .usa-button,
  .sc-tags li,
  .usa-tag,
  .sc-floating-card,
  .sc-glass {
    border: 1px solid ButtonText;
    forced-color-adjust: auto;
  }
  .sc-card-link__cta {
    border: 1px solid LinkText !important;
  }
}

/* CTA cleanup: full-card links should look like buttons, not underlined text. */
.sc-card-link,
.sc-card-link:hover,
.sc-card-link:focus,
.sc-card-link:visited {
  text-decoration: none !important;
}
.sc-card-link .sc-card-link__cta,
.sc-card-link .sc-card-link__cta:hover,
.sc-card-link .sc-card-link__cta:focus,
.sc-card-link .sc-card-link__cta:visited,
.sc-card-link__cta.usa-button,
.sc-card-link__cta.usa-button:hover,
.sc-card-link__cta.usa-button:focus,
.sc-card-link__cta.usa-button:visited {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-underline-offset: 0;
}
.sc-card-link__cta span[aria-hidden="true"] {
  text-decoration: none !important;
}

/* Fix: homepage connected-stack card was inheriting absolute hero positioning,
   which caused it to peek in from the left edge. Keep it in the section grid. */
.sc-section-split .sc-hero__arch,
.sc-stack-summary {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  z-index: 1;
  width: 100%;
  max-width: 24rem;
  justify-self: end;
}

@media (max-width: 68rem) {
  .sc-section-split .sc-hero__arch,
  .sc-stack-summary {
    justify-self: stretch;
    max-width: none;
  }
}

/* ------------------------------------------------------------
   WEBGL FLUID TITLE BACKGROUNDS
   Decorative only; respects reduced motion and does not convey content.
------------------------------------------------------------ */
.sc-hero,
.sc-page-hero,
.sc-service-detail-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.sc-webgl-fluid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
  opacity: 0.92;
  background:
    radial-gradient(circle at 18% 18%, rgba(104, 197, 219, 0.22), transparent 34%),
    radial-gradient(circle at 84% 28%, rgba(215, 38, 61, 0.20), transparent 36%),
    linear-gradient(135deg, var(--ink-950), var(--navy-900));
}

.sc-hero::after,
.sc-page-hero::after,
.sc-service-detail-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 24, 43, 0.82), rgba(2, 24, 43, 0.52) 42%, rgba(2, 24, 43, 0.78)),
    radial-gradient(circle at 50% 120%, rgba(215, 38, 61, 0.24), transparent 42%);
}

.sc-hero > .sc-container,
.sc-page-hero > .sc-container,
.sc-service-detail-hero > .sc-container,
.sc-service-detail-hero > .sc-container.sc-service-detail__grid,
.sc-hero__glow,
.sc-hero__grid {
  position: relative;
  z-index: 2;
}

.sc-hero__visual {
  position: relative;
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .sc-webgl-fluid {
    opacity: 0.78;
  }
}

@media (forced-colors: active) {
  .sc-webgl-fluid,
  .sc-hero::after,
  .sc-page-hero::after,
  .sc-service-detail-hero::after {
    display: none;
  }
}

.sc-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.sc-cta > .sc-container {
  position: relative;
  z-index: 2;
}
.sc-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 24, 43, 0.82), rgba(2, 24, 43, 0.54) 45%, rgba(2, 24, 43, 0.78)),
    radial-gradient(circle at 50% 120%, rgba(215, 38, 61, 0.24), transparent 42%);
}
@media (forced-colors: active) {
  .sc-cta::after { display: none; }
}

/* ------------------------------------------------------------
   HOME HERO BALANCE FIX
   Keep the Three.js fluid background decorative without creating a blank first screen.
------------------------------------------------------------- */
.sc-hero {
  padding-block: clamp(3.25rem, 6vw, 5.25rem);
  min-height: auto;
}

.sc-hero__grid {
  min-height: min(34rem, calc(100vh - 4.25rem));
}

.sc-hero__copy {
  max-width: 43rem;
}

/* The hero text is critical content. Keep it visible even if JS/CDN loading is delayed. */
.sc-hero__copy[data-reveal] {
  opacity: 1;
  transform: none;
}

@media (min-width: 74rem) {
  .sc-hero__visual {
    min-height: 29rem;
    transform: scale(0.94);
    transform-origin: center right;
  }
}

@media (max-width: 68rem) {
  .sc-hero__grid {
    min-height: auto;
  }
  .sc-hero__visual {
    transform: none;
  }
}

/* ------------------------------------------------------------
   WEBGL BACKGROUND CONSTRAINT FIX
   The Three.js canvas must behave like a decorative background layer only.
   It must never create page height or become a standalone scroll area.
------------------------------------------------------------ */
.sc-hero,
.sc-page-hero,
.sc-service-detail-hero,
.sc-cta {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  min-height: 0 !important;
}

.sc-hero {
  padding-block: clamp(3rem, 5vw, 4.75rem) !important;
}

.sc-hero__grid {
  min-height: 0 !important;
  align-items: center !important;
}

.sc-page-hero,
.sc-service-detail-hero {
  padding-block: clamp(3rem, 6vw, 5rem) !important;
}

.sc-webgl-fluid {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  pointer-events: none !important;
  overflow: hidden !important;
  contain: strict !important;
}

.sc-hero > .sc-container,
.sc-page-hero > .sc-container,
.sc-service-detail-hero > .sc-container,
.sc-cta > .sc-container {
  position: relative !important;
  z-index: 2 !important;
}

.sc-hero::after,
.sc-page-hero::after,
.sc-service-detail-hero::after,
.sc-cta::after {
  z-index: 1 !important;
}

/* Keep the homepage compact: the mockup should not force a second screen of hero. */
@media (min-width: 68.01rem) {
  .sc-hero__visual.sc-capability-hero {
    min-height: clamp(24rem, 34vw, 31rem) !important;
  }
}

@media (max-width: 68rem) {
  .sc-hero {
    padding-block: 3rem !important;
  }
  .sc-hero__grid {
    gap: 2rem !important;
  }
  .sc-hero__visual.sc-capability-hero {
    min-height: 36rem !important;
  }
}

@media (max-width: 45rem) {
  .sc-hero__visual.sc-capability-hero {
    min-height: 42rem !important;
  }
}


/* ------------------------------------------------------------
   HOMEPAGE WEBGL REMOVAL / HERO CONTENT SAFETY FIX
   The homepage must not have an animation-only scroll panel. The WebGL
   treatment remains on interior page-title/detail headers only.
------------------------------------------------------------ */
.sc-hero--home {
  min-height: 0 !important;
  padding-block: clamp(3rem, 5vw, 5rem) !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(104, 197, 219, 0.16), transparent 32%),
    radial-gradient(circle at 80% 26%, rgba(215, 38, 61, 0.14), transparent 34%),
    linear-gradient(135deg, var(--ink-950), var(--navy-900)) !important;
}

.sc-hero--home .sc-webgl-fluid {
  display: none !important;
}

.sc-hero--home::after {
  background:
    linear-gradient(90deg, rgba(2, 24, 43, 0.92), rgba(2, 24, 43, 0.72) 45%, rgba(2, 24, 43, 0.86)),
    radial-gradient(circle at 50% 120%, rgba(215, 38, 61, 0.18), transparent 42%) !important;
}

.sc-hero--home .sc-hero__grid {
  min-height: 0 !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(24rem, 1.05fr) !important;
  gap: clamp(2rem, 4vw, 3.5rem) !important;
  align-items: center !important;
}

.sc-hero--home .sc-hero__copy {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

.sc-hero--home .sc-hero__visual.sc-capability-hero {
  min-height: clamp(25rem, 32vw, 30rem) !important;
  max-height: 32rem !important;
  overflow: visible !important;
}

@media (max-width: 68rem) {
  .sc-hero--home .sc-hero__grid {
    grid-template-columns: 1fr !important;
  }
  .sc-hero--home .sc-hero__visual.sc-capability-hero {
    min-height: 34rem !important;
    max-height: none !important;
  }
}

@media (max-width: 45rem) {
  .sc-hero--home {
    padding-block: 2.5rem !important;
  }
  .sc-hero--home .sc-hero__visual.sc-capability-hero {
    min-height: 40rem !important;
  }
}

/* ------------------------------------------------------------
   VERIFIED HERO BACKGROUND FIX
   The decorative glow layers were accidentally reset to normal flow by a later
   grouped z-index rule, which created a full page of empty hero height. Keep
   them absolute so the WebGL/fluid treatment remains background-only.
------------------------------------------------------------ */
.sc-hero__glow {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.sc-hero .sc-webgl-fluid,
.sc-page-hero .sc-webgl-fluid,
.sc-service-detail-hero .sc-webgl-fluid {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  width: 100% !important;
  z-index: 0 !important;
}

.sc-hero > .sc-container,
.sc-hero__grid {
  position: relative !important;
  z-index: 2 !important;
}

@media (min-width: 68.01rem) {
  .sc-hero {
    padding-block: clamp(3rem, 5vw, 4.75rem) !important;
  }
}

/* ------------------------------------------------------------
   FINAL HOMEPAGE WEBGL RESTORE + LAYOUT VERIFICATION FIX
   The animation is present on the homepage again, but it is strictly a clipped
   background layer. It cannot create document height or push content down.
------------------------------------------------------------ */
.sc-hero--home {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  min-height: 0 !important;
  padding-block: clamp(3rem, 5vw, 5rem) !important;
  background: var(--ink-950) !important;
}

.sc-hero--home .sc-webgl-fluid {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  contain: strict !important;
  opacity: 0.88 !important;
  background:
    radial-gradient(circle at 18% 22%, rgba(104, 197, 219, 0.24), transparent 34%),
    radial-gradient(circle at 78% 24%, rgba(215, 38, 61, 0.18), transparent 36%),
    linear-gradient(135deg, #02182b, #03101d 70%) !important;
}

.sc-hero--home::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(2, 24, 43, 0.90), rgba(2, 24, 43, 0.64) 42%, rgba(2, 24, 43, 0.84)),
    radial-gradient(circle at 50% 115%, rgba(215, 38, 61, 0.20), transparent 42%) !important;
}

.sc-hero--home > .sc-container,
.sc-hero--home .sc-hero__grid,
.sc-hero--home .sc-hero__copy,
.sc-hero--home .sc-hero__visual {
  position: relative !important;
  z-index: 2 !important;
}

.sc-hero--home .sc-hero__grid {
  min-height: 0 !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(22rem, 1.05fr) !important;
  gap: clamp(2rem, 4vw, 3.5rem) !important;
  align-items: center !important;
}

.sc-hero--home .sc-hero__copy,
.sc-hero--home .sc-hero__copy[data-reveal] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

.sc-hero--home .sc-hero__visual.sc-capability-hero {
  min-height: clamp(24rem, 31vw, 29rem) !important;
  max-height: 31rem !important;
  overflow: visible !important;
}

.sc-hero--home .sc-hero__glow {
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 68rem) {
  .sc-hero--home .sc-hero__grid {
    grid-template-columns: 1fr !important;
  }
  .sc-hero--home .sc-hero__visual.sc-capability-hero {
    min-height: 34rem !important;
    max-height: none !important;
  }
}

@media (max-width: 45rem) {
  .sc-hero--home {
    padding-block: 2.5rem !important;
  }
  .sc-hero--home .sc-hero__visual.sc-capability-hero {
    min-height: 40rem !important;
  }
}

/* ============================================================
   PALETTE-CLEAN NAV STATES
   Keep top navigation states inside the approved Stonecrow palette.
   The previous translucent crimson over Prussian Blue could render as a
   purple-looking selected state. Use solid palette colors instead.
   ============================================================ */
.sc-header .sc-nav__link,
.sc-header .sc-nav__list.usa-nav__primary a.sc-nav__link {
  color: #d9f2f8;
  text-decoration: none;
}

.sc-header .sc-nav__link:hover,
.sc-header .sc-nav__link:focus-visible,
.sc-header .sc-nav__list.usa-nav__primary a.sc-nav__link:hover,
.sc-header .sc-nav__list.usa-nav__primary a.sc-nav__link:focus-visible {
  color: #02182b;
  background: #68c5db;
  text-decoration: none;
}

.sc-header .sc-nav__link[aria-current="page"],
.sc-header .sc-nav__list.usa-nav__primary a.sc-nav__link[aria-current="page"] {
  color: #ffffff;
  background: #d7263d;
  text-decoration: none;
  box-shadow: none;
}

.sc-header .sc-nav__link[aria-current="page"]:hover,
.sc-header .sc-nav__link[aria-current="page"]:focus-visible,
.sc-header .sc-nav__list.usa-nav__primary a.sc-nav__link[aria-current="page"]:hover,
.sc-header .sc-nav__list.usa-nav__primary a.sc-nav__link[aria-current="page"]:focus-visible {
  color: #ffffff;
  background: #d7263d;
  text-decoration: none;
}

/* ============================================================
   DEVICE CARD SPACING FIX
   Keep app/device mockups visually separated from headings and body copy.
   ============================================================ */
.sc-device-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sc-device-card > .sc-window-frame,
.sc-device-card > .sc-phone-frame,
.sc-device-card > .sc-desktop-frame {
  margin-bottom: 0.35rem;
}

.sc-device-card .sc-h3 {
  margin-top: 0;
  margin-bottom: 0;
}

.sc-device-card > p {
  margin-top: -0.35rem;
}

/* ------------------------------------------------------------
   30. HOMEPAGE REFRESH (hx- scope) — index.html only
   Typographic hero, service ticker, capability ledger,
   terminal stack panel, standards strip, oversized CTA.
------------------------------------------------------------ */

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

/* ---------- Hero ---------- */
.hx-hero {
  padding-block: clamp(5rem, 12vw, 9.5rem) clamp(4.5rem, 9vw, 7.5rem);
}

.hx-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hx-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.1rem;
  margin-bottom: clamp(1.6rem, 3.5vw, 2.6rem);
}
.hx-hero__meta-item {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dark-muted);
}
.hx-hero__meta-rule {
  width: 2.25rem;
  height: 1px;
  background: rgba(174, 189, 210, 0.35);
}
.hx-hero__meta-item--live {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--cyan-300);
}
.hx-pulse {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--cyan-400);
  box-shadow: 0 0 0 0 rgba(52, 217, 242, 0.55);
  animation: hx-pulse 2.2s ease-out infinite;
}
@keyframes hx-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 217, 242, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(52, 217, 242, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 217, 242, 0); }
}

.hx-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 1.3rem + 5.6vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 clamp(1.1rem, 2.5vw, 1.6rem);
  max-width: 21ch;
  color: var(--text-dark-strong);
  text-wrap: balance;
}
.hx-accent {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-variation-settings: "opsz" 100;
  letter-spacing: -0.01em;
  color: var(--gold-300);
  padding-right: 0.06em; /* keep the italic terminal off the clip edge */
}

.hx-hero__sub {
  font-size: clamp(1.08rem, 1rem + 0.45vw, 1.3rem);
  line-height: 1.6;
  color: var(--text-dark-muted);
  max-width: 42rem;
  margin: 0;
}

.hx-hero__actions { margin-top: 2rem; }

.hx-hero__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2.2rem;
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  padding-top: 1.4rem;
  border-top: 1px solid rgba(174, 189, 210, 0.18);
  width: 100%;
}
.hx-hero__foot-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--text-dark-muted);
}
.hx-hero__foot-item .material-symbols-outlined {
  font-size: 1.15rem;
  color: var(--gold-300);
}

/* ---------- Service ticker ---------- */
.hx-marquee {
  overflow: hidden;
  background: var(--ink-950);
  border-top: 1px solid rgba(229, 192, 120, 0.22);
  border-bottom: 1px solid rgba(229, 192, 120, 0.22);
  padding-block: 0.95rem;
}
.hx-marquee__track {
  display: flex;
  width: max-content;
  animation: hx-marquee 36s linear infinite;
}
.hx-marquee__group {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  padding-right: 2.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dark-muted);
  white-space: nowrap;
}
.hx-marquee__gem {
  width: 0.5rem; height: 0.5rem;
  flex: none;
  background: linear-gradient(135deg, var(--gold-300), var(--gold-400));
  transform: rotate(45deg);
}
@keyframes hx-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Capability ledger ---------- */
.hx-ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.hx-ledger__item { border-bottom: 1px solid var(--line); }

.hx-ledger__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr) auto auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(0.75rem, 2vw, 1.25rem);
  text-decoration: none;
  color: var(--text-light-strong);
  isolation: isolate;
  transition: color 220ms ease;
}
.hx-ledger__row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink-950);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hx-ledger__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 1rem + 1.8vw, 2.2rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.hx-ledger__desc {
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--text-light-muted);
  transition: color 220ms ease;
}
.hx-ledger__tags {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2e5fb0;
  white-space: nowrap;
  transition: color 220ms ease;
}
.hx-ledger__arrow {
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  color: var(--text-light-muted);
  transition: transform 220ms ease, color 220ms ease;
}

.hx-ledger__row:hover,
.hx-ledger__row:focus-visible {
  color: var(--text-dark-strong);
}
.hx-ledger__row:hover::before,
.hx-ledger__row:focus-visible::before {
  transform: scaleY(1);
}
.hx-ledger__row:hover .hx-ledger__desc,
.hx-ledger__row:focus-visible .hx-ledger__desc { color: var(--text-dark-muted); }
.hx-ledger__row:hover .hx-ledger__tags,
.hx-ledger__row:focus-visible .hx-ledger__tags { color: var(--cyan-300); }
.hx-ledger__row:hover .hx-ledger__arrow,
.hx-ledger__row:focus-visible .hx-ledger__arrow {
  color: var(--gold-300);
  transform: translateX(0.45rem);
}

/* ---------- Connected stack / terminal ---------- */
.hx-stack {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.hx-terminal {
  background: rgba(4, 8, 16, 0.85);
  border: 1px solid rgba(123, 232, 250, 0.22);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dark), inset 0 0 60px rgba(52, 217, 242, 0.04);
  overflow: hidden;
}
.hx-terminal__bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.8rem 1.1rem;
  background: rgba(17, 32, 58, 0.6);
  border-bottom: 1px solid rgba(123, 232, 250, 0.14);
}
.hx-terminal__dot {
  width: 0.65rem; height: 0.65rem;
  border-radius: 50%;
  background: rgba(174, 189, 210, 0.3);
}
.hx-terminal__dot:first-child { background: rgba(215, 38, 61, 0.65); }
.hx-terminal__dot:nth-child(2) { background: rgba(229, 192, 120, 0.7); }
.hx-terminal__dot:nth-child(3) { background: rgba(52, 217, 242, 0.65); }
.hx-terminal__title {
  margin-left: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-dark-muted);
}
.hx-terminal__body {
  padding: 1.3rem 1.4rem 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.5;
}
.hx-terminal__cmd {
  margin: 0 0 0.9rem;
  color: var(--text-dark-strong);
}
.hx-terminal__cmd:last-child { margin: 0.9rem 0 0; }
.hx-terminal__prompt { color: var(--gold-300); margin-right: 0.5rem; }
.hx-terminal__line {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0 0 0.55rem;
  color: var(--text-dark-muted);
}
.hx-terminal__ok { color: var(--cyan-400); font-size: 0.7rem; }
.hx-terminal__ok--gold { color: var(--gold-300); }
.hx-terminal__key {
  color: var(--text-dark-strong);
  min-width: 7.5ch;
  display: inline-block;
}
.hx-terminal__cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.05em;
  vertical-align: text-bottom;
  background: var(--cyan-400);
  animation: hx-blink 1.1s steps(1) infinite;
}
@keyframes hx-blink { 50% { opacity: 0; } }

/* ---------- Standards strip ---------- */
.hx-standards-section { padding-block: clamp(3rem, 6vw, 4.5rem); }

.hx-standards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hx-standard {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.35rem clamp(1.25rem, 3vw, 2.25rem);
  border-left: 1px solid var(--line);
  text-decoration: none;
}
.hx-standard:first-child { border-left: 0; padding-left: 0; }
.hx-standard__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #2e5fb0;
}
.hx-standard__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-light-strong);
}
.hx-standard__more {
  margin-top: auto;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-light-muted);
  transition: color 180ms ease;
}
.hx-standard:hover .hx-standard__more,
.hx-standard:focus-visible .hx-standard__more { color: #1c4a86; }

/* ---------- Final CTA ---------- */
.hx-cta { text-align: left; }
.hx-cta__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 1rem + 2.4vw, 2.6rem);
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0 0 1.4rem;
  max-width: 26ch;
  color: var(--text-dark-strong);
}
.hx-cta__link {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.4rem);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 1.2rem + 4.4vw, 4.4rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-decoration: none;
  color: var(--cyan-300);
  border-bottom: 3px solid rgba(123, 232, 250, 0.35);
  padding-bottom: 0.35rem;
  transition: color 200ms ease, border-color 200ms ease;
}
.hx-cta__icon {
  width: 0.82em;
  height: 0.82em;
  flex: none;
  transition: transform 220ms ease;
}
.hx-cta__link:hover,
.hx-cta__link:focus-visible {
  color: var(--gold-300);
  border-color: var(--gold-300);
}
.hx-cta__link:hover .hx-cta__icon,
.hx-cta__link:focus-visible .hx-cta__icon { transform: translateX(0.5rem); }
.hx-cta__note {
  margin-top: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-dark-muted);
  max-width: 38rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 64em) {
  .hx-ledger__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name arrow"
      "desc arrow"
      "tags arrow";
    row-gap: 0.45rem;
  }
  .hx-ledger__name { grid-area: name; }
  .hx-ledger__desc { grid-area: desc; }
  .hx-ledger__tags { grid-area: tags; white-space: normal; }
  .hx-ledger__arrow { grid-area: arrow; }

  .hx-stack { grid-template-columns: 1fr; }
}

@media (max-width: 47.9em) {
  .hx-hero__meta-rule { display: none; }
  .hx-standards { grid-template-columns: 1fr; gap: 1.75rem; }
  .hx-standard {
    border-left: 0;
    padding-left: 0;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line);
  }
  .hx-standard:first-child { border-top: 0; padding-top: 0.35rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hx-pulse { animation: none; }
  .hx-marquee__track { animation: none; flex-wrap: wrap; width: auto; }
  .hx-marquee__group { flex-wrap: wrap; row-gap: 0.6rem; white-space: normal; }
  .hx-marquee__group + .hx-marquee__group { display: none; }
  .hx-terminal__cursor { animation: none; }
  .hx-ledger__row::before { transition: none; }
}

/* ============================================================
   UPLOADED STONECROW LOGO + 508 / USWDS REFINEMENTS
   ============================================================ */
.sc-brand {
  display: inline-flex;
  align-items: center;
  min-height: 57px;
  padding: .25rem 0;
}
.sc-brand__logo {
  display: block;
  width: clamp(10rem, 18vw, 12.5rem);
  height: auto;
  max-height: 57px;
  object-fit: contain;
  background: #ffffff;
  border-radius: .15rem;
}
.sc-brand--footer .sc-brand__logo {
  width: 10rem;
}
.sc-nav__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: max(2px, .12em);
  text-underline-offset: .28em;
}
.usa-card-group.hx-ledger,
.usa-card-group.hx-stack,
.usa-card-group.hx-standards {
  padding-left: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
  .hx-marquee__track { transform: none !important; }
}
@media (max-width: 52em) {
  .sc-brand__logo { width: min(11rem, 52vw); }
  .sc-header__inner { min-height: 4.75rem; }
}

/* ============================================================
   HEADER / FOOTER WHITE BRAND SURFACE FIX
   Keeps the uploaded white-background logo from looking isolated by
   making the full site chrome use the same white surface.
   ============================================================ */
.sc-header,
.sc-footer {
  background: #ffffff;
  color: #1b1b1b;
  border-color: #dfe1e2;
}

.sc-header {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.sc-footer {
  border-top: 1px solid #dfe1e2;
}

.sc-brand__logo {
  background: transparent;
}

.sc-nav__link,
.sc-footer__links a,
.sc-footer__note {
  color: #1b1b1b;
}

.sc-nav__link:hover,
.sc-nav__link[aria-current="page"],
.sc-footer__links a:hover {
  color: #b50909;
  background: rgba(181, 9, 9, 0.08);
}

.sc-nav-toggle {
  background: #ffffff;
  border-color: #565c65;
  color: #1b1b1b;
}

.sc-header :focus-visible,
.sc-footer :focus-visible {
  outline-color: #b50909;
}

@media (max-width: 52em) {
  .sc-nav {
    background: #ffffff;
    border-bottom: 1px solid #dfe1e2;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16);
  }
}

/* ============================================================
   508 HEADER / FOOTER CONTRAST LOCK
   The header and footer now share the logo's white surface. These
   high-specificity rules prevent older dark-theme rules from making
   navigation or footer text low-contrast/invisible on white.
   Contrast targets verified against WCAG 2.1 AA text thresholds:
   #1b1b1b on #ffffff = 17.22:1; #b50909 on #ffffff = 6.98:1.
   ============================================================ */
html body .sc-header,
html body .sc-footer {
  background: #ffffff !important;
  color: #1b1b1b !important;
  border-color: #dfe1e2 !important;
}

html body .sc-header {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body .sc-footer {
  border-top: 1px solid #dfe1e2 !important;
}

html body .sc-header .sc-nav__link,
html body .sc-header .sc-nav__list.usa-nav__primary a.sc-nav__link,
html body .sc-footer,
html body .sc-footer p,
html body .sc-footer li,
html body .sc-footer .sc-footer__note,
html body .sc-footer .sc-footer__links a {
  color: #1b1b1b !important;
  text-decoration-color: currentColor !important;
}

html body .sc-header .sc-nav__link:hover,
html body .sc-header .sc-nav__link:focus-visible,
html body .sc-header .sc-nav__link[aria-current="page"],
html body .sc-header .sc-nav__list.usa-nav__primary a.sc-nav__link:hover,
html body .sc-header .sc-nav__list.usa-nav__primary a.sc-nav__link:focus-visible,
html body .sc-header .sc-nav__list.usa-nav__primary a.sc-nav__link[aria-current="page"],
html body .sc-footer .sc-footer__links a:hover,
html body .sc-footer .sc-footer__links a:focus-visible {
  color: #b50909 !important;
  background: rgba(181, 9, 9, 0.08) !important;
}

html body .sc-header .sc-nav__link[aria-current="page"] {
  text-decoration: underline !important;
  text-decoration-thickness: max(2px, .12em) !important;
  text-underline-offset: .28em !important;
}

html body .sc-header .sc-nav-toggle {
  background: #ffffff !important;
  border: 1px solid #565c65 !important;
  color: #1b1b1b !important;
}

html body .sc-header .sc-btn,
html body .sc-header .usa-button,
html body .sc-header .sc-nav__cta {
  background: #b50909 !important;
  border-color: #b50909 !important;
  color: #ffffff !important;
}

html body .sc-header .sc-btn:hover,
html body .sc-header .usa-button:hover,
html body .sc-header .sc-nav__cta:hover,
html body .sc-header .sc-btn:focus-visible,
html body .sc-header .usa-button:focus-visible,
html body .sc-header .sc-nav__cta:focus-visible {
  background: #8b0a03 !important;
  border-color: #8b0a03 !important;
  color: #ffffff !important;
}

html body .sc-header :focus-visible,
html body .sc-footer :focus-visible {
  outline: 3px solid #b50909 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px #ffffff !important;
}

@media (max-width: 52em) {
  html body .sc-header .sc-nav {
    background: #ffffff !important;
    border-bottom: 1px solid #dfe1e2 !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16) !important;
  }
}

/* ============================================================
   IMPROVED 508-COMPLIANT FOOTER LAYOUT
   Dense, useful footer with visible text, strong contrast, and
   keyboard-friendly focus states on a unified white surface.
   ============================================================ */
html body .sc-footer.usa-footer {
  background: #ffffff !important;
  color: #1b1b1b !important;
  border-top: 1px solid #dfe1e2 !important;
  padding: 0 !important;
}

html body .sc-footer .sc-footer__inner {
  display: grid !important;
  grid-template-columns: minmax(17rem, 1.35fr) minmax(12rem, .9fr) minmax(13rem, 1fr) minmax(13rem, 1fr) !important;
  gap: clamp(1.25rem, 2.5vw, 2rem) !important;
  align-items: start !important;
  padding-block: clamp(1.75rem, 4vw, 3rem) !important;
}

html body .sc-footer .sc-footer__brand-panel {
  display: grid !important;
  gap: 1rem !important;
  align-content: start !important;
}

html body .sc-footer .sc-brand--footer {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  border-radius: .35rem !important;
  padding: 0 !important;
  background: transparent !important;
}

html body .sc-footer .sc-brand--footer .sc-brand__logo {
  display: block !important;
  width: min(13.5rem, 100%) !important;
  max-width: 100% !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
}

html body .sc-footer .sc-footer__tagline,
html body .sc-footer .sc-footer__contact p {
  color: #3d4551 !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  max-width: 34rem !important;
  margin: 0 !important;
}

html body .sc-footer .sc-footer__heading {
  color: #1b1b1b !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  line-height: 1.25 !important;
  margin: 0 0 .85rem !important;
}

html body .sc-footer .sc-footer__links,
html body .sc-footer .sc-footer__checks {
  display: grid !important;
  gap: .45rem .85rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .sc-footer .sc-footer__links {
  grid-template-columns: repeat(2, minmax(7.5rem, 1fr)) !important;
}

html body .sc-footer .sc-footer__links a,
html body .sc-footer .sc-footer__text-link {
  color: #1b1b1b !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 2.25rem !important;
  border-radius: .3rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  padding: .18rem .35rem !important;
  text-decoration: underline !important;
  text-decoration-thickness: .08em !important;
  text-underline-offset: .22em !important;
}

html body .sc-footer .sc-footer__checks li {
  color: #1b1b1b !important;
  min-height: 2rem !important;
  position: relative !important;
  padding-left: 1.65rem !important;
  line-height: 1.45 !important;
}

html body .sc-footer .sc-footer__checks li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: .32rem !important;
  width: .85rem !important;
  height: .85rem !important;
  border-radius: 999px !important;
  background: #b50909 !important;
  box-shadow: inset 0 0 0 3px #ffffff, 0 0 0 1px #b50909 !important;
}

html body .sc-footer .sc-footer__cta.usa-button {
  background: #b50909 !important;
  color: #ffffff !important;
  border: 2px solid #b50909 !important;
  border-radius: .45rem !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  justify-self: start !important;
  margin: 0 !important;
  text-decoration: none !important;
}

html body .sc-footer .sc-footer__cta.usa-button:hover,
html body .sc-footer .sc-footer__cta.usa-button:focus-visible {
  background: #8b0a03 !important;
  border-color: #8b0a03 !important;
  color: #ffffff !important;
}

html body .sc-footer .sc-footer__links a:hover,
html body .sc-footer .sc-footer__links a:focus-visible,
html body .sc-footer .sc-footer__text-link:hover,
html body .sc-footer .sc-footer__text-link:focus-visible {
  color: #b50909 !important;
  background: rgba(181, 9, 9, .08) !important;
}

html body .sc-footer .sc-footer__bottom {
  border-top: 1px solid #dfe1e2 !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding-block: 1rem !important;
}

html body .sc-footer .sc-footer__note {
  color: #3d4551 !important;
  font-size: .93rem !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

html body .sc-footer a:focus-visible,
html body .sc-footer .usa-button:focus-visible {
  outline: .25rem solid #face00 !important;
  outline-offset: .2rem !important;
}

@media (max-width: 64rem) {
  html body .sc-footer .sc-footer__inner {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 40rem) {
  html body .sc-footer .sc-footer__inner {
    grid-template-columns: 1fr !important;
    padding-block: 1.5rem !important;
  }

  html body .sc-footer .sc-footer__links {
    grid-template-columns: 1fr !important;
  }

  html body .sc-footer .sc-footer__bottom {
    display: grid !important;
  }
}


/* ============================================================
   SOCIAL LINKS + FOOTER ALIGNMENT REFINEMENT
   Adds accessible social icon controls and keeps the footer link
   grid aligned even with longer destinations such as SEO.
   ============================================================ */
html body .sc-social-links {
  display: inline-flex !important;
  align-items: center !important;
  gap: .45rem !important;
  flex-wrap: wrap !important;
}

html body .sc-social-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.75rem !important;
  height: 2.75rem !important;
  border-radius: 999px !important;
  border: 2px solid #565c65 !important;
  color: #1b1b1b !important;
  background: #ffffff !important;
  text-decoration: none !important;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease !important;
}

html body .sc-social-link:hover,
html body .sc-social-link:focus-visible {
  color: #ffffff !important;
  background: #b50909 !important;
  border-color: #b50909 !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}

html body .sc-social__icon {
  width: 1.25rem !important;
  height: 1.25rem !important;
  fill: currentColor !important;
  flex: none !important;
}

html body .sc-nav__social-item {
  display: flex !important;
  align-items: center !important;
  margin-left: .2rem !important;
}

html body .sc-social-links--header {
  gap: .35rem !important;
}

html body .sc-social-links--header .sc-social-link {
  width: 2.45rem !important;
  height: 2.45rem !important;
  border-color: #dfe1e2 !important;
}

html body .sc-footer .sc-footer__actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: .75rem 1rem !important;
}

html body .sc-footer .sc-footer__links {
  grid-template-columns: repeat(2, minmax(6.25rem, 1fr)) !important;
  align-items: start !important;
}

html body .sc-footer .sc-footer__links a {
  width: 100% !important;
  min-height: 2.4rem !important;
  white-space: nowrap !important;
}

html body .sc-footer .sc-social-links--footer {
  margin-top: .1rem !important;
}

html body .sc-readable {
  max-width: 48rem !important;
}

html body .sc-readable p,
html body .sc-readable li {
  color: #3d4551 !important;
  font-size: 1.06rem !important;
  line-height: 1.65 !important;
}

html body .sc-readable a {
  color: #005ea8 !important;
  font-weight: 700 !important;
}

html body .sc-readable a:hover,
html body .sc-readable a:focus-visible {
  color: #b50909 !important;
}

@media (max-width: 75rem) {
  html body .sc-header .sc-nav__list {
    gap: .25rem !important;
  }
  html body .sc-social-links--header .sc-social-link {
    width: 2.35rem !important;
    height: 2.35rem !important;
  }
}

@media (max-width: 64rem) {
  html body .sc-nav__social-item {
    margin-left: 0 !important;
    padding-top: .65rem !important;
  }
}

@media (max-width: 40rem) {
  html body .sc-footer .sc-footer__links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body .sc-footer .sc-footer__links a {
    white-space: normal !important;
  }
}


/* Footer bottom-level Privacy Policy link.
   Privacy appears only alongside the copyright, not in the main footer menu. */
html body .sc-footer .sc-footer__copyright {
  display: inline-flex !important;
  align-items: center !important;
  gap: .45rem !important;
  flex-wrap: wrap !important;
}

html body .sc-footer .sc-footer__bottom-link {
  color: #1b1b1b !important;
  border-radius: .25rem !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-decoration-thickness: .08em !important;
  text-underline-offset: .22em !important;
}

html body .sc-footer .sc-footer__bottom-link:hover,
html body .sc-footer .sc-footer__bottom-link:focus-visible {
  color: #b50909 !important;
  background: rgba(181, 9, 9, .08) !important;
}

/* ------------------------------------------------------------
   SEO / MARKETING VIDEO PANEL
   Adds a campaign video visual with a crisp tiny-dot grid overlay.
------------------------------------------------------------ */
.sc-seo-video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
  border-radius: clamp(1.2rem, 2.2vw, 1.8rem);
  border: 1px solid rgba(123, 232, 250, 0.28);
  background:
    linear-gradient(135deg, rgba(7, 18, 35, 0.96), rgba(9, 30, 54, 0.88)),
    var(--ink-950);
  box-shadow: var(--shadow-dark);
  isolation: isolate;
}

.sc-seo-video-wrap::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(123, 232, 250, 0.42), transparent 28%, transparent 68%, rgba(215, 38, 61, 0.26));
  opacity: 0.72;
  mix-blend-mode: screen;
}

.sc-seo-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
  transform: scale(1.015);
}

.sc-seo-video__dots {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.78) 0 1px, transparent 1.35px);
  background-size: 12px 12px;
  opacity: 0.42;
  mix-blend-mode: multiply;
}

.sc-seo-video__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 24, 43, 0.72), rgba(2, 24, 43, 0.22) 46%, rgba(2, 24, 43, 0.78)),
    radial-gradient(circle at 76% 24%, rgba(52, 217, 242, 0.2), transparent 34%),
    radial-gradient(circle at 24% 86%, rgba(215, 38, 61, 0.24), transparent 38%);
}

.sc-seo-video__frame {
  position: absolute;
  inset: clamp(0.7rem, 1.5vw, 1rem);
  z-index: 4;
  pointer-events: none;
  border: 1px solid rgba(244, 248, 252, 0.18);
  border-radius: clamp(0.9rem, 1.8vw, 1.35rem);
  box-shadow:
    inset 0 0 0 1px rgba(123, 232, 250, 0.12),
    inset 0 0 42px rgba(52, 217, 242, 0.08);
}

.sc-seo-video__hud {
  position: absolute;
  left: clamp(1rem, 2vw, 1.35rem);
  right: clamp(1rem, 2vw, 1.35rem);
  bottom: clamp(1rem, 2vw, 1.35rem);
  z-index: 5;
  max-width: 24rem;
  padding: 0.9rem 1rem;
  border-color: rgba(123, 232, 250, 0.28);
  background: rgba(7, 18, 35, 0.72);
  backdrop-filter: blur(12px);
}

@media (max-width: 68rem) {
  .sc-seo-video-wrap {
    aspect-ratio: 16 / 9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc-seo-video {
    animation: none;
  }
}