/* ==========================================================================
   AreaIQ design system
   Premium dual-theme visual language: light editorial sections alternating
   with dark intelligence sections, as one coherent brand.

   Colour is controlled on purpose. Electric cobalt is powerful because it is
   reserved for CTAs, links, active states and key data. If everything were
   blue, nothing would be important.
   ========================================================================== */

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* Brand palette */
  --color-midnight:      #050C18;
  --color-graphite:      #0B1220;
  --color-cobalt:        #2563FF;
  --color-cobalt-hover:  #1D4ED8;
  --color-cyan:          #7DE3FF;
  --color-ivory:         #F3F0EA;
  --color-white:         #FFFFFF;
  --color-ink:           #101827;
  --color-slate:         #667085;
  --color-silver:        #C9CCD4;
  --color-blue-wash:     #EEF4FF;
  --color-pale-blue:     #DCE8FF;
  --color-light-border:  #E4E7EC;

  /* Three additions, each solving a measured contrast failure in the spec.
     All stay inside the palette family.
       cobalt-lift : #2563FF as TEXT on midnight is 4.02:1 and fails. This is
                     5.20:1. Fills keep the true cobalt, where white sits at
                     4.88:1 and passes.
       ink-body    : #667085 is 4.97:1 on white but tight for long reading.
       muted       : #667085 as a placeholder on graphite is 3.76:1 and fails.
                     This is 7.27:1. */
  --color-cobalt-lift:   #4B7BFF;
  --color-ink-body:      #475467;
  --color-muted:         #98A2B3;

  --color-dark-border:   rgba(201, 204, 212, 0.12);
  --color-dark-border-2: rgba(201, 204, 212, 0.22);
  --color-dark-surface:  rgba(255, 255, 255, 0.04);

  /* Semantic. Restrained by design: no rainbow. */
  --color-positive:      #2E7D6B;
  --color-risk:          #A5423C;
  --color-neutral:       #98A2B3;
  --color-warn:          #8A5B12;
  --color-warn-line:     #C08A2E;

  /* Gradients, used sparingly */
  --grad-hero: linear-gradient(135deg, #050C18 0%, #071427 50%, #0A1E39 100%);
  --grad-wash: linear-gradient(180deg, #FFFFFF 0%, #EEF4FF 100%);
  --grad-cta:  linear-gradient(135deg, #2563FF 0%, #3B82F6 100%);

  /* Type */
  --display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --shell: 1320px;
  --gutter: clamp(20px, 5vw, 68px);
  --band: clamp(72px, 10vh, 132px);
  --radius: 8px;
  --radius-sm: 6px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 180ms;
  --mid: 320ms;
  --slow: 520ms;
}

/* --- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, canvas, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--color-cobalt); outline-offset: 3px; }
.band--dark :focus-visible,
.band--graphite :focus-visible,
.hero :focus-visible,
.foot :focus-visible { outline-color: var(--color-cyan); }

::selection { background: var(--color-cobalt); color: #fff; }

/* --- Bands: the section rhythm ------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band); }
.band--tight { padding-block: clamp(46px, 7vh, 84px); }

.band--white    { background: var(--color-white); color: var(--color-ink); }
.band--wash     { background: var(--grad-wash); color: var(--color-ink); }
.band--wash-flat{ background: var(--color-blue-wash); color: var(--color-ink); }
.band--dark     { background: var(--color-midnight); color: var(--color-silver); }
.band--graphite { background: var(--color-graphite); color: var(--color-silver); }
.band--blue     { background: var(--color-cobalt); color: var(--color-white); }

.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4,
.band--graphite h1, .band--graphite h2, .band--graphite h3, .band--graphite h4 {
  color: var(--color-ivory);
}
.band--blue h1, .band--blue h2, .band--blue h3, .band--blue h4 { color: var(--color-white); }

.rule-top { border-top: 1px solid var(--color-light-border); }
.band--dark .rule-top, .band--graphite .rule-top { border-top-color: var(--color-dark-border); }
.band--blue .rule-top { border-top-color: rgba(255, 255, 255, 0.24); }

/* --- Typography ---------------------------------------------------------- */

.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.06;
  text-wrap: balance;
}

.d1 { font-size: clamp(2.45rem, 5.4vw, 4.4rem); }
.d2 { font-size: clamp(2.05rem, 4.4vw, 3.5rem); }
.d3 { font-size: clamp(1.55rem, 2.9vw, 2.3rem); line-height: 1.14; }
.d4 { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.2; }

.lede {
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--color-ink-body);
  max-width: 48ch;
}
.band--dark .lede, .band--graphite .lede, .hero .lede { color: var(--color-silver); }
.band--blue .lede { color: var(--color-white); }

.prose { max-width: 66ch; color: var(--color-ink-body); }
.prose p + p { margin-top: 1.05em; }
.prose strong { color: var(--color-ink); font-weight: 600; }
.band--dark .prose, .band--graphite .prose { color: var(--color-silver); }
.band--dark .prose strong, .band--graphite .prose strong { color: var(--color-ivory); }
.band--blue .prose, .band--blue .prose strong { color: var(--color-white); }

/* Uppercase micro-label. Inter with wide tracking rather than a third family:
   the style guide specifies two typefaces, so the data role is carried by
   tracking and tabular figures instead. */
