/* ============================================================
   COMPONENTS — nav, footer, buttons, cards, hero, forms
   ============================================================ */

/* --- Navigation --- */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 68px;
  display: flex;
  align-items: center;
  background: rgba(8,14,28,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: background 0.3s, border-color 0.3s;
}

.site-nav.scrolled {
  background: rgba(255,255,255,0.97);
  border-bottom-color: var(--lb);
}

.nav-inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--max-w-wide);
  margin-inline: auto;
  padding-inline: var(--sp-8);
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo-img {
  height: 30px;
  width: auto;
  display: block;
  transition: filter 0.3s;
}

.site-nav.scrolled .nav-logo-img { filter: brightness(0); }

.nav-logo em {
  font-style: normal;
  color: var(--teal);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  padding: var(--sp-2);
  cursor: pointer;
  margin-left: auto;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin-left: auto;
}

.nav-links > li { position: relative; }

.nav-links > li > a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s;
  padding: 8px 14px;
  border-radius: 6px;
  display: block;
}

.site-nav.scrolled .nav-links > li > a { color: var(--lt); }

.nav-links > li > a:hover {
  color: var(--white);
  background: rgba(255,255,255,0.08);
}

.site-nav.scrolled .nav-links > li > a:hover {
  color: var(--lt);
  background: var(--surface);
}

/* Log in — ghost button */
.nav-login {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 8px 16px;
  border-radius: var(--r);
  margin-left: 32px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.nav-login:hover {
  color: var(--white);
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.32);
}

.site-nav.scrolled .nav-login {
  color: var(--lt);
  background: transparent;
  border-color: var(--lb);
}

.site-nav.scrolled .nav-login:hover {
  background: var(--surface);
  border-color: var(--lb2);
}

/* Book a demo — teal CTA */
.nav-cta {
  background: var(--teal-btn);
  color: var(--white);
  border: 1px solid transparent;
  padding: 9px 20px;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  margin-left: 8px;
  transition: background 0.2s;
}

.nav-cta:hover,
.site-nav.scrolled .nav-cta:hover {
  background: var(--teal-btn-hover);
  color: var(--white);
}

/* --- Mega menu --- */
.mega {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border: 1px solid var(--lb);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.04);
  padding: 28px;
  min-width: 640px;
  z-index: 200;
}

/* Invisible bridge so hover survives the 8px gap */
.mega::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.nav-links > li:hover .mega { display: flex; gap: 32px; }

.mega-col {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 160px;
}

.mega-col--wide { min-width: 300px; }

/* Compact single-list mega (Resources) */
.mega--compact {
  min-width: 0;
  padding: 12px 16px;
}
.mega--compact .mega-col { min-width: 180px; }

.mega-col-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--lm);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lb);
}

.mega-col a {
  font-size: 13px;
  color: var(--lbo);
  text-decoration: none;
  padding: 7px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.15s;
  font-weight: 300;
  display: block;
}

.mega-col a:hover { color: var(--lt); }

.mega-card {
  background: linear-gradient(135deg, rgba(123,91,245,0.12) 0%, rgba(63,221,176,0.08) 100%);
  border: 1px solid var(--lb);
  border-radius: 10px;
  padding: 20px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mega-card-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purpled);
  margin-bottom: 8px;
}

.mega-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--lt);
  line-height: 1.3;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.mega-card-desc {
  font-size: 12px;
  color: var(--lm);
  line-height: 1.6;
  font-weight: 300;
  margin-bottom: 16px;
}

.mega-card-cta {
  font-size: 12px;
  font-weight: 600;
  color: var(--purpled);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mega-card-cta:hover { color: var(--purpled); opacity: 0.8; }

/* Product entries — name + description */
.mega-prod {
  display: block;
  padding: 10px 0;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.mega-prod-name {
  font-size: 13px;
  color: var(--lt);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 4px;
  transition: color 0.15s;
}

.mega-prod-desc {
  font-size: 11px;
  color: var(--lm);
  font-weight: 300;
  line-height: 1.55;
}

.mega-prod:hover .mega-prod-name { color: var(--purpled); }

/* Audience grid */
.mega-aud {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 28px;
  min-width: 480px;
}

.mega-aud-item {
  display: block;
  padding-left: 14px;
  text-decoration: none;
  border-left: 2px solid var(--lb);
  transition: border-color 0.15s;
}

.mega-aud-item.am { border-left-color: #7F77DD; }
.mega-aud-item.ao { border-left-color: #1D9E75; }
.mega-aud-item.co { border-left-color: #378ADD; }
.mega-aud-item.cs { border-left-color: #D85A30; }

.mega-aud-item:hover .mega-aud-name { color: var(--purpled); }

.mega-aud-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--lt);
  margin-bottom: 3px;
  letter-spacing: -0.01em;
  transition: color 0.15s;
}

.mega-aud-desc {
  font-size: 11px;
  color: var(--lm);
  font-weight: 300;
  line-height: 1.5;
}

.mega-aud-foot {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--lb);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mega-aud-foot-l {
  font-size: 12px;
  color: var(--lm);
  font-weight: 300;
}

.mega-aud-foot-r {
  font-size: 12px;
  font-weight: 600;
  color: var(--purpled);
  text-decoration: none;
}

.mega-aud-foot-r:hover { opacity: 0.8; }

@media (max-width: 960px) {
  .nav-toggle { display: flex; }
  .mega { display: none !important; }
  .nav-login { display: none; }
  .nav-cta { display: none; }
  .nav-logo-img { height: 22px; }
  .nav-inner { overflow: hidden; }

  .nav-links {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    background: var(--navy2);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: var(--sp-4);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 68px);
    overflow-y: auto;
  }

  .site-nav.scrolled .nav-links {
    background: var(--white);
    border-bottom-color: var(--lb);
  }

  .nav-links.is-open { display: flex; }

  .nav-links > li > a {
    padding: var(--sp-3) var(--sp-4);
    color: var(--ink);
  }
  .site-nav.scrolled .nav-links > li > a { color: var(--lt); }

  /* ── MOBILE ACCORDION ── */
  /* Expandable top-level items get a +/− indicator */
  .nav-links > li:has(.mega) > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .nav-links > li:has(.mega) > a::after {
    content: '+';
    font-size: 20px;
    font-weight: 300;
    opacity: 0.5;
    line-height: 1;
    flex-shrink: 0;
  }
  .nav-links > li.is-open > a::after { content: '−'; opacity: 0.8; }

  /* Show mega as accordion when li.is-open */
  .nav-links > li.is-open > .mega {
    display: flex !important;
    flex-direction: column;
    position: static;
    transform: none;
    min-width: 0;
    background: rgba(255,255,255,0.04);
    border: none;
    border-radius: 8px;
    box-shadow: none;
    padding: 4px 0 8px;
    margin: 0 0 6px;
    gap: 0;
  }
  .site-nav.scrolled .nav-links > li.is-open > .mega {
    background: var(--surface);
  }

  /* Hide things we don't need on mobile */
  .nav-links > li.is-open > .mega .mega-card,
  .nav-links > li.is-open > .mega .mega-prod-desc,
  .nav-links > li.is-open > .mega .mega-aud-desc,
  .nav-links > li.is-open > .mega .mega-aud-foot,
  .nav-links > li.is-open > .mega .mega::before { display: none; }

  /* Column label */
  .nav-links > li.is-open > .mega .mega-col-label {
    padding: 10px var(--sp-4) 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.58);
    margin-bottom: 0;
  }
  .site-nav.scrolled .nav-links > li.is-open > .mega .mega-col-label { color: var(--lm); }

  /* Product links */
  .nav-links > li.is-open > .mega .mega-prod {
    display: block;
    padding: 8px var(--sp-4);
    border: none;
    border-radius: 6px;
    background: none;
    gap: 0;
  }
  .nav-links > li.is-open > .mega .mega-prod-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink2);
    margin-bottom: 0;
  }
  .nav-links > li.is-open > .mega .mega-prod:hover .mega-prod-name { color: var(--teal); }
  .site-nav.scrolled .nav-links > li.is-open > .mega .mega-prod-name { color: var(--lbo); }

  /* Audience grid: reset to column */
  .nav-links > li.is-open > .mega .mega-aud {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: none;
    border-radius: 0;
    gap: 0;
  }
  .nav-links > li.is-open > .mega .mega-aud-item {
    padding: 8px var(--sp-4);
    border-left: none;
    border-radius: 6px;
    background: none;
  }
  .nav-links > li.is-open > .mega .mega-aud-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink2);
  }
  .nav-links > li.is-open > .mega .mega-aud-item:hover .mega-aud-name { color: var(--teal); }
  .site-nav.scrolled .nav-links > li.is-open > .mega .mega-aud-name { color: var(--lbo); }

  /* Resource column links */
  .nav-links > li.is-open > .mega .mega-col {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .nav-links > li.is-open > .mega .mega-col > a {
    display: block;
    padding: 7px var(--sp-4);
    font-size: 14px;
    font-weight: 400;
    color: var(--ink2);
  }
  .nav-links > li.is-open > .mega .mega-col > a:hover { color: var(--teal); }
  .site-nav.scrolled .nav-links > li.is-open > .mega .mega-col > a { color: var(--lbo); }
}

/* --- Page sub-nav (product pages) --- */
.subnav {
  position: sticky;
  top: 68px;
  z-index: 190;
  background: rgba(8,14,28,0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.subnav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: center;
  gap: 0;
  height: 44px;
}

.subnav-inner a {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink2);
  text-decoration: none;
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  transition: color var(--t-base), border-color var(--t-base);
  letter-spacing: -0.01em;
}

.subnav-inner a:hover {
  color: var(--ink);
  border-bottom-color: var(--teal);
}

.subnav-inner a.subnav-cta {
  margin-left: auto;
  color: var(--teal);
  font-weight: 600;
  padding-right: 0;
  border-bottom: none;
}

.subnav-inner a.subnav-cta:hover {
  color: #fff;
  border-bottom: none;
}

@media (max-width: 768px) {
  .subnav { display: none; }
}

/* --- Footer --- */
.site-footer {
  background: var(--navy);
  color: var(--ink);
  font-family: var(--sans);
  padding: 56px 48px 24px;
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--navy) 0%, var(--lt) 50%, var(--navy3) 100%);
  opacity: 0.6;
  pointer-events: none;
}

.site-footer::after {
  content: "";
  position: absolute;
  top: -280px; right: -200px;
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(63,221,176,0.08) 0%, transparent 65%);
  pointer-events: none;
}

.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 56px;
  padding-bottom: 40px;
}

/* Newsletter sign-up — the one on the site. It sits in the top-left of the
   footer, so every page carries it; no page adds its own mailing-list strip.
   The form is a plain POST to Formspree with no JavaScript, because the footer
   is injected with innerHTML and inline <script> tags never run. */
.footer-news {
  max-width: 420px;
}

/* Footer titles are styled <p>s, not headings, so the page outline isn't skipped
   from the page's H2s straight to an H4. They keep the heading font. */
.footer-news-title {
  font-family: var(--serif);
  line-height: var(--lh-tight);
  max-width: none;
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  color: var(--white);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.footer-news-sub {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink2);
  margin: 0 0 18px;
  font-weight: var(--weight-normal);
}

.footer-news-form {
  display: flex;
  gap: 10px;
}

.footer-news-form input {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--white);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.footer-news-form input::placeholder { color: var(--ink3); }

.footer-news-form input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(63,221,176,0.16);
}

.footer-news-form button {
  flex-shrink: 0;
  width: 46px;
  border: none;
  border-radius: var(--r-md);
  background: var(--teal);
  color: var(--navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, transform 0.18s ease;
}

.footer-news-form button:hover {
  background: var(--teal2);
  transform: translateY(-1px);
}

.footer-news-form button svg { width: 17px; height: 17px; }

/* Brand identity moved to the bottom bar, beside the legal line. */
.footer-id .footer-logo {
  display: inline-block;
  margin: 0 0 10px;
  text-decoration: none;
  line-height: 1;
}

.footer-logo-img {
  height: 34px;
  width: auto;
  display: block;
}

.footer-tagline {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink3);
  max-width: 400px;
  margin: 0 0 10px;
  font-weight: var(--weight-normal);
}

.footer-socials {
  display: flex;
  gap: 10px;
}

.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--ink2);
  background: rgba(255,255,255,0.02);
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.footer-socials a:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--navy);
  transform: translateY(-2px);
}

.footer-socials svg { width: 16px; height: 16px; }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 48px;
}

.footer-col-title {
  font-family: var(--serif);
  line-height: var(--lh-tight);
  max-width: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--white);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
  position: relative;
  padding-bottom: 10px;
}

.footer-col-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 20px; height: 2px;
  background: var(--teal);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links a {
  color: var(--ink2);
  text-decoration: none;
  font-size: var(--text-sm);
  line-height: 1.4;
  position: relative;
  width: fit-content;
  transition: color 0.18s ease;
}

.footer-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--teal);
  transition: width 0.22s ease;
}

.footer-links a:hover { color: var(--teal); }
.footer-links a:hover::after { width: 100%; }

.footer-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  text-align: right;
}

.footer-copy {
  font-size: 13px;
  color: var(--ink3);
  margin: 0;
}

