/* CybrIQ — site styles
   ----------------------------------------------------------------------
   Built to feel like an established B2B SaaS, not a landing page.
   Disciplined palette: navy primary, product accents only where they earn it.
   Spacing scale: 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128.
   Type scale: 13 / 14 / 16 / 18 / 22 / 28 / 36 / 48 (with 60 reserved for hero).
*/

:root {
  /* Ink & neutrals */
  --ink:        #1a1a1a;
  --ink-soft:   #4a4a4a;
  --ink-faint:  #6a6a6a;
  --ink-mute:   #8a8a8a;

  /* Brand */
  --navy:       #0f1c30;
  --navy-soft:  #1c3252;
  --navy-faint: #2a4870;

  /* RoomIQ accent */
  --orange:        #E36419;
  --orange-deep:   #c25210;
  --orange-light:  #fef0e6;

  /* SpacesIQ accent */
  --blue:        #1FA9E0;
  --blue-deep:   #0e8ec0;
  --blue-light:  #e7f5fc;

  /* SupportIQ accent — jewel green */
  --green:       #0F9D58;
  --green-deep:  #0a6f3e;
  --green-light: #e0f3eb;

  /* ComplianceIQ accent — violet */
  --purple:        #7C3AED;
  --purple-deep:   #5B21B6;
  --purple-light:  #ede4fb;

  /* AdvisoryIQ accent — burgundy */
  --burgundy:        #9B2C5C;
  --burgundy-deep:   #6E1D40;
  --burgundy-light:  #f5e2ec;

  /* NetworkIQ accent — deep teal */
  /* NetworkIQ uses slate (cool gray-blue) for clear separation from green/teal. */
  --teal:        #475569;
  --teal-deep:   #334155;
  --teal-light:  #e2e8f0;

  /* Surfaces */
  --bg:        #ffffff;
  --bg-soft:   #fafaf7;
  --bg-warm:   #f4f1ea;
  --rule:      #e0d8cc;
  --rule-cool: #dde3eb;

  /* Type */
  --sans:  -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--navy); color: white; padding: 8px 16px;
}
.skip-link:focus { left: 16px; top: 16px; z-index: 100; }

/* ---- Layout ---- */
.wrap        { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.wrap-narrow { max-width: 820px;  margin: 0 auto; padding: 0 28px; }

/* Default content-section vertical rhythm. Halved from the original 96px
   to 48px on each side because 192px between adjacent sections felt
   sparse on dense marketing pages. Hero and CTA bands set their own
   padding via class; this default applies to standard <section> blocks. */
section { padding: 48px 0; }
section.tight { padding: 32px 0; }
section.cap  { padding: 80px 0 48px; }

/* ---- Header / nav ---- */
/* InfoComm 2026 announcement banner — dismissible, sticky to top until June 19 */
.infocomm-banner {
  background: var(--navy);
  color: white;
  padding: 9px 16px;
  font-size: 13px;
  text-align: center;
  position: relative;
  z-index: 220;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.infocomm-banner.is-hidden { display: none; }
.infocomm-banner a {
  color: white; font-weight: 600; text-decoration: underline;
  text-decoration-color: var(--orange); text-underline-offset: 3px;
}
.infocomm-banner a:hover { color: var(--orange); }
.infocomm-banner .ic-pulse {
  display: inline-block; width: 7px; height: 7px;
  background: var(--orange); border-radius: 50%;
  margin-right: 8px; vertical-align: middle;
  animation: ic-pulse 2.4s ease-in-out infinite;
}
@keyframes ic-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .infocomm-banner .ic-pulse { animation: none; opacity: 1; }
}
.infocomm-banner .ic-booth { color: var(--orange); font-weight: 700; }
.infocomm-banner-close {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0;
  color: rgba(255,255,255,0.6); cursor: pointer;
  font-size: 18px; line-height: 1; padding: 4px 8px;
}
.infocomm-banner-close:hover { color: white; }
@media (max-width: 640px) {
  .infocomm-banner { font-size: 12px; padding: 8px 38px 8px 12px; }
  .infocomm-banner .ic-pulse { display: none; }
}

/* Sticky header - keeps the nav and CTA always one click away on scroll */
body { padding-top: 0; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: white; }
}
.site-header { border-bottom: 1px solid var(--rule-cool); }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 132px; height: auto; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a {
  font-size: 14px; font-weight: 500; color: var(--ink-soft);
  letter-spacing: 0.01em;
}
.site-nav a:hover { color: var(--navy); text-decoration: none; }
.site-nav a.current { color: var(--navy); font-weight: 600; }
/* Button variants in the nav must keep their white text — the
   .site-nav a rule above would otherwise override .btn-* on specificity. */
.site-nav a.btn,
.site-nav a.btn:hover { color: white; }

/* Solutions dropdown */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-dropdown > .dd-trigger {
  display: inline-flex; align-items: center; gap: 4px;
}
.nav-dropdown > .dd-trigger::after {
  content: "▾";
  font-size: 10px;
  color: var(--ink-faint);
}
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -16px;
  background: white;
  border: 1px solid var(--rule-cool);
  border-radius: 8px;
  padding: 14px 0;
  margin-top: 14px;
  min-width: 240px;
  box-shadow: 0 16px 32px -16px rgba(15, 28, 48, 0.18),
              0 4px 12px -4px rgba(15, 28, 48, 0.08);
  z-index: 100;
}
/* Invisible bridge so the cursor can travel from the trigger
   into the menu without losing the :hover state. */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0; right: 0;
  height: 16px;
}
/* Trigger gets bottom padding so its hoverable area extends into the gap. */
.nav-dropdown {
  padding: 24px 0;
  margin: -24px 0;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: flex;
  flex-direction: column;
}
.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.nav-dropdown-menu a:hover {
  background: var(--bg-soft);
  color: var(--navy);
  text-decoration: none;
}
.nav-dropdown-menu .dd-section {
  padding: 6px 20px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 4px;
}
.nav-dropdown-menu .dd-section:first-child { margin-top: 0; }
.nav-dropdown-menu .dd-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ink-mute);
}
.nav-dropdown-menu .dd-dot.orange   { background: var(--orange); }
.nav-dropdown-menu .dd-dot.blue     { background: var(--blue); }
.nav-dropdown-menu .dd-dot.green    { background: var(--green); }
.nav-dropdown-menu .dd-dot.purple   { background: var(--purple); }
.nav-dropdown-menu .dd-dot.burgundy { background: var(--burgundy); }
.nav-dropdown-menu .dd-dot.teal     { background: var(--teal); }

/* Mobile menu (CSS-only checkbox hack)
   The input is visually hidden but kept in layout because iOS Safari has a
   long-standing quirk where labels attached to display:none checkboxes
   sometimes refuse to toggle the checkbox state on tap. Position:absolute
   with opacity:0 keeps the input present in the DOM and the accessibility
   tree, which the label-for relationship needs to work reliably. */
.nav-toggle-input {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.nav-toggle-label {
  display: none;
  cursor: pointer;
  padding: 8px;
  color: var(--navy);
  border: none;
  background: transparent;
}
.nav-toggle-label:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* CTA buttons */
.btn {
  display: inline-block;
  font-size: 14px; font-weight: 600;
  padding: 11px 20px;
  border-radius: 4px;
  border: 1px solid transparent;
  letter-spacing: 0.01em;
  transition: transform 0.06s ease, background 0.12s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: var(--navy); color: white;
}
.btn-primary:hover { background: var(--navy-soft); }
.btn-secondary {
  background: white; color: var(--navy); border-color: var(--rule-cool);
}
.btn-secondary:hover { border-color: var(--navy); }
.btn-orange { background: var(--orange); color: white; }
.btn-orange:hover { background: var(--orange-deep); }
.btn-blue { background: var(--blue); color: white; }
.btn-blue:hover { background: var(--blue-deep); }
.btn-green { background: var(--green); color: white; }
.btn-green:hover { background: var(--green-deep); }
.btn-purple { background: var(--purple); color: white; }
.btn-purple:hover { background: var(--purple-deep); }
.btn-burgundy { background: var(--burgundy); color: white; }
.btn-burgundy:hover { background: var(--burgundy-deep); }
.btn-teal { background: var(--teal); color: white; }
.btn-teal:hover { background: var(--teal-deep); }
.btn-large { padding: 14px 26px; font-size: 15px; }
.btn-group { display: flex; gap: 12px; flex-wrap: wrap; }

/* Eyebrow / pill labels */
.eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--orange);
}
.eyebrow.blue     { color: var(--blue-deep); }
.eyebrow.navy     { color: var(--navy); }
.eyebrow.green    { color: var(--green-deep); }
.eyebrow.purple   { color: var(--purple-deep); }
.eyebrow.burgundy { color: var(--burgundy-deep); }
.eyebrow.teal     { color: var(--teal-deep); }

/* ---- Type ---- */
h1, h2, h3, h4 {
  color: var(--navy);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.15;
}
h1 { font-size: 52px; line-height: 1.07; letter-spacing: -0.02em; }
h2 { font-size: 36px; }
h3 { font-size: 22px; }
h4 { font-size: 16px; font-weight: 700; }