.label {
  font-family: var(--sans);
  font-size: 0.688rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-cobalt);
  display: inline-block;
}
.band--dark .label, .band--graphite .label, .hero .label, .foot .label {
  color: var(--color-cobalt-lift);
}
.band--blue .label { color: var(--color-white); }
.label--accent { color: var(--color-cobalt) !important; }
.band--dark .label--accent, .band--graphite .label--accent, .hero .label--accent { color: var(--color-cyan) !important; }
.label--cyan { color: var(--color-cyan) !important; }
.label--muted { color: var(--color-slate) !important; }
.band--dark .label--muted, .band--graphite .label--muted { color: var(--color-silver) !important; }

.num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.sec-head {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 3vw, 38px);
  padding-top: 20px;
  margin-bottom: clamp(30px, 4.6vh, 58px);
}
.sec-head__num {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--color-cobalt);
  flex: none;
  padding-top: 0.5em;
}
.band--dark .sec-head__num, .band--graphite .sec-head__num { color: var(--color-cobalt-lift); }
.band--blue .sec-head__num { color: rgba(255, 255, 255, 0.85); }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
              color var(--fast) var(--ease), box-shadow var(--mid) var(--ease),
              transform var(--fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn__arw { transition: transform var(--mid) var(--ease); }
.btn:hover .btn__arw { transform: translateX(4px); }

/* Primary, on any ground */
.btn--primary { background: var(--color-cobalt); color: var(--color-white); border-color: var(--color-cobalt); }
.btn--primary:hover { background: var(--color-cobalt-hover); border-color: var(--color-cobalt-hover); }
/* Glow only on hover, and only on dark */
.band--dark .btn--primary:hover, .hero .btn--primary:hover, .band--graphite .btn--primary:hover {
  box-shadow: 0 0 0 1px rgba(125, 227, 255, 0.35), 0 10px 34px -10px rgba(37, 99, 255, 0.75);
}

/* White CTA, for full-blue and dark grounds */
.btn--white { background: var(--color-white); color: var(--color-ink); border-color: var(--color-white); }
.btn--white:hover { background: var(--color-blue-wash); border-color: var(--color-blue-wash); }

/* Secondary on light */
.btn--secondary { background: transparent; color: var(--color-ink); border-color: #D0D5DD; }
.btn--secondary:hover { background: #F8FAFC; }

/* Secondary on dark */
.band--dark .btn--secondary, .band--graphite .btn--secondary, .hero .btn--secondary {
  color: var(--color-ivory);
  border-color: var(--color-dark-border-2);
}
.band--dark .btn--secondary:hover, .band--graphite .btn--secondary:hover, .hero .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.05);
}
/* Secondary on blue */
.band--blue .btn--secondary { color: var(--color-white); border-color: rgba(255, 255, 255, 0.55); }
.band--blue .btn--secondary:hover { background: rgba(255, 255, 255, 0.12); }

/* Tertiary: text with a moving rule. The consulting/editorial register. */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.813rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  padding-bottom: 4px;
  color: var(--color-cobalt);
  border-bottom: 1px solid rgba(37, 99, 255, 0.35);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.tlink:hover { color: var(--color-cobalt-hover); border-color: var(--color-cobalt-hover); }
.tlink__arw { transition: transform var(--mid) var(--ease); }
.tlink:hover .tlink__arw { transform: translateX(4px); }

/* Cobalt as text fails on midnight, so links on dark are cyan. */
.band--dark .tlink, .band--graphite .tlink, .hero .tlink, .foot .tlink {
  color: var(--color-cyan);
  border-bottom-color: rgba(125, 227, 255, 0.38);
}
.band--dark .tlink:hover, .band--graphite .tlink:hover, .hero .tlink:hover, .foot .tlink:hover {
  color: var(--color-white); border-bottom-color: var(--color-cyan);
}
.band--blue .tlink { color: var(--color-white); border-bottom-color: rgba(255, 255, 255, 0.6); }
.band--blue .tlink:hover { border-bottom-color: var(--color-white); }
/* On the blue wash the true cobalt is 4.42:1, so links there darken. */
.band--wash .tlink, .band--wash-flat .tlink { color: var(--color-cobalt-hover); }

/* --- Navigation ---------------------------------------------------------- */

/* The nav is dark on every page. It keeps one logo asset working everywhere
   and gives the brand a constant anchor above the alternating bands. */
.nav {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--color-midnight);
  border-bottom: 1px solid var(--color-dark-border);
  transition: background var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.nav--over { position: fixed; inset: 0 0 auto 0; background: transparent; border-bottom-color: transparent; }
.nav--over:not(.is-solid) {
  background: linear-gradient(180deg,
    rgba(5, 12, 24, 0.97) 0%,
    rgba(5, 12, 24, 0.92) 46%,
    rgba(5, 12, 24, 0.66) 76%,
    rgba(5, 12, 24, 0) 100%);
}
.nav--over.is-solid {
  background: rgba(5, 12, 24, 0.94);
  backdrop-filter: saturate(1.3) blur(14px);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  border-bottom-color: var(--color-dark-border);
}

.nav__in { display: flex; align-items: center; gap: 26px; height: 74px; }
.nav__logo { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.nav__mark { width: 30px; height: 30px; flex: none; }
.nav__word {
  font-family: var(--display);
  font-size: 1.42rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--color-ivory);
  white-space: nowrap;
  /* The lockup sits over moving footage, so it carries its own shadow rather
     than depending on the scrim alone. */
  text-shadow: 0 1px 14px rgba(5, 12, 24, 0.85), 0 0 3px rgba(5, 12, 24, 0.7);
}
.nav__word b { font-weight: 600; }
.nav__word em { font-style: normal; color: var(--color-cobalt-lift); }
.nav__mark { filter: drop-shadow(0 1px 8px rgba(5, 12, 24, 0.9)); }

.nav__links { display: flex; gap: 26px; align-items: center; }
.nav__links a {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-silver);
  transition: color var(--fast) var(--ease);
}
.nav__links a:hover { color: var(--color-cyan); }