@media (max-width: 1024px) {
  .site-footer { padding: 48px 32px 24px; }
  .footer-top {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 36px;
  }
  .footer-news { max-width: 480px; }
  .footer-cols {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
}

@media (max-width: 640px) {
  .site-footer { padding: 44px 24px 24px; }
  .footer-cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .footer-end {
    align-items: flex-start;
    text-align: left;
  }
}

@media (max-width: 480px) {
  .site-footer { padding: 40px 24px 24px; }
  .footer-cols {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 15px 32px;
  border-radius: var(--r-lg);
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast),
              box-shadow var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
}

/* Primary — white bg, dark text (on dark sections) */
.btn--primary {
  background: var(--white);
  color: var(--lt);
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.btn--primary:hover {
  background: var(--surface);
  color: var(--lt);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
}

/* Secondary — ghost outlined (on dark sections) */
.btn--secondary {
  background: transparent;
  color: var(--ink2);
  border-color: rgba(255,255,255,0.3);
}

.btn--secondary:hover {
  border-color: rgba(255,255,255,0.5);
  color: var(--ink);
}

/* Teal — primary CTA */
.btn--teal {
  background: var(--teal-btn);
  color: var(--white);
  border-color: var(--teal-btn);
  font-weight: var(--weight-semi);
}

.btn--teal:hover {
  background: var(--teal-btn-hover);
  border-color: var(--teal-btn-hover);
  color: var(--white);
  transform: translateY(-1px);
}

/* Dark — for light sections, dark bg button */
.btn--dark {
  background: var(--lt);
  color: var(--white);
  border-color: var(--lt);
}

.btn--dark:hover {
  background: var(--navy3);
  color: var(--white);
  transform: translateY(-1px);
}

.btn--outlined {
  background: transparent;
  color: var(--lbo);
  border-color: var(--lb2);
}

.btn--outlined:hover {
  border-color: var(--lbo);
  color: var(--lt);
}

.btn--sm {
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--text-xs);
}

.btn--lg {
  padding: 17px 38px;
  font-size: var(--text-base);
}

/* --- Section tag (eyebrow) --- */
.stag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: var(--weight-semi);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lm);
  margin-bottom: 20px;
}

.stag::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: linear-gradient(90deg, var(--purpled), var(--teal2));
  opacity: 0.7;
  flex-shrink: 0;
}

.stag--teal   { color: var(--teal); }
.stag--purple { color: var(--purple); }
.stag--center { justify-content: center; }
.stag.dk      { color: var(--ink3); }

/* --- Cards --- */
.card {
  background: var(--white);
  border: 1px solid var(--lb);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}

.card:hover {
  border-color: var(--lb2);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(123,91,245,0.12), rgba(14,158,124,0.12));
  border: 1px solid var(--lb);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-5);
}

.card-icon svg {
  width: 20px;
  height: 20px;
  color: var(--teal2);
}

.card-title {
  font-family: var(--serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-normal);
  color: var(--lt);
  margin-bottom: var(--sp-3);
  line-height: var(--lh-snug);
}

.card-body {
  font-size: var(--text-sm);
  color: var(--lbo);
  line-height: var(--lh-base);
}

/* --- Pillar cards (animated gradient border) --- */
.pillar-card {
  position: relative;
  border-radius: var(--r-xl);
  padding: 1px;
  background: var(--grad-135);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.pillar-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.3);
}

.pillar-card-inner {
  background: var(--navy3);
  border-radius: calc(var(--r-xl) - 1px);
  padding: var(--sp-8);
  height: 100%;
}

.pillar-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(123,91,245,0.25), rgba(14,158,124,0.25));
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-5);
}

.pillar-icon svg {
  width: 20px;
  height: 20px;
  color: var(--teal);
}

.pillar-card-title {
  font-family: var(--serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-normal);
  color: var(--ink);
  margin-bottom: var(--sp-3);
  line-height: var(--lh-snug);
}

.pillar-card-body {
  font-size: var(--text-sm);
  color: var(--ink3);
  line-height: var(--lh-base);
}

/* --- Badge / pill --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: var(--weight-medium);
}

.badge--teal {
  background: rgba(63,221,176,0.12);
  color: var(--teal);
  border: 1px solid rgba(63,221,176,0.25);
}

.badge--teal::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--teal);
  flex-shrink: 0;
}

/* --- Trust item (dot + text) --- */
.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--lm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.trust-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--teal);
  flex-shrink: 0;
}

.tdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
  opacity: 0.6;
  flex-shrink: 0;
}

/* --- Blog index hero --- */
.blog-index-hero {
  background: var(--grad-135);
  padding: var(--sp-16) var(--sp-6) var(--sp-16);
}

.blog-index-hero-inner {
  max-width: var(--max-width-content);
  margin-inline: auto;
}

.blog-index-hero-title {
  font-family: var(--serif);
  font-size: clamp(var(--text-2xl), 3.5vw, 2.6rem);
  font-weight: var(--weight-normal);
  color: var(--white);
  line-height: var(--lh-snug);
  max-width: 26ch;
  margin-bottom: var(--sp-3);
}

.blog-index-hero-sub {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.86);
  max-width: 50ch;
}

/* --- Blog index lead/featured post --- */
.blog-lead-section {
  padding-block: var(--sp-12);
  background: var(--white);
}

.blog-lead-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--lb);
  border-radius: var(--r-xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--white);
  transition: box-shadow var(--t-base), transform var(--t-base);
  max-width: 960px;
  margin-inline: auto;
}

.blog-lead-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.blog-lead-img {
  overflow: hidden;
  min-height: 340px;
}

.blog-lead-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.blog-lead-card:hover .blog-lead-img img {
  transform: scale(1.03);
}

.blog-lead-body {
  padding: var(--sp-10) var(--sp-10) var(--sp-10) var(--sp-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-lead-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal2);
  margin-bottom: var(--sp-3);
}

.blog-lead-title {
  font-family: var(--serif);
  font-size: clamp(var(--text-xl), 2.2vw, var(--text-2xl));
  font-weight: var(--weight-normal);
  color: var(--lt);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-4);
}

.blog-lead-excerpt {
  font-size: var(--text-sm);
  color: var(--lbo);
  line-height: var(--lh-base);
  flex: 1;
  margin-bottom: var(--sp-5);
}

/* --- Blog index post grid --- */
.blog-grid-section {
  padding-bottom: var(--sp-16);
  background: var(--white);
}

.blog-grid-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.blog-lead-inner {
  max-width: 960px;
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.blog-grid-heading {
  font-family: var(--serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-normal);
  color: var(--lt);
  margin-bottom: var(--sp-8);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--lb);
}

.blog-post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}

/* --- Blog post card --- */
.post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--lb);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--white);
  transition: box-shadow var(--t-base), transform var(--t-base);
  text-decoration: none;
  color: inherit;
}

.post-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Hero image thumbnail on index listing cards */
.post-card-img {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  flex-shrink: 0;
}

.post-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.post-card:hover .post-card-img img {
  transform: scale(1.04);
}

.post-card-body {
  padding: var(--sp-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.post-card-date {
  font-size: var(--text-xs);
  color: var(--lm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--sp-2);
}

.post-card-title {
  font-family: var(--serif);
  font-size: var(--text-lg);
  font-weight: var(--weight-normal);
  color: var(--lt);
  margin-bottom: var(--sp-3);
  line-height: var(--lh-snug);
}

.post-card-excerpt {
  font-size: var(--text-sm);
  color: var(--lbo);
  line-height: var(--lh-base);
  flex: 1;
  /* clamp to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card-read-more {
  margin-top: var(--sp-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--teal2);
}

/* Infinite scroll fade-in */
@keyframes postCardAppear {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.post-card--appear {
  animation: postCardAppear 0.35s ease both;
}

.post-card-img--placeholder {
  background: var(--grad-135);
}

.blog-scroll-sentinel {
  height: 1px;
  margin-top: var(--sp-8);
}

/* Responsive breakpoints for blog grid */
@media (max-width: 960px) {
  .blog-lead-card {
    grid-template-columns: 1fr;
  }
  .blog-lead-img {
    min-height: 260px;
    max-height: 360px;
  }
  .blog-lead-body {
    padding: var(--sp-8) var(--sp-6);
  }
  .blog-post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .blog-post-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Blog post page --- */
.post-container {
  max-width: var(--max-w-prose);
  margin-inline: auto;
  padding: var(--sp-16) var(--sp-6);
}

.post-header {
  margin-bottom: var(--sp-10);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--lb);
}

.post-date {
  font-size: var(--text-sm);
  color: var(--lm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--sp-3);
}

.post-title {
  font-family: var(--serif);
  font-size: var(--text-4xl);
  font-weight: var(--weight-normal);
  line-height: var(--lh-tight);
  color: var(--lt);
  margin-bottom: var(--sp-4);
}

.post-author {
  font-size: var(--text-sm);
  color: var(--lm);
}

/* Bylines link to the author's card on About (/about#<name>). */
.post-author a {
  color: var(--lt);
  font-weight: var(--weight-semi);
  text-decoration: underline;
  text-decoration-color: var(--lb);
  text-underline-offset: 3px;
}

.post-author a:hover { color: var(--teal2); text-decoration-color: currentColor; }

.post-body {
  font-family: var(--sans);
  font-size: var(--text-lg);
  line-height: var(--lh-loose);
  color: var(--lt);
}

.post-body p { margin-bottom: var(--sp-6); max-width: none; }
/* "In short": a one- or two-sentence answer at the top of each post, so readers
   and AI assistants get the point before the detail. */
.post-body .post-summary {
  background: var(--surface);
  border-left: 3px solid var(--teal2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-8);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--lbo);
}
.post-summary-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lt);
  margin-bottom: var(--sp-2);
}
.post-body h2 { font-family: var(--sans); font-size: var(--text-2xl); font-weight: var(--weight-semi); margin-top: var(--sp-10); margin-bottom: var(--sp-4); }
.post-body h3 { font-family: var(--sans); font-size: var(--text-xl); font-weight: var(--weight-semi); margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
.post-body ul, .post-body ol { margin-bottom: var(--sp-6); }
.post-body li { margin-bottom: var(--sp-2); }
.post-body blockquote {
  border-left: 3px solid var(--teal);
  padding-left: var(--sp-6);
  margin-block: var(--sp-8);
  font-style: italic;
  color: var(--lbo);
}

/* Hero image at top of blog posts */
.post-hero-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-10);
}

/* The Most Significant Votes masthead, straight from the design file:
   the CTA gradient, a teal check mark and a bar strip along the foot. */
.cv-msv {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 9px;
  padding: 20px 22px;
  background:
    radial-gradient(ellipse 64% 82% at 76% 26%, rgba(138,104,255,0.58) 0%, rgba(123,91,245,0.22) 42%, transparent 66%),
    radial-gradient(ellipse 60% 78% at 104% 106%, rgba(91,124,250,0.48) 0%, transparent 62%),
    radial-gradient(ellipse 52% 74% at -4% 56%, rgba(108,77,240,0.34) 0%, transparent 60%),
    radial-gradient(ellipse 60% 48% at 50% 122%, rgba(63,221,176,0.10) 0%, transparent 56%),
    linear-gradient(150deg, #2C1F76 0%, #3A2596 28%, #4A32AE 50%, #2B2174 74%, #0F0E2C 96%, #0C0C24 100%);
}

.msv-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: rgba(63,221,176,0.14);
  border: 1px solid rgba(63,221,176,0.32);
}

.msv-mark svg { width: 12px; height: 12px; stroke: var(--teal); }

.msv-title {
  max-width: 175px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: var(--weight-normal);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--white);
}

.msv-meta {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(236,236,246,0.72);
}

.msv-bars {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 52px;
  padding: 0 22px;
}

.msv-bars i { flex: 1; border-radius: 4px 4px 0 0; background: rgba(255,255,255,0.12); }
.msv-bars i:nth-child(3) { background: rgba(198,186,255,0.45); }
.msv-bars i:nth-child(4) { background: linear-gradient(180deg, var(--cyanlt), var(--cyan)); }
.msv-bars i:nth-child(8) { background: rgba(91,124,250,0.45); }

/* The same masthead at the top of each Most Significant Votes post,
   standing in for the hero image so post and card match. */
.post-hero-cover {
  aspect-ratio: 16 / 9;
  gap: var(--sp-4);
  padding: 44px 48px;
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-10);
}

.post-hero-cover .msv-mark { width: 40px; height: 40px; border-radius: 9px; }
.post-hero-cover .msv-mark svg { width: 22px; height: 22px; }
.post-hero-cover .msv-title { max-width: 380px; font-size: 52px; }
.post-hero-cover .msv-meta { font-size: 14px; }
.post-hero-cover .msv-bars { gap: 12px; height: 120px; padding: 0 48px; }
.post-hero-cover .msv-bars i { border-radius: 7px 7px 0 0; }

@media (max-width: 520px) {
  .post-hero-cover { gap: 10px; padding: 24px 24px; }
  .post-hero-cover .msv-mark { width: 28px; height: 28px; border-radius: 6px; }
  .post-hero-cover .msv-mark svg { width: 15px; height: 15px; }
  .post-hero-cover .msv-title { max-width: 220px; font-size: 30px; }
  .post-hero-cover .msv-meta { font-size: 10.5px; }
  .post-hero-cover .msv-bars { gap: 7px; height: 64px; padding: 0 24px; }
}