.lede {
  font-size: 19px; line-height: 1.55; color: var(--ink-soft);
}
.section-header {
  margin-bottom: 48px; max-width: 760px;
}
.section-header .eyebrow { margin-bottom: 12px; }
.section-header h2 { margin-bottom: 14px; }
.section-header p { font-size: 18px; color: var(--ink-soft); }
.text-center { text-align: center; }
.text-center .section-header,
.section-header.text-center { margin-left: auto; margin-right: auto; }

/* ---- Hero ---- */
.hero {
  padding: 96px 0 80px;
  background: linear-gradient(180deg, #fafaf7 0%, #ffffff 100%);
  border-bottom: 1px solid var(--rule-cool);
}
.hero.hero-dark {
  background:
    linear-gradient(140deg, rgba(15,28,48,0.92) 0%, rgba(15,28,48,0.78) 50%, rgba(28,50,82,0.85) 100%),
    radial-gradient(circle at 80% 50%, rgba(31,169,224,0.15) 0%, transparent 60%);
  color: rgba(255,255,255,0.92);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hero.hero-dark h1,
.hero.hero-dark h2 { color: white; }
.hero.hero-dark .lede { color: rgba(255,255,255,0.78); }
.hero.hero-dark .eyebrow { color: var(--orange); }
.hero.hero-dark .micro { color: rgba(255,255,255,0.55); }
.hero.hero-dark .micro::before { background: rgba(255,255,255,0.25); }
.hero.hero-dark .btn-secondary {
  background: transparent; color: white; border-color: rgba(255,255,255,0.3);
}
.hero.hero-dark .btn-secondary:hover { border-color: white; }

/* Section with image background */
.section-bg-image {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
}
.section-bg-image::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,28,48,0.88), rgba(15,28,48,0.94));
}
.section-bg-image .wrap, .section-bg-image .wrap-narrow { position: relative; z-index: 1; }
.section-bg-image h1, .section-bg-image h2, .section-bg-image h3 { color: white; }
.section-bg-image p { color: rgba(255,255,255,0.85); }
.section-bg-image .eyebrow { color: var(--orange); }
.section-bg-image .lede { color: rgba(255,255,255,0.82); }
.hero-grid {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px;
  align-items: center;
}
.hero h1 { margin: 16px 0 22px; }
.hero .lede { font-size: 20px; max-width: 540px; margin-bottom: 32px; }
.hero .btn-group { margin-bottom: 28px; }
.hero .micro {
  font-size: 13px; color: var(--ink-faint);
  display: flex; align-items: center; gap: 12px;
}
.hero .micro::before {
  content: ""; width: 24px; height: 1px; background: var(--rule);
}
.hero-visual {
  background: white;
  border: 1px solid var(--rule-cool);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 24px 48px -24px rgba(15, 28, 48, 0.18),
              0 4px 12px -4px rgba(15, 28, 48, 0.08);
}
.hero-visual img, .hero-visual svg { width: 100%; height: auto; }

/* ---- Problem band (3-column) ---- */
.problem-band {
  background: var(--navy);
  color: rgba(255,255,255,0.92);
  padding: 80px 0;
}
.problem-band h2 { color: white; }
.problem-band .section-header p { color: rgba(255,255,255,0.7); }
.problem-band .eyebrow { color: var(--orange); }
.problem-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
.problem-card h3 { color: white; font-size: 18px; margin-bottom: 10px; }
.problem-card p { color: rgba(255,255,255,0.72); font-size: 15px; line-height: 1.6; }
.problem-card .card-num {
  display: inline-block;
  font-size: 13px; font-weight: 700;
  color: var(--orange); margin-bottom: 14px;
  letter-spacing: 0.08em;
}

/* ---- Product split (RoomIQ vs SpacesIQ) ---- */
.product-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  margin-top: 48px;
}
.product-card {
  background: white;
  border: 1px solid var(--rule-cool);
  border-radius: 8px;
  padding: 36px 36px 32px;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.product-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
}
.product-card.orange::before   { background: var(--orange); }
.product-card.blue::before     { background: var(--blue); }
.product-card.green::before    { background: var(--green); }
.product-card.purple::before   { background: var(--purple); }
.product-card.burgundy::before { background: var(--burgundy); }
.product-card.teal::before     { background: var(--teal); }
.product-card .product-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 12px;
}
.product-card.orange   .product-eyebrow { color: var(--orange); }
.product-card.blue     .product-eyebrow { color: var(--blue-deep); }
.product-card.green    .product-eyebrow { color: var(--green-deep); }
.product-card.purple   .product-eyebrow { color: var(--purple-deep); }
.product-card.burgundy .product-eyebrow { color: var(--burgundy-deep); }
.product-card.teal     .product-eyebrow { color: var(--teal-deep); }
.product-card h3 {
  font-size: 28px; margin-bottom: 8px;
}
.product-card .product-tag {
  font-size: 17px; color: var(--ink-soft); margin-bottom: 22px;
  font-style: italic;
}
.product-card ul {
  list-style: none; padding: 0; margin: 0 0 28px;
}
.product-card ul li {
  position: relative; padding-left: 22px;
  font-size: 15px; color: var(--ink-soft);
  margin-bottom: 10px; line-height: 1.55;
}
.product-card ul li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px;
}
.product-card.orange   ul li::before { background: var(--orange); }
.product-card.blue     ul li::before { background: var(--blue); }
.product-card.green    ul li::before { background: var(--green); }
.product-card.purple   ul li::before { background: var(--purple); }
.product-card.burgundy ul li::before { background: var(--burgundy); }
.product-card.teal     ul li::before { background: var(--teal); }
.product-card ul li strong { color: var(--ink); font-weight: 600; }
.product-card .card-foot { margin-top: auto; }

/* ---- Three-step / how it works ---- */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
.step .step-num {
  font-family: var(--serif); font-style: italic;
  font-size: 36px; color: var(--orange);
  margin-bottom: 8px; line-height: 1;
}
.step h3 { font-size: 20px; margin-bottom: 8px; }
.step p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; }

/* ---- Process bar (horizontal flow) ---- */
.process-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  margin-top: 48px;
}
.process-step {
  background: white;
  border: 1px solid var(--rule-cool);
  border-radius: 6px;
  padding: 32px 28px;
  position: relative;
}
.process-step .ps-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 36px;
  color: var(--orange);
  line-height: 1;
  margin-bottom: 12px;
}
.process-step h3 {
  font-size: 26px;
  margin-bottom: 12px;
  color: var(--navy);
}
.process-step p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.process-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  color: var(--orange);
  font-size: 28px;
  font-weight: 700;
}
@media (max-width: 960px) {
  .process-bar { grid-template-columns: 1fr; gap: 16px; }
  .process-arrow { transform: rotate(90deg); width: 100%; height: 32px; }
}

/* ---- Leadership grid ---- */
.leadership-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px;
  margin-top: 40px;
}
.leader-card {
  background: white;
  border: 1px solid var(--rule-cool);
  border-radius: 8px;
  padding: 28px 24px;
  text-align: center;
}
.leader-photo {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 18px;
  border: 3px solid var(--bg-soft);
  box-shadow: 0 4px 12px -4px rgba(15, 28, 48, 0.18);
}
.leader-card h3 {
  font-size: 18px;
  margin-bottom: 4px;
  color: var(--navy);
}
.leader-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.leader-card p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ---- FAQ block ---- */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--rule-cool);
  padding: 22px 0;
}
.faq-item:last-child { border-bottom: none; }
.faq-item h3 {
  font-size: 17px;
  color: var(--navy);
  margin-bottom: 8px;
  cursor: default;
}
.faq-item p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.65;
}
.faq-item p strong { color: var(--ink); }

/* ---- Architecture diagram block ---- */
.arch-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
  margin-top: 40px;
}
.arch-points { list-style: none; padding: 0; margin: 0; }
.arch-points li {
  position: relative; padding-left: 28px;
  font-size: 15px; color: var(--ink-soft);
  margin-bottom: 14px; line-height: 1.6;
}
.arch-points li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 12px; height: 12px;
  border: 2px solid var(--orange); border-radius: 2px;
}
.arch-points li strong { color: var(--ink); font-weight: 600; display: block; margin-bottom: 2px; }

