/* ==========================================================================
   Search Intelligence v2 — design system CSS
   Source: core/DESIGN_SYSTEM.md. Component classes below map 1:1 onto the
   patterns documented there; see that file for the rationale behind each
   value. Real @media queries are used throughout (the DC runtime's
   isMobile-JS-only constraint was specific to that authoring tool, not a
   WordPress requirement).
   ========================================================================== */

:root {
  --si-bg-light: #F3F4F5;
  --si-surface: #FFFFFF;
  --si-graphite: #373E46;
  --si-body-text: #5F6163;
  --si-muted: #808182;
  --si-muted-2: #9FA2A4;
  --si-muted-3: #6E6F6F;
  --si-border: #E2E4E6;
  --si-accent: #2F8FEF;
  --si-accent-secondary: #5F7FA6;
  --si-accent-on-dark: #8FBCE8;
  --si-text-on-dark: #C6CBD1;
  --si-warning: #A6534B;
  --si-tint-1: #E4EDF6;
  --si-tint-1-border: #C9DDF0;
  --si-tint-2: #CFE0F1;
  --si-tint-2-border: #B4D0EA;
  --si-radius-sm: 8px;
  --si-radius-card: 10px;
  --si-radius-lg: 14px;
  --si-radius-pill: 999px;
  --si-content-max: 1180px;
  --si-section-y: clamp(48px, 9vw, 100px);
  --si-section-x: clamp(20px, 6vw, 64px);
  --si-header-height: 64px;
  --si-nav-accent: transparent;
  --si-admin-bar-offset: 0px;
}

/* WordPress's admin toolbar (#wpadminbar) is position:fixed at top:0 with a
   very high z-index whenever the viewer is logged in. Our header is also
   position:sticky at top:0, so once it sticks it lands directly underneath
   the admin bar and appears to vanish on scroll. Offset by the admin bar's
   own height (WP's own breakpoint: 32px desktop, 46px at <=782px) only when
   body carries the admin-bar class WP adds automatically — logged-out
   visitors are never affected. */
body.admin-bar { --si-admin-bar-offset: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar { --si-admin-bar-offset: 46px; }
}

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

body {
  margin: 0;
  background: var(--si-bg-light);
  color: var(--si-body-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }

a { color: var(--si-accent); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--si-accent-secondary); }

/* overflow-wrap:break-word — a single long word (a sector name like
   "Telecommunications", "Pharmaceutical") in a large heading has no space
   to break on, so default wrapping rules let it run past its container's
   edge rather than wrap it. That doesn't show up in the element's own
   getBoundingClientRect() (its layout box stays at the container width),
   but the painted text still forces horizontal page-scroll on mobile. This
   was the single largest source of the mobile-overflow pages found in this
   audit — confirmed by removing it and re-measuring, not guessed. */
h1, h2, h3, h4 { color: var(--si-graphite); margin: 0; overflow-wrap: break-word; }
h1 { font-size: clamp(38px, 5.5vw, 64px); font-weight: 650; line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: clamp(28px, 3.6vw, 39px); font-weight: 600; line-height: 1.18; letter-spacing: -0.01em; }
h3 { font-size: 24px; font-weight: 600; }

.si-container { max-width: var(--si-content-max); margin: 0 auto; padding: 0 var(--si-section-x); }

/* --- Sections ------------------------------------------------------------ */
.section {
  padding: var(--si-section-y) var(--si-section-x);
  background: var(--si-bg-light);
}
.section > .si-container:first-child,
.section.section--has-card { padding-top: clamp(40px, 7vw, 70px); }
.section--surface { background: var(--si-surface); }
.section--dark {
  background: var(--si-graphite);
  color: var(--si-text-on-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: #FFFFFF; }
.section--border-top { border-top: 1px solid var(--si-border); }

.eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--si-accent-secondary);
  margin: 0 0 14px;
}
.eyebrow--dark { color: var(--si-accent-on-dark); }

.body-text { font-size: 16px; line-height: 1.65; color: var(--si-body-text); }
.body-text--onDark { color: var(--si-text-on-dark); }
.body-lg { font-size: 19px; line-height: 1.65; }