/* Related posts section */
.related-posts {
  max-width: var(--max-w-prose);
  margin-inline: auto;
  padding: var(--sp-12) var(--sp-6);
  border-top: 1px solid var(--lb);
}

.related-posts__heading {
  font-family: var(--serif);
  font-size: var(--text-2xl);
  font-weight: var(--weight-normal);
  color: var(--lt);
  margin-bottom: var(--sp-8);
}

.related-posts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-6);
}

/* --- Contact / forms --- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--lbo);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--lb);
  border-radius: var(--r-md);
  font-family: var(--sans);
  font-size: var(--text-base);
  color: var(--lt);
  background: var(--white);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(63,221,176,0.15);
}

.form-textarea {
  min-height: 140px;
  resize: vertical;
}

/* --- Page hero (non-home) --- */
.page-hero {
  background: var(--surface);
  border-bottom: 1px solid var(--lb);
  padding-block: var(--sp-16);
  text-align: center;
  padding-top: calc(68px + var(--sp-16));
}

.page-hero-title {
  font-family: var(--serif);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
  font-weight: var(--weight-normal);
  color: var(--lt);
  margin-bottom: var(--sp-4);
}

.page-hero-subtitle {
  font-size: var(--text-lg);
  color: var(--lbo);
  max-width: 55ch;
  margin-inline: auto;
}

/* --- 404 --- */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
  padding: var(--sp-16) var(--sp-6);
}

.error-code {
  font-family: var(--serif);
  font-size: 7rem;
  font-weight: var(--weight-normal);
  color: var(--lb2);
  line-height: 1;
  margin-bottom: var(--sp-4);
}

.error-title {
  font-size: var(--text-2xl);
  margin-bottom: var(--sp-3);
}

.error-message {
  color: var(--lbo);
  margin-bottom: var(--sp-8);
}

/* ============================================================
   GLOBAL CHROME & ANIMATIONS
   ============================================================ */

/* Top gradient accent line — appears on every page */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--purpled) 0%, var(--teal) 60%, transparent 100%);
  z-index: 9999;
  opacity: 0.7;
  pointer-events: none;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes rotateBorder {
  from { --angle: 0deg; }
  to   { --angle: 360deg; }
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.sr {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.sr.vis {
  opacity: 1;
  transform: none;
}

/* ============================================================
   SECTION HEADLINE  (.sh)
   ============================================================ */
.sh {
  font-family: var(--serif);
  font-size: clamp(34px, 3.8vw, 56px);
  font-weight: 400;
  color: var(--lt);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.sh em { font-style: normal; }
.sh.dk { color: var(--ink); }

/* Section sub-headline */
.sh-sub { font-size: 18px; color: var(--lbo); line-height: 1.65; font-weight: 300; max-width: 720px; margin-top: 22px; }
.sh-sub.dk { color: var(--ink2); }


/* ============================================================
   TICK BULLET  (.tick)
   ------------------------------------------------------------
   The one checkmark-bullet marker used site-wide: a teal rounded
   square holding a white check. Every tick list on every page uses
   this - do not write a local check/tick style.

   Canonical markup:

     <span class="tick" aria-hidden="true">
       <svg viewBox="0 0 24 24"><path d="M5 12l5 5 9-10"/></svg>
     </span>

   Pair it with .tick-list / .tick-item for a plain list, or drop the
   span into a page's own row layout (feature sub-points etc.).
   ============================================================ */

.tick {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--teal2);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.tick svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tick-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; }
.tick-item { display: flex; gap: 12px; align-items: flex-start; }

/* ============================================================
   PRODUCT STACKED SECTIONS  (.ps-wrap / .ps-inner / .ps-content)
   Used by product pages (engagement-tracker, intelligence, etc.).
   NOT used by the homepage — homepage uses .home-ps-wrap / .home-ps-inner.
   ============================================================ */
.ps-wrap { padding: 140px 0; position: relative; background: var(--navy); overflow: hidden; }
.ps-wrap-light   { background: var(--white); }
.ps-wrap-surface { background: var(--surface); }
.ps-wrap-dark    { background: #100830; }

.ps-wrap-p::before { content: ''; position: absolute; top: -80px; right: -80px; width: 480px; height: 480px; background: radial-gradient(circle at top right, rgba(123,91,245,0.32) 0%, rgba(123,91,245,0.14) 35%, transparent 65%); pointer-events: none; z-index: 0; }
.ps-wrap-t::before { content: ''; position: absolute; top: -80px; left: -80px;  width: 480px; height: 480px; background: radial-gradient(circle at top left,  rgba(63,221,176,0.22) 0%, rgba(63,221,176,0.08) 40%, transparent 65%); pointer-events: none; z-index: 0; }
.ps-wrap-light.ps-wrap-p::before   { background: radial-gradient(circle at top right, rgba(123,91,245,0.18) 0%, rgba(123,91,245,0.06) 40%, transparent 68%); }
.ps-wrap-light.ps-wrap-t::before   { background: radial-gradient(circle at top left,  rgba(63,221,176,0.14) 0%, rgba(63,221,176,0.04) 40%, transparent 68%); }
.ps-wrap-surface.ps-wrap-p::before { background: radial-gradient(circle at top right, rgba(123,91,245,0.14) 0%, rgba(123,91,245,0.04) 40%, transparent 68%); }

.ps-inner { max-width: var(--max-w-wide); margin: 0 auto; padding-inline: 32px; display: grid; grid-template-columns: 1fr 1.25fr; gap: 88px; align-items: center; position: relative; z-index: 1; }
.ps-wrap-rev .ps-inner   { grid-template-columns: 1.25fr 1fr; gap: 88px; }
.ps-wrap-rev .ps-content { order: 2; }
.ps-wrap-rev .ps-visual  { order: 1; }

.ps-content { display: flex; flex-direction: column; }
.ps-visual  { display: flex; flex-direction: column; }

.ps-content h2 { font-family: var(--serif); font-size: clamp(32px,3.4vw,48px); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 22px; }
.ps-wrap-light   .ps-content h2 { color: var(--lt); }
.ps-wrap-surface .ps-content h2 { color: var(--lt); }
.ps-content h2 em { font-style: normal; }

.ps-content .ps-lede { font-size: 17px; color: var(--ink2); line-height: 1.7; font-weight: 300; margin-bottom: 28px; }
.ps-wrap-light   .ps-content .ps-lede { color: var(--lbo); }
.ps-wrap-surface .ps-content .ps-lede { color: var(--lbo); }

.ps-list { list-style: none; margin: 0 0 28px; padding: 0; }
.ps-list li { font-size: 15px; color: var(--ink2); line-height: 1.65; font-weight: 300; display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.ps-wrap-light   .ps-list li { color: var(--lbo); border-bottom-color: var(--lb); }
.ps-wrap-surface .ps-list li { color: var(--lbo); border-bottom-color: var(--lb); }
.ps-list li:last-child  { border-bottom: none; }
.ps-list li::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: rgba(63,221,176,0.12); flex-shrink: 0; margin-top: 2px; }
.ps-list li::after  { display: none; }
.ps-list li span    { flex: 1; }

.ps-key { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-md); padding: 18px 22px; font-size: 15px; color: var(--ink); font-weight: 400; line-height: 1.55; font-style: italic; border-left: 2px solid var(--teal); }
.ps-wrap-light   .ps-key { background: var(--surface); border-color: var(--lb); color: var(--lt); border-left-color: var(--purpled); }
.ps-wrap-surface .ps-key { background: var(--white);   border-color: var(--lb); color: var(--lt); border-left-color: var(--purpled); }


/* ============================================================
   TESTIMONIAL — UNIFIED  (.tq)
   ------------------------------------------------------------
   One anatomy for every testimonial on the site. Light white card,
   accent quote glyph, hairline rule, then attribution:

     .tq-card  >  .tq-mark      (oversized watermark glyph, accent)
                  .tq-quote     (blockquote — always --sans)
                  .tq-meta      (rule + avatar + name + role)

   Variation comes from ACCENT and SIZE modifiers only — never from a
   different surface, typeface, weight or element order.

     Accent:  .tq--purple  .tq--teal  .tq--blue  .tq--coral

   Every card is the homepage card: one size, left-aligned, whether
   it sits 3-up, 2-up or alone in a column. There are no size or
   alignment modifiers.

   Layout: wrap cards in .tq-grid (plus --3 / --2 / --1).
   ============================================================ */

/* Accent — tuned for legibility on the light card */
.tq-card { --tq-accent: var(--purpled); }
.tq--purple { --tq-accent: var(--purpled); }
.tq--teal   { --tq-accent: var(--teal2); }
.tq--blue   { --tq-accent: #3E5FD9; }
.tq--coral  { --tq-accent: #D4623C; }

/* --- Shell --- */
.tq-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--lb);
  border-radius: var(--rl);
  padding: 32px 36px 32px;
  color: var(--lt);
  box-shadow: 0 18px 44px -28px rgba(14,19,48,0.22);
  transition: transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.3s, border-color 0.3s;
}

.tq-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 60px -30px rgba(14,19,48,0.3);
  border-color: var(--lb2);
}

/* --- Quote glyph ---
   Uses the brand heading face on purpose: Hanken Grotesk draws the double
   quote as two slanted slabs, which is the intended mark. Do not swap this
   for a serif -- that turns it into a curly typographic quote. */
.tq-mark {
  display: block;
  font-family: var(--serif);
  font-size: 76px;
  font-weight: 500;
  line-height: 0.66;
  height: 44px;
  color: var(--tq-accent);
  margin-bottom: 20px;
  pointer-events: none;
  user-select: none;
}

/* --- Quote --- */
.tq-quote {
  position: relative;
  z-index: 1;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 300;
  font-style: normal;
  line-height: 1.75;
  letter-spacing: 0;
  color: var(--lt);
  margin: 0;
  max-width: none;
  flex: 1;
}

/* --- Attribution --- */
.tq-meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--lb);
}

.tq-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, var(--teal2), var(--purpled));
}

.tq-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.tq-who { min-width: 0; flex: 1; }

.tq-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tq-accent);
  letter-spacing: -0.005em;
  line-height: 1.3;
}

.tq-role {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--lm);
  line-height: 1.45;
  margin-top: 3px;
}

.tq-org { color: var(--lbo); font-weight: 500; }

/* --- Grid --- */
.tq-grid { display: grid; gap: 22px; align-items: stretch; }
.tq-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tq-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tq-grid--1 { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1080px) {
  .tq-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .tq-grid--3, .tq-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .tq-card    { padding: 28px 26px 26px; }
  .tq-mark { font-size: 64px; height: 38px; margin-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .tq-card { transition: none; }
  .tq-card:hover { transform: none; }
}


/* ============================================================
   RESOURCES SECTION — featured panel, video + article list
   ============================================================ */
.res-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
}

.res-all-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--teal2);
  text-decoration: none;
  white-space: nowrap;
  margin-bottom: 8px;
}

.res-all-link:hover { color: var(--teal); }

/* --- Insight cards (blog-style post cards) ---
   The card treatment used on the blog board, reused on the home page
   resources strip. Scoped under .ins-grid so the generic child names
   (.cover, .card-body) cannot reach the bare .cover on the Intelligence
   page or the .card-body in blog post bodies. */
.ins-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  margin-bottom: 36px;
}

.ins-grid:last-child { margin-bottom: 0; }

.ins-grid .ins-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: 0 6px 20px rgba(10, 10, 40, 0.08);
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.ins-grid .ins-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 38px rgba(10, 10, 40, 0.14);
}

.ins-grid .cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 195px;
  overflow: hidden;
  background: var(--surface2);
}

.ins-grid .cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ins-grid .card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  padding: 26px 28px 30px;
}

.ins-grid .card-top .date { font-size: 14px; color: var(--lm); }

/* Clamped so one long headline or excerpt cannot set the row height. */
.ins-grid .card-body h3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--serif);
  font-size: 21.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--lt);
}

.ins-grid .ins-card:hover h3 { color: var(--purpled); }

.ins-grid .exc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.7;
  color: var(--lbo);
}

@media (max-width: 1080px) {
  .ins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

@media (max-width: 768px) {
  .ins-grid { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .ps-inner { padding-inline: 0; }
}

/* ============================================================
   USED-BY TAGS
   ============================================================ */
.used-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.used-tag {
  font-size: 11px;
  color: var(--lt);
  background: var(--surface);
  border: 1px solid var(--lb);
  border-radius: 4px;
  padding: 3px 8px;
  font-weight: 400;
  white-space: nowrap;
}

/* ============================================================
   HERO BACKGROUND ELEMENTS
   Shared across product & solution pages (not homepage).
   ============================================================ */
.hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.hero-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 40%, black 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 90% at 50% 40%, black 30%, transparent 100%);
}

.hero-noise {
  position: absolute; inset: 0; opacity: 0.035; pointer-events: none;
  background-image: url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22200%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%224%22 stitchTiles=%22stitch%22/></filter><rect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/></svg>');
  background-size: 200px 200px;
}