.nav__cta {
  padding: 11px 20px;
  border: 1px solid var(--color-cobalt);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-ivory);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.nav__cta:hover { background: var(--color-cobalt); color: var(--color-white); }

.nav__burger {
  display: none;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--color-dark-border-2);
  border-radius: var(--radius-sm);
  padding: 9px 13px;
  cursor: pointer;
  color: var(--color-ivory);
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--grad-hero);
  color: var(--color-silver);
  padding-top: 74px;
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media video, .hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% center;
}
/* Readability first. The headline sits left, so the left side stays near
   opaque and the globe is allowed to read on the right. */
.hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(5, 12, 24, 0.97) 0%, rgba(5, 12, 24, 0.93) 27%,
      rgba(5, 12, 24, 0.72) 47%, rgba(5, 12, 24, 0.34) 70%, rgba(5, 12, 24, 0.16) 100%),
    linear-gradient(180deg,
      rgba(5, 12, 24, 0.62) 0%, rgba(5, 12, 24, 0.06) 24%,
      rgba(5, 12, 24, 0.10) 66%, rgba(5, 12, 24, 0.86) 100%);
}
.hero__in { position: relative; z-index: 2; width: 100%; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(34px, 5vh, 66px);
}
.hero h1 { color: var(--color-ivory); margin: 15px 0 19px; }
.hero__lede { max-width: 42ch; margin-bottom: 24px; }

/* Scan field, sized to sit inline with the primary CTA */
.scanbar { display: flex; gap: 12px; flex-wrap: wrap; width: 100%; max-width: 540px; }
.scanbar__field {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  background: rgba(11, 18, 32, 0.86);
  border: 1px solid var(--color-dark-border-2);
  border-radius: var(--radius);
  padding: 0 16px;
  transition: border-color var(--fast) var(--ease);
}
.scanbar__field:focus-within { border-color: var(--color-cobalt); }
.scanbar__field .label { padding-right: 11px; margin-right: 12px; border-right: 1px solid var(--color-dark-border); }
.scanbar input {
  flex: 1; min-width: 0;
  background: transparent; border: 0;
  color: var(--color-ivory);
  font-size: 0.938rem;
  padding: 15px 0;
}
.scanbar input::placeholder { color: var(--color-muted); }
.scanbar input:focus { outline: none; }

.scanbar--light .scanbar__field { background: var(--color-white); border-color: #D0D5DD; }
.scanbar--light input { color: var(--color-ink); }
.scanbar--light input::placeholder { color: var(--color-muted); }

/* Trust strip under the hero */
.trust {
  position: relative; z-index: 2;
  border-top: 1px solid var(--color-dark-border);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.trust__item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 28px clamp(16px, 2.2vw, 32px);
  border-right: 1px solid var(--color-dark-border);
}
.trust__item:last-child { border-right: 0; }
.trust__icon { flex: none; width: 34px; height: 34px; color: var(--color-cyan); opacity: 0.9; }
.trust__t {
  display: block;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-ivory); margin-bottom: 6px;
}
.trust__d { font-size: 0.875rem; color: var(--color-silver); line-height: 1.5; }

/* --- Live signal strip --------------------------------------------------- */

.ticker { background: var(--color-graphite); border-block: 1px solid var(--color-dark-border); overflow: hidden; }
.ticker__in { display: flex; align-items: stretch; }
.ticker__tag {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 0 22px; border-right: 1px solid var(--color-dark-border);
  background: var(--color-midnight); z-index: 2;
}
.ticker__tag .label { color: var(--color-cyan); }
.ticker__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-cyan);
  box-shadow: 0 0 0 3px rgba(125, 227, 255, 0.16);
  animation: pulse 2.8s var(--ease) infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.ticker__track { display: flex; animation: slide 68s linear infinite; will-change: transform; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker__item {
  flex: none; display: flex; align-items: center; gap: 14px;
  padding: 16px 30px; border-right: 1px solid var(--color-dark-border);
  font-size: 0.875rem; color: var(--color-ivory); white-space: nowrap;
  transition: background var(--fast) var(--ease);
}
.ticker__item:hover { background: var(--color-dark-surface); }
.ticker__item .label { color: var(--color-silver); font-weight: 500; }
.ticker__node {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-cobalt-lift); flex: none;
}