/* --- Hero ------------------------------------------------------------ */
.doc-hero { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.doc-hero__title { margin: 0; }
.doc-hero__title--lg { font-size: clamp(42px, 6vw, 68px); }
.doc-hero__lead { font-size: 19px; line-height: 1.6; color: var(--si-body-text); margin: 0; }
.hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: clamp(28px, 5vw, 56px); align-items: center; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.hero-image-wrap { border-radius: var(--si-radius-lg); overflow: hidden; }
.hero-image-frame { position: relative; width: 100%; overflow: hidden; border-radius: var(--si-radius-lg); }
.hero-image-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Buttons -------------------------------------------------------------- */
.btn-primary {
  display: inline-block;
  background: var(--si-accent);
  color: #FFFFFF;
  font-size: 15.5px;
  font-weight: 600;
  padding: 15px 28px;
  border-radius: var(--si-radius-sm);
  text-decoration: none;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
  cursor: pointer;
}
.btn-primary:hover { background: var(--si-accent-secondary); color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(47,143,239,0.30); }
.btn-primary--block { display: block; width: 100%; }
.btn-primary--small { padding: 11px 20px; font-size: 14px; }

.btn-secondary {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--si-accent-secondary);
  color: var(--si-graphite);
  font-size: 15.5px;
  font-weight: 500;
  padding: 14px 28px;
  border-radius: var(--si-radius-sm);
  text-decoration: none;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.btn-secondary:hover { background: var(--si-tint-1); color: var(--si-graphite); transform: translateY(-2px); }
.btn-secondary--block { display: block; width: 100%; }
.section--dark .btn-secondary { border-color: var(--si-accent-on-dark); color: #FFFFFF; }
.section--dark .btn-secondary:hover { background: var(--si-accent-secondary); color: #FFFFFF; }

.link-arrow { color: var(--si-accent); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: transform 0.2s ease, color 0.2s ease; }
.link-arrow:hover { transform: translateX(5px); color: var(--si-accent-secondary); }
.link-arrow--onDark { color: var(--si-accent-on-dark); }

/* --- SI-CTA (SI-CTA.dc.html) ---------------------------------------------- */
.si-cta-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: var(--si-cta-align, flex-start);
  max-width: var(--si-cta-max-width, 720px);
}
.si-cta-group__supporting { font-size: 16px; line-height: 1.65; color: var(--si-body-text); margin: 0; max-width: 640px; }
.si-cta-group__supporting--dark { color: var(--si-text-on-dark); }
.si-cta-group__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--si-accent-secondary); }
.si-cta-group__eyebrow--dark { color: var(--si-accent-on-dark); }
.si-cta-group__row { display: flex; flex-direction: row; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.si-cta-group__microcopy { font-size: 13.5px; line-height: 1.55; color: var(--si-muted); margin: 0; max-width: 560px; }

.si-cta {
  font-size: 15.5px; font-weight: 600; padding: 15px 28px; border-radius: var(--si-radius-sm);
  text-decoration: none; text-align: center; line-height: 1.35; display: inline-block;
  white-space: nowrap; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.si-cta--primary { background: var(--si-accent); color: #FFFFFF; }
.si-cta--primary:hover { background: var(--si-accent-secondary); color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(47,143,239,0.30); }
.si-cta--secondary { font-weight: 500; padding: 14px 28px; background: transparent; border: 1px solid var(--si-accent-secondary); color: var(--si-graphite); }
.si-cta--secondary:hover { background: var(--si-tint-1); color: var(--si-graphite); transform: translateY(-2px); }
.si-cta--secondary-dark { border-color: var(--si-accent-on-dark); color: #FFFFFF; }
.si-cta--secondary-dark:hover { background: var(--si-accent-secondary); color: #FFFFFF; }
.si-cta__term { background: var(--si-accent-secondary); padding: 5px 12px; border-radius: var(--si-radius-pill); font-weight: 700; letter-spacing: -0.005em; white-space: nowrap; display: inline-block; margin-left: 2px; }
.si-cta--secondary .si-cta__term--outline { background: none; color: var(--si-accent); padding: 0; font-weight: 700; }
.si-cta--secondary-dark .si-cta__term--outline { color: var(--si-accent-on-dark); }
@media (max-width: 640px) {
  /* .si-cta-group sits inside various flex containers authored with
     align-items:flex-start (so the CTA block stays left-aligned and
     content-sized on desktop, where there's room to spare). Without an
     explicit width here, that same "size to content" behavior carries
     over to mobile — the group refuses to shrink below its buttons' own
     padding-driven content width and overflows its narrower container.
     Forcing it to the container's full width is what lets the buttons
     below actually respect the viewport instead of pushing past it. */
  .si-cta-group { width: 100%; }
  .si-cta-group__row { flex-direction: column; align-items: stretch; width: 100%; }
  .si-cta { width: 100%; white-space: normal; }
  /* .btn-primary/.btn-secondary are inline-block with no width set, so
     they size to fit their whole label on one line — fine on desktop,
     but a long label (e.g. "Take the Decision Confidence Diagnostic")
     doesn't fit a mobile width and overflows instead of wrapping. The
     --block modifier already does exactly what's needed here; just make
     it the default at this width instead of opt-in. */
  .btn-primary, .btn-secondary { display: block; width: 100%; }
}

/* --- Sticky mobile CTA (SI-StickyCTA.dc.html) ----------------------------- */
.si-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: #FFFFFF; border-top: 1px solid var(--si-border);
  box-shadow: 0 -8px 24px rgba(55,62,70,0.12);
  padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
}
.si-sticky-cta[hidden] { display: none; }
.si-sticky-cta__text { flex: 1; min-width: 0; }
.si-sticky-cta__label { font-size: 13.5px; font-weight: 600; color: var(--si-graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-sticky-cta__meta { font-size: 11.5px; color: var(--si-muted); }
.si-sticky-cta__button {
  background: var(--si-accent); color: #FFFFFF; font-size: 13.5px; font-weight: 600;
  padding: 11px 18px; border-radius: var(--si-radius-sm); text-decoration: none; white-space: nowrap; flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.si-sticky-cta__button:hover { background: var(--si-accent-secondary); color: #FFFFFF; transform: translateY(-2px); }
@media (min-width: 641px) { .si-sticky-cta { display: none !important; } }

/* ==========================================================================
   Header / primary nav (SI-Nav.dc.html)
   ========================================================================== */
.si-header {
  box-sizing: border-box;
  position: sticky;
  top: var(--si-admin-bar-offset);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 10px;
  padding: 14px clamp(16px, 5vw, 64px);
  background: #FFFFFF;
  border-bottom: 1px solid var(--si-border);
}
.si-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--si-nav-accent);
}
.si-header__logo-link { display: flex; align-items: center; }
.si-header__logo { height: 34px; width: auto; display: block; }

.si-nav { display: none; align-items: center; gap: clamp(10px, 2.4vw, 26px); flex-wrap: wrap; row-gap: 10px; }
.si-nav__group { position: relative; }
.si-nav__link {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--si-body-text); font-size: 15.5px; font-weight: 500; text-decoration: none; transition: color 0.2s ease;
  padding: 6px 0;
}
.si-nav__link:hover, .si-nav__link.is-current { color: var(--si-accent); font-weight: 600; }
.si-nav__caret { font-size: 10px; color: var(--si-muted-2); cursor: pointer; }

.si-nav__dropdown { display: none; position: absolute; top: 100%; left: 0; padding-top: 10px; z-index: 60; }
.si-nav__group.is-open .si-nav__dropdown { display: block; }
.si-nav__dropdown--plain {
  background: #FFFFFF; border: 1px solid var(--si-border); border-radius: var(--si-radius-card);
  box-shadow: 0 16px 40px rgba(55,62,70,0.16); padding: 10px; min-width: 250px;
  display: none; flex-direction: column;
}
.si-nav__group.is-open .si-nav__dropdown--plain { display: flex; }
.si-nav__item {
  display: block; padding: 9px 12px; border-radius: 7px; color: var(--si-graphite);
  font-size: 14px; font-weight: 500; text-decoration: none; transition: background 0.15s ease, color 0.15s ease;
}
.si-nav__item:hover { background: var(--si-bg-light); color: var(--si-accent); }
.si-nav__item--cornerstone { color: var(--si-accent); font-weight: 700; }

.si-nav__dropdown--mega {
  position: fixed; top: calc(var(--si-header-height) + var(--si-admin-bar-offset)); left: 50%; transform: translateX(-50%);
  width: min(1180px, calc(100vw - 32px));
}
.si-nav__dropdown--mega > * { background: #FFFFFF; border: 1px solid var(--si-border); border-radius: 12px; box-shadow: 0 20px 50px rgba(55,62,70,0.18); padding: 28px 30px 22px; }
.si-nav__mega-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(198px, 100%), 1fr)); gap: 22px 26px; }
.si-nav__mega-col { display: flex; flex-direction: column; gap: 4px; }
.si-nav__mega-heading {
  padding: 0 10px 8px; color: var(--si-muted-2); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; border-bottom: 1px solid var(--si-border); margin-bottom: 6px;
}
.si-nav__mega-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--si-border); margin-top: 22px; padding-top: 16px;
}
.si-nav__mega-explore { color: var(--si-accent); font-size: 14px; font-weight: 600; text-decoration: none; transition: transform 0.2s ease, color 0.2s ease; display: inline-block; }
.si-nav__mega-explore:hover { transform: translateX(5px); color: var(--si-accent-secondary); }
.si-nav__mega-diagnostic { display: flex; align-items: center; gap: 12px; }
.si-nav__mega-diagnostic span { font-size: 13px; color: var(--si-muted); }
.si-nav__mega-diagnostic-link {
  background: var(--si-tint-1); border: 1px solid var(--si-tint-1-border); border-radius: var(--si-radius-pill);
  padding: 7px 15px; color: var(--si-graphite); font-size: 13px; font-weight: 600; text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.si-nav__mega-diagnostic-link:hover { transform: translateY(-2px); border-color: var(--si-accent-secondary); color: var(--si-graphite); }

.si-nav__cta {
  background: var(--si-accent); color: #FFFFFF; font-size: 14px; font-weight: 600; padding: 10px 20px;
  border-radius: var(--si-radius-sm); text-decoration: none; white-space: nowrap; transition: background 0.2s ease, transform 0.2s ease;
}
.si-nav__cta:hover { background: var(--si-accent-secondary); color: #FFFFFF; transform: translateY(-2px); }
.si-nav__cta--mobile { font-size: 13.5px; padding: 9px 16px; }

.si-header__mobile-actions { display: flex; align-items: center; gap: 10px; }
.si-header__toggle { background: none; border: none; cursor: pointer; padding: 2px 4px; color: var(--si-graphite); font-size: 24px; line-height: 1; }

@media (min-width: 1281px) {
  .si-nav { display: flex; }
  .si-header__mobile-actions { display: none; }
}

/* --- Sub-nav pill bar (home only) ----------------------------------------- */
.si-subnav {
  display: none;
  box-sizing: border-box;
  position: sticky;
  top: calc(var(--si-header-height) + var(--si-admin-bar-offset));
  z-index: 90;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--si-border);
  padding: 8px clamp(16px, 5vw, 64px);
  overflow-x: auto;
}
.home .si-subnav { display: block; }
@media (max-width: 1280px) { .home .si-subnav { display: none; } }
.si-subnav__row { max-width: var(--si-content-max); margin: 0 auto; display: flex; align-items: center; gap: 6px; width: max-content; min-width: 100%; justify-content: center; }
.si-subnav__pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: var(--si-radius-pill);
  font-size: 13px; font-weight: 500; color: var(--si-body-text); background: transparent; text-decoration: none;
  white-space: nowrap; transition: background 0.25s ease, color 0.25s ease;
}
.si-subnav__pill.is-active { color: #FFFFFF; background: var(--si-accent); font-weight: 600; }
.si-subnav__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--si-muted-2); display: inline-block; transition: background 0.25s ease; }
.si-subnav__pill.is-active .si-subnav__dot { background: #FFFFFF; }

/* --- Mobile full-screen menu ----------------------------------------------- */
.si-mobile-menu {
  box-sizing: border-box; position: fixed; top: calc(var(--si-header-height) + var(--si-admin-bar-offset)); left: 0; right: 0; bottom: 0;
  z-index: 95; background: #FFFFFF; overflow-y: auto; padding: 8px clamp(16px, 5vw, 64px) 32px;
}
.si-mobile-menu[hidden] { display: none; }
@media (min-width: 1281px) { .si-mobile-menu { display: none !important; } }
.si-mobile-menu__group { border-bottom: 1px solid var(--si-border); }
.si-mobile-menu__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 2px; }
.si-mobile-menu__title { color: var(--si-graphite); font-size: 16px; font-weight: 600; text-decoration: none; }
.si-mobile-menu__toggle { background: none; border: none; cursor: pointer; font-size: 20px; color: var(--si-muted-2); padding: 4px 8px; }
.si-mobile-menu__items { display: none; flex-direction: column; gap: 2px; padding: 0 2px 16px 12px; }
.si-mobile-menu__items a { padding: 9px 0; color: var(--si-body-text); font-size: 14.5px; font-weight: 500; text-decoration: none; }
.si-mobile-menu__item--cornerstone { color: var(--si-accent) !important; font-weight: 700 !important; }
.si-mobile-menu__cta {
  display: block; text-align: center; background: var(--si-accent); color: #FFFFFF; font-size: 15px; font-weight: 600;
  padding: 15px 20px; border-radius: var(--si-radius-sm); text-decoration: none; margin-top: 24px; transition: background 0.2s ease, transform 0.2s ease;
}
.si-mobile-menu__cta:hover { background: var(--si-accent-secondary); color: #FFFFFF; transform: translateY(-2px); }

/* ==========================================================================
   Footer (SI-Footer.dc.html)
   ========================================================================== */
.si-footer { background: var(--si-graphite); padding: clamp(36px, 8vw, 60px) clamp(20px, 6vw, 64px) clamp(24px, 6vw, 40px); }
.si-footer__inner { max-width: var(--si-content-max); margin: 0 auto; }
.si-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 40px 32px; margin-bottom: 48px; }
.si-footer__logo { height: 30px; width: auto; display: block; filter: brightness(0) invert(1); margin-bottom: 16px; }
.si-footer__tagline { font-size: 13.5px; line-height: 1.6; color: var(--si-muted-2); margin: 0; max-width: 260px; }
.si-footer__col { display: flex; flex-direction: column; gap: 11px; }
.si-footer__heading { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--si-muted); }
.si-footer__col a { color: var(--si-text-on-dark); font-size: 13.5px; text-decoration: none; transition: color 0.2s ease; }
.si-footer__col a:hover { color: #FFFFFF; }
.si-footer__link--accent { color: var(--si-accent-on-dark) !important; font-weight: 600; }
.si-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08); padding-top: 22px; display: flex; justify-content: space-between;
  font-size: 12px; color: var(--si-muted); flex-wrap: wrap; gap: 10px;
}