.hero-orb-1 {
  position: absolute; top: -180px; left: -140px; width: 900px; height: 800px;
  background: radial-gradient(ellipse at center, rgba(123,91,245,0.65) 0%, rgba(108,77,240,0.3) 38%, transparent 68%);
  filter: blur(40px);
}

.hero-orb-2 {
  position: absolute; top: 40px; right: -160px; width: 700px; height: 800px;
  background: radial-gradient(ellipse at center, rgba(63,221,176,0.4) 0%, rgba(14,158,124,0.18) 42%, transparent 68%);
  filter: blur(50px);
}

.hero-orb-3 {
  position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  width: 1000px; height: 500px;
  background: radial-gradient(ellipse at center, rgba(123,91,245,0.2) 0%, rgba(123,91,245,0.06) 50%, transparent 72%);
  filter: blur(60px);
}

/* ============================================================
   HERO BADGE — teal pill above the page title
   ============================================================ */
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(63,221,176,0.07); border: 1px solid rgba(63,221,176,0.2);
  border-radius: 20px; padding: 7px 18px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
  color: rgba(63,221,176,0.85); text-transform: uppercase;
  margin-bottom: 28px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

.hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); display: inline-block; }
.hero-badge-text { min-width: 0; }

/* Hero eyebrow — left-bar label above the page title (shared, matches Intelligence hero) */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 28px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  border-left: 2px solid rgba(255,255,255,0.3);
  padding-left: 12px;
}

/* ============================================================
   HERO CONTENT — 2-column product/solution hero layout
   ============================================================ */
.hero-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 32px; position: relative;
  display: grid; grid-template-columns: 0.95fr 1.15fr; gap: 72px; align-items: center;
}

.hero-text { text-align: left; }

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(42px, 4.8vw, 72px);
  font-weight: 400; line-height: 1.04;
  color: var(--ink);
  margin: 0 0 26px; letter-spacing: -0.03em;
}

.hero h1 em { font-style: normal; color: var(--teal); }

.hero-sub {
  font-size: 18px; font-weight: 300;
  color: rgba(176,189,212,0.9);
  margin: 0 0 28px; line-height: 1.65; letter-spacing: 0.01em;
}

.hero-checks {
  display: grid; grid-template-columns: auto auto;
  gap: 10px 40px; margin: 0 0 32px; justify-content: start;
}

.hero-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--ink2); font-weight: 400; line-height: 1.5; }

.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-mock { position: relative; }

/* ============================================================
   APP MOCKUP — browser chrome + sidebar + data table
   Used on hero sections of product/solution pages and homepage.
   ============================================================ */
.hero-ss {
  background: var(--navy2);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4), 0 0 60px rgba(123,91,245,0.28), 0 0 30px rgba(63,221,176,0.14), 0 0 0 1px rgba(255,255,255,0.06);
}

.ss-bar { background: var(--navy3); border-bottom: 1px solid rgba(255,255,255,0.05); padding: 9px 16px; display: flex; align-items: center; gap: 7px; }

.dot { width: 9px; height: 9px; border-radius: 50%; }
.dr { background: #E05050; }
.dy { background: #FB923C; }
.dg { background: #34C759; }

.ss-url { flex: 1; background: var(--navy4); border: 1px solid rgba(255,255,255,0.07); border-radius: 4px; padding: 3px 12px; margin: 0 12px; font-family: var(--mono); font-size: 10px; color: var(--ink3); }

.ss-body { display: grid; grid-template-columns: 160px 1fr; min-height: 380px; }
.ss-sidebar { background: var(--navy3); padding: 12px 0; border-right: 1px solid rgba(255,255,255,0.05); }
.ss-logo { padding: 0 14px 10px; border-bottom: 1px solid rgba(255,255,255,0.05); margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.ss-logo em { font-style: normal; color: var(--teal); }
.ss-nav { display: flex; flex-direction: column; gap: 1px; padding: 0 7px; }
.ss-ni { padding: 6px 9px; border-radius: 4px; font-size: 10.5px; color: var(--ink3); display: flex; align-items: center; gap: 7px; }
.ss-ni.on { background: rgba(123,91,245,0.22); color: rgba(198,186,255,0.9); font-weight: 500; }
.ss-main { background: var(--white); padding: 16px; }
.ss-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ss-title { font-size: 12.5px; font-weight: 600; color: var(--lt); }
.ss-new { background: var(--purpled); color: #fff; border-radius: 4px; padding: 5px 11px; font-size: 10px; font-weight: 600; }
.ss-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-bottom: 12px; }
.ss-stat { background: var(--surface); border-radius: 5px; padding: 8px 10px; }
.ss-stat .n { font-family: var(--serif); font-size: 18px; line-height: 1; margin-bottom: 2px; }
.ss-stat .l { font-size: 9px; color: var(--lm); }
.ss-thead { display: grid; grid-template-columns: 1.3fr 1.2fr 70px 36px 56px; gap: 5px; padding: 5px 8px; border-bottom: 1px solid var(--lb); }
.ss-th { font-size: 8.5px; font-weight: 600; color: var(--lm); text-transform: uppercase; letter-spacing: 0.05em; }
.ss-rows { display: flex; flex-direction: column; gap: 1px; }
.ss-row { display: grid; grid-template-columns: 1.3fr 1.2fr 70px 36px 56px; gap: 5px; padding: 6px 8px; border-radius: 4px; align-items: center; }
.ss-row.hl { background: rgba(123,91,245,0.04); border: 1px solid rgba(123,91,245,0.1); }
.ss-co { font-size: 11px; font-weight: 500; color: var(--lt); }
.ss-th2 { font-size: 10px; color: var(--lbo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bdg { font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 3px; display: inline-block; white-space: nowrap; text-align: center; }
.ba { background: rgba(63,221,176,0.1); color: var(--teal2); }
.be { background: rgba(251,146,60,0.12); color: #C07020; }
.bc { background: rgba(180,190,210,0.18); color: var(--lm); }
.ss-own { font-size: 9px; color: #fff; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--purpled), var(--teal2)); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.ss-dt { font-size: 10px; color: var(--lm); font-family: var(--mono); }

/* ============================================================
   TRUST STRIP — the logos band under a hero
   ------------------------------------------------------------
   <div class="trust"><img class="trust-logos-img"
     src="/assets/images/trust-logos.png" alt="..."></div>
   Used on the homepage, About and the solution pages.
   ============================================================ */
.trust {
  background: var(--white);
  border-top: 1px solid var(--lb);
  border-bottom: 1px solid var(--lb);
  padding: 22px 72px;
  text-align: center;
  position: relative;
}
.trust-logos-img { display: block; max-width: 1100px; width: 100%; height: auto; margin: 0 auto; opacity: 0.92; }

.trust-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lm); margin-bottom: 18px; }
.trust-logos { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; }

/* ============================================================
   VALUE STRIP — 4-column feature card grid section
   ============================================================ */
.vstrip {
  background: var(--surface);
  padding: 128px 64px;
  border-top: 1px solid var(--lb);
  border-bottom: 1px solid var(--lb);
}

.vstrip-in { max-width: var(--max-w-wide); margin: 0 auto; padding: 0 32px; }

.vstrip-hd { text-align: center; margin-bottom: 72px; }

.vstrip-hd h2 {
  font-family: var(--serif); font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 400; color: var(--lt); line-height: 1.14;
  letter-spacing: -0.02em; max-width: 840px; margin: 0 auto;
}

.vstrip-hd h2 em { font-style: normal; }

.vstrip-cascade { margin: 28px auto 0; max-width: 720px; }
.vstrip-cascade p { font-size: 17px; color: var(--lbo); line-height: 1.6; font-weight: 400; margin: 0; }

.vstrip-pivot {
  font-family: var(--serif); font-size: clamp(22px, 2vw, 28px);
  font-weight: 400; color: var(--lt); font-style: normal;
  line-height: 1.3; letter-spacing: -0.015em;
  margin: 28px auto 0; max-width: 680px;
}

.vstrip-pivot em { font-style: normal; font-weight: 400; }

.vstrip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.vstrip-item {
  background: var(--white);
  border: 1px solid var(--lb);
  border-radius: 16px;
  padding: 36px 30px;
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

.vstrip-item:hover { border-color: rgba(123,91,245,0.18); box-shadow: 0 8px 24px rgba(0,0,0,0.05); transform: translateY(-2px); }

.vstrip-icon {
  width: 48px; height: 48px; border-radius: 11px;
  background: linear-gradient(135deg, rgba(123,91,245,0.08), rgba(63,221,176,0.06));
  border: 1px solid rgba(123,91,245,0.12);
  display: flex; align-items: center; justify-content: center;
}

.vstrip-icon svg { width: 20px; height: 20px; }
.vstrip-item h3 { font-size: 16px; font-weight: 600; color: var(--lt); letter-spacing: -0.01em; line-height: 1.35; }
.vstrip-item p { font-size: 14px; color: var(--lbo); line-height: 1.65; font-weight: 300; }

/* ============================================================
   USER PILLS — dark band with audience pill tags
   ============================================================ */
.upills { background: #100830; padding: 40px 64px 44px; position: relative; overflow: hidden; }

.upills::before {
  content: ''; position: absolute; top: -100px; right: -80px;
  width: 360px; height: 360px;
  background: radial-gradient(circle at center, rgba(123,91,245,0.28) 0%, rgba(123,91,245,0.08) 45%, transparent 70%);
  pointer-events: none; z-index: 0;
}

.upills::after {
  content: ''; position: absolute; bottom: -100px; left: -80px;
  width: 320px; height: 320px;
  background: radial-gradient(circle at center, rgba(63,221,176,0.14) 0%, rgba(63,221,176,0.04) 45%, transparent 70%);
  pointer-events: none; z-index: 0;
}

.upills-in {
  max-width: var(--max-w-wide); margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; justify-content: center;
  gap: 20px; flex-wrap: wrap; position: relative; z-index: 1;
}

.upills-lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink2); display: inline-flex; align-items: center; gap: 10px; }
.upills-lbl::before { content: ''; width: 20px; height: 1px; background: linear-gradient(90deg, var(--purpled), var(--teal2)); display: block; opacity: 0.9; }

.upills-list { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.upill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px; padding: 8px 16px;
  font-size: 13px; font-weight: 500; color: var(--ink);
  letter-spacing: -0.005em; transition: border-color 0.2s, background 0.2s;
}

.upill:hover { border-color: rgba(123,91,245,0.45); background: rgba(255,255,255,0.06); }

.upill-dot { width: 6px; height: 6px; border-radius: 50%; display: block; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255,255,255,0.08); }
.upill-dot-p { background: #BCA3E0; }
.upill-dot-t { background: var(--teal); }

/* ============================================================
   CLOSING CTA SECTION — navy card with gradient orbs
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cta-sect { background: var(--surface); padding: 80px 64px; position: relative; }
.cta-in { max-width: var(--max-w-wide); margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }

.cta-card {
  background: var(--navy); border-radius: 24px; padding: 96px 80px;
  position: relative; overflow: hidden; text-align: center;
  border: 1px solid rgba(255,255,255,0.06);
}

.cta-card::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at -10% 20%, rgba(123,91,245,0.55) 0%, rgba(123,91,245,0.2) 38%, transparent 65%),
    radial-gradient(ellipse 60% 70% at 110% 80%, rgba(63,221,176,0.38) 0%, rgba(63,221,176,0.12) 40%, transparent 65%),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(123,91,245,0.18) 0%, transparent 60%);
  pointer-events: none; filter: blur(30px);
}

.cta-card::after {
  content: ''; position: absolute; inset: 0; opacity: 0.035; pointer-events: none;
  background-image: url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22200%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%224%22 stitchTiles=%22stitch%22/></filter><rect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/></svg>');
  background-size: 200px 200px;
}

.cta-card > * { position: relative; z-index: 1; }

.cta-card h2 { font-family: var(--serif); font-size: clamp(38px, 4.6vw, 64px); font-weight: 400; color: var(--ink); line-height: 1.08; letter-spacing: -0.03em; margin-bottom: 24px; }
.cta-card h2 em { font-style: normal; color: rgba(198,186,255,0.9); }
.cta-card p { font-size: 19px; color: rgba(176,189,212,0.85); line-height: 1.65; font-weight: 300; max-width: 680px; margin: 0 auto 48px; }

.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 44px; }

.cta-footer { font-size: 12px; color: rgba(255,255,255,0.58); padding-top: 36px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; }
.cta-footer-item { display: flex; align-items: center; gap: 8px; }

/* CTA buttons — white primary + ghost secondary */
.btn-p {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--navy);
  padding: 15px 30px; border-radius: var(--r-md);
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 16px rgba(255,255,255,0.12);
}

.btn-p:hover { background: rgba(240,245,255,0.96); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,255,255,0.18); }

.btn-s {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--ink2);
  padding: 13px 22px; border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,0.25);
  font-size: 14px; text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.btn-s:hover { border-color: rgba(255,255,255,0.5); color: var(--ink); }

.btn-teal { background: var(--teal-btn) !important; color: #fff !important; border-color: transparent !important; }
.btn-teal:hover { background: var(--teal-btn-hover) !important; transform: translateY(-1px); }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faqs { background: var(--white); padding: 140px 64px; border-top: 1px solid var(--lb); }
.faqs-in { max-width: 920px; margin: 0 auto; }
.faqs-top { text-align: center; margin-bottom: 60px; }

.faq { border-bottom: 1px solid var(--lb); }
.faq:first-of-type { border-top: 1px solid var(--lb); }

.faq-q {
  padding: 22px 0; display: flex; justify-content: space-between;
  align-items: flex-start; gap: 20px;
  cursor: pointer; font-size: 16px; font-weight: 500;
  color: var(--lt); letter-spacing: -0.01em; line-height: 1.4;
  list-style: none; transition: color 0.2s;
}

.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--purpled); }

.faq-q-icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--lb);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: transform 0.25s, background 0.25s, border-color 0.25s;
  font-size: 14px; color: var(--lm); line-height: 1; margin-top: 2px;
}