/* --- Cards --------------------------------------------------------------- */

.card {
  background: var(--color-white);
  border: 1px solid var(--color-light-border);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: 0 1px 2px rgba(16, 24, 39, 0.04);
}
.band--dark .card, .band--graphite .card {
  background: var(--color-graphite);
  border-color: var(--color-dark-border);
  color: var(--color-silver);
  box-shadow: none;
}

/* Intelligence card: hierarchy from type and space, not boxes on every part */
.sig {
  display: block;
  padding-top: 20px;
  border-top: 1px solid var(--color-ink);
  transition: border-color var(--mid) var(--ease);
}
.sig:hover { border-top-color: var(--color-cobalt); }
.sig__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 15px; }
.sig__score {
  font-size: 0.813rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  color: var(--color-cobalt);
}
.sig__title {
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1.18; letter-spacing: -0.012em;
  margin-bottom: 12px; text-wrap: pretty;
  transition: color var(--fast) var(--ease);
}
.sig:hover .sig__title { color: var(--color-cobalt); }
.sig__sum { font-size: 0.938rem; color: var(--color-ink-body); line-height: 1.58; margin-bottom: 18px; }
.sig__foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--color-light-border); }
.sig__meta .label { color: var(--color-slate); font-weight: 500; }

.sig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: clamp(26px, 3.4vw, 48px); }

.band--dark .sig, .band--graphite .sig { border-top-color: var(--color-dark-border-2); }
.band--dark .sig:hover, .band--graphite .sig:hover { border-top-color: var(--color-cobalt-lift); }
.band--dark .sig__title, .band--graphite .sig__title { color: var(--color-ivory); }
.band--dark .sig:hover .sig__title, .band--graphite .sig:hover .sig__title { color: var(--color-cyan); }
.band--dark .sig__sum, .band--graphite .sig__sum { color: var(--color-silver); }
.band--dark .sig__foot, .band--graphite .sig__foot { border-top-color: var(--color-dark-border); }
.band--dark .sig__score, .band--graphite .sig__score { color: var(--color-cobalt-lift); }
.band--dark .sig__meta .label, .band--graphite .sig__meta .label { color: rgba(201, 204, 212, 0.7); }