/* --- Cookie consent banner -------------------------------------------------- */
.si-cookie-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  background: var(--si-graphite); border-top: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 -8px 34px rgba(24,32,40,0.30); padding: clamp(20px, 4vw, 28px) clamp(20px, 6vw, 64px);
}
.si-cookie-consent[hidden] { display: none; }
.si-cookie-consent__inner { max-width: var(--si-content-max); margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.si-cookie-consent__banner-row { display: flex; align-items: flex-start; gap: clamp(20px, 4vw, 44px); flex-wrap: wrap; justify-content: space-between; }
.si-cookie-consent__copy { flex: 1 1 0; min-width: 0; max-width: 660px; display: flex; flex-direction: column; gap: 10px; }
.si-cookie-consent__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--si-accent-on-dark); }
.si-cookie-consent__copy p, .si-cookie-consent__detail-head p { font-size: 14.5px; line-height: 1.6; color: var(--si-text-on-dark); margin: 0; }
.si-cookie-consent__policy-link { font-size: 13px; font-weight: 600; color: var(--si-accent-on-dark); text-decoration: none; }
.si-cookie-consent__policy-link:hover { color: #FFFFFF; }
.si-cookie-consent__actions { display: flex; flex-direction: row; gap: 12px; align-items: center; flex-wrap: wrap; }
@media (max-width: 640px) { .si-cookie-consent__actions { flex-direction: column; align-items: stretch; } }

.si-cookie-btn {
  font-size: 14.5px; font-weight: 600; padding: 13px 24px; border-radius: var(--si-radius-sm);
  text-align: center; white-space: nowrap; transition: all 0.2s ease; cursor: pointer; border: none;
}
.si-cookie-btn--primary { background: var(--si-accent); color: #FFFFFF; }
.si-cookie-btn--primary:hover { background: var(--si-accent-secondary); transform: translateY(-2px); }
.si-cookie-btn--outline { background: transparent; border: 1px solid var(--si-accent-on-dark); color: #FFFFFF; font-weight: 500; }
.si-cookie-btn--outline:hover { background: var(--si-accent-secondary); transform: translateY(-2px); }
.si-cookie-btn--ghost { background: transparent; border: 1px solid rgba(255,255,255,0.22); color: var(--si-text-on-dark); font-weight: 500; }
.si-cookie-btn--ghost:hover { background: rgba(255,255,255,0.07); color: #FFFFFF; transform: translateY(-2px); }
.si-cookie-btn[hidden] { display: none; }

.si-cookie-consent__detail-head { display: flex; flex-direction: column; gap: 8px; }
.si-cookie-consent__categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.si-cookie-category { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--si-radius-card); padding: 20px 22px; display: flex; flex-direction: column; gap: 9px; }
.si-cookie-category__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.si-cookie-category__title { font-size: 15px; font-weight: 600; color: #FFFFFF; }
.si-cookie-category__badge { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #FFFFFF; background: var(--si-accent-secondary); border-radius: var(--si-radius-pill); padding: 5px 12px; white-space: nowrap; }
.si-cookie-category p { font-size: 13.5px; line-height: 1.55; color: var(--si-text-on-dark); margin: 0; }
.si-cookie-switch {
  flex-shrink: 0; width: 46px; height: 26px; border-radius: var(--si-radius-pill); position: relative; cursor: pointer;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.28); transition: background 0.2s ease, border-color 0.2s ease; padding: 0;
}
.si-cookie-switch.is-on { background: var(--si-accent); border-color: var(--si-accent); }
.si-cookie-switch__knob { position: absolute; top: 2px; left: 3px; width: 18px; height: 18px; border-radius: var(--si-radius-pill); background: #FFFFFF; transition: left 0.2s ease; }
.si-cookie-switch.is-on .si-cookie-switch__knob { left: 25px; }
.si-cookie-consent__footnote { font-size: 12.5px; line-height: 1.55; color: var(--si-muted-2); margin: 0; max-width: 660px; }

/* ==========================================================================
   Side nav rail (SI-SideNav.dc.html)
   ========================================================================== */
.si-sidenav-layout { display: flex; align-items: flex-start; gap: 0; }
.si-sidenav-layout__content { flex: 1; min-width: 0; }
/* align-self: stretch (not the parent row's align-items: flex-start, which every
   page-content file's wrapper sets) is what matters here: it makes this aside
   as tall as its sibling content column instead of just its own ~one-screen
   content height. position: sticky can only hold on for as long as its own
   parent is tall — without this, the rail stops sticking and scrolls away
   with the page the moment you scroll past its un-stretched ~800px height,
   long before reaching the end of a 20+ section page. */
.si-sidenav { flex: 0 0 240px; width: 240px; align-self: stretch; }
.si-sidenav[hidden] { display: none; }
.si-sidenav nav {
  display: block; width: 100%; height: calc(100vh - var(--si-header-height) - var(--si-admin-bar-offset));
  position: sticky; top: calc(var(--si-header-height) + var(--si-admin-bar-offset));
  background: #FFFFFF; border-right: 1px solid var(--si-border); padding: 24px 20px; overflow-y: auto;
}
.si-sidenav__eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--si-muted); margin-bottom: 22px; }
.si-sidenav__list { display: flex; flex-direction: column; gap: 2px; }
.si-sidenav__link {
  display: flex; align-items: center; font-size: 13px; line-height: 1.4; text-decoration: none; padding: 8px 14px;
  border-radius: 6px; transition: all 0.2s ease; font-weight: 500; color: var(--si-body-text); background: transparent;
}
.si-sidenav__link:hover { color: var(--si-graphite); background: var(--si-bg-light); }
.si-sidenav__link.is-active { background: var(--si-accent); color: #FFFFFF; font-weight: 600; }
.si-sidenav__num { font-weight: 700; margin-right: 6px; }
@media (max-width: 900px) { .si-sidenav { display: none; } }

/* ==========================================================================
   Cards / tag-pills / tables / grids
   ========================================================================== */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 22px; }
.card {
  background: #FFFFFF; border: 1px solid var(--si-border); border-radius: var(--si-radius-card);
  padding: 24px 26px; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(55,62,70,0.10); }
.section--surface .card, .section--dark .card { background: var(--si-bg-light); }
.card--featured { border: 1.5px solid var(--si-accent); }
.card--onDark { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
.card__title { font-size: 20px; font-weight: 600; color: var(--si-graphite); margin: 0 0 10px; }
.section--dark .card__title { color: #FFFFFF; }
.card__number {
  display: inline-block; background: var(--si-accent); color: #FFFFFF; font-size: 12px; font-weight: 700;
  border-radius: var(--si-radius-pill); padding: 4px 12px; margin-bottom: 10px;
}

.link-card { display: block; background: #FFFFFF; border: 1px solid var(--si-border); border-radius: var(--si-radius-card); padding: 22px 24px; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.link-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(55,62,70,0.10); }
.link-card__eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--si-muted); margin-bottom: 8px; }
.link-card__title { font-size: 14.5px; font-weight: 600; color: var(--si-graphite); margin: 0 0 8px; }
.link-card__body { font-size: 13px; line-height: 1.5; color: var(--si-body-text); margin: 0 0 12px; }
.link-card__cta { color: var(--si-accent); font-size: 13px; font-weight: 600; }

.dash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dash-list__item { padding-left: 18px; position: relative; font-size: 15px; line-height: 1.55; color: var(--si-body-text); }
.dash-list__item::before { content: "–"; position: absolute; left: 0; color: var(--si-accent-secondary); }
.numbered-list { list-style: none; margin: 0; padding: 0; counter-reset: si-num; display: flex; flex-direction: column; gap: 12px; }
.numbered-list li { counter-increment: si-num; padding-left: 30px; position: relative; }
.numbered-list li::before { content: counter(si-num, decimal-leading-zero); position: absolute; left: 0; color: var(--si-accent); font-weight: 700; }

.tag-pill-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-pill { background: var(--si-tint-1); border: 1px solid var(--si-tint-1-border); color: var(--si-graphite); border-radius: var(--si-radius-pill); padding: 5px 11px; font-size: 12.5px; font-weight: 500; }
.tag-pill--accent { background: var(--si-tint-1); border-color: var(--si-tint-1-border); }
.tag-pill--neutral { background: #FFFFFF; border: 1px solid var(--si-border); color: var(--si-body-text); }

.blockquote-rule { border-left: 3px solid var(--si-accent); padding-left: 22px; font-size: 19px; line-height: 1.5; color: var(--si-graphite); margin: 0; }
.section--dark .blockquote-rule { color: #FFFFFF; border-left-color: var(--si-accent-on-dark); }

table { border-collapse: collapse; width: 100%; min-width: 560px; border-radius: var(--si-radius-card); overflow: hidden; box-shadow: 0 2px 6px rgba(55,62,70,0.07); }
.si-table-wrap { overflow-x: auto; }
th { background: var(--si-graphite); color: #FFFFFF; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 16px 20px; text-align: left; }
td { font-size: 15px; line-height: 1.55; color: var(--si-body-text); padding: 14px 20px; border-top: 1px solid var(--si-border); }
td:first-child { font-weight: 600; color: var(--si-graphite); }
.section--bg-light table { background: #FFFFFF; }
.section--bg-light tbody tr:nth-child(even) { background: #F7F9FB; }
.section--surface table { background: var(--si-bg-light); }
.section--surface tbody tr:nth-child(even) { background: #FFFFFF; }
.section--dark table { background: rgba(255,255,255,0.05); }
.section--dark th { background: rgba(47,143,239,0.30); border-bottom: 1px solid rgba(255,255,255,0.18); }
.section--dark td { color: var(--si-text-on-dark); border-top-color: rgba(255,255,255,0.08); }
.section--dark td:first-child { color: #FFFFFF; }
.section--dark tbody tr:nth-child(even) { background: rgba(255,255,255,0.04); }

/* ==========================================================================
   Layer-tile framework (Visibility / Trust / Influence / Demand / Authority)
   ========================================================================== */
.layer-framework { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; }
.layer-card { border-radius: 12px; padding: 28px 30px; display: flex; flex-direction: column; gap: 14px; transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid; }
.layer-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(55,62,70,0.10); }
.layer-card--visibility { background: #FFFFFF; border-color: #C9DDF0; }
.layer-card--trust { background: #EDF3FA; border-color: #C9DDF0; }
.layer-card--influence { background: #E4EDF6; border-color: #C9DDF0; }
.layer-card--demand { background: #CFE0F1; border-color: #B4D0EA; }
.layer-card__head { display: flex; align-items: center; gap: 12px; }
.layer-card__num { background: var(--si-accent); color: #FFFFFF; font-weight: 700; font-size: 13px; border-radius: var(--si-radius-pill); padding: 4px 12px; }
.layer-card__name { color: var(--si-accent-secondary); font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; }
.layer-card__question { font-size: 21px; font-weight: 600; color: var(--si-graphite); margin: 0; }
.layer-card__summary { font-size: 14.5px; font-weight: 500; color: var(--si-graphite); margin: 0; }
.layer-card__body { font-size: 14.5px; color: var(--si-body-text); margin: 0; }
.layer-card--authority {
  grid-column: 1 / -1; background: var(--si-accent); color: #FFFFFF; padding: 32px 34px;
  box-shadow: 0 8px 26px rgba(47,143,239,0.30); border: none;
}
.layer-card--authority .layer-card__question, .layer-card--authority .layer-card__summary, .layer-card--authority .layer-card__body { color: #FFFFFF; }
.layer-card--authority .layer-card__badge {
  display: inline-flex; align-items: center; gap: 8px; background: #FFFFFF; color: var(--si-accent);
  border-radius: var(--si-radius-pill); padding: 4px 12px; font-weight: 700; font-size: 12px; width: fit-content;
}

/* --- Flow step tiles / pathway diagram -------------------------------------- */
.pathway { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.pathway__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.pathway__box {
  background: var(--si-tint-1); border: 1px solid var(--si-tint-1-border); border-radius: 10px; padding: 12px 20px;
  font-size: 15px; font-weight: 600; color: var(--si-graphite);
}
.pathway__box--dashed { background: transparent; border-style: dashed; }
.pathway__box--solid { background: var(--si-accent-secondary); color: #FFFFFF; border-color: var(--si-accent-secondary); }
.pathway__box--highlight { background: var(--si-accent); color: #FFFFFF; border-color: var(--si-accent); box-shadow: 0 8px 20px rgba(47,143,239,0.25); }
.pathway__box--wide { padding-left: 28px; padding-right: 28px; }
.pathway__arrow { flex: 0 0 auto; color: var(--si-accent-secondary); font-size: 18px; padding: 0 10px; }
@media (max-width: 640px) {
  .pathway__row { flex-direction: column; align-items: stretch; }
  .pathway__arrow { transform: rotate(90deg); padding: 6px 0; align-self: center; }
}

.flow-stack { display: flex; flex-direction: column; gap: 4px; }
.flow-stack--compact .flow-stack__box { padding: 12px 16px; }
.flow-stack__box { background: var(--si-tint-1); border: 1px solid var(--si-tint-1-border); border-radius: 10px; padding: 16px 20px; }
.flow-stack__box--highlight { background: var(--si-accent); border-color: var(--si-accent); color: #FFFFFF; }
.flow-stack--onDark .flow-stack__box { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.20); color: #FFFFFF; }
.flow-stack__title { font-size: 15px; font-weight: 600; color: var(--si-graphite); margin: 0; }
.flow-stack__box--highlight .flow-stack__title { color: #FFFFFF; }
.flow-stack__meta { font-size: 12.5px; color: var(--si-muted); }
.flow-stack__arrow { text-align: center; color: var(--si-accent-secondary); font-size: 16px; }

.pill-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pill-chain__item { background: var(--si-tint-1); border: 1px solid var(--si-tint-1-border); border-radius: var(--si-radius-pill); padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--si-graphite); }
.pill-chain__arrow { color: var(--si-accent-secondary); }

/* --- Progression ring-tiles ------------------------------------------------- */
.ring-tiles { display: flex; align-items: stretch; gap: 6px; flex-wrap: nowrap; }
.ring-tile {
  flex: 1 1 0; min-width: 0; overflow: hidden; background: #FFFFFF; border: 1px solid #D5E0E8; border-radius: 16px;
  padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 6px 18px rgba(24,54,80,.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ring-tile:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(24,54,80,.12); }
.ring-tile--culmination { background: #EAF3FC; border-color: #BCDCF7; box-shadow: 0 10px 26px rgba(47,139,230,.14); }
.ring-tile--culmination:hover { box-shadow: 0 22px 44px rgba(47,139,230,.22); }
.ring-tile__arrow { flex: 0 0 22px; display: flex; align-items: center; justify-content: center; color: var(--si-accent-secondary); }
.ring-tile__ring {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: conic-gradient(#5F7FA6 var(--si-ring-pct, 25%), #E7EEF4 0);
}
.ring-tile--culmination .ring-tile__ring { background: #2F8BE6; }
.ring-tile__ring-inner {
  width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: var(--si-accent-secondary);
}
.ring-tile--culmination .ring-tile__ring-inner { background: #EAF3FC; color: #2F8BE6; }
.ring-tile__question { font-style: italic; font-size: 12.5px; color: #7C93A8; }
.ring-tile--culmination .ring-tile__question { color: #3E6E9A; }
.ring-tile__name { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: #182B40; margin: 0; }
.ring-tile__status {
  display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  border-radius: var(--si-radius-pill); padding: 5px 12px; color: var(--si-accent-secondary); background: #EEF3F8; width: fit-content;
}
.ring-tile--culmination .ring-tile__status { color: #FFFFFF; background: #2F8BE6; }
@media (max-width: 720px) {
  .ring-tiles { flex-wrap: wrap; }
  .ring-tile { flex: 1 1 45%; }
  .ring-tile__arrow { display: none; }
}

/* --- Decision-prism model ---------------------------------------------------- */
.decision-prism-section { background: linear-gradient(145deg,#f8fafc 0%,#eef4f8 100%); }
.decision-prism-section h2 { color: #102e52; font-size: clamp(30px, 3.4vw, 48px); }
.decision-prism { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(32px, 4vw, 56px); }
.decision-prism__graphic { flex: 0 0 320px; width: 100%; max-width: 520px; height: 220px; position: relative; }
.decision-prism__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; flex: 1 1 320px; }
.decision-prism__card { border: 1px solid #cbdbe8; border-radius: var(--si-radius-lg); background: rgba(255,255,255,.94); box-shadow: 0 16px 38px rgba(34,71,105,.08); padding: 26px 28px; }
.decision-prism__card-num { color: #1779ed; font-weight: 700; font-size: 13px; }
.decision-prism__card h3 { color: #08264b; font-size: 24px; font-weight: 500; margin: 8px 0; }
.decision-prism__card p { color: #36557b; font-size: 14.5px; margin: 0; }

/* --- Decision Confidence Diagnostic --------------------------------------------- */
.si-diagnostic-card { padding: 40px 44px; }
@media (max-width: 620px) { .si-diagnostic-card { padding: 28px 24px; } }
.si-diag-gate-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 620px) { .si-diag-gate-fields { grid-template-columns: 1fr; } }
.si-diag-dimension-row { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) 56px; gap: 12px; align-items: center; }
@media (max-width: 620px) { .si-diag-dimension-row { grid-template-columns: 1fr; } }
.si-diag-option { transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; }
.si-diag-option:hover { border-color: var(--si-accent); background: var(--si-bg-light); transform: translateX(3px); }
#si-diag-marketing-toggle { transition: none; }

/* --- Chapter accordion (Founder Story) ----------------------------------------- */
.si-accordion__trigger { outline: none; }
.si-accordion__trigger:focus-visible { outline: 2px solid var(--si-accent); outline-offset: 2px; }
.si-accordion__panel[hidden] { display: none; }

/* --- Lead-capture forms (Contact, Executive Diagnostic Conversation) ---------- */
.si-form-error { color: var(--si-warning); font-size: 13.5px; }
.si-form-error[hidden] { display: none; }

/* --- Hover-glossary term (ported from onMouseEnter/onMouseLeave + sc-if state) - */
.si-tooltip-term { outline: none; }
.si-tooltip-bubble { display: none; text-align: left; }
.si-tooltip-term:hover .si-tooltip-bubble,
.si-tooltip-term:focus .si-tooltip-bubble,
.si-tooltip-term:focus-within .si-tooltip-bubble { display: block; }

/* --- Diagnostic-style lead-gated tool (base scaffolding) ---------------------- */
.diagnostic { background: #FFFFFF; border: 1px solid var(--si-border); border-radius: var(--si-radius-lg); padding: 32px; max-width: 640px; margin: 0 auto; }
.diagnostic__progress { height: 6px; background: var(--si-tint-1); border-radius: var(--si-radius-pill); overflow: hidden; margin-bottom: 24px; }
.diagnostic__progress-fill { height: 100%; background: var(--si-accent); transition: width 0.3s ease; }
.diagnostic__verdict--good { color: var(--si-accent); }
.diagnostic__verdict--middling { color: var(--si-accent-secondary); }
.diagnostic__verdict--exposed { color: var(--si-warning); }

/* --- Evidence status banner --------------------------------------------------- */
.evidence-status-banner { background: var(--si-tint-1); border: 1px solid var(--si-tint-1-border); border-radius: var(--si-radius-card); padding: 16px 20px; font-size: 14px; color: var(--si-graphite); }
.evidence-status-banner--illustrative { background: var(--si-bg-light); border-color: var(--si-border); color: var(--si-muted); }

/* --- Legal pages -------------------------------------------------------------- */
.legal-hero { max-width: 760px; }
.legal-body__heading { margin-top: 40px; }
.legal-cross-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 24px; }

/* --- Two-column body text ------------------------------------------------------ */
.doc-two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 32px; }

/* --- Doc CTA (in-page final call-to-action block) ------------------------------ */
.doc-cta { text-align: center; max-width: 700px; margin: 0 auto; }
.doc-cta__heading { margin-bottom: 20px; }
.doc-cta__grid { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* --- Solution colour-coding: 3px left bar on cards / hero eyebrow -------------- */
.solution-card { border: 1px solid #D8DDE2; border-left: 3px solid var(--si-solution-hue, var(--si-accent-secondary)); border-radius: 10px; box-sizing: border-box; transition: transform 0.2s ease, border-left-color 0.2s ease, box-shadow 0.2s ease; }
.solution-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(55,62,70,0.10); border-left-color: var(--si-solution-hue-hover, var(--si-accent-secondary)); }

@media (max-width: 782px) {
  h1 { font-size: clamp(32px, 8vw, 44px); }
  .card-grid, .layer-framework { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Mobile overflow fixes
   ========================================================================== */
/* Home's Visibility -> Trust -> Influence -> Demand progression row
   (.si-progression-row) is flex-wrap:nowrap by design on desktop — 4 cards
   plus 3 arrows in one row. Nowrap never stacks, so each card just keeps
   shrinking (min-width:0 lets them go below their content's natural size)
   until the text is unreadable and clipped. Below 640px, stack the cards
   full-width instead and drop the arrows, which read oddly between
   vertically-stacked items anyway.

   Root cause of a second bug this stacking introduces: each card is
   inline flex:1 1 0 — flex-basis:0, meant as a starting WIDTH for the
   desktop row. Switching to flex-direction:column flips the main axis to
   vertical, so that same flex-basis:0 becomes a starting HEIGHT instead.
   A flex item normally can't shrink below its own content (min-height:
   auto protects it), but the spec explicitly turns that protection off
   whenever the item has non-visible overflow — and every card is inline
   overflow:hidden. Zero starting height, no protection, and a row whose
   own height is just "as tall as its content" (nothing to grow into)
   collapses each card to almost nothing, clipping every child except the
   one with its own explicit fixed size (the 56x56 numbered badge) — which
   is exactly why only the badge survived while the rest of each card's
   text vanished. Restoring flex-basis to auto (their real content height)
   fixes the actual mechanism rather than any one symptom of it. */
@media (max-width: 640px) {
  .si-progression-row { flex-direction: column; }
  .si-progression-row .si-progression-arrow { display: none; }
  .si-progression-row > div:not(.si-progression-arrow) { flex: 1 1 auto !important; }
}

/* Body-content links ("Explore X ->") are frequently set white-space:nowrap
   inline, to keep a trailing arrow glued to the label instead of wrapping
   onto its own line. On mobile, a long enough label plus nowrap means the
   link runs straight past the edge of the screen instead of ever wrapping.
   !important is needed since the nowrap is declared inline on the anchors
   themselves, elsewhere in the theme. Wrapping a link is always harmless;
   overflow is not, so this is a safe blanket fix rather than chasing each
   occurrence (29 across the site) individually. */
@media (max-width: 640px) {
  a { white-space: normal !important; }
}

/* Home's "Search Intelligence started with a problem..." heading uses
   position:sticky so it stays in view in its own column while the (much
   longer) body text scrolls in the adjacent column — a deliberate desktop
   effect. Below 640px the 2-column grid it lives in collapses to a single
   stacked column (both sides already responsive via the earlier
   minmax(min(300px,100%),1fr) fix), so the heading and body text end up
   in the same column — sticky then just makes the heading float in place
   and get scrolled over by its own body text, rather than sitting beside
   it. !important overrides the inline position:sticky. */
@media (max-width: 640px) {
  .si-sticky-heading { position: static !important; }
}

/* The "Where SEO fits" 4-column comparison (Org. Search Perf. / SEO /
   Search Intelligence / Search Governance) is two separate grids — one
   for the header labels, one for the body copy — both hardcoded to
   grid-template-columns:repeat(4,1fr). A bare 1fr track still has an
   automatic MINIMUM size based on its content, so four columns of real
   sentences don't actually shrink to fit a phone width; the surrounding
   card's overflow:hidden (for its rounded corners) then just crops
   whatever doesn't fit, cutting text off rather than wrapping it. Collapse
   to one column on mobile — the header and body grids stay in the same
   4-item order, so "Search Governance" (item 4) still precedes its own
   description (item 4) rather than mismatching, just no longer
   side-by-side. !important overrides the inline grid-template-columns. */
@media (max-width: 640px) {
  .si-compare-grid { grid-template-columns: 1fr !important; }
}

/* "Stage N | description | output" cards (Diagnostic Intelligence Assessment,
   Implementation Governance Mobilisation) use hardcoded pixel grid columns
   (210px 1fr 230px = 440px+ of fixed tracks before the flexible middle one),
   which can't shrink below that regardless of viewport. Stack to one column
   on mobile instead. !important is required here — the page-content markup
   sets grid-template-columns inline on the same element, and an inline
   style always wins over an external stylesheet rule regardless of media
   query, so a plain override silently does nothing. */
@media (max-width: 640px) {
  .si-stage-row { grid-template-columns: 1fr !important; }
}

/* Home's "governed evidence" funnel graphic (SI_Logo_3D_v2.png + arrow
   shapes) is built from fixed-pixel absolute-positioned children (up to
   left:440px within a 520px box) authored for desktop. Those pixel offsets
   don't scale down with their container, so below ~620px viewport width
   this graphic pushes the whole page into horizontal scroll. It's purely
   decorative — the Grow/Defend/Control/Prove cards next to it carry the
   actual content and are unaffected — so hide it on narrow screens rather
   than risk a fragile rescale of hand-placed pixel coordinates. */
@media (max-width: 620px) {
  .si-decision-prism { display: none; }
}

/* ==========================================================================
   Scroll reveal (Home test) — see assets/js/reveal.js
   ========================================================================== */
.si-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
.si-reveal.is-revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .si-reveal { opacity: 1; transform: none; transition: none; }
}