/* ---- Comparison table ---- */
.compare-table {
  width: 100%; border-collapse: collapse;
  background: white; border: 1px solid var(--rule-cool); border-radius: 6px;
  overflow: hidden; font-size: 14px;
}
.compare-table th,
.compare-table td {
  text-align: left; padding: 14px 16px;
  border-bottom: 1px solid var(--rule-cool);
}
.compare-table thead th {
  background: var(--bg-soft); color: var(--ink);
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table th:first-child { font-weight: 600; color: var(--ink); width: 40%; }
.compare-table td { text-align: center; color: var(--ink-soft); }
.compare-table td.yes  { color: #2a7a3a; font-weight: 700; }
.compare-table td.no   { color: #a04040; }
.compare-table td.part { color: var(--orange-deep); font-weight: 600; font-style: italic; }
.compare-table th:last-child,
.compare-table td:last-child {
  background: var(--orange-light); color: var(--orange-deep);
}
.compare-table thead th:last-child { color: var(--orange-deep); }

/* ---- Timeline (deployment / first 90 days) ---- */
.timeline-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  position: relative;
}
.timeline-grid::before {
  content: ""; position: absolute;
  top: 18px; left: 12px; right: 12px;
  height: 1px; background: var(--rule-cool); z-index: 0;
}
.timeline-item {
  background: white;
  border: 1px solid var(--rule-cool);
  border-radius: 6px;
  padding: 22px 22px 20px;
  position: relative; z-index: 1;
}
.timeline-item .timeline-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: white; background: var(--orange);
  padding: 4px 10px; border-radius: 3px;
  margin-bottom: 14px;
}
.timeline-item h3 { font-size: 18px; margin-bottom: 8px; }
.timeline-item p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

/* ---- Audience cards ---- */
.audience-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.audience-card {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 28px 26px;
}
.audience-card .audience-tag {
  font-size: 11px; font-weight: 700; color: var(--orange);
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.audience-card h3 { font-size: 18px; margin-bottom: 8px; }
.audience-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }

/* ---- Trust band / partners / proof ---- */
.trust-band {
  background: var(--bg-soft);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 56px 0;
}
.trust-band .label {
  font-size: 12px; font-weight: 600; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.14em; text-align: center;
  margin-bottom: 24px;
}
.partner-row {
  display: flex; flex-wrap: wrap; gap: 32px 56px;
  align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 600; color: var(--ink-soft);
  font-size: 17px; letter-spacing: 0.04em;
}
.partner-row span { white-space: nowrap; }

/* Quote / pull-quote */
.pull-quote {
  border-left: 3px solid var(--orange);
  padding-left: 24px;
  margin: 48px 0;
  max-width: 720px;
}
.pull-quote p {
  font-family: var(--serif); font-style: italic;
  font-size: 22px; line-height: 1.45; color: var(--ink);
  margin-bottom: 12px;
}
.pull-quote cite {
  display: block; font-style: normal;
  font-size: 14px; color: var(--ink-faint); font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---- CTA band ---- */
.cta-band {
  background: var(--navy);
  color: white;
  padding: 72px 0;
}
.cta-band .wrap {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.cta-band h2 {
  color: white; max-width: 720px; margin-bottom: 16px;
}
.cta-band p {
  color: rgba(255,255,255,0.78); font-size: 18px;
  max-width: 620px; margin-bottom: 28px;
}
.cta-band .btn-primary {
  background: var(--orange); color: white;
}
.cta-band .btn-primary:hover { background: var(--orange-deep); }
.cta-band .btn-secondary {
  background: transparent; color: white;
  border-color: rgba(255,255,255,0.3);
}
.cta-band .btn-secondary:hover { border-color: white; }

/* ---- Resources teaser ---- */
.resources {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.resource-card {
  background: white;
  border: 1px solid var(--rule-cool);
  border-radius: 6px;
  padding: 28px;
  display: flex; flex-direction: column;
}
.resource-card .res-type {
  font-size: 11px; font-weight: 700; color: var(--orange);
  text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 8px;
}
/* Color-accented service cards */
.resource-card.green    { border-top: 3px solid var(--green); }
.resource-card.purple   { border-top: 3px solid var(--purple); }
.resource-card.burgundy { border-top: 3px solid var(--burgundy); }
.resource-card.teal     { border-top: 3px solid var(--teal); }
.resource-card.green    .res-type { color: var(--green-deep); }
.resource-card.purple   .res-type { color: var(--purple-deep); }
.resource-card.burgundy .res-type { color: var(--burgundy-deep); }
.resource-card.teal     .res-type { color: var(--teal-deep); }
.resource-card.green    .res-link { color: var(--green-deep); }
.resource-card.purple   .res-link { color: var(--purple-deep); }
.resource-card.burgundy .res-link { color: var(--burgundy-deep); }
.resource-card.teal     .res-link { color: var(--teal-deep); }
.resource-card h3 { font-size: 17px; margin-bottom: 8px; line-height: 1.3; }
.resource-card p { font-size: 14px; color: var(--ink-soft); margin-bottom: 16px; flex: 1; line-height: 1.55; }
.resource-card .res-link {
  font-size: 13px; font-weight: 600; color: var(--navy);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.resource-card .res-link::after { content: " →"; }

/* ---- Footer ---- */
.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,0.65);
  padding: 28px 0 20px;
  font-size: 14px;
}
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 20px;
  align-items: start;
}
.site-footer h3 {
  color: white; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.14em; margin-bottom: 12px; font-weight: 700;
}
.site-footer ul { list-style: none; padding: 0; }
.site-footer li { margin-bottom: 6px; }
.site-footer a { color: rgba(255,255,255,0.7); }
.site-footer a:hover { color: white; text-decoration: none; }
.site-footer .footer-brand img { width: 108px; margin-bottom: 8px; filter: brightness(0) invert(1) opacity(0.92); }
.site-footer .footer-tagline {
  color: rgba(255,255,255,0.55); font-size: 12.5px; line-height: 1.5; max-width: 240px; margin: 0;
}
.site-footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 14px; display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  color: rgba(255,255,255,0.4); font-size: 12px;
}
.site-footer .social-row {
  display: flex; gap: 14px; margin-top: 12px;
}
.site-footer .social-row a {
  display: inline-flex; width: 32px; height: 32px;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 4px;
  align-items: center; justify-content: center;
  color: rgba(255,255,255,0.7);
}
.site-footer .social-row a:hover { border-color: white; color: white; }

/* ---- Product page chrome ---- */
.product-hero {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--bg-soft), var(--bg));
  border-bottom: 1px solid var(--rule-cool);
}
.product-hero.orange   { border-top: 4px solid var(--orange); }
.product-hero.blue     { border-top: 4px solid var(--blue); }
.product-hero.green    { border-top: 4px solid var(--green); }
.product-hero.purple   { border-top: 4px solid var(--purple); }
.product-hero.burgundy { border-top: 4px solid var(--burgundy); }
.product-hero.teal     { border-top: 4px solid var(--teal); }
.product-hero h1 { font-size: 44px; margin: 16px 0 20px; }
.product-hero .lede { max-width: 640px; }

.spec-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 56px;
  margin-top: 32px;
}
.spec h4 {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 8px;
}
.spec.blue     h4 { color: var(--blue-deep); }
.spec.green    h4 { color: var(--green-deep); }
.spec.purple   h4 { color: var(--purple-deep); }
.spec.burgundy h4 { color: var(--burgundy-deep); }
.spec.teal     h4 { color: var(--teal-deep); }
.spec p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; }

.detail-block {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: center; margin: 0;
}
.detail-block + .detail-block { margin-top: 48px; }
.detail-block.reverse { direction: rtl; }
.detail-block.reverse > * { direction: ltr; }
.detail-block h3 { margin-bottom: 14px; }
.detail-block p { color: var(--ink-soft); font-size: 16px; margin-bottom: 12px; line-height: 1.65; }
.detail-block .figure {
  background: white; border: 1px solid var(--rule-cool);
  border-radius: 8px; padding: 20px;
}

/* ---- Form ---- */
.contact-form {
  display: grid; gap: 16px; max-width: 540px;
}
.contact-form .field { display: flex; flex-direction: column; gap: 6px; }
.contact-form label {
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  font-family: var(--sans);
  font-size: 15px; color: var(--ink);
  padding: 11px 14px;
  border: 1px solid var(--rule-cool); border-radius: 4px;
  background: white;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(15, 28, 48, 0.1);
}
.contact-form textarea { min-height: 110px; resize: vertical; }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---- Misc ---- */
.section-divider {
  text-align: center; margin: 64px 0;
}
.section-divider::before {
  content: ""; display: inline-block;
  width: 80px; height: 1px; background: var(--rule);
}

.text-orange    { color: var(--orange); }
.text-blue      { color: var(--blue-deep); }
.text-green     { color: var(--green-deep); }
.text-purple    { color: var(--purple-deep); }
.text-burgundy  { color: var(--burgundy-deep); }
.text-teal      { color: var(--teal-deep); }
.text-navy      { color: var(--navy); }
.bg-warm      { background: var(--bg-warm); }
.bg-soft      { background: var(--bg-soft); }