.faq[open] .faq-q-icon { background: var(--purpled); border-color: var(--purpled); color: #fff; transform: rotate(45deg); }

.faq-a { padding: 0 40px 28px 0; font-size: 14.5px; color: var(--lbo); line-height: 1.75; font-weight: 300; animation: fadeUp 0.25s ease; }
.faq-a strong { color: var(--lt); font-weight: 500; }
.faq-a p { margin-bottom: 12px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: var(--teal2); text-decoration: none; border-bottom: 1px dashed rgba(14,158,124,0.3); transition: border-color 0.2s; }
.faq-a a:hover { border-bottom-color: var(--teal2); }

/* ============================================================
   SHARED RESPONSIVE — hero / ss / trust / vstrip / upills / cta / faq
   ============================================================ */
@media (max-width: 960px) {
  .hero, .trust, .vstrip, .upills, .cta-sect, .faqs { padding-left: 24px; padding-right: 24px; }
  .hero-inner, .vstrip-in, .upills-in, .cta-in { padding-inline: 0; }
  .hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .hero { padding-bottom: 72px; }
  .hero h1 { font-size: clamp(36px, 6vw, 48px); }
  .hero-checks { grid-template-columns: 1fr; gap: 8px; }
  .vstrip { padding-top: 72px; padding-bottom: 72px; }
  .vstrip-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-sect { padding-top: 56px; padding-bottom: 56px; }
  .cta-card { padding: 56px 28px; border-radius: 18px; }
  .ss-body { grid-template-columns: 1fr; }
  .ss-sidebar { display: none; }
  .faqs { padding-top: 80px; padding-bottom: 80px; }
}

@media (max-width: 768px) {
  .hero { padding-top: 104px !important; padding-bottom: 56px; }
  .hero-inner { gap: 28px; }
  .hero-text, .hero-mock { min-width: 0; }
  .hero-badge { max-width: 100%; display: inline-grid; grid-template-columns: auto minmax(0,1fr); column-gap: 8px; align-items: start; }
  .hero h1 { font-size: clamp(30px, 11vw, 44px); margin-bottom: 18px; }
  .hero-sub { font-size: 16px; line-height: 1.55; margin-bottom: 20px; }
  .hero-checks { margin-bottom: 22px; gap: 8px; }
  .hero-check { font-size: 13px; }
  .trust { padding-top: 20px; padding-bottom: 20px; }
  .vstrip, .faqs { padding-top: 56px; padding-bottom: 56px; }
  .upills { padding-top: 20px; padding-bottom: 24px; }
  .cta-sect { padding-top: 48px; padding-bottom: 48px; }
  .vstrip-hd { margin-bottom: 36px; }
  .vstrip-cascade, .vstrip-pivot { margin-top: 20px; }
  .vstrip-grid { grid-template-columns: 1fr; gap: 16px; }
  .cta-card { padding: 44px 22px; }
  .cta-card p { font-size: 17px; margin-bottom: 32px; }
  .cta-btns { gap: 10px; margin-bottom: 28px; }
  .cta-footer { padding-top: 24px; gap: 18px; }
  .faqs-top { margin-bottom: 40px; }
}

/* ─── BOOKING CTA (shared full-bleed strip + calendar mockup; scoped .cta-book) ─── */
.cta-sect.cta-book{
  position:relative;overflow:hidden;
  width:100vw;margin-left:calc(50% - 50vw);
  padding:64px 52px 72px;
  background:
    radial-gradient(ellipse 64% 82% at 76% 26%,rgba(138,104,255,0.58) 0%,rgba(123,91,245,0.22) 42%,transparent 66%),
    radial-gradient(ellipse 60% 78% at 104% 106%,rgba(91,124,250,0.48) 0%,transparent 62%),
    radial-gradient(ellipse 52% 74% at -4% 56%,rgba(108,77,240,0.34) 0%,transparent 60%),
    radial-gradient(ellipse 60% 48% at 50% 122%,rgba(63,221,176,0.10) 0%,transparent 56%),
    linear-gradient(150deg,#2C1F76 0%,#3A2596 28%,#4A32AE 50%,#2B2174 74%,#0F0E2C 96%,#0C0C24 100%);
}
.cta-sect.cta-book::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(138,104,255,0.65) 26%,rgba(91,124,250,0.5) 52%,rgba(63,221,176,0.45) 74%,transparent 100%);pointer-events:none;z-index:2}
.cta-book .cta-box{position:relative;overflow:visible;background:transparent;border:none;box-shadow:none;border-radius:0;max-width:960px;margin:0 auto;padding:0}
.cta-book .cta-wrap{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:center;justify-content:center}
.cta-book .cta-left{text-align:left;min-width:0;max-width:none}
.cta-book .cta-left h2{font-family:var(--serif);font-size:clamp(34px,4vw,52px);font-weight:400;line-height:1.06;letter-spacing:-0.025em;margin:0 0 18px;color:#fff;text-shadow:0 1px 14px rgba(10,8,34,0.35)}
.cta-book .cta-left h2 em{font-style:normal;color:var(--cyanlt);text-shadow:0 1px 18px rgba(63,221,176,0.35)}
.cta-book .cta-left p{text-shadow:0 1px 10px rgba(10,8,34,0.28)}
.cta-book .cta-email{font-size:14px;margin:22px 0 0;color: rgba(255,255,255,0.86)}
.cta-book .cta-email a{color:var(--cyanlt);text-decoration:none;border-bottom:1px solid rgba(166,237,208,0.55);transition:border-color .2s}
.cta-book .cta-email a:hover{border-bottom-color:var(--cyanlt)}
/* calendar booking mockup */
.cta-book .cal-card{background:#fff;border-radius:16px;padding:18px;box-shadow:0 24px 60px rgba(8,14,28,0.4),0 0 0 1px rgba(255,255,255,0.08);width:300px;max-width:100%}
.cta-book .cal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cta-book .cal-title{font-size:14px;font-weight:700;color:var(--lt);letter-spacing:-0.01em}
.cta-book .cal-sub{font-size:10px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--teal2);background:rgba(63,221,176,0.1);padding:3px 8px;border-radius:5px}
.cta-book .cal-month{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cta-book .cal-month b{font-size:12px;font-weight:600;color:var(--lt)}
.cta-book .cal-nav{display:flex;gap:6px}
.cta-book .cal-nav span{width:20px;height:20px;border-radius:5px;background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--lm);font-size:11px}
.cta-book .cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:3px}
.cta-book .cal-dow span{font-size:8px;font-weight:700;color:var(--lm);text-align:center;text-transform:uppercase}
.cta-book .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cta-book .cal-grid span{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--lt);border-radius:6px}
.cta-book .cal-grid span.off{color:var(--lb2)}
.cta-book .cal-grid span.avail{background:rgba(123,91,245,0.1);color:var(--purpled);font-weight:600}
.cta-book .cal-grid span.sel{background:var(--purpled);color:#fff;font-weight:700}
.cta-book .cal-slots{display:flex;gap:6px;margin-top:14px}
.cta-book .cal-slot{flex:1;text-align:center;font-size:11px;font-weight:600;padding:7px 0;border-radius:7px;border:1px solid var(--lb);color:var(--lt)}
.cta-book .cal-slot.on{background:var(--teal2);border-color:var(--teal2);color:#fff}
.cta-book .cal-book{margin-top:10px;display:block;text-align:center;background:var(--purpled);color:#fff;font-size:12px;font-weight:700;padding:10px;border-radius:8px;text-decoration:none;transition:opacity .2s}
.cta-book .cal-book:hover{opacity:0.9}
@media(max-width:768px){
  .cta-sect.cta-book{padding:64px 20px 72px}
  .cta-book .cta-box{padding:0}
  .cta-book .cta-wrap{grid-template-columns:1fr;gap:32px;justify-items:center;text-align:center}
  .cta-book .cta-left{text-align:center;max-width:480px}
  .cta-book .cta-left h2,.cta-book .cta-left p{margin-left:auto;margin-right:auto}
  .cta-book .cal-card{margin:0 auto}
}

/* ─── GLOBAL CLOSING CTA (shared full-bleed strip; markup lives at the top of
       _components/footer.html so every page gets it automatically. Two ways in
       side by side: explore the database on the left, a demo on the right.) ─── */
.gcta{
  position:relative;overflow:hidden;
  width:100vw;margin-left:calc(50% - 50vw);
  padding:76px 52px 80px;
  background:
    radial-gradient(ellipse 64% 82% at 76% 26%,rgba(138,104,255,0.58) 0%,rgba(123,91,245,0.22) 42%,transparent 66%),
    radial-gradient(ellipse 60% 78% at 104% 106%,rgba(91,124,250,0.48) 0%,transparent 62%),
    radial-gradient(ellipse 52% 74% at -4% 56%,rgba(108,77,240,0.34) 0%,transparent 60%),
    radial-gradient(ellipse 60% 48% at 50% 122%,rgba(63,221,176,0.10) 0%,transparent 56%),
    linear-gradient(150deg,#2C1F76 0%,#3A2596 28%,#4A32AE 50%,#2B2174 74%,#0F0E2C 96%,#0C0C24 100%);
}
.gcta::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(138,104,255,0.65) 26%,rgba(91,124,250,0.5) 52%,rgba(63,221,176,0.45) 74%,transparent 100%);pointer-events:none;z-index:2}
.gcta-inner{position:relative;z-index:1;max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.15fr 1fr}
.gcta-col{min-width:0;padding-right:56px}
.gcta-col--demo{padding-right:0;padding-left:56px;border-left:1px solid rgba(255,255,255,0.16)}
.gcta-title{font-family:var(--serif);font-size:clamp(26px,2.4vw,33px);font-weight:700;line-height:1.16;letter-spacing:-0.02em;color:#fff;margin:0 0 12px;text-shadow:0 1px 14px rgba(10,8,34,0.3)}
.gcta-sub{font-size:16px;font-weight:400;line-height:1.6;color: rgba(255,255,255,0.94);margin:0 0 26px;max-width:460px}

/* left: "Explore the database" opens the form popup (.lead-dialog) */

/* right — book a demo */
.gcta-demo{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.gcta-btn{border-radius:var(--r-full);padding:16px 34px;font-size:15px;font-weight:600;box-shadow:0 10px 26px rgba(8,14,28,0.28)}
.gcta-fine{font-size:13.5px;color: rgba(255,255,255,0.85);white-space:nowrap}

/* Hidden on the contact page the demo button points at. */
body:has(#booking-form) .gcta{display:none}

@media(max-width:960px){
  .gcta-inner{grid-template-columns:1fr}
  .gcta-col{padding-right:0}
  .gcta-col--demo{padding-left:0;border-left:none;border-top:1px solid rgba(255,255,255,0.16);margin-top:36px;padding-top:36px}
}
@media(max-width:768px){
  .gcta{padding:64px 24px 68px}
  .gcta-sub{max-width:none}
}
@media(max-width:520px){
  .gcta{padding:56px 20px 60px}
  .gcta-btn{width:100%}
  .gcta-fine{white-space:normal}
}

/* ─── THREE WAYS TO EXPLORE ("One dataset. More ways to work.") ─────────
   Shared by products/impactive-intelligence and solutions/consultants.
   A dark band: one dataset, three ways in
   (explore, ask, analyse). Each card pairs a short explanation with a live
   preview of that surface — the query types itself, the answer is composed,
   the reports assemble. Animation is pure CSS on one shared 11s cycle and
   only starts once the card is scrolled into view (.visible, set by the
   reveal observer), so the three previews stay in step with each other.
   Base styles are the finished state, so the section reads correctly with
   motion reduced or JS off. */
.ways {
  padding: 100px 0 96px; position: relative; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.06);
  background:
    radial-gradient(64% 120% at 88% 0%, rgba(63,221,176,0.16) 0%, transparent 56%),
    radial-gradient(76% 150% at 8% 100%, rgba(108,77,240,0.40) 0%, transparent 62%),
    radial-gradient(96% 120% at 50% 42%, rgba(52,36,140,0.52) 0%, transparent 74%),
    #15123C;
}
.ways .intel-wrap, .ways .wrap { position: relative; z-index: 1; }
.ways-hd { max-width: 720px; margin-bottom: 44px; }
.ways-hd .stag { color: var(--ink2); }
.ways-hd h2 {
  font-family: var(--serif); font-size: clamp(30px, 3.4vw, 48px); font-weight: 400;
  letter-spacing: -0.02em; line-height: 1.08; color: var(--ink); margin-bottom: 14px;
}
.ways-hd h2 em { font-style: normal; color: var(--teal); }
.ways-hd p { font-size: 15.5px; font-weight: 300; color: rgba(236,236,246,0.82); line-height: 1.75; }

.ways-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.16fr);
  gap: 20px;
}
.way-card {
  border: 1px solid rgba(255,255,255,0.13); border-radius: var(--rl);
  padding: 28px 26px 26px; background: rgba(255,255,255,0.07);
  display: flex; flex-direction: column; min-width: 0;
  transition: transform 0.25s, border-color 0.25s;
}
.way-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.16); }
.way-card.p { background: linear-gradient(180deg, rgba(108,77,240,0.30), rgba(255,255,255,0.07)); }
.way-card.t { background: linear-gradient(180deg, rgba(63,221,176,0.24), rgba(255,255,255,0.07)); }
.way-card.b { background: linear-gradient(180deg, rgba(91,124,250,0.28), rgba(255,255,255,0.07)); }
.way-icon {
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid;
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.way-icon svg { width: 20px; height: 20px; }
.way-card.p .way-icon { background: rgba(147,120,255,0.18); border-color: rgba(147,120,255,0.34); color: #B6A2FF; }
.way-card.t .way-icon { background: rgba(63,221,176,0.16); border-color: rgba(63,221,176,0.32); color: var(--cyan); }
.way-card.b .way-icon { background: rgba(139,166,255,0.18); border-color: rgba(139,166,255,0.34); color: #9FB7FF; }
/* Claude's own mark, in its own colour — the tile warms to match it */
.way-card.b .way-icon--claude { background: rgba(217,119,87,0.16); border-color: rgba(217,119,87,0.38); }
.way-icon--claude svg { width: 23px; height: 23px; }
.way-card h3 {
  font-family: var(--serif); font-size: 20px; font-weight: 500;
  letter-spacing: -0.015em; line-height: 1.25; color: var(--ink); margin-bottom: 10px;
}
.way-card > p {
  font-size: 13.5px; font-weight: 300; color: rgba(236,236,246,0.76); line-height: 1.65;
  margin-bottom: 22px;
}

/* Preview panel — a light product surface floating on the dark band, pinned
   to the bottom of the card so the three line up. */
.way-mock {
  margin-top: auto; background: var(--white); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--rm); padding: 14px; min-width: 0;
  box-shadow: 0 18px 40px rgba(5,4,24,0.4);
}

/* 1 — a company query typing into the search field, then its profile loading */
.wm-search {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--lb); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px;
}
.wm-search svg { width: 13px; height: 13px; color: var(--lm); flex-shrink: 0; }
.wm-type {
  display: inline-block; overflow: hidden; white-space: nowrap;
  font-size: 11px; font-weight: 400; color: var(--lt);
  border-right: 1.5px solid transparent; width: 6.9ch;
}
.wm-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.wm-tabs span {
  flex: 1; text-align: center; font-size: 9px; font-weight: 500; color: var(--lm);
  background: var(--surface); border-radius: 5px; padding: 4px 0;
}
.wm-tabs span.on { color: var(--lt); background: var(--white); box-shadow: 0 0 0 1px var(--lb); }
.wm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.wm-kpi { border: 1px solid var(--lb); border-radius: 6px; padding: 7px 8px; min-width: 0; }
.wm-kpi b {
  display: block; font-family: var(--serif); font-size: 16px; font-weight: 500;
  color: var(--lt); line-height: 1;
}
.wm-kpi b.txt { font-size: 10.5px; font-weight: 600; line-height: 1.25; }
.wm-kpi span {
  display: block; font-size: 7.5px; color: var(--lm); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wm-bd-lbl {
  font-family: var(--mono); font-size: 9px; color: var(--lm);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 7px;
}
.wm-bd-row {
  display: grid; grid-template-columns: 1fr 34% auto; gap: 8px; align-items: center;
  padding: 5px 0; border-bottom: 1px solid var(--lb);
}
.wm-bd-row:last-child { border-bottom: none; padding-bottom: 0; }
.wm-bd-row span {
  font-size: 10px; color: var(--lbo); font-weight: 300;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wm-bd-row i { display: block; height: 4px; border-radius: 2px; background: var(--purpled); }
.wm-bd-row + .wm-bd-row i { width: 62%; opacity: 0.72; }
.wm-bd-row + .wm-bd-row + .wm-bd-row i { width: 40%; opacity: 0.52; }
.wm-bd-row b {
  font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--lt);
  min-width: 2ch; text-align: right;
}
/* Two frames share the panel: the company profile, then the investors
   linked to it. The profile pane stays in flow and sets the height; the
   investor pane sits over it and is opaque, so the swap is a clean cut. */
.wm-panes { position: relative; }
.wm-pane--investors {
  position: absolute; inset: 0; background: var(--white); opacity: 0;
}
.wm-inv-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--lb);
}
.wm-inv-row:last-child { border-bottom: none; }
.wm-inv-txt { min-width: 0; flex: 1; }
.wm-inv-name { font-size: 10px; font-weight: 600; color: var(--purpled); letter-spacing: -0.01em; }
.wm-inv-topic {
  font-size: 9px; color: var(--lbo); font-weight: 300; line-height: 1.35; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wm-inv-yr { font-family: var(--mono); font-size: 9.5px; color: var(--lm); flex-shrink: 0; }

/* 2 — question, a thinking beat, then the answer being written */
.wm-ask { display: flex; flex-direction: column; gap: 10px; }
.wm-q {
  align-self: flex-end; max-width: 92%;
  background: rgba(108,77,240,0.08); border-radius: 10px 10px 4px 10px;
  padding: 9px 11px; font-size: 11px; line-height: 1.5; color: var(--purpled); font-weight: 400;
}
.wm-a { display: flex; gap: 8px; align-items: flex-start; }
.wm-a-avatar {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  background: rgba(14,158,124,0.10); color: var(--teal2);
  display: flex; align-items: center; justify-content: center;
}
.wm-a-avatar svg { width: 12px; height: 12px; }
.wm-a-body { min-width: 0; flex: 1; }
.wm-dots { display: flex; align-items: center; gap: 4px; height: 0; opacity: 0; overflow: hidden; }
.wm-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--teal2); opacity: 0.4; }
.wm-a-body p { font-size: 11px; line-height: 1.5; color: var(--lt); font-weight: 400; margin-bottom: 8px; }
.wm-line { height: 5px; border-radius: 3px; background: var(--lb); margin-bottom: 6px; }
.wm-line.s { width: 62%; }
.wm-link { font-size: 10.5px; font-weight: 500; color: var(--teal2); margin-top: 10px; }
/* What the answer is being built from, ticked off while it thinks */
.wm-scan { margin-bottom: 10px; }
.wm-scan span {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 8.5px; color: var(--lm);
  padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wm-scan span::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--teal2); opacity: 0.55; flex-shrink: 0;
}