/* --- Badges -------------------------------------------------------------- */

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 9px; border: 1px solid var(--color-light-border); border-radius: 4px;
  color: var(--color-slate); white-space: nowrap;
}
/* Source provenance, by type. Sophisticated, never random colour. */
.badge--primary  { border-color: var(--color-cobalt); color: var(--color-cobalt); }
.badge--gov      { border-color: #B9C0CC; color: #55606E; }
.badge--company  { border-color: var(--color-light-border); color: var(--color-ink); }
.badge--news     { border-color: #B7CCFF; color: var(--color-cobalt-hover); background: var(--color-blue-wash); }
.badge--licensed { border-color: #8CC9DE; color: #17627C; }
.badge--demo     { border-color: var(--color-warn-line); color: var(--color-warn); background: rgba(192, 138, 46, 0.08); }
.badge--high     { border-color: var(--color-cobalt); color: var(--color-cobalt); }
.badge--medium   { border-color: #B9C0CC; color: var(--color-ink-body); }
.badge--low      { border-color: var(--color-light-border); color: var(--color-slate); }

.band--dark .badge, .band--graphite .badge { border-color: var(--color-dark-border-2); color: var(--color-silver); }
.band--dark .badge--primary, .band--graphite .badge--primary { border-color: var(--color-cobalt-lift); color: var(--color-cobalt-lift); }
.band--dark .badge--licensed, .band--graphite .badge--licensed { border-color: rgba(125,227,255,0.5); color: var(--color-cyan); background: none; }
.band--dark .badge--news, .band--graphite .badge--news { background: none; border-color: rgba(75,123,255,0.45); color: var(--color-cobalt-lift); }
.band--dark .badge--demo, .band--graphite .badge--demo { border-color: #B08A3E; color: #DDB878; background: rgba(176,138,62,0.1); }

/* --- Fact / interpretation ----------------------------------------------- */

.split { display: grid; gap: clamp(26px, 4vw, 52px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.panel { padding-top: 26px; border-top: 2px solid var(--color-ink); }
.panel--interp { border-top-color: var(--color-cobalt); }
.band--dark .panel, .band--graphite .panel { border-top-color: var(--color-silver); }
.band--dark .panel--interp, .band--graphite .panel--interp { border-top-color: var(--color-cobalt-lift); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }

.interp-note {
  background: var(--color-blue-wash);
  border-left: 2px solid var(--color-cobalt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 20px;
  font-size: 0.875rem;
  color: var(--color-cobalt-hover);
  margin-top: 20px;
}

/* --- Data list ----------------------------------------------------------- */

.dl { border-top: 1px solid var(--color-light-border); }
.dl__row {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 13px 0; border-bottom: 1px solid var(--color-light-border); font-size: 0.875rem;
}
.dl__row dt { color: var(--color-slate); }
.dl__row dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--color-ink); text-align: right; font-weight: 500; }
.band--dark .dl, .band--graphite .dl { border-top-color: var(--color-dark-border); }
.band--dark .dl__row, .band--graphite .dl__row { border-bottom-color: var(--color-dark-border); }
.band--dark .dl__row dt, .band--graphite .dl__row dt { color: rgba(201, 204, 212, 0.7); }
.band--dark .dl__row dd, .band--graphite .dl__row dd { color: var(--color-ivory); }

/* --- Sources ------------------------------------------------------------- */

.src { padding: 20px 0; border-bottom: 1px solid var(--color-light-border); display: grid; gap: 10px; }
.src__top { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.src__pub { font-weight: 600; font-size: 0.938rem; }
.src__title { font-size: 0.938rem; color: var(--color-ink-body); }
.src__meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 0.688rem; color: var(--color-slate);
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
}
.src__none { font-size: 0.813rem; color: var(--color-warn); font-style: italic; }
.band--dark .src, .band--graphite .src { border-bottom-color: var(--color-dark-border); }
.band--dark .src__title, .band--graphite .src__title { color: var(--color-silver); }
.band--dark .src__meta, .band--graphite .src__meta { color: rgba(201, 204, 212, 0.65); }

/* --- Disclosure ---------------------------------------------------------- */

.disclose {
  border: 1px solid var(--color-light-border);
  border-left: 2px solid var(--color-warn-line);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
}
.disclose__sum {
  cursor: pointer; font-size: 0.875rem; font-weight: 500;
  list-style: none; display: flex; gap: 10px; align-items: center;
}
.disclose__sum::-webkit-details-marker { display: none; }
.disclose__sum::after { content: "+"; margin-left: auto; color: var(--color-slate); }
.disclose[open] .disclose__sum::after { content: "\2212"; }
.disclose__body { margin-top: 14px; font-size: 0.875rem; color: var(--color-ink-body); line-height: 1.62; max-width: 76ch; }
.band--dark .disclose, .band--graphite .disclose {
  background: var(--color-graphite); border-color: var(--color-dark-border); color: var(--color-silver);
}
.band--dark .disclose__body, .band--graphite .disclose__body { color: var(--color-silver); }

/* --- Forms --------------------------------------------------------------- */

.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field > .label { color: var(--color-cobalt); }
.band--dark .field > .label, .band--graphite .field > .label { color: var(--color-cobalt-lift); }

.field input[type=text], .field input[type=url], .field input[type=email],
.field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid #D0D5DD;
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--sans);
  font-size: 0.938rem;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-cobalt);
  box-shadow: 0 0 0 3px rgba(37, 99, 255, 0.14);
}
.field__help { font-size: 0.813rem; color: var(--color-slate); }

.band--dark .field input, .band--dark .field select, .band--dark .field textarea,
.band--graphite .field input, .band--graphite .field select, .band--graphite .field textarea {
  background: var(--color-graphite);
  border-color: var(--color-dark-border-2);
  color: var(--color-ivory);
}
.band--dark .field__help, .band--graphite .field__help { color: var(--color-silver); }

.choice {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--color-light-border);
  border-radius: var(--radius);
  background: var(--color-white);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.choice:hover { border-color: #B9C0CC; }
.choice input { margin-top: 4px; accent-color: var(--color-cobalt); }
.choice.is-on { border-color: var(--color-cobalt); background: var(--color-blue-wash); }
.choice__t { font-weight: 600; font-size: 0.938rem; display: block; margin-bottom: 3px; }
.choice__d { font-size: 0.875rem; color: var(--color-ink-body); }

/* --- Filter chips -------------------------------------------------------- */

.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-size: 0.688rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 13px;
  border: 1px solid var(--color-light-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-ink-body);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.chip:hover { border-color: #B9C0CC; color: var(--color-ink); }
.chip.is-on { background: var(--color-cobalt); border-color: var(--color-cobalt); color: var(--color-white); }
.chip.is-on:hover { background: var(--color-cobalt-hover); border-color: var(--color-cobalt-hover); }

/* --- Pricing ------------------------------------------------------------- */

.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 1px solid var(--color-ink); }
.tier {
  padding: 30px 26px 34px;
  border-right: 1px solid var(--color-light-border);
  border-bottom: 1px solid var(--color-light-border);
  display: flex; flex-direction: column; gap: 14px;
}
.tier:last-child { border-right: 0; }
.tier--feature { background: var(--color-blue-wash); box-shadow: inset 0 3px 0 0 var(--color-cobalt); }
.tier__price { font-family: var(--display); font-size: 2.1rem; letter-spacing: -0.02em; line-height: 1; color: var(--color-cobalt); }
.tier__list { display: grid; gap: 9px; margin-top: 6px; font-size: 0.875rem; color: var(--color-ink-body); }
.tier__list li { padding-left: 18px; position: relative; }
.tier__list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 1px; background: var(--color-cobalt); }
.tier__cta { margin-top: auto; padding-top: 18px; }

/* --- Consequence fan ----------------------------------------------------- */

.fan { display: grid; gap: clamp(22px, 3vw, 38px); }
.fan__source {
  border: 1px solid var(--color-light-border);
  border-radius: var(--radius);
  padding: 26px 28px;
  background: var(--color-white);
  max-width: 460px;
}
.band--dark .fan__source, .band--graphite .fan__source {
  background: var(--color-graphite); border-color: var(--color-dark-border);
}
.fan__out { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: clamp(20px, 2.6vw, 32px); }
.fan__card { border-top: 1px solid var(--color-light-border); padding-top: 16px; transition: border-color var(--fast) var(--ease); }
.fan__card:hover { border-top-color: var(--color-cobalt); }
.band--dark .fan__card, .band--graphite .fan__card { border-top-color: var(--color-dark-border-2); }
.band--wash .fan__card, .band--wash-flat .fan__card { border-top-color: #C7D8FF; }

/* --- Email brief artefact ------------------------------------------------ */

.brief {
  background: var(--color-white);
  border: 1px solid var(--color-light-border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(16, 24, 39, 0.05), 0 20px 44px -22px rgba(16, 24, 39, 0.24);
  overflow: hidden;
  max-width: 620px;
}
.brief__bar { display: flex; align-items: center; gap: 10px; padding: 13px 20px; border-bottom: 1px solid var(--color-light-border); background: #F8FAFC; }
.brief__body { padding: 24px 24px 28px; }
.brief__sub { font-family: var(--display); font-size: 1.24rem; line-height: 1.24; margin-bottom: 20px; }
.brief__item { padding: 15px 0; border-top: 1px solid var(--color-light-border); }
.brief__item:first-of-type { border-top-color: var(--color-ink); }

/* --- Footer -------------------------------------------------------------- */

.foot { background: var(--color-midnight); color: var(--color-silver); padding-block: clamp(52px, 7vh, 80px) 32px; font-size: 0.875rem; }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 34px; padding-bottom: 38px; border-bottom: 1px solid var(--color-dark-border); }
.foot__col { display: grid; gap: 11px; align-content: start; }
.foot__grid a { color: var(--color-silver); transition: color var(--fast) var(--ease); }
.foot__grid a:hover { color: var(--color-cyan); }
.foot__base { padding-top: 24px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 0.813rem; color: rgba(201, 204, 212, 0.65); }
.foot__base a { color: var(--color-cyan); }
.foot__tag { letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.688rem; font-weight: 600; }

/* --- Utilities ----------------------------------------------------------- */

.stack { display: grid; align-content: start; }
.stack--xs { gap: 8px; } .stack--sm { gap: 14px; } .stack--md { gap: 22px; } .stack--lg { gap: 32px; }
.row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.mt-sm { margin-top: 14px; } .mt-md { margin-top: 26px; } .mt-lg { margin-top: 42px; }
.muted { color: var(--color-slate); }
.band--dark .muted, .band--graphite .muted { color: var(--color-silver); }
.band--blue .muted { color: var(--color-white); }
.center { text-align: center; }
.maxw { max-width: 62ch; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--color-ink); color: #fff; padding: 12px 18px; }
.skip:focus { left: 12px; top: 12px; }

.rev { opacity: 0; transform: translateY(14px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.rev.is-in { opacity: 1; transform: none; }

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

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; padding-block: 52px 44px; }
  .hero__media video, .hero__media img { object-position: center; }
  .hero__veil {
    background: linear-gradient(180deg,
      rgba(5, 12, 24, 0.93) 0%, rgba(5, 12, 24, 0.80) 42%,
      rgba(5, 12, 24, 0.84) 72%, rgba(5, 12, 24, 0.96) 100%);
  }
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__word { font-size: 1.2rem; }
  .nav__mark { width: 26px; height: 26px; }
  .nav__links.is-open {
    display: grid; position: absolute; inset: 74px 0 auto 0;
    background: var(--color-midnight);
    border-bottom: 1px solid var(--color-dark-border);
    padding: 20px var(--gutter) 26px; gap: 16px;
  }
  .nav__links.is-open a { font-size: 0.875rem; }
  .trust__item { border-right: 0; border-bottom: 1px solid var(--color-dark-border); }
  .tier { border-right: 0; }
  .foot__base { flex-direction: column; }
}

@media (max-width: 620px) {
  .sec-head { flex-direction: column; gap: 10px; }
  .sec-head__num { padding-top: 0; }
  .dl__row { flex-direction: column; gap: 3px; }
  .dl__row dd { text-align: left; }
  .scanbar__field .label { display: none; }
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rev { opacity: 1; transform: none; }
  .ticker__track { animation: none; }
  .ticker__in { overflow-x: auto; }
}

@media print {
  .nav, .ticker, .hero__media, .foot { display: none; }
  body { background: #fff; }
  .band { padding-block: 20px; }
}

/* ==========================================================================
   Product-led growth layer, September 2026
   The company check, the result card, the radar prompt, the share loop and
   the 1 Million Business Challenge. Same palette, same rules: cobalt is
   reserved, colour never carries a verdict, and nothing here invents a state
   the product does not have.
   ========================================================================== */

/* --- Challenge strip -----------------------------------------------------
   Slim by design. It sits above the headline and must never compete with it,
   so it is one rule, one line of type and one link. */

.strip {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  flex-wrap: wrap;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--color-dark-border-2);
  margin-bottom: 22px;
  max-width: 780px;
}
.strip__q { font-size: 0.875rem; line-height: 1.5; color: var(--color-silver); }
.strip__cta {
  font-size: 0.688rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-cyan);
  border-bottom: 1px solid rgba(125, 227, 255, 0.4);
  padding-bottom: 3px;
  white-space: nowrap;
}
.strip__cta:hover { color: var(--color-white); border-bottom-color: var(--color-cyan); }
.band--white .strip, .band--wash .strip, .band--wash-flat .strip { border-bottom-color: var(--color-light-border); }
.band--white .strip__q, .band--wash .strip__q, .band--wash-flat .strip__q { color: var(--color-ink-body); }
.band--white .strip__cta, .band--wash .strip__cta, .band--wash-flat .strip__cta {
  color: var(--color-cobalt-hover); border-bottom-color: rgba(37, 99, 255, 0.35);
}

/* --- Honest state note ---------------------------------------------------
   Used wherever the site has to say what it cannot do. Deliberately plain:
   a warning box that looks like a warning gets skipped, and this text is the
   most important text on the page. */

.note {
  border-left: 2px solid var(--color-cobalt);
  padding: 2px 0 2px 18px;
  font-size: 0.875rem;
  line-height: 1.62;
  color: var(--color-ink-body);
  max-width: 76ch;
}
.note--warn { border-left-color: var(--color-warn-line); }
.note strong { color: var(--color-ink); font-weight: 600; }
.band--dark .note, .band--graphite .note, .hero .note { color: var(--color-silver); border-left-color: var(--color-cobalt-lift); }
.band--dark .note strong, .band--graphite .note strong { color: var(--color-ivory); }
.band--dark .note--warn, .band--graphite .note--warn { border-left-color: #B08A3E; }
.band--blue .note { color: var(--color-white); border-left-color: rgba(255, 255, 255, 0.6); }
.band--blue .note strong { color: var(--color-white); }

/* --- Company profile preview ---------------------------------------------
   Shown before the results, because match quality is a function of this and
   the visitor is the only one who can correct it. */

.prof {
  border-top: 2px solid var(--color-cobalt);
  padding-top: 20px;
  max-width: 760px;
}
.prof__dom {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.2;
  margin-bottom: 4px;
}
.prof__src { font-size: 0.813rem; color: var(--color-slate); margin-bottom: 16px; }
.prof__acts { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 18px; }

/* --- Provenance steps ----------------------------------------------------
   What actually happened during the check, stated after the fact. Never a
   percentage: a fake progress bar is a lie about work that did not occur. */

.steps { display: flex; gap: 8px 22px; flex-wrap: wrap; font-size: 0.813rem; color: var(--color-slate); }
.steps__i { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.steps__i::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-cobalt); flex: none;
}
.steps__i--wait::before { background: var(--color-neutral); }
.band--dark .steps, .band--graphite .steps { color: var(--color-silver); }

/* --- Result card ---------------------------------------------------------
   The whole product in one object: the match, the fact, the reasoning, the
   next question, the source, and the two controls that close the loop. */

.result {
  display: block;
  border-top: 1px solid var(--color-ink);
  padding-top: 20px;
}
.result + .result { margin-top: clamp(30px, 4vw, 46px); }
.result__top { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 14px; }
.result__top .label { color: var(--color-slate); font-weight: 500; }
.result__match {
  font-size: 0.813rem; font-weight: 700; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-cobalt);
}
.result__title {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.1vw, 1.75rem);
  line-height: 1.16;
  letter-spacing: -0.014em;
  text-wrap: pretty;
  margin-bottom: 18px;
}
.result__title a:hover { color: var(--color-cobalt); }
.result__block { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--color-light-border); }
.result__block--why { border-top-color: var(--color-cobalt); }
.result__bt {
  display: block;
  font-size: 0.688rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--color-slate);
  margin-bottom: 7px;
}
.result__block--why .result__bt { color: var(--color-cobalt); }
.result__body { font-size: 0.938rem; line-height: 1.6; color: var(--color-ink-body); max-width: 72ch; }
.result__body + .result__body { margin-top: 0.7em; }
.result__tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.result__acts {
  display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--color-light-border);
}
.band--dark .result, .band--graphite .result { border-top-color: var(--color-dark-border-2); }
.band--dark .result__title, .band--graphite .result__title { color: var(--color-ivory); }
.band--dark .result__body, .band--graphite .result__body { color: var(--color-silver); }
.band--dark .result__block, .band--graphite .result__block,
.band--dark .result__acts, .band--graphite .result__acts { border-top-color: var(--color-dark-border); }
.band--dark .result__match, .band--graphite .result__match { color: var(--color-cobalt-lift); }
.band--dark .result__bt, .band--graphite .result__bt { color: rgba(201, 204, 212, 0.72); }
.band--dark .result__block--why, .band--graphite .result__block--why { border-top-color: var(--color-cobalt-lift); }
.band--dark .result__block--why .result__bt, .band--graphite .result__block--why .result__bt { color: var(--color-cyan); }