/* ---- Responsive ---- */
@media (max-width: 960px) {
  h1 { font-size: 38px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
  .hero { padding: 56px 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .product-split { grid-template-columns: 1fr; }
  .problem-grid { grid-template-columns: 1fr; gap: 32px; }
  .steps { grid-template-columns: 1fr; gap: 36px; }
  .audience-grid { grid-template-columns: 1fr; }
  .resources { grid-template-columns: 1fr; }
  .timeline-grid { grid-template-columns: 1fr 1fr; }
  .timeline-grid::before { display: none; }
  .leadership-grid { grid-template-columns: 1fr 1fr; }
  .arch-grid { grid-template-columns: 1fr; gap: 32px; }
  .detail-block { grid-template-columns: 1fr; gap: 32px; }
  .detail-block.reverse { direction: ltr; }
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .spec-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  section { padding: 32px 0; }
  .wrap, .wrap-narrow { padding: 0 20px; }
  .site-footer .footer-grid { grid-template-columns: 1fr; }
  .lede { font-size: 17px; }

  /* Mobile menu state */
  .nav-toggle-label { display: inline-flex; align-items: center; }
  .site-header .wrap { position: relative; }
  .site-nav {
    display: none;
    position: absolute;
    top: 72px; left: 0; right: 0;
    background: white;
    border-bottom: 1px solid var(--rule-cool);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 20px;
    box-shadow: 0 16px 32px -16px rgba(15, 28, 48, 0.18);
    /* Cap height to viewport minus header offset and scroll internally on
       overflow. Without this, long menus extend below the fold with no way
       for the user to reach the bottom items. */
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav-toggle-input:checked ~ .site-nav { display: flex; }
  /* Prevent flex children from shrinking below their natural height when
     the container has overflow — without this, items get squished instead
     of triggering the scroll bar. */
  .nav-toggle-input:checked ~ .site-nav > * { flex-shrink: 0; }
  .site-nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--rule-cool);
    font-size: 16px;
    color: var(--ink);
    font-weight: 500;
  }
  .site-nav a.btn {
    margin: 14px 0 0;
    border-bottom: none;
    text-align: center;
  }
  .site-nav a.current { color: var(--navy); font-weight: 600; }

  /* Mobile dropdown — flatten and inline */
  .nav-dropdown {
    display: block;
    position: static;
    border-bottom: 1px solid var(--rule-cool);
  }
  .nav-dropdown > .dd-trigger { padding: 14px 0; border-bottom: none; }
  .nav-dropdown > .dd-trigger::after { display: none; }
  .nav-dropdown-menu {
    display: flex !important;
    flex-direction: column;
    position: static;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0 0 8px 16px;
    min-width: 0;
  }
  .nav-dropdown-menu a {
    padding: 10px 0;
    font-size: 15px;
    border-bottom: 1px dashed var(--rule-cool);
  }
  .nav-dropdown-menu a:last-child { border-bottom: none; }
  .nav-dropdown-menu .dd-section {
    padding: 10px 0 4px;
    border-bottom: none;
  }

  /* Mobile mega-menu — show inline as part of the open mobile nav.
     On desktop the mega-menu pops open on hover. On mobile that pattern
     leaves users without a way to reach the panel content (no hover).
     Flatten to an accordion-style inline list when the mobile menu is open. */
  .nav-mega .nav-megamenu {
    display: block !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    grid-template-columns: 1fr !important;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0 0 6px 16px;
    margin: 0;
  }
  .nav-mega::before { display: none !important; }
  .nav-mega-col { padding: 0; }
  .nav-mega-col h5 {
    margin: 10px 0 4px;
    font-size: 11px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .nav-mega-item {
    display: flex !important;
    padding: 10px 0;
    border-bottom: 1px dashed var(--rule-cool);
    font-size: 14.5px;
    color: var(--ink);
  }
  .nav-mega-item:last-child { border-bottom: none; }
  .nav-mega-item-body strong { font-size: 14.5px; }
  .nav-mega-item-body span { font-size: 12.5px; color: var(--ink-faint); display: block; }
}

/* Audience deep-dive sections (Solutions page) */
.audience-list li {
  padding-left: 22px;
  position: relative;
  margin-bottom: 10px;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.audience-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  display: inline-block;
}
.audience-list.orange   li::before { background: var(--orange); }
.audience-list.blue     li::before { background: var(--blue); }
.audience-list.green    li::before { background: var(--green-deep); }
.audience-list.purple   li::before { background: var(--purple-deep); }
.audience-list.burgundy li::before { background: var(--burgundy-deep); }
.audience-list.teal     li::before { background: var(--teal-deep); }

.audience-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--rule-cool);
}
.audience-stat-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
  display: block;
}
.audience-stat-num {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  line-height: 1.05;
  color: var(--ink);
}
.audience-stat.orange   .audience-stat-num { color: var(--orange); }
.audience-stat.blue     .audience-stat-num { color: var(--blue-deep); }
.audience-stat-label {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}
@media (max-width: 720px) {
  .audience-stats { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; padding-top: 32px; }
  .audience-stat-num { font-size: 30px; }
}

.audience-deliverables {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--rule-cool);
}
.audience-deliverables h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}
.deliverables-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.deliverable {
  padding: 18px 18px 18px 22px;
  border: 1px solid var(--rule-cool);
  border-left-width: 3px;
  background: white;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.deliverable strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.deliverable.orange   { border-left-color: var(--orange); }
.deliverable.blue     { border-left-color: var(--blue); }
.deliverable.purple   { border-left-color: var(--purple-deep); }
@media (max-width: 900px) {
  .deliverables-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .deliverables-grid { grid-template-columns: 1fr; }
}

/* Big-stat row used on the homepage customer story */
.bigstat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 980px;
  margin: 32px auto 24px;
  padding: 0 16px;
}
.bigstat {
  text-align: center;
  padding: 24px 12px;
}
.bigstat-num {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--orange);
  margin-bottom: 12px;
}
.bigstat-label {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.bigstat-caption {
  text-align: center;
  font-size: 14px;
  color: var(--ink-faint);
  max-width: 720px;
  margin: 12px auto 0;
  line-height: 1.6;
}
@media (max-width: 720px) {
  .bigstat-row { grid-template-columns: 1fr; gap: 24px; }
  .bigstat-num { font-size: 52px; }
}

/* Video band */
.video-band {
  padding: 48px 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--rule-cool);
  border-bottom: 1px solid var(--rule-cool);
}
.video-frame {
  max-width: 960px;
  margin: 32px auto 0;
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 24px 48px -16px rgba(15, 28, 48, 0.18),
              0 8px 16px -4px rgba(15, 28, 48, 0.10);
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Click-through poster — opens YouTube watch page in a new tab.
   Used in place of the iframe when embed permissions are blocked
   (e.g., by Made-for-Kids, region restrictions, or extension blockers). */
.video-link {
  display: block;
  position: relative;
  max-width: 960px;
  margin: 32px auto 0;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 24px 48px -16px rgba(15, 28, 48, 0.18),
              0 8px 16px -4px rgba(15, 28, 48, 0.10);
}
.video-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.video-link:hover img,
.video-link:focus-visible img { transform: scale(1.02); }
.video-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}
.video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 92px; height: 92px;
  background: var(--orange);
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  transition: transform 0.2s ease, background 0.2s ease;
  z-index: 1;
}
.video-link:hover .video-play,
.video-link:focus-visible .video-play {
  transform: translate(-50%, -50%) scale(1.06);
  background: var(--orange-deep);
}
.video-play svg {
  width: 34px; height: 34px;
  fill: white;
  margin-left: 5px; /* optical center for play triangle */
}
.video-caption {
  position: absolute;
  bottom: 18px; left: 22px; right: 22px;
  color: rgba(255,255,255,0.95);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.video-caption svg { width: 14px; height: 14px; opacity: 0.85; }
.video-link:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

/* Hero rotator — crossfades three dashboard states on a 12-second loop */
.hero-rotator {
  position: relative;
  aspect-ratio: 600 / 332;
  width: 100%;
}
.hero-rotator img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 1px solid var(--rule-cool);
  border-radius: 6px;
  opacity: 0;
  animation: hero-rotate 18s ease-in-out infinite;
}
.hero-rotator img:nth-child(1) { animation-delay:  0s; }
.hero-rotator img:nth-child(2) { animation-delay: -12s; }
.hero-rotator img:nth-child(3) { animation-delay:  -6s; }
@keyframes hero-rotate {
  0%, 28%   { opacity: 1; transform: scale(1); }
  33%, 95%  { opacity: 0; transform: scale(1.01); }
  100%      { opacity: 1; }
}
.hero-rotator-caption {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  display: flex; gap: 8px; align-items: center;
  padding: 5px 12px; background: rgba(15,28,48,0.85);
  color: white; font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  border-radius: 4px;
}
/* Static cycle glyph signals "rotating slideshow" rather than "live stream." */
.hero-rotator-caption::before {
  content: "\21BB"; /* ↻ — clockwise open-circle arrow, semantically "rotating" */
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  color: var(--orange);
  display: inline-block;
}
@media (prefers-reduced-motion: reduce) {
  .hero-rotator img { animation: none; opacity: 0; }
  .hero-rotator img:first-child { opacity: 1; }
}
/* Pause on hover/focus so a keyboard or pointer user can examine a frame. */
.hero-rotator:hover img,
.hero-rotator:focus-within img {
  animation-play-state: paused;
}

/* Hero dashboard subtle pulse — signals "live system" without animation noise */
@keyframes hero-pulse {
  0%, 100% { box-shadow: 0 16px 32px -16px rgba(15, 28, 48, 0.18), 0 4px 12px -4px rgba(15, 28, 48, 0.08); }
  50%      { box-shadow: 0 16px 32px -10px rgba(227, 100, 25, 0.22), 0 4px 12px -2px rgba(15, 28, 48, 0.10); }
}
.hero-visual > img,
.product-hero .hero-visual > img {
  border: 1px solid var(--rule-cool);
  border-radius: 6px;
  animation: hero-pulse 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual > img,
  .product-hero .hero-visual > img { animation: none; }
}