/* 3 — a fan of finished report pages, assembled on each cycle. The pages are
   paper, not UI: square corners, a hairline edge and a deep shadow on the
   dark ground. The front sheet is in flow, so the fan sizes itself from it. */
.way-stack { margin-top: auto; position: relative; padding: 26px 0 0; min-width: 0; }
.wp {
  background: var(--white); border: 1px solid rgba(14,19,48,0.10); border-radius: 3px;
  box-shadow: 0 14px 34px rgba(5,4,24,0.45);
}
/* Every sheet is A4 portrait — the page sizes itself from its width, and
   anything past the bottom of the page is clipped, as on real paper. */
.wp-side {
  position: absolute; top: 26px; width: 56%; aspect-ratio: 210 / 297;
  overflow: hidden; padding: 9px 10px;
}
/* All three sheets are the same page; the two behind fan out far enough for
   their edges to read, and a rotated sheet overhangs its box by a dozen or
   so pixels, which the card's padding absorbs. */
.wp-b1 { left: 1%; transform: rotate(-7deg) translateY(6px); z-index: 1; }
.wp-b3 { right: 1%; transform: rotate(7deg) translateY(6px); z-index: 2; }
.wp-front {
  position: relative; z-index: 3; width: 56%; margin: 0 auto;
  aspect-ratio: 210 / 297; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 11px 12px 12px; transform: rotate(-1deg);
}

/* Report page furniture — shared by the three sheets */
.rp-rule { height: 2px; background: var(--blue); border-radius: 1px; margin-bottom: 5px; }
.rp-eyebrow {
  font-family: var(--mono); font-size: 5.5px; color: var(--purpled);
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px;
}
.rp-title { font-family: var(--serif); font-size: 12.5px; font-weight: 500; color: var(--lt); line-height: 1.1; margin-bottom: 4px; }
.rp-title.sm { font-size: 9.5px; line-height: 1.2; }
.rp-sub { font-size: 6.5px; color: var(--lm); line-height: 1.4; margin-bottom: 6px; }
.rp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 7px; }
.rp-stat { background: var(--surface); border-radius: 3px; padding: 4px 5px; }
.rp-stat b { display: block; font-family: var(--serif); font-size: 11px; font-weight: 500; color: var(--lt); line-height: 1; }
.rp-stat span { display: block; font-size: 5.5px; color: var(--lm); line-height: 1.3; margin-top: 3px; }
.rp-h { font-size: 7.5px; font-weight: 600; color: var(--lt); letter-spacing: -0.01em; margin-bottom: 5px; }
.rp-para + .rp-h { margin-top: 7px; }
.rp-para i { display: block; height: 3px; border-radius: 2px; background: var(--lb); margin-bottom: 3px; }
.rp-para i.s { width: 54%; }
.rp-para i.m { width: 78%; }
.rp-cover { background: #0E1330; margin: -9px -10px 8px; padding: 8px 10px 7px; }
.rp-cover .rp-eyebrow { color: var(--cyan); margin: 0; }
.rp-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 7px; }
.rp-kpis--3 { grid-template-columns: repeat(3, 1fr); gap: 4px; }
.rp-kpis--3 .rp-kpi { padding: 4px; }
.rp-kpis--3 .rp-kpi span { line-height: 1.25; }
.rp-kpi { border: 1px solid var(--lb); border-radius: 3px; padding: 4px 5px; }
.rp-kpi b { display: block; font-family: var(--serif); font-size: 10px; color: var(--lt); line-height: 1; }
.rp-kpi span { display: block; font-size: 5.5px; color: var(--lm); margin-top: 2px; }
.rp-bars { display: flex; flex-direction: column; gap: 4px; }
.rp-bars i { display: block; height: 5px; border-radius: 2px; background: var(--purpled); opacity: 0.85; }
.rp-bars i:nth-child(2) { width: 72%; background: var(--blue); }
.rp-bars i:nth-child(3) { width: 54%; background: var(--teal2); }
.rp-bars i:nth-child(4) { width: 38%; background: var(--purpled); opacity: 0.55; }
.rp-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; align-items: end; height: 26px; margin-bottom: 8px; }
.rp-chart i { display: block; border-radius: 1px; background: var(--purpled); }
.rp-chart i:nth-child(1) { height: 40%; opacity: 0.3; }
.rp-chart i:nth-child(2) { height: 64%; opacity: 0.42; }
.rp-chart i:nth-child(3) { height: 36%; opacity: 0.54; }
.rp-chart i:nth-child(4) { height: 84%; opacity: 0.66; }
.rp-chart i:nth-child(5) { height: 54%; opacity: 0.78; }
.rp-chart i:nth-child(6) { height: 100%; opacity: 0.9; }
.rp-chart i:nth-child(7) { height: 70%; opacity: 1; }
/* Grouped column chart — engagement records against distinct investors,
   one pair per report year. Bar heights are the data, so they live in
   classes rather than inline styles. */
.rp-legend { display: flex; gap: 8px; margin-bottom: 4px; }
.rp-legend span { display: flex; align-items: center; gap: 3px; font-size: 5px; color: var(--lm); }
.rp-legend span::before { content: ''; width: 4px; height: 4px; border-radius: 1px; }
.rp-legend .a::before { background: var(--blue); }
.rp-legend .b::before { background: var(--teal2); }
.rp-grouped {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  height: 38px; flex-shrink: 0; border-bottom: 1px solid var(--lb);
}
.rp-gbars { display: flex; align-items: flex-end; gap: 3px; height: 100%; }
.rp-gbars i { flex: 1; display: block; border-radius: 1px 1px 0 0; }
.rp-gbars i.a { background: var(--blue); }
.rp-gbars i.b { background: var(--teal2); }
.rp-gbars i.v12 { height: 41%; }
.rp-gbars i.v13 { height: 45%; }
.rp-gbars i.v14 { height: 48%; }
.rp-gbars i.v25 { height: 86%; }
.rp-gbars i.v29 { height: 100%; }
.rp-gaxis {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 2px 0 5px; font-family: var(--mono); font-size: 5px; color: var(--lm); text-align: center;
}
.rp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 7px; border-top: 1px solid var(--lb);
  font-family: var(--mono); font-size: 5.5px; color: var(--lm); letter-spacing: 0.04em;
}
/* Processing status above the fan, which clears once the pages are built */
.wp-status {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 8.5px; color: rgba(236,236,246,0.7);
  letter-spacing: 0.04em; opacity: 0;
}
.wp-status-bar { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.14); overflow: hidden; }
.wp-status-bar i { display: block; height: 100%; width: 100%; border-radius: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: left; }