/* --- Small actions: share, feedback, check another ----------------------- */

.act {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: 1px solid var(--color-light-border);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 0.688rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-ink-body);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.act:hover { border-color: var(--color-cobalt); color: var(--color-cobalt); }
.act.is-on { background: var(--color-cobalt); border-color: var(--color-cobalt); color: var(--color-white); }
.act[disabled] { opacity: 0.55; cursor: default; }
.act[disabled]:hover { border-color: var(--color-light-border); color: var(--color-ink-body); }
.band--dark .act, .band--graphite .act { border-color: var(--color-dark-border-2); color: var(--color-silver); }
.band--dark .act:hover, .band--graphite .act:hover { border-color: var(--color-cyan); color: var(--color-cyan); }

.fb { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.fb__q { font-size: 0.813rem; color: var(--color-slate); }
.fb__note { font-size: 0.813rem; color: var(--color-cobalt); font-weight: 500; }
.band--dark .fb__q, .band--graphite .fb__q { color: var(--color-silver); }
.band--dark .fb__note, .band--graphite .fb__note { color: var(--color-cyan); }

/* --- Shared result banner ------------------------------------------------ */

.shared {
  border: 1px solid var(--color-light-border);
  border-left: 2px solid var(--color-cobalt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--color-blue-wash);
  padding: 16px 20px;
  max-width: 760px;
}
.shared__t { font-family: var(--display); font-size: 1.24rem; line-height: 1.22; }
.shared__d { font-size: 0.875rem; color: var(--color-ink-body); margin-top: 6px; }

/* --- Nothing found state -------------------------------------------------
   A real answer, presented as one. AreaIQ showing nothing is the feature. */

.empty {
  border-top: 2px solid var(--color-ink);
  padding-top: 22px;
  max-width: 66ch;
}
.empty__t { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.14; margin-bottom: 12px; }
.band--dark .empty, .band--graphite .empty { border-top-color: var(--color-silver); }
.band--dark .empty__t, .band--graphite .empty__t { color: var(--color-ivory); }

/* --- Challenge counters -------------------------------------------------
   Every slot is hidden until a real figure exists. There is no placeholder
   number and no zero state, because a counter reading 3 of 1,000,000 sells
   against the campaign. */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--color-light-border); }