/* Interactive product tour */
.tour-frame {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  background: white;
  border: 1px solid var(--rule-cool);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 48px -16px rgba(15, 28, 48, 0.18),
              0 8px 16px -4px rgba(15, 28, 48, 0.10);
}
.tour-canvas {
  position: relative;
  aspect-ratio: 1220 / 676;
}
.tour-canvas img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
}
.tour-overlay {
  position: absolute; inset: 0;
  background: rgba(15, 28, 48, 0.45);
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.tour-hotspot {
  position: absolute;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--orange);
  border: 3px solid white;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  color: white; font-size: 14px; font-weight: 800;
  font-family: 'SF Mono', Menlo, monospace;
  transition: transform 0.18s ease, opacity 0.18s ease;
  z-index: 3;
}
.tour-hotspot::after {
  content: "";
  position: absolute; inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--orange);
  opacity: 0;
  animation: tour-ring 1.6s ease-in-out infinite;
}
@keyframes tour-ring {
  0%   { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.6);  opacity: 0; }
}
.tour-hotspot:hover { transform: translate(-50%, -50%) scale(1.12); }
.tour-hotspot.is-active { background: var(--navy); transform: translate(-50%, -50%) scale(1.15); }
.tour-hotspot.is-dim { opacity: 0.35; }
.tour-hotspot.is-dim::after { display: none; }

.tour-spotlight {
  position: absolute;
  border-radius: 8px;
  border: 2px solid var(--orange);
  box-shadow: 0 0 0 6000px rgba(15, 28, 48, 0.55);
  pointer-events: none;
  transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease;
  z-index: 2;
}

.tour-caption {
  position: absolute;
  background: white;
  border: 1px solid var(--rule-cool);
  border-radius: 8px;
  padding: 14px 18px;
  max-width: 320px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  z-index: 4;
  font-size: 13px; line-height: 1.5;
}
.tour-caption-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--orange);
  margin-bottom: 4px; display: block;
}
.tour-caption strong {
  display: block; font-size: 15px; font-weight: 700;
  color: var(--ink); margin-bottom: 6px;
}
.tour-caption p { margin: 0; color: var(--ink-soft); }

.tour-controls {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  border-top: 1px solid var(--rule-cool);
  background: var(--bg-soft);
  font-size: 13px;
}
.tour-progress { color: var(--ink-soft); font-weight: 600; }
.tour-progress strong { color: var(--ink); }
.tour-nav { display: flex; gap: 8px; }
.tour-btn {
  padding: 6px 14px;
  font-size: 13px; font-weight: 600;
  background: white;
  border: 1px solid var(--rule-cool); border-radius: 4px;
  cursor: pointer; color: var(--ink);
}
.tour-btn:hover { border-color: var(--orange); color: var(--orange); }
.tour-btn-primary {
  background: var(--orange); color: white; border-color: var(--orange);
}
.tour-btn-primary:hover { background: var(--orange-deep); color: white; border-color: var(--orange-deep); }
.tour-btn:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 720px) {
  .tour-caption { max-width: 200px; font-size: 12px; padding: 10px 12px; }
  .tour-hotspot { width: 28px; height: 28px; font-size: 12px; border-width: 2px; }
}

/* Mega menu — richer multi-column dropdown for Solutions and Resources */
.nav-mega .nav-megamenu {
  display: none;
  position: absolute;
  top: 100%;
  left: -16px;
  background: white;
  border: 1px solid var(--rule-cool);
  border-radius: 10px;
  padding: 22px 24px;
  margin-top: 14px;
  min-width: 580px;
  box-shadow: 0 24px 48px -16px rgba(15, 28, 48, 0.22),
              0 8px 16px -4px rgba(15, 28, 48, 0.12);
  z-index: 100;
  /* If the panel is taller than the viewport (short laptop screen, browser
     zoom > 100%, etc.), scroll vertically inside the panel instead of
     letting the bottom of the menu disappear off-screen. The 32px reserve
     below accounts for the trigger nav bar height plus the panel's own
     14px margin-top. */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Hover bridge — a 16px invisible area between the trigger and the
   panel that keeps :hover active while the cursor crosses the 14px
   margin. Lives on .nav-mega (the parent — it already has
   position:relative from .nav-dropdown) so that overflow rules on
   the panel don't clip it. Uses ::before so it doesn't conflict
   with the ▾ arrow pseudo-element on .dd-trigger::after. */
.nav-mega::before {
  content: "";
  position: absolute;
  top: 100%;
  left: -16px;
  right: -16px;
  height: 16px;
  pointer-events: auto;
}
.nav-mega:hover .nav-megamenu,
.nav-mega:focus-within .nav-megamenu { display: grid; }

.nav-mega-2 .nav-megamenu { grid-template-columns: 1fr 1fr; gap: 28px; }
.nav-mega-4 .nav-megamenu {
  /* Always 2-column. The 4 section headers (Read / Build / Download /
     Engage) flow into a 2×2 grid. Earlier attempts at 4-column with
     right-anchor produced a ~1100px-wide panel that extended several
     hundred pixels past the left edge of the viewport. A 2-column
     panel comes in at ~520px wide so it can left-anchor like the
     Solutions and Industries menus do — visual consistency across
     the three dropdowns. */
  grid-template-columns: repeat(2, minmax(220px, 260px));
  gap: 18px 28px;
  width: max-content;
  max-width: calc(100vw - 32px);
  /* No left/right override — inherit `left: -16px` from .nav-mega .nav-megamenu
     so it extends right from the trigger, same direction as Solutions
     and Industries. */
}
@media (max-width: 720px) {
  .nav-mega-4 .nav-megamenu { grid-template-columns: 1fr; }
}

.nav-mega h5 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-cool);
}

.nav-mega-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
  margin: 0 -8px;
  transition: background 0.10s ease;
}
.nav-mega-item:hover { background: var(--bg-soft); text-decoration: none; }
.nav-mega-item .dd-dot {
  margin-top: 6px;
}
.nav-mega-item-body { min-width: 0; }
.nav-mega-item strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.nav-mega-item span {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* Mobile: fall back to the simple flat list */
@media (max-width: 900px) {
  .nav-mega .nav-megamenu {
    position: static;
    display: block !important;
    background: transparent;
    border: 0; border-radius: 0;
    box-shadow: none;
    padding: 0; margin: 0;
    min-width: 0; width: 100%;
  }
  .nav-mega-2 .nav-megamenu,
  .nav-mega-4 .nav-megamenu { grid-template-columns: 1fr; gap: 12px; }
  .nav-mega h5 { margin-top: 12px; }
}

/* Integrations grid */
.integ-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 900px) { .integ-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .integ-grid { grid-template-columns: 1fr; } }
.integ-card {
  border: 1px solid var(--rule-cool); border-radius: 6px;
  padding: 20px 22px; background: white;
  transition: border-color 0.12s ease;
}
.integ-card:hover { border-color: var(--orange); }
.integ-name {
  font-size: 16px; font-weight: 700; color: var(--navy);
  letter-spacing: -0.01em; margin-bottom: 6px;
}
.integ-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0; }

/* Site search */
.search-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--rule-cool);
  border-radius: 4px;
  font-size: 13px; color: var(--ink-soft);
  cursor: pointer; transition: border-color 0.12s ease, color 0.12s ease;
}
.search-trigger:hover { border-color: var(--orange); color: var(--ink); }
.search-trigger svg { width: 14px; height: 14px; opacity: 0.7; }
.search-trigger kbd {
  font-family: 'SF Mono', Menlo, monospace; font-size: 11px;
  padding: 1px 5px; border: 1px solid var(--rule-cool); border-radius: 3px;
  background: white; color: var(--ink-faint);
}
@media (max-width: 900px) { .search-trigger kbd { display: none; } }

.search-modal {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(15, 28, 48, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: flex-start; justify-content: center;
  padding: 80px 16px 16px;
}
.search-modal.is-open { display: flex; }
.search-modal-card {
  width: 100%; max-width: 680px;
  background: white; border-radius: 10px;
  box-shadow: 0 24px 64px -12px rgba(0,0,0,0.4),
              0 8px 24px -4px rgba(0,0,0,0.2);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 100px);
}
.search-input-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule-cool);
}
.search-input-row svg { width: 18px; height: 18px; opacity: 0.5; flex: none; }
.search-input {
  flex: 1; border: 0; outline: none;
  font-size: 16px; color: var(--ink); background: transparent;
  font-family: inherit;
}
.search-close {
  background: var(--bg-soft); border: 1px solid var(--rule-cool);
  border-radius: 4px; padding: 3px 8px;
  font-size: 11px; font-family: 'SF Mono', Menlo, monospace;
  color: var(--ink-faint); cursor: pointer;
}
.search-close:hover { color: var(--ink); }
.search-results {
  overflow-y: auto; flex: 1;
  padding: 8px;
}
.search-result {
  display: block; padding: 12px 14px; border-radius: 6px;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--rule-cool);
}
.search-result:last-child { border-bottom: none; }
.search-result:hover, .search-result.is-active {
  background: var(--bg-soft); text-decoration: none;
}
.search-result-title {
  font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 2px;
}
.search-result-url {
  font-size: 11px; color: var(--ink-faint); font-family: 'SF Mono', Menlo, monospace;
  margin: 0 0 6px;
}
.search-result-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 0; }
.search-empty {
  padding: 32px 18px; text-align: center; color: var(--ink-faint); font-size: 14px;
}
.search-hint {
  padding: 10px 18px; border-top: 1px solid var(--rule-cool);
  font-size: 11px; color: var(--ink-faint);
  display: flex; gap: 14px; justify-content: center; align-items: center;
}
.search-hint kbd {
  font-family: 'SF Mono', Menlo, monospace; font-size: 10px;
  padding: 1px 5px; border: 1px solid var(--rule-cool); border-radius: 3px;
}
mark.search-hl {
  background: rgba(244, 185, 66, 0.35); color: inherit; padding: 0 2px; border-radius: 2px;
}