/* ─── MOTION ──────────────────────────────────────────────────────────────
   One 11s cycle shared by all three previews, expressed in percentages so
   the cards stay choreographed together. Starts on .visible (the reveal
   observer), so nothing animates off-screen. */
.way-card.visible .wm-type {
  animation: wayType 11s steps(9, end) infinite, wayCaret 0.78s steps(1) infinite;
}
.way-card.visible .wm-tabs span { animation: wayPop 11s ease both infinite; }
.way-card.visible .wm-tabs span:nth-child(2) { animation-delay: 0.12s; }
.way-card.visible .wm-tabs span:nth-child(3) { animation-delay: 0.24s; }
.way-card.visible .wm-tabs span:nth-child(1) { animation: wayPop 11s ease both infinite, wayTabOff 11s steps(1) both infinite; }
.way-card.visible .wm-tabs span:nth-child(2) { animation: wayPop 11s ease both infinite, wayTabOn 11s steps(1) both infinite; animation-delay: 0.12s; }
.way-card.visible .wm-pane--profile { animation: wayPaneOut 11s ease both infinite; }
.way-card.visible .wm-pane--investors { animation: wayPaneIn 11s ease both infinite; }
.way-card.visible .wm-inv-row { animation: wayRowLate 11s ease both infinite; }
.way-card.visible .wm-inv-row + .wm-inv-row { animation-delay: 0.16s; }
.way-card.visible .wm-inv-row + .wm-inv-row + .wm-inv-row { animation-delay: 0.32s; }
/* The profile frame has to be complete before the panel swaps at 55%, so
   its sequence is tighter than the panes that own a whole cycle. */
.way-card.visible .wm-kpi { animation: wayPop 11s ease both infinite; animation-delay: 0.15s; }
.way-card.visible .wm-kpi:nth-child(2) { animation-delay: 0.3s; }
.way-card.visible .wm-kpi:nth-child(3) { animation-delay: 0.45s; }
.way-card.visible .wm-pane--profile .wm-bd-lbl { animation: wayRow 11s ease both infinite; animation-delay: -0.9s; }
.way-card.visible .wm-bd-row { animation: wayRow 11s ease both infinite; }
.way-card.visible .wm-bd-row + .wm-bd-row { animation-delay: 0.15s; }
.way-card.visible .wm-bd-row + .wm-bd-row + .wm-bd-row { animation-delay: 0.3s; }
.way-card.visible .wm-pane--investors .wm-bd-lbl { animation: wayFade 11s ease both infinite; animation-delay: 0.1s; }

.way-card.visible .wm-q { animation: wayPop 11s ease both infinite; }
.way-card.visible .wm-dots { animation: wayThink 11s ease both infinite; }
.way-card.visible .wm-dots i { animation: wayBlip 1.1s ease-in-out infinite; }
.way-card.visible .wm-dots i:nth-child(2) { animation-delay: 0.16s; }
.way-card.visible .wm-dots i:nth-child(3) { animation-delay: 0.32s; }
.way-card.visible .wm-a-body p { animation: wayWipe 11s ease both infinite; animation-delay: 0.1s; }
.way-card.visible .wm-line { animation: wayWipe 11s ease both infinite; }
.way-card.visible .wm-line:nth-of-type(1) { animation-delay: 0.3s; }
.way-card.visible .wm-line:nth-of-type(2) { animation-delay: 0.5s; }
.way-card.visible .wm-line:nth-of-type(3) { animation-delay: 0.7s; }
.way-card.visible .wm-line:nth-of-type(4) { animation-delay: 0.9s; }
.way-card.visible .wm-link { animation: wayFade 11s ease both infinite; animation-delay: 1.1s; }
.way-card.visible .wm-scan span { animation: wayScan 11s ease both infinite; }
.way-card.visible .wm-scan span:nth-child(2) { animation-delay: 0.45s; }
.way-card.visible .wm-scan span:nth-child(3) { animation-delay: 0.9s; }

.way-card.visible .wp-status { animation: wayStatus 11s ease both infinite; }
.way-card.visible .wp-status-bar i { animation: wayProgress 11s ease both infinite; }
.way-card.visible .wp-front { animation: wayPage 11s cubic-bezier(.2,.7,.3,1) both infinite; }
.way-card.visible .wp-b1 { animation: wayPageL 11s cubic-bezier(.2,.7,.3,1) both infinite; }
.way-card.visible .wp-b3 { animation: wayPageR 11s cubic-bezier(.2,.7,.3,1) both infinite; }
.way-card.visible .rp-stat { animation: wayPop 11s ease both infinite; animation-delay: 0.5s; }
.way-card.visible .rp-stat:nth-child(2) { animation-delay: 0.64s; }
.way-card.visible .rp-stat:nth-child(3) { animation-delay: 0.78s; }
.way-card.visible .wp-front .rp-para i { animation: wayWipe 11s ease both infinite; }
.way-card.visible .wp-front .rp-para i:nth-child(2) { animation-delay: 0.14s; }
.way-card.visible .wp-front .rp-para i:nth-child(3) { animation-delay: 0.28s; }
.way-card.visible .wp-front .rp-para i:nth-child(4) { animation-delay: 0.42s; }

@keyframes wayType {
  0%, 3% { width: 0; }
  22%, 93% { width: 6.9ch; }
  97%, 100% { width: 0; }
}
@keyframes wayCaret {
  0%, 49% { border-right-color: var(--purpled); }
  50%, 100% { border-right-color: transparent; }
}
@keyframes wayPop {
  0%, 24% { opacity: 0; transform: translateY(5px) scale(0.97); }
  31%, 94% { opacity: 1; transform: none; }
  99%, 100% { opacity: 0; transform: translateY(5px) scale(0.97); }
}
@keyframes wayTabOff {
  0%, 58% { background: var(--white); color: var(--lt); box-shadow: 0 0 0 1px var(--lb); }
  59%, 100% { background: var(--surface); color: var(--lm); box-shadow: none; }
}
@keyframes wayTabOn {
  0%, 58% { background: var(--surface); color: var(--lm); box-shadow: none; }
  59%, 100% { background: var(--white); color: var(--lt); box-shadow: 0 0 0 1px var(--lb); }
}
@keyframes wayPaneOut {
  0%, 57% { opacity: 1; }
  63%, 100% { opacity: 0; }
}
@keyframes wayPaneIn {
  0%, 57% { opacity: 0; }
  63%, 94% { opacity: 1; }
  99%, 100% { opacity: 0; }
}
@keyframes wayScan {
  0%, 28% { opacity: 0; transform: translateY(4px); }
  34%, 94% { opacity: 1; transform: none; }
  99%, 100% { opacity: 0; transform: translateY(4px); }
}
@keyframes wayRowLate {
  0%, 63% { opacity: 0; transform: translateY(6px); }
  71%, 94% { opacity: 1; transform: none; }
  99%, 100% { opacity: 0; transform: translateY(6px); }
}
@keyframes wayRow {
  0%, 34% { opacity: 0; transform: translateY(6px); }
  43%, 94% { opacity: 1; transform: none; }
  99%, 100% { opacity: 0; transform: translateY(6px); }
}
@keyframes wayThink {
  0%, 29% { opacity: 0; height: 0; }
  33%, 46% { opacity: 1; height: 16px; }
  51%, 100% { opacity: 0; height: 0; }
}
@keyframes wayBlip {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}
@keyframes wayWipe {
  0%, 47% { opacity: 0; clip-path: inset(0 100% 0 0); }
  58%, 94% { opacity: 1; clip-path: inset(0 0 0 0); }
  99%, 100% { opacity: 0; clip-path: inset(0 100% 0 0); }
}
@keyframes wayFade {
  0%, 62% { opacity: 0; }
  70%, 94% { opacity: 1; }
  99%, 100% { opacity: 0; }
}
@keyframes wayProgress {
  0% { transform: scaleX(0); }
  34%, 94% { transform: scaleX(1); }
  99%, 100% { transform: scaleX(0); }
}
@keyframes wayStatus {
  0%, 4% { opacity: 0; }
  8%, 36% { opacity: 1; }
  44%, 100% { opacity: 0; }
}
@keyframes wayPage {
  0%, 16% { opacity: 0; transform: translateY(16px) rotate(-1deg) scale(0.96); }
  28%, 94% { opacity: 1; transform: rotate(-1deg); }
  99%, 100% { opacity: 0; transform: translateY(16px) rotate(-1deg) scale(0.96); }
}
@keyframes wayPageL {
  0%, 26% { opacity: 0; transform: rotate(0deg) translate(30%, 14px); }
  38%, 94% { opacity: 1; transform: rotate(-6deg) translateY(10px); }
  99%, 100% { opacity: 0; transform: rotate(0deg) translate(30%, 14px); }
}
@keyframes wayPageR {
  0%, 34% { opacity: 0; transform: rotate(0deg) translate(-30%, 26px); }
  46%, 94% { opacity: 1; transform: rotate(6deg) translateY(22px); }
  99%, 100% { opacity: 0; transform: rotate(0deg) translate(-30%, 26px); }
}

@media (prefers-reduced-motion: reduce) {
  .ways *, .ways *::before, .ways *::after { animation: none !important; }
  .wm-dots { display: none; }
}

@media (max-width: 1080px) {
  .way-card { padding: 24px 20px 22px; }
  .ways-grid { gap: 16px; }
}
@media (max-width: 900px) {
  .ways { padding: 72px 0 68px; }
  .ways-hd { margin-bottom: 34px; }
  .ways-grid { grid-template-columns: 1fr; gap: 18px; }
  /* Stacked cards are far wider than the previews need — cap them so the
     table, bubbles and report fan keep their proportions. */
  .way-mock { max-width: 520px; }
  /* The pages carry a fixed amount of copy, so on a narrow card they need a
     larger share of the width or the page clips its own footer. */
  .way-stack { max-width: 460px; }
  .wp-front, .wp-side { width: 64%; }
}
@media (max-width: 380px) {
  /* The third KPI label is the first thing to crowd on a small phone. */
  .wm-kpi b { font-size: 14px; }
  .wm-kpi b.txt { font-size: 9.5px; }
}

/* ============================================================
   BENTO GRID  (.bento / .bt)
   ------------------------------------------------------------
   Product-screen tiles on the soft gradients the engagement
   tracker uses for its feature visuals. A 12-column grid: size
   tiles with .bt-12 / -8 / -7 / -6 / -5 / -4 / -3, add .bt-r2 to
   span two rows. A tile holds an optional .bt-hd label and a
   .bt-shot with a white .bt-panel inside; .bt-shot--br bleeds the
   panel off the right and bottom edges, --b off the bottom only,
   --in keeps it inside. Stat and chip tiles use .bt--white (on
   tinted sections) or .bt--light (on white sections).
   ============================================================ */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.bt { position: relative; overflow: hidden; border-radius: var(--rxl); min-width: 0; display: flex; flex-direction: column; }
.bt::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 55% at 22% 0%, rgba(255,255,255,0.16) 0%, transparent 60%); }
.bt > * { position: relative; z-index: 1; }
.bt-12 { grid-column: span 12; }
.bt-8  { grid-column: span 8; }
.bt-7  { grid-column: span 7; }
.bt-6  { grid-column: span 6; }
.bt-5  { grid-column: span 5; }
.bt-4  { grid-column: span 4; }
.bt-3  { grid-column: span 3; }
.bt-r2 { grid-row: span 2; }