.stat { padding: 22px 20px 24px; border-right: 1px solid var(--color-light-border); border-bottom: 1px solid var(--color-light-border); }
.stat:last-child { border-right: 0; }
.stat__n { font-family: var(--display); font-size: 2.1rem; line-height: 1; letter-spacing: -0.02em; color: var(--color-cobalt); font-variant-numeric: tabular-nums; }
.stat__l { display: block; font-size: 0.688rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--color-slate); margin-top: 10px; }
.band--dark .stats, .band--graphite .stats { border-top-color: var(--color-dark-border); }
.band--dark .stat, .band--graphite .stat { border-right-color: var(--color-dark-border); border-bottom-color: var(--color-dark-border); }
.band--dark .stat__n, .band--graphite .stat__n { color: var(--color-cobalt-lift); }
.band--dark .stat__l, .band--graphite .stat__l { color: var(--color-silver); }

/* --- Long primary CTA ---------------------------------------------------
   The primary call to action is deliberately a sentence rather than a verb,
   so it has to survive a 375px viewport without truncation. */

.btn { text-align: center; }
.btn--lead { padding: 16px 26px; }

/* The invalid domain message takes its own row under the field rather than
   squeezing in beside the button. */
.scanbar [data-checkerr] { flex: 1 1 100%; color: var(--color-warn); font-weight: 500; }
.band--dark .scanbar [data-checkerr], .hero .scanbar [data-checkerr] { color: #DDB878; }
.band--blue .scanbar [data-checkerr] { color: var(--color-white); }
.strip__q { flex: 1 1 260px; }

/* The marker on .disclose only belongs on a real summary element. Three pages
   use the same shell as a static notice, where a plus sign implied a toggle
   that was not there. */
.disclose > div.disclose__sum::after { content: none; }

@media (max-width: 620px) {
  .scanbar .btn { width: 100%; }
  .stat { border-right: 0; }
  .result__acts { gap: 12px; }
}

/* --- Versus table -------------------------------------------------------
   The positioning page. Category on the left, what that category does in
   the middle, what AreaIQ does on the right with the cobalt rule. Stacks
   on a phone. */

.vs { border-top: 1px solid var(--color-ink); }
.vs__row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 30px;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-light-border);
}
.vs__row--head { padding: 12px 0; }
.vs__cat {
  font-size: 0.688rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--color-slate); padding-top: 3px;
}
.vs__cat small { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; margin-top: 4px; color: var(--color-slate); }
.vs__them { font-size: 0.938rem; line-height: 1.58; color: var(--color-ink-body); }
.vs__us {
  font-size: 0.938rem; line-height: 1.58; color: var(--color-ink); font-weight: 500;
  border-left: 2px solid var(--color-cobalt); padding-left: 16px;
}
.vs__row--head .vs__them, .vs__row--head .vs__us {
  font-size: 0.688rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--color-slate); border-left: 0; padding-left: 0;
}
.vs__row--head .vs__us { color: var(--color-cobalt); }
@media (max-width: 760px) {
  .vs__row { grid-template-columns: 1fr; gap: 10px; }
  .vs__row--head { display: none; }
  .vs__them::before { content: "They: "; font-weight: 600; color: var(--color-slate); }
  .vs__us::before { content: "AreaIQ: "; font-weight: 600; color: var(--color-cobalt); }
}