/* API documentation */
.api-tag-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .api-tag-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .api-tag-grid { grid-template-columns: 1fr; } }

.api-tag-card { display: block; }
.api-tag-link {
  display: block;
  padding: 22px 24px;
  background: white;
  border: 1px solid var(--rule-cool);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
  height: 100%;
}
.api-tag-link:hover {
  border-color: var(--orange);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px rgba(15, 28, 48, 0.15);
}
.api-tag-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.api-tag-count {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.api-tag-card h3 {
  margin: 4px 0 8px; font-size: 18px; letter-spacing: -0.01em; color: var(--navy);
}
.api-tag-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0; }
.api-tag-go {
  display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 700;
  color: var(--orange); letter-spacing: 0.02em;
}

/* Per-tag layout: sticky sidebar + content */
.api-layout {
  display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start;
}
@media (max-width: 900px) { .api-layout { grid-template-columns: 1fr; gap: 24px; } }

.api-sidebar { position: sticky; top: 88px; }
@media (max-width: 900px) { .api-sidebar { position: static; } }
.api-sidebar-inner {
  border: 1px solid var(--rule-cool);
  border-radius: 6px; padding: 14px 8px;
  max-height: calc(100vh - 120px); overflow-y: auto;
  background: white;
}
.api-sidebar h4 {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 8px 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-cool);
}
.api-sidebar-list { list-style: none; padding: 0; margin: 0; }
.api-sidebar-list li a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px; border-radius: 4px;
  font-size: 13px; color: var(--ink); text-decoration: none;
}
.api-sidebar-list li a:hover { background: var(--bg-soft); text-decoration: none; }
.api-sidebar-list li a span { color: var(--ink-faint); font-size: 11px; font-weight: 600; }
.api-sidebar-list li.current a { background: var(--bg-soft); color: var(--orange); font-weight: 700; }