.bt--violet { background: linear-gradient(135deg, #7B70C4 0%, #A199D9 100%); }
.bt--mint   { background: linear-gradient(225deg, #8FD3C0 0%, #5BA793 100%); }
.bt--blue   { background: linear-gradient(160deg, #8193D0 0%, #AEBBE6 100%); }
.bt--plum   { background: linear-gradient(315deg, #9A73B5 0%, #BA9BCD 100%); }
.bt--sage   { background: linear-gradient(120deg, #5A8E80 0%, #7DB0A1 100%); }
.bt--white  { background: var(--white); border: 1px solid var(--lb); }
.bt--light  { background: var(--surface); border: 1px solid var(--lb); }
.bt--white::before, .bt--light::before { display: none; }

.bt-hd { padding: 26px 28px 0; color: #fff; }
.bt-hd h3 { font-family: var(--serif); font-size: 19px; font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; color: inherit; margin: 0; }
.bt-hd p { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.86); margin: 8px 0 0; max-width: 440px; }
.bt--white .bt-hd, .bt--light .bt-hd { color: var(--lt); }
.bt--white .bt-hd p, .bt--light .bt-hd p { color: var(--lbo); }

.bt-shot { flex: 1; display: flex; flex-direction: column; margin-top: 22px; }
.bt-shot--br { padding-left: 28px; }
.bt-shot--b  { padding: 0 28px; }
.bt-shot--in { padding: 0 28px 28px; }
.bt-panel { flex: 1; background: var(--white); border: 1px solid rgba(255,255,255,0.5); border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(14,19,48,0.09), 0 24px 56px rgba(10,10,40,0.22), 0 2px 10px rgba(10,10,40,0.08); }
.bt-shot--br .bt-panel { margin: 0 -28px -28px 0; border-radius: 14px 0 0 0; }
.bt-shot--b .bt-panel  { margin-bottom: -28px; border-radius: 14px 14px 0 0; }
.bt-body { padding: 0 28px 28px; margin-top: auto; }

.bt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-chip { font-size: 12px; font-weight: 600; color: var(--purpled); background: rgba(108,77,240,0.08); border: 1px solid rgba(108,77,240,0.16); border-radius: 100px; padding: 6px 12px; }

/* Fixed-size demo canvas (/_mockups/*) scaled to the width of its frame.
   Set --w/--h to the canvas size; a page script sets the iframe scale. */
.mf { position: relative; width: 100%; aspect-ratio: var(--w) / var(--h); overflow: hidden; border-radius: 13px; background: var(--white);
  box-shadow: 0 0 0 1px rgba(14,19,48,0.09), 0 24px 56px rgba(10,10,40,0.22), 0 2px 10px rgba(10,10,40,0.08); }
.mf iframe { position: absolute; top: 0; left: 0; border: 0; display: block; transform-origin: top left; }

@media (max-width: 1040px) {
  .bt-12, .bt-8, .bt-7, .bt-6, .bt-5 { grid-column: span 12; }
  .bt-4, .bt-3 { grid-column: span 6; }
  .bt-r2 { grid-row: auto; }
}
@media (max-width: 640px) {
  .bento { gap: 14px; }
  .bt-4, .bt-3 { grid-column: span 12; }
  .bt-hd { padding: 22px 20px 0; }
  .bt-shot--br { padding-left: 20px; }
  .bt-shot--b, .bt-shot--in { padding-left: 20px; padding-right: 20px; }
  .bt-shot--in { padding-bottom: 20px; }
  .bt-shot--br .bt-panel { margin: 0 -20px -20px 0; }
  .bt-shot--b .bt-panel { margin-bottom: -20px; }
  .bt-body { padding: 0 20px 22px; }
}

/* Replay button on product demo embeds (added by /_includes/demo-embeds.js) */
.demo-replay { position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 34px; height: 34px; border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--navy); background: rgba(255,255,255,0.92);
  box-shadow: 0 0 0 1px rgba(14,19,48,0.1), 0 4px 14px rgba(10,10,40,0.16); animation: demoReplayIn .3s ease-out; transition: background .2s, color .2s, transform .2s; }
.demo-replay[hidden] { display: none; }
.demo-replay:hover { background: var(--navy); color: var(--teal); transform: rotate(-30deg); }
.demo-replay:focus-visible { outline: 2px solid var(--teal2); outline-offset: 2px; }
@keyframes demoReplayIn { from { opacity: 0; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) {
  .demo-replay { animation: none; transition: none; }
  .demo-replay:hover { transform: none; }
}

/* ─── LEGAL PAGES (body.legal-page) ───
   Privacy Policy, Terms of Service and Cookie Policy. Scoped to the body class
   because .hero and .wrap are generic names other pages define for themselves. */
.legal-page {
  --purple-hover: #4A3275;
  --faint:        #A4B0C5;
  line-height: 1.7; overflow-x: hidden; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
/* design-system.css carries element-level heading defaults and a 70ch cap on
   <p>; reset them so these rules control type. */
.legal-page h1, .legal-page h2, .legal-page h3, .legal-page h4, .legal-page h5, .legal-page h6 { font-family: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
.legal-page p { max-width: none; }
.legal-page ::selection { background: rgba(108,77,240,0.16); color: var(--lt); }

/* One narrow measure for the whole page, so the title sits directly above the
   text it introduces. */
.legal-page .wrap { max-width: 812px; margin: 0 auto; padding: 0 32px; }

/* Hero: the brand gradient at a fraction of the product-page height, type only */
.legal-page .hero {
  position: relative; overflow: hidden;
  padding: 132px 0 62px;
  background:
    radial-gradient(ellipse 60% 80% at 78% 18%, rgba(138,104,255,0.5) 0%, rgba(123,91,245,0.18) 45%, transparent 68%),
    radial-gradient(ellipse 55% 75% at -6% 90%, rgba(91,124,250,0.4) 0%, transparent 60%),
    linear-gradient(150deg, #2C1F76 0%, #3A2596 34%, #45309F 58%, #241B63 100%);
}
.legal-page .site-nav { background: rgba(30,20,90,0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.legal-page .hero h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 4.6vw, 58px);
  font-weight: 400; line-height: 1.05; letter-spacing: -0.03em;
  color: var(--ink); margin: 0 0 18px;
}
.legal-page .hero h1 em { font-style: normal; color: var(--teal); }
.legal-page .hero-sub { font-size: 17.5px; font-weight: 300; line-height: 1.7; color: rgba(236,236,246,0.85); margin: 0; }
.legal-page .hero-updated {
  margin: 26px 0 0; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(236,236,246,0.6);
}

/* Document: text straight on the page background, no card, no rail */
.pp-body { background: var(--white); padding: 72px 0 104px; }
.pp-intro { padding-bottom: 34px; margin-bottom: 8px; border-bottom: 1px solid var(--lb); }
.pp-sec { scroll-margin-top: 100px; }
.pp-sec + .pp-sec { margin-top: 54px; }
.pp-intro + .pp-sec { margin-top: 44px; }
.pp-h2 {
  font-family: var(--serif); font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 400; line-height: 1.22; letter-spacing: -0.02em;
  color: var(--lt); margin: 0 0 18px;
}
/* Plain number prefix: the documents cross-reference sections by number */
.pp-h2-n { color: var(--faint); margin-right: 10px; font-variant-numeric: tabular-nums; }
.pp-h3 {
  font-family: var(--serif); font-size: 17.5px; font-weight: 500;
  letter-spacing: -0.015em; line-height: 1.3;
  color: var(--lt); margin: 28px 0 8px;
}
.pp-h3:first-of-type { margin-top: 0; }
.pp-doc p { font-size: 16px; font-weight: 300; line-height: 1.75; color: var(--lbo); margin: 0 0 16px; }
.pp-doc a { color: var(--purpled); font-weight: 400; text-decoration: none; border-bottom: 1px solid rgba(108,77,240,0.32); }
.pp-doc a:hover { color: var(--purple-hover); border-bottom-color: var(--purpled); }
.pp-doc strong { font-weight: 600; color: var(--lt); }
.pp-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.pp-list li { position: relative; padding-left: 20px; font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--lbo); }
.pp-list li::before { content: ''; position: absolute; left: 3px; top: 12px; width: 4px; height: 4px; border-radius: 50%; background: var(--faint); }
/* term-led list: "Contact information. Information that ..." */
.pp-deflist { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.pp-deflist li { font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--lbo); }
.pp-deflist b { font-weight: 600; color: var(--lt); }
/* pull-out note: a rule in the margin, not a panel */
.pp-note { margin: 20px 0; padding: 2px 0 2px 20px; border-left: 2px solid var(--lb2); }
.pp-note p { margin: 0; font-size: 15px; color: var(--lm); }
/* contact details block */
.pp-contact { margin: 22px 0 24px; border-top: 1px solid var(--lb); }
.pp-contact-row { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--lb); font-size: 15px; line-height: 1.6; }
.pp-contact-row dt { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); padding-top: 5px; }
.pp-contact-row dd { margin: 0; font-weight: 300; color: var(--lbo); }
/* cookie table (Cookie Policy) */
.pp-table-wrap { overflow-x: auto; margin: 4px 0 22px; }
.pp-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.55; }
.pp-table th { text-align: left; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); padding: 0 14px 10px 0; border-bottom: 1px solid var(--lb); }
.pp-table td { vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--lb); font-weight: 300; color: var(--lbo); }
.pp-table td:first-child { font-family: var(--mono); font-size: 13px; color: var(--lt); white-space: nowrap; }
.pp-doc .pp-btn { font: inherit; font-size: 15px; font-weight: 500; color: var(--white); background: var(--navy); border: none; border-radius: 6px; padding: 10px 18px; cursor: pointer; }
.pp-doc .pp-btn:hover { background: var(--purpled); }

@media (max-width: 768px) {
  .legal-page .wrap { padding: 0 20px; }
  .legal-page .hero { padding: 108px 0 48px; }
  .pp-body { padding: 48px 0 72px; }
  .pp-sec + .pp-sec { margin-top: 42px; }
  .pp-h2-n { display: block; margin: 0 0 4px; font-size: 0.72em; }
  .pp-contact-row { grid-template-columns: minmax(0,1fr); gap: 3px; padding: 11px 0; }
}

/* ─── COOKIE CONSENT BANNER ───
   Built by /_includes/components.js, only when analytics is configured.
   Accept and Reject carry equal weight, as UK consent rules require. */
.cookie-banner {
  position: fixed; z-index: 1000; left: 16px; right: 16px; bottom: 16px;
  max-width: 560px; margin-left: auto;
  background: var(--navy); color: var(--ink);
  border-radius: 12px; padding: 20px 22px;
  box-shadow: 0 12px 40px rgba(10,10,40,0.35), 0 0 0 1px rgba(255,255,255,0.08);
  font-family: var(--sans);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0 0 14px; max-width: none; font-size: 14.5px; font-weight: 300; line-height: 1.6; color: rgba(247,248,255,0.86); }
.cookie-banner a { color: var(--teal); }
.cookie-banner-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-banner button {
  flex: 1 1 120px; font: inherit; font-size: 14.5px; font-weight: 600;
  padding: 10px 16px; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(247,248,255,0.4); background: transparent; color: var(--ink);
}
.cookie-banner button:hover { border-color: var(--teal); color: var(--teal); }
.cookie-banner button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ─── WEBSITE FORMS (/api/lead) ───
   Honeypot field: off-screen for people, still filled in by many bots.
   .form-done replaces a form once it has sent; .form-error follows it.
   Both inherit colour so they read on light and dark sections. */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-done { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.6; }
.form-error { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: #E5484D; }

/* Form popup (<dialog class="lead-dialog">). The "Explore the database" form
   lives in _components/footer.html and opens from any [data-explore] link;
   components.js handles opening, closing and sending. */
.lead-dialog {
  width: min(420px, calc(100vw - 32px)); padding: 30px 30px 26px;
  inset: 0; margin: auto;
  border: 1px solid var(--lb); border-radius: var(--rl);
  background: var(--white); color: var(--lt);
  box-shadow: 0 24px 64px rgba(10,10,40,0.24);
}
.lead-dialog::backdrop { background: rgba(8,14,28,0.55); }
.lead-dialog-close {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border-radius: 8px;
  background: none; border: none; color: var(--lm); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.lead-dialog-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lead-dialog-close:hover { background: var(--surface); color: var(--lt); }
.lead-dialog-title {
  font-family: var(--serif); font-size: 22px; font-weight: 500;
  letter-spacing: -0.015em; color: var(--lt); margin: 0 30px 6px 0;
}
.lead-dialog-sub { font-size: 13.5px; font-weight: 300; color: var(--lbo); line-height: 1.6; margin: 0 0 20px; }
.lead-field { margin-bottom: 12px; }
.lead-field label {
  display: block; font-family: var(--sans); font-size: 12.5px; font-weight: 500;
  color: var(--lt); margin-bottom: 5px;
}
.lead-field input, .lead-field select {
  width: 100%; font-family: var(--sans); font-size: 14px; color: var(--lt);
  background: var(--white); border: 1px solid var(--lb); border-radius: 9px;
  padding: 10px 13px; transition: border-color 0.2s, box-shadow 0.2s;
}
.lead-field select {
  -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A7290' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
}
.lead-field select:invalid { color: var(--lm); }
.lead-field input:focus, .lead-field select:focus {
  outline: none; border-color: var(--purpled);
  box-shadow: 0 0 0 3px rgba(108,77,240,0.12);
}
.lead-submit {
  width: 100%; margin-top: 6px;
  background: var(--teal-btn); color: var(--white);
  border: none; border-radius: var(--r); padding: 12px 24px;
  font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer; transition: background 0.2s;
}
.lead-submit:hover { background: var(--teal-btn-hover); }
.lead-submit:focus-visible { outline: 2px solid var(--teal2); outline-offset: 3px; }
.lead-submit[disabled] { opacity: 0.7; cursor: default; }
.lead-fine { font-size: 11px; font-weight: 300; color: var(--lm); line-height: 1.55; margin: 12px 0 0; }
.lead-fine a { color: var(--lm); text-decoration: underline; }
.lead-dialog .form-done { color: var(--teal2); }

/* ============================================================
   COMPANY DETAILS — legal name, company number and registered office,
   shown on About and Contact (the legal pages use .pp-contact).
   <dl class="co-details"> on light backgrounds; add --dark on navy/purple.
   ============================================================ */
.co-details { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--lb); display: grid; gap: 8px; font-size: 14px; line-height: 1.55; }
.co-details > div { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 12px; }
.co-details dt { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lm); padding-top: 3px; }
.co-details dd { margin: 0; font-weight: 300; color: var(--lbo); }
.co-details--dark { border-top-color: rgba(255,255,255,0.14); }
.co-details--dark dt { color: var(--ink3); }
.co-details--dark dd { color: var(--ink2); }
.co-details--dark a { color: var(--teal); }
@media (max-width: 520px) {
  .co-details > div { grid-template-columns: minmax(0,1fr); gap: 2px; }
}