.api-content { min-width: 0; }
.api-toc {
  border: 1px solid var(--rule-cool); border-radius: 6px;
  padding: 16px 22px 18px; margin-bottom: 32px; background: var(--bg-soft);
}
.api-toc h4 {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 10px;
}
.api-toc ul { list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
@media (max-width: 720px) { .api-toc ul { grid-template-columns: 1fr; } }
.api-toc li a { display: flex; gap: 8px; align-items: center; padding: 4px 0;
  font-size: 13px; color: var(--ink); text-decoration: none; }
.api-toc li a:hover { color: var(--orange); }

/* Endpoint cards */
.api-endpoint {
  border: 1px solid var(--rule-cool); border-radius: 8px;
  padding: 22px 26px; margin-bottom: 16px; background: white;
}
.api-endpoint-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.api-method {
  display: inline-block; padding: 3px 10px; border-radius: 4px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; color: white;
  font-family: 'SF Mono', Menlo, Monaco, 'Liberation Mono', monospace;
}
.api-method-mini {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-size: 9px; font-weight: 800; letter-spacing: 0.05em; color: white;
  font-family: 'SF Mono', Menlo, Monaco, 'Liberation Mono', monospace;
  min-width: 38px; text-align: center;
}
.method-get    { background: #1FA9E0; }
.method-post   { background: #0F9D58; }
.method-put    { background: #E36419; }
.method-delete { background: #B91C1C; }
.method-patch  { background: #7C3AED; }
.api-path {
  font-family: 'SF Mono', Menlo, Monaco, 'Liberation Mono', monospace;
  font-size: 14px; color: var(--ink); word-break: break-all;
}
.api-endpoint-title {
  font-size: 17px; font-weight: 700; color: var(--navy);
  margin: 6px 0 6px; letter-spacing: -0.005em;
}
.api-endpoint-desc { font-size: 14px; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.55; }
.api-curl, .api-spec { margin: 8px 0 0; }
.api-curl summary, .api-spec summary {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); cursor: pointer; padding: 6px 0; user-select: none;
}
.api-curl summary:hover, .api-spec summary:hover { color: var(--orange); }
.api-curl pre, .api-spec pre {
  background: #0f1c30; color: #e2e8f0;
  border-radius: 4px; padding: 14px 16px; margin: 6px 0 0;
  overflow-x: auto; font-size: 12.5px; line-height: 1.5;
  font-family: 'SF Mono', Menlo, Monaco, 'Liberation Mono', monospace;
  max-height: 360px; overflow-y: auto;
}
.api-curl pre code, .api-spec pre code { color: inherit; background: transparent; }

/* Trust microbar - sits above the main footer grid; scannable in 2 seconds */
.trust-microbar {
  border-top: 1px solid var(--rule-cool);
  border-bottom: 1px solid var(--rule-cool);
  padding: 18px 0;
  margin-bottom: 48px;
}
.trust-microbar .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 32px;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.trust-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--orange);
  border-radius: 50%;
  flex: none;
}
.trust-badge.navy::before { background: var(--navy); }
.trust-badge.green::before { background: var(--green-deep); }
.trust-badge.blue::before { background: var(--blue-deep); }
.trust-badge.purple::before { background: var(--purple-deep); }
.trust-badge.burgundy::before { background: var(--burgundy-deep); }
@media (max-width: 720px) {
  .trust-microbar { padding: 14px 0; margin-bottom: 32px; }
  .trust-microbar .wrap { gap: 10px 18px; }
  .trust-badge { font-size: 10px; }
}

/* ----------------------------------------------------------------------------
   Comprehensive mobile pass — applied at standard phone widths.
   Anchors phone-class screens (≤640px) and tightens specific components.
   ---------------------------------------------------------------------------- */

/* Tablet (≤900px) — additional gridfalls beyond the existing 960 / 640 set */
@media (max-width: 900px) {
  /* Grid components that remain 2-col at tablet but should stack at phone */
  .timeline-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .leadership-grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* Audience deep-dive blocks: stat cards stay 3-col on tablet, but the deliverables grid was 4-col */
  .deliverables-grid { grid-template-columns: 1fr 1fr; gap: 16px; }

  /* Calculator and bigstat rows */
  .calc-grid { grid-template-columns: 1fr; gap: 24px; }
  .calc-result { position: static; }
}

/* Phone (≤640px) — collapse all multi-column layouts to single column */
@media (max-width: 640px) {
  h1 { font-size: 32px; line-height: 1.12; }
  h2 { font-size: 24px; }
  h3 { font-size: 18px; }
  .lede { font-size: 16px; }
  section { padding: 32px 0; }
  .hero { padding: 40px 0; }

  /* Single-column for everything that was still 2-col at tablet */
  .timeline-grid { grid-template-columns: 1fr; gap: 24px; }
  .leadership-grid { grid-template-columns: 1fr; gap: 32px; }
  .deliverables-grid { grid-template-columns: 1fr; }
  .resources { grid-template-columns: 1fr !important; }
  .product-split { grid-template-columns: 1fr; gap: 24px; }

  /* Hero buttons: stack and full-width */
  .btn-group { flex-direction: column; align-items: stretch; gap: 10px; }
  .btn.btn-large { width: 100%; text-align: center; padding: 14px 20px; }

  /* Audience stats: 3 → 1 with tighter padding */
  .audience-stats {
    grid-template-columns: 1fr; gap: 18px;
    margin-top: 32px; padding-top: 24px;
  }
  .audience-stat-num { font-size: 28px; }

  /* Big stat row already 1-col at 720px; add micro-typography */
  .bigstat-num { font-size: 44px; }
  .bigstat-label { font-size: 13px; }

  /* Trust band on home — horizontal flex row needs to stack */
  .trust-band > .wrap > div { width: 100%; }
  .trust-band .partner-row { gap: 14px 24px !important; font-size: 14px !important; }

  /* Process bar (Detect/Correct/Protect) — flex-direction column */
  .process-bar { flex-direction: column; gap: 24px; }
  .process-arrow { transform: rotate(90deg); }

  /* Compare table — tighten font, but real fix is the wrapper below */
  .compare-table { font-size: 13px; }
  .compare-table th, .compare-table td { padding: 8px 10px; }

  /* Detail blocks already stack at 960; no extra here, but tighten the figure */
  .detail-block .figure img { width: 100%; height: auto; }

  /* Hero rotator: smaller caption */
  .hero-rotator-caption { font-size: 10px; padding: 4px 10px; left: 10px; bottom: 10px; }

  /* InfoComm banner already handled */

  /* Mega menus — fall back to flat list (the main 900px rule already kicks
     in but we re-anchor here in case of nested wrappers and explicitly
     remove min-width to avoid horizontal scroll). */
  .nav-mega .nav-megamenu {
    position: static; display: block !important;
    background: transparent; border: 0; box-shadow: none;
    padding: 0; margin: 0; min-width: 0; width: 100%;
  }
  .nav-mega-2 .nav-megamenu, .nav-mega-4 .nav-megamenu {
    grid-template-columns: 1fr; gap: 8px;
  }
  .nav-mega h5 { margin-top: 14px; padding-bottom: 6px; }
  .nav-mega-item { padding: 10px 8px; margin: 0; }
  .nav-mega-item span { display: none; } /* Hide descriptions on mobile to keep menu compact */

  /* Search trigger inside the hamburger menu — full-width row, not a small badge */
  .site-nav .search-trigger {
    width: 100%; justify-content: flex-start;
    padding: 14px 0; margin: 0;
    border: 0; border-bottom: 1px solid var(--rule-cool);
    background: transparent; border-radius: 0;
    font-size: 16px; color: var(--ink); font-weight: 500;
  }
  .site-nav .search-trigger kbd { display: none; }

  /* Footer grid — 1-col stack */
  .site-footer .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 6px; align-items: flex-start; }

  /* API doc — sidebar stacks, code blocks scroll */
  .api-layout { grid-template-columns: 1fr; }
  .api-sidebar { position: static; }
  .api-sidebar-inner { max-height: 360px; }
  .api-toc ul { grid-template-columns: 1fr; }
  .api-endpoint { padding: 18px 18px; }
  .api-endpoint-head { gap: 8px; }
  .api-endpoint-head a { display: none; } /* Hide cross-page back-link on mobile */
  .api-curl pre, .api-spec pre {
    font-size: 11.5px; padding: 12px;
    max-height: 280px;
  }
  .api-tag-grid { grid-template-columns: 1fr; gap: 12px; }
  .api-tag-link { padding: 18px 20px; }

  /* Tour — bigger hotspots for finger taps, caption goes full-width */
  .tour-hotspot { width: 32px; height: 32px; font-size: 13px; }
  .tour-caption { max-width: calc(100% - 32px); font-size: 12px; padding: 10px 14px; }
  .tour-controls { padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
  .tour-progress { font-size: 12px; }

  /* Calculator — sticky-result becomes inline */
  .calc-result { position: static; padding: 24px; }
  .calc-result-num { font-size: 44px; }
  .calc-result-grid { grid-template-columns: 1fr; gap: 14px; padding-top: 14px; }
  .calc-form { padding: 20px; }
  .calc-form .row { grid-template-columns: 1fr; gap: 0; }

  /* Search modal */
  .search-modal { padding: 60px 12px 12px; }
  .search-modal-card { max-height: calc(100vh - 80px); }
  .search-input { font-size: 15px; }
  .search-result { padding: 10px 12px; }

  /* Compare-table wrapper — see compare-table-wrap rule below */
  .compare-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 6px;
    margin: 0 -20px; /* Allow the wrap to bleed to the edge of the screen on mobile */
    padding: 0 20px;
  }
  .compare-table-wrap::after {
    content: "Scroll for more →";
    display: block;
    text-align: right;
    font-size: 11px; color: var(--ink-faint);
    padding: 6px 4px 0;
  }
  .compare-table { min-width: 560px; }

  /* Article cards on case-studies hub: stack the side-by-side layout */
  .resource-card[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Forms — make all input fields full-width and finger-friendly */
  input[type="text"], input[type="email"], input[type="number"],
  textarea, select {
    font-size: 16px; /* Prevents iOS zoom on focus */
  }
}

/* Touch targets — make sure interactive elements clear the 44×44 tap target rule */
@media (hover: none) and (pointer: coarse) {
  .btn, .res-link, .nav-mega-item, .search-result {
    min-height: 44px;
  }
  .nav-mega-item { padding-top: 12px; padding-bottom: 12px; }
}

/* Responsive image overflow — defensive */
img { max-width: 100%; height: auto; }
table { max-width: 100%; }
pre, code { word-wrap: break-word; }


/* ============================================
   Cookie consent banner
   ============================================ */
.cookie-consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 640px;
  margin: 0 auto;
  background: var(--ink, #0f1c30);
  color: white;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  padding: 18px 22px;
  z-index: 1000;
  font-size: 14px;
  line-height: 1.55;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}
.cookie-consent.is-hidden { display: none; }
.cookie-consent-text { color: rgba(255,255,255,0.92); }
.cookie-consent-text a {
  color: #FFB388;
  text-decoration: underline;
}
.cookie-consent-text a:hover { color: white; }
.cookie-consent-actions {
  display: flex;
  gap: 8px;
  white-space: nowrap;
}
.cookie-consent-btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.cookie-consent-btn-accept {
  background: #E36419;
  color: white;
}
.cookie-consent-btn-accept:hover { background: #C95513; }
.cookie-consent-btn-decline {
  background: transparent;
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.3);
}
.cookie-consent-btn-decline:hover {
  background: rgba(255,255,255,0.08);
  color: white;
}
@media (max-width: 640px) {
  .cookie-consent {
    grid-template-columns: 1fr;
    padding: 16px;
    bottom: 12px;
    left: 12px;
    right: 12px;
  }
  .cookie-consent-actions { flex-wrap: wrap; }
  .cookie-consent-btn { flex: 1; min-width: 100px; text-align: center; }
}

/* ============================================
   Cost panel — secondary AI-impact stat row
   Used on homepage cost-of-the-gap section
   ============================================ */
.coststat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 980px;
  margin: 16px auto 0;
  padding: 0 16px;
}
.coststat {
  background: white;
  border: 1px solid var(--rule-cool);
  border-radius: 6px;
  padding: 18px 18px 16px;
  text-align: left;
}
.coststat-num {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 8px;
}
.coststat-label {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.coststat-eyebrow {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 32px auto 0;
}
.cost-sources {
  text-align: center;
  font-size: 12px;
  color: var(--ink-faint);
  max-width: 820px;
  margin: 24px auto 0;
  line-height: 1.6;
}
@media (max-width: 900px) {
  .coststat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .coststat-row { grid-template-columns: 1fr; }
  .coststat-num { font-size: 24px; }
}

/* ============================================
   Visibility ceiling — Layer 1 vs competitors
   Used on compare.html
   ============================================ */
.vc-diagram {
  background: var(--ink, #0f1c30);
  border-radius: 12px;
  padding: 32px;
  margin: 32px 0;
  color: white;
  position: relative;
  overflow: hidden;
}
.vc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.vc-col-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  margin: 0 0 12px;
  /* Reserve room for a 2-line header so single-line headers in the
     other columns don't pull their cells higher than the wrapped
     middle column. Bottom-aligned so headers all sit on the same
     baseline regardless of how many lines they take. */
  min-height: 36px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  line-height: 1.3;
}
.vc-cell {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 14px 16px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 56px;
}
.vc-cell.muted { color: rgba(255, 255, 255, 0.45); }
.vc-cell.cybriq {
  background: rgba(15, 157, 88, 0.18);
  border-color: rgba(15, 157, 88, 0.45);
  color: #B8F0CF;
  font-weight: 600;
}
.vc-ceiling {
  position: relative;
  margin: 18px 0 12px;
  text-align: center;
}
.vc-ceiling::before {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.25) 0 6px, transparent 6px 12px);
}
.vc-ceiling span {
  position: relative;
  background: var(--ink, #0f1c30);
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.vc-cell.layer-1 {
  background: rgba(227, 100, 25, 0.18);
  border-color: rgba(227, 100, 25, 0.5);
  color: #FFD2B0;
  font-weight: 600;
  flex-direction: column;
  text-align: center;
}
.vc-cell.layer-1 small {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: rgba(255, 210, 176, 0.75);
  margin-top: 4px;
  letter-spacing: 0;
  text-transform: none;
}
.vc-cell.cybriq.tall {
  flex-direction: column;
  padding: 18px 16px;
}
.vc-cell.cybriq.tall strong {
  font-size: 16px;
  margin-bottom: 6px;
  color: white;
}
.vc-cell.cybriq.tall span {
  font-size: 13px;
  color: rgba(184, 240, 207, 0.88);
  font-weight: 400;
  line-height: 1.5;
}
.vc-blindrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.vc-blind {
  background: rgba(227, 100, 25, 0.14);
  border: 1px solid rgba(227, 100, 25, 0.35);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 13px;
  color: #FFD2B0;
}
.vc-blind strong { display: block; color: #FFB388; margin-bottom: 2px; }
.vc-blind span { color: rgba(255, 210, 176, 0.7); font-size: 12px; }
.vc-result {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.vc-result-cell {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  padding: 10px 14px;
}
.vc-result-cell.bad { color: rgba(255, 210, 176, 0.92); }
.vc-result-cell.good { color: #B8F0CF; font-weight: 600; }
.vc-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.vc-legend .swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}
.vc-legend .sw-blind { background: rgba(227, 100, 25, 0.5); }
.vc-legend .sw-cybriq { background: rgba(15, 157, 88, 0.5); }
@media (max-width: 720px) {
  .vc-diagram { padding: 22px 18px; }
  .vc-grid { grid-template-columns: 1fr; gap: 10px; }
  .vc-col-head { text-align: left; }
  .vc-blindrow { grid-template-columns: 1fr; }
  .vc-result { grid-template-columns: 1fr; gap: 6px; }
}

/* ============================================
   Language switcher (EN / ES)
   Sits to the left of "Book a Working Session" CTA in the nav.
   ============================================ */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  padding: 0;
  border: 1px solid var(--rule-cool);
  border-radius: 4px;
  overflow: hidden;
  background: white;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.lang-switcher a, .lang-switcher span {
  padding: 6px 10px;
  text-decoration: none;
  color: var(--ink-soft);
  text-transform: uppercase;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.lang-switcher a:hover { background: var(--bg-soft); color: var(--ink); }
.lang-switcher .is-active {
  background: var(--ink);
  color: white;
}
.lang-switcher .lang-divider {
  width: 1px;
  height: 18px;
  padding: 0;
  background: var(--rule-cool);
  align-self: center;
}
@media (max-width: 960px) {
  .lang-switcher { margin-right: 6px; font-size: 11px; }
  .lang-switcher a, .lang-switcher span { padding: 5px 8px; }
}

/* ============================================
   Footer language link (replaces nav lang switcher)
   Sits inline with the rest of the footer-bottom legal links.
   ============================================ */
.lang-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.lang-link svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────────────
   Footer accordion (all viewports)
   The footer was a 5-column wall of links that ate ~280px of page
   height. Each column with an h3 title is now collapsed by default
   and expands on click. Brand/tagline column has no h3 and stays
   visible. Mobile gets a slightly different treatment further down
   (full-width row stacking instead of grid columns).
   The .footer-col-collapsible class and .is-collapsed default state
   are applied by assets/cookie-consent.js. HTML is unchanged across
   the 158 pages that ship this footer.
   ──────────────────────────────────────────────────────────────────── */
.footer-col-collapsible > h3 {
  position: relative;
  padding-right: 24px;
  cursor: pointer;
  user-select: none;
  margin-bottom: 12px;
  outline-offset: 2px;
}
.footer-col-collapsible.is-collapsed > h3 { margin-bottom: 0; }
.footer-col-collapsible > h3:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}
.footer-col-collapsible > h3::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
  transition: color 160ms ease, transform 160ms ease;
}
.footer-col-collapsible > h3:hover::after { color: var(--orange); }
.footer-col-collapsible:not(.is-collapsed) > h3::after { content: '−'; }
.footer-col-collapsible.is-collapsed > *:not(h3) {
  display: none !important;
}
.footer-col-collapsible:not(.is-collapsed) > h3 { margin-bottom: 16px; }

/* Mobile: stack columns full-width with a divider rule between each */
@media (max-width: 720px) {
  .footer-col-collapsible {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 0 12px;
  }
  .footer-col-collapsible > h3 { margin-bottom: 0; padding-right: 32px; }
  .footer-col-collapsible:not(.is-collapsed) > h3 { margin-bottom: 14px; }
  .footer-col-collapsible:last-of-type { border-bottom: none; }
}

/* ────────────────────────────────────────────────────────────────────
   Breadcrumb navigation — added on every non-index page.
   Sits between the site-header and the first content section.
   Print-hidden so it doesn't waste paper on PDF export.
   ──────────────────────────────────────────────────────────────────── */
nav.breadcrumb {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--rule);
  padding: 11px 0;
  font-size: 13px;
}
nav.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: var(--ink-soft);
  gap: 0;
}
nav.breadcrumb li {
  display: inline-flex;
  align-items: center;
  line-height: 1.4;
}
nav.breadcrumb li:not(:last-child)::after {
  content: "\203A"; /* › */
  margin: 0 10px;
  color: var(--ink-faint, #99a3b3);
  font-weight: 400;
}
nav.breadcrumb a {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 120ms ease;
}
nav.breadcrumb a:hover { color: var(--orange); text-decoration: underline; }
nav.breadcrumb [aria-current="page"] {
  color: var(--navy);
  font-weight: 600;
}
@media (max-width: 540px) {
  nav.breadcrumb { font-size: 12px; padding: 9px 0; }
  nav.breadcrumb li:not(:last-child)::after { margin: 0 6px; }
}
@media print {
  nav.breadcrumb { display: none; }
}

/* ────────────────────────────────────────────────────────────────────
   Article TOC sidebar
   Built by assets/article-toc.js on pages with 3+ h2[id] in <main>.
   Sits to the right of the centered content column; hidden on
   viewports below 1280px (would crowd the reading column). Sticky-feel
   via position: fixed, scrolls internally if the list overflows.
   ──────────────────────────────────────────────────────────────────── */
.article-toc {
  position: fixed;
  top: 110px;
  right: 24px;
  width: 220px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  padding: 16px 0 16px 16px;
  border-left: 2px solid var(--rule);
  font-size: 13px;
  line-height: 1.45;
  z-index: 5;
  pointer-events: auto;
}
.article-toc h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute, #6b7686);
  margin: 0 0 10px;
  font-weight: 700;
}
.article-toc nav ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.article-toc li {
  margin: 0 0 6px;
}
.article-toc li.toc-h3 {
  padding-left: 12px;
  font-size: 12.5px;
}
.article-toc a {
  color: var(--ink-soft);
  text-decoration: none;
  display: block;
  padding: 2px 6px 2px 8px;
  border-left: 2px solid transparent;
  margin-left: -10px;
  transition: color 120ms ease, border-color 120ms ease;
}
.article-toc a:hover {
  color: var(--navy);
}
.article-toc li.is-active > a {
  color: var(--orange);
  border-left-color: var(--orange);
  font-weight: 600;
}
@media (max-width: 1280px) {
  .article-toc { display: none; }
}

/* ────────────────────────────────────────────────────────────────────
   Code-copy button
   Attached by assets/copy-code.js to every <pre> inside .api-endpoint,
   .api-curl, .api-spec. Positioned absolutely in the top-right of the
   <pre>. Stays subtle at rest; reveals on hover/focus.
   ──────────────────────────────────────────────────────────────────── */
.code-copy-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  font: 500 11px/1.2 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms ease, color 140ms ease, background 140ms ease, border-color 140ms ease;
}
.code-copy-btn svg { display: block; }
pre:hover .code-copy-btn,
pre:focus-within .code-copy-btn,
.code-copy-btn:focus-visible { opacity: 1; }
.code-copy-btn:hover {
  color: white;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}
.code-copy-btn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.code-copy-btn.is-copied {
  opacity: 1;
  color: #6ee27a;
  border-color: rgba(110, 226, 122, 0.45);
  background: rgba(110, 226, 122, 0.08);
}
.code-copy-btn.is-error {
  opacity: 1;
  color: #ff8585;
  border-color: rgba(255, 133, 133, 0.45);
  background: rgba(255, 133, 133, 0.08);
}
/* For light-background <pre> (rare on API pages but possible elsewhere) */
pre[style*="background: #fff"] .code-copy-btn,
pre[style*="background:#fff"] .code-copy-btn,
.code-light .code-copy-btn {
  color: var(--ink-soft);
  background: rgba(15, 28, 48, 0.04);
  border-color: var(--rule);
}

/* ────────────────────────────────────────────────────────────────────
   Deep-link target flash
   When a user navigates to a URL fragment (#term-id), the matching
   element gets a short gold pulse so it's obvious where the click
   landed. Mirrors the stats-target-flash animation used in stats/
   for visual consistency. Only fires on :target — never on load,
   scroll, or hover, so it stays attention-direction (not decoration).
   ──────────────────────────────────────────────────────────────────── */
@keyframes gold-target-flash {
  0% {
    background-color: rgba(212, 160, 23, 0.18);
    box-shadow: 0 0 0 0 rgba(212, 160, 23, 0.55);
    outline: 2px solid #d4a017;
    outline-offset: 4px;
  }
  70% {
    background-color: rgba(212, 160, 23, 0.04);
    box-shadow: 0 0 0 10px rgba(212, 160, 23, 0);
    outline-color: rgba(212, 160, 23, 0);
  }
  100% {
    background-color: transparent;
    box-shadow: 0 0 0 0 rgba(212, 160, 23, 0);
    outline-color: rgba(212, 160, 23, 0);
  }
}
/* Surfaces that get the flash. Listed individually so we never accidentally
   flash unrelated elements that happen to land at a :target (e.g. layout
   wrappers, nav scroll anchors). */
dl dt[id]:target,              /* glossary terms */
.api-endpoint:target,          /* API endpoint cards */
.compare-table tr[id]:target,  /* comparison-table rows */
main h2[id]:target,            /* article + report + case-study section heads */
main h3[id]:target {
  animation: gold-target-flash 2.4s ease-out 1;
  scroll-margin-top: 100px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  dl dt[id]:target,
  .api-endpoint:target,
  .compare-table tr[id]:target,
  main h2[id]:target,
  main h3[id]:target {
    animation: none;
    outline: 2px solid #d4a017;
    outline-offset: 4px;
    border-radius: 4px;
  }
}