/* =====================================================================
   Zaiten LLC — Website styles
   Design inspired by the "Technoit" template (Bootstrap 5 + AOS + Swiper
   + particles.js). Brand accent sampled from the Zaiten logo: #ea504e.
   ===================================================================== */

:root {
  --accent: #1d1d1b;        /* logo wordmark charcoal — primary brand color */
  --accent-dark: #000000;
  --accent-light: #4a4a48;
  --accent-rgb: 29, 29, 27;

  --highlight: #ea504e;     /* logo accent red — used sparingly as a pop */
  --highlight-rgb: 234, 80, 78;

  --dark: #0c1322;
  --dark-2: #121a2c;
  --dark-3: #1a2336;

  --text: #1d2130;
  --heading: #11151f;
  --muted: #69707d;
  --light-bg: #f6f8fb;
  --border: #e7ebf1;

  --shadow-sm: 0 6px 18px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 18px 40px rgba(16, 24, 40, 0.10);
  --radius: 16px;

  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { scroll-behavior: smooth; }

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: var(--font);
  color: var(--text);
  font-size: 15px;
  line-height: 1.75;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  font-weight: 700;
  color: var(--heading);
  line-height: 1.25;
}

a { color: var(--accent); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--accent-dark); }

.section { padding: 90px 0; }
.sections-bg { background-color: var(--light-bg); }

/* ---------- Section titles ---------- */
.section-title { margin-bottom: 48px; }
.section-title .eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--highlight);
  margin-bottom: 12px;
}
.section-title h2 {
  font-size: 38px;
  margin: 0 0 14px;
  position: relative;
}
.section-title p { color: var(--muted); max-width: 720px; margin: 0 auto; }
.section-title.text-center p { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn-zaiten {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .3px;
  padding: 13px 30px;
  border-radius: 50px;
  border: 2px solid var(--accent);
  transition: all .3s ease;
  white-space: nowrap;
}
.btn-zaiten:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(var(--accent-rgb), .35);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 13px 30px;
  border-radius: 50px;
  border: 2px solid rgba(255, 255, 255, .35);
  transition: all .3s ease;
}
.btn-ghost:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.08); }
.btn-ghost.dark { color: var(--heading); border-color: var(--border); }
.btn-ghost.dark:hover { background: var(--accent); color:#fff; border-color: var(--accent); }

/* =====================================================================
   Header
   ===================================================================== */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1100;
  padding: 18px 0;
  transition: all .35s ease;
}
.site-header.scrolled {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1100;
  background: rgba(12, 19, 34, .95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 12px 0;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.site-header .logo img { height: 56px; width: auto; }

.navmenu ul {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0; padding: 0;
}
.navmenu a {
  color: rgba(255,255,255,.85);
  font-size: 14.5px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  transition: color .25s ease;
}
.navmenu a:hover, .navmenu a.active { color: #fff; }
.navmenu a.active { color: var(--highlight); }

/* Responsive navbar adjustment for screens < 1400px to prevent item collision/wrapping */
@media (max-width: 1399px) and (min-width: 1200px) {
  .site-header .logo img { height: 48px; }
  .navmenu ul { gap: 2px; }
  .navmenu a { font-size: 13.5px; padding: 6px 10px; white-space: nowrap; }
  .header-cta { padding: 9px 16px; font-size: 13.5px; white-space: nowrap; }
}

@media (max-width: 1199px) and (min-width: 992px) {
  .site-header .logo img { height: 42px; }
  .navmenu ul { gap: 1px; }
  .navmenu a { font-size: 12.5px; padding: 5px 8px; white-space: nowrap; }
  .header-cta { padding: 8px 14px; font-size: 12.5px; white-space: nowrap; }
}

.mobile-nav-toggle {
  display: none;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
  background: none;
  border: 0;
  outline: none;
  padding: 4px;
  line-height: 1;
}

/* Mobile backdrop overlay */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 30, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  pointer-events: none;
}
body.nav-open .nav-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
body.nav-open {
  overflow: hidden !important;
}

@media (max-width: 991px) {
  .navmenu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 82vw;
    height: 100vh;
    height: 100dvh;
    background: #0c1322 !important;
    transform: translateX(100%);
    transition: transform .35s ease, visibility .35s ease;
    visibility: hidden;
    padding: 90px 24px 24px;
    box-shadow: -10px 0 40px rgba(0,0,0,.6);
    z-index: 1110;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  body.nav-open .navmenu {
    transform: translateX(0);
    visibility: visible;
  }
  /* Disable parent backdrop blur when nav menu is open so WebKit composite layer does not make drawer transparent */
  body.nav-open .site-header.scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #0c1322 !important;
  }
  .navmenu ul { flex-direction: column; align-items: stretch; gap: 4px; }
  .navmenu a { padding: 12px 14px; border-radius: 10px; }
  .navmenu a:hover { background: rgba(255,255,255,.06); }
  .mobile-nav-toggle { display: block; z-index: 1120; position: relative; }
  .header-cta.hide-on-mobile { display: none !important; }
}

/* =====================================================================
   Hero
   ===================================================================== */
.hero {
  position: relative;
  background: linear-gradient(90deg, rgba(8, 24, 58, .05) 35%, rgba(8, 22, 55, .55) 100%),
              url("../img/hero/hero-home-bg.png");
  background-size: cover;
  background-position: center left;
  color: #fff;
  overflow: hidden;
}
.hero.hero-home { min-height: 100vh; display: flex; align-items: center; padding: 140px 0 90px; }
.hero.hero-page { padding: 160px 0 90px; }

/* Per-page hero imagery (so each banner feels distinct) */
.hero.hero-process {
  background: linear-gradient(90deg, rgba(8, 20, 48, .25) 25%, rgba(8, 18, 44, .62) 100%),
              url("../img/hero/hero-process-bg.jpg");
  background-size: cover;
  background-position: center 28%;
}
.hero.hero-contact {
  background: linear-gradient(90deg, rgba(8, 24, 58, .05) 35%, rgba(8, 22, 55, .55) 100%),
              url("../img/hero/hero-contact-bg.jpg");
  background-size: cover;
  background-position: center left;
}

#particles-js {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero .container { position: relative; z-index: 2; }

.hero .eyebrow {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--highlight);
  font-weight: 600;
  margin-bottom: 18px;
}
.hero h1 {
  color: #fff;
  font-size: 54px;
  font-weight: 800;
  line-height: 1.12;
  margin-bottom: 22px;
}
.hero h1 .dot { color: var(--highlight); }
.hero .lead {
  color: rgba(255,255,255,.82);
  font-size: 17px;
  max-width: 640px;
  margin-bottom: 32px;
}
.hero.hero-page h1 { font-size: 46px; }
@media (min-width: 992px) {
  .hero.hero-process h1 { white-space: nowrap; font-size: clamp(28px, 2.8vw, 40px); }
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

@media (max-width: 767px) {
  .hero h1 { font-size: 36px; }
  .hero.hero-page h1 { font-size: 32px; }
  .section-title h2 { font-size: 30px; }
  .section { padding: 64px 0; }
}

/* =====================================================================
   Cards: pillars / capabilities / services
   ===================================================================== */
.feature-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 38px 32px;
  height: 100%;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.feature-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: transparent; }
.feature-card:hover::before { transform: scaleX(1); }

.feature-icon {
  width: 66px; height: 66px; flex: none;
  border-radius: 16px;
  display: grid; place-items: center;
  font-size: 28px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), .10);
  margin-bottom: 22px;
  transition: all .35s ease;
}
.feature-card:hover .feature-icon { background: var(--accent); color: #fff; transform: rotate(-6deg); }
.feature-card h3 { font-size: 20px; margin-bottom: 12px; }
.feature-card p { color: var(--muted); margin: 0; font-size: 14.5px; }

/* =====================================================================
   Process timeline
   ===================================================================== */
.timeline { position: relative; }
.timeline-step {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 30px 34px 96px;
  position: relative;
  margin-bottom: 26px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.timeline-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.timeline-step .step-num {
  position: absolute;
  left: 26px; top: 34px;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  display: grid; place-items: center;
  box-shadow: 0 10px 20px rgba(var(--accent-rgb), .35);
}
.timeline-step .phase-tag {
  font-size: 12px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px; display:block;
}
.timeline-step h3 { font-size: 21px; margin-bottom: 10px; }
.timeline-step p { color: var(--muted); margin: 0; }

/* =====================================================================
   Security / checklist list
   ===================================================================== */
.check-item {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 22px 24px; height: 100%;
  transition: transform .3s ease, box-shadow .3s ease;
}
.check-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.check-item i { color: var(--accent); font-size: 24px; flex: none; margin-top: 2px; }
.check-item h4 { font-size: 17px; margin-bottom: 6px; }
.check-item p { color: var(--muted); margin: 0; font-size: 14px; }

/* =====================================================================
   Trust / social proof + tech logos
   ===================================================================== */
.trust-block { background: var(--light-bg); border-radius: 22px; padding: 50px; }
.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.tech-logo {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: grid; place-items: center;
  padding: 26px 10px;
  transition: all .3s ease;
}
.tech-logo img { height: 42px; width: auto; filter: grayscale(100%); opacity: .65; transition: all .3s ease; }
.tech-logo:hover { box-shadow: var(--shadow-sm); transform: translateY(-4px); }
.tech-logo:hover img { filter: grayscale(0); opacity: 1; }

/* =====================================================================
   Stats counter
   ===================================================================== */
.stats {
  background: linear-gradient(rgba(10, 16, 30, .92), rgba(10, 16, 30, .94)),
              url("../img/hero/hero-home-bg.png");
  background-size: cover; background-position: center;
  color: #fff;
}
.stat-item { text-align: center; padding: 16px; }
.stat-item .num { font-size: 44px; font-weight: 800; color: #fff; line-height: 1; }
.stat-item .num .suffix { color: var(--highlight); }
.stat-item .label { color: rgba(255,255,255,.72); font-size: 14px; margin-top: 8px; }

/* =====================================================================
   Testimonials (swiper)
   ===================================================================== */
.testimonial-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px;
  height: auto;
  box-shadow: var(--shadow-sm);
}
.testimonial-card .quote-icon { color: var(--highlight); font-size: 30px; margin-bottom: 14px; }
.testimonial-card p { color: var(--text); font-style: italic; margin-bottom: 22px; }
.testimonial-card .person { display: flex; align-items: center; gap: 14px; }
.testimonial-card .person img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.testimonial-card .person .person-mark {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 16px; letter-spacing: .5px;
}
.testimonial-card .person h5 { margin: 0; font-size: 16px; }
.testimonial-card .person span { color: var(--muted); font-size: 13px; }
.swiper { padding: 12px 6px 56px; }
.swiper-pagination-bullet { background: var(--accent); }
.swiper-pagination-bullet-active { background: var(--accent); }

/* =====================================================================
   CTA band
   ===================================================================== */
.cta-band {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  border-radius: 24px;
  padding: 56px;
  text-align: center;
}
.cta-band h2 { color: #fff; font-size: 34px; margin-bottom: 14px; line-height: 1.25; }
.cta-band p { color: rgba(255,255,255,.9); max-width: 640px; margin: 0 auto 28px; font-size: 15px; line-height: 1.6; }
.cta-band .btn-zaiten { background:#fff; color: var(--accent-dark); border-color:#fff; }
.cta-band .btn-zaiten:hover { background: var(--dark); color:#fff; border-color: var(--dark); box-shadow:none; }

@media (max-width: 767px) {
  .cta-band {
    padding: 36px 20px;
    border-radius: 18px;
  }
  .cta-band[data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .cta-band h2 {
    font-size: 24px;
    margin-bottom: 12px;
  }
  .cta-band p {
    font-size: 14px;
    margin-bottom: 22px;
  }
  .cta-band .btn-zaiten {
    display: inline-flex;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    text-align: center;
    padding: 12px 16px;
    font-size: 14px;
  }
}


/* =====================================================================
   Contact
   ===================================================================== */
.contact-form {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow-sm);
}
.contact-form label { font-weight: 600; font-size: 13.5px; margin-bottom: 6px; color: var(--heading); }
.contact-form .form-control {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14.5px;
  background: #fbfcfe;
}
.contact-form .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15);
  background: #fff;
}
.form-success {
  display: none;
  background: rgba(var(--accent-rgb), .08);
  border: 1px solid rgba(var(--accent-rgb), .3);
  color: var(--accent-dark);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 22px;
  font-size: 14.5px;
  font-weight: 500;
}
.form-success.show { display: block; }

.contact-side { background: var(--dark); color: #fff; border-radius: var(--radius); padding: 40px; height: 100%; }
.contact-side h3 { color: #fff; font-size: 22px; margin-bottom: 24px; }
.contact-info-item { display: flex; gap: 16px; margin-bottom: 24px; }
.contact-info-item i {
  width: 46px; height: 46px; flex: none;
  border-radius: 12px; display: grid; place-items: center;
  background: rgba(var(--highlight-rgb), .18); color: var(--highlight); font-size: 20px;
}
.contact-info-item h5 { color: #fff; font-size: 15px; margin: 0 0 4px; }
.contact-info-item p { color: rgba(255,255,255,.7); margin: 0; font-size: 14px; }
.privacy-note {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 20px; margin-top: 8px;
  color: rgba(255,255,255,.62); font-size: 13px;
}

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer { background: var(--dark); color: rgba(255,255,255,.7); padding: 64px 0 0; }
.site-footer .logo img { height: 36px; margin-bottom: 18px; }
.site-footer h4 { color: #fff; font-size: 16px; margin-bottom: 18px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 10px; }
.site-footer ul a { color: rgba(255,255,255,.7); font-size: 14px; }
.site-footer ul a:hover { color: var(--highlight); padding-left: 4px; }
.site-footer p { font-size: 14px; }
.footer-seo { color: rgba(255,255,255,.5); font-size: 13px; line-height: 1.7; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 48px; padding: 22px 0;
  font-size: 13px; color: rgba(255,255,255,.55);
}
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: rgba(255,255,255,.08); color: #fff; margin-right: 8px;
  transition: all .3s ease;
}
.footer-social a:hover { background: var(--accent); color: #fff; transform: translateY(-3px); }

/* ---------- Scroll-to-top ---------- */
.scroll-top {
  position: fixed; right: 22px; bottom: 22px;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: all .3s ease;
  z-index: 999; border: 0; cursor: pointer;
}
.scroll-top.show { opacity: 1; visibility: visible; }
.scroll-top:hover { background: var(--accent-dark); color:#fff; }

/* =====================================================================
   ADDITIONS — new pages (Zaiten AI, Platforms & Tools), the two named
   client endorsements, and a small accessibility/quality floor.
   Everything below is additive; existing pages render unchanged.
   ===================================================================== */

/* ---------- Accessibility & quality floor ---------- */
/* Fixed-header was hiding anchored section titles on jump links */
:target,
section[id] { scroll-margin-top: 96px; }

/* Visible keyboard focus (custom buttons lost the default ring) */
a:focus-visible,
button:focus-visible,
.btn-zaiten:focus-visible,
.btn-ghost:focus-visible,
.form-control:focus-visible {
  outline: 3px solid var(--highlight);
  outline-offset: 2px;
}

/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .feature-card:hover,
  .timeline-step:hover,
  .tech-logo:hover,
  .check-item:hover,
  .gov-card:hover { transform: none; }
}

/* Tech-logo grid was locked to 3 columns even on small phones */
@media (max-width: 575px) {
  .tech-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Inline contextual links */
.inline-link { color: var(--highlight); font-weight: 600; }
.inline-link:hover { color: var(--accent-dark); text-decoration: underline; }
.tech-more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px; font-weight: 600; font-size: 14px; color: var(--highlight);
}
.tech-more:hover { color: var(--accent-dark); gap: 12px; }

/* ---------- Featured (named) client endorsements ---------- */
.featured-testimonials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: 26px;
  margin-top: 34px;
}
.featured-quote {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--highlight);
  border-radius: var(--radius);
  padding: 34px 36px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.featured-quote .quote-icon { color: var(--highlight); font-size: 30px; margin-bottom: 10px; }
.featured-quote p {
  color: var(--text); font-size: 14.5px; line-height: 1.8; margin-bottom: 24px;
  font-style: italic;
  -webkit-user-select: none; user-select: none; cursor: default;
}
.featured-quote .person { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 16px; }
.featured-quote .person-mark {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 16px; letter-spacing: .5px;
}
.featured-quote .person h5 { margin: 0; font-size: 16px; }
.featured-quote .person span { color: var(--muted); font-size: 13px; }
.featured-swiper .swiper-slide { height: auto; }
@media (max-width: 991px) { .featured-testimonials { grid-template-columns: 1fr; } }

/* Quote Collapse & Expand */
.quote-body {
  position: relative;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.quote-body p {
  margin-bottom: 0 !important;
}
.quote-body.is-collapsed {
  max-height: 108px;
  overflow: hidden;
}
.quote-body.is-collapsed::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
  pointer-events: none;
}

.btn-toggle-quote {
  background: transparent;
  border: none;
  color: var(--highlight);
  font-weight: 600;
  font-size: 13.5px;
  padding: 8px 0 14px;
  margin-top: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
  align-self: flex-start;
}
.btn-toggle-quote:hover {
  color: #085863;
  text-decoration: underline;
}
.btn-toggle-quote:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn-toggle-quote i {
  font-size: 12px;
  transition: transform 0.2s ease;
}

/* =====================================================================
   New-page heroes — brand-native CSS gradient (no hotlinked imagery)
   ===================================================================== */
.hero.hero-ai,
.hero.hero-platforms {
  background:
    radial-gradient(820px 520px at 82% -12%, rgba(var(--highlight-rgb), .20), transparent 60%),
    radial-gradient(680px 520px at -5% 115%, rgba(var(--highlight-rgb), .10), transparent 55%),
    linear-gradient(135deg, #0c1322 0%, #161f31 52%, #0b1120 100%);
}

/* ---------- Eyebrow used on dark/light section intros consistently ---------- */
.lede { color: var(--muted); max-width: 760px; margin: 0 auto; }

/* =====================================================================
   Zaiten AI — governance cards (human gate + tool chips)
   ===================================================================== */
.gov-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 26px; height: 100%;
  transition: transform .35s ease, box-shadow .35s ease;
}
.gov-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.gov-card .gov-num {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(var(--accent-rgb), .1); color: var(--accent); font-weight: 700; margin-bottom: 16px;
}
.gov-card h3 { font-size: 18px; margin-bottom: 6px; }
.gov-card .gov-sub { color: var(--muted); font-size: 13.5px; margin-bottom: 16px; }
.gate-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--highlight); margin-bottom: 6px;
}
.gov-card .gate-text { font-size: 13px; color: var(--heading); font-weight: 600; margin-bottom: 16px; }
.tool-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tool-chip {
  font-size: 11.5px; font-weight: 600; color: var(--accent);
  background: var(--light-bg); border: 1px solid var(--border);
  border-radius: 50px; padding: 4px 12px;
}

/* Enforcement strip / generic dark callout */
.note-band {
  background: var(--dark); color: rgba(255,255,255,.82);
  border-radius: 16px; padding: 22px 28px; font-size: 14.5px; margin-top: 28px;
}
.note-band strong { color: #fff; }

/* ---------- Evidence numbers (deep-dive metrics) ---------- */
.deepdive {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; height: 100%;
  display: flex; flex-direction: column;
}
.deepdive-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 24px 28px 0;
}
.deepdive-head h3 { font-size: 20px; margin: 0; }
.deepdive-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.dd-tag {
  font-size: 11px; font-weight: 600; letter-spacing: .5px;
  background: var(--dark); color: #fff; border-radius: 50px; padding: 4px 12px;
}
.deepdive-body { padding: 18px 28px 8px; flex-grow: 1; }
.deepdive-body .row-label {
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--accent); margin: 14px 0 4px;
}
.deepdive-body p { color: var(--muted); font-size: 14px; margin: 0; }
.evidence-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  background: var(--dark); margin: 16px 28px; border-radius: 14px; padding: 20px 16px;
}
.evidence-row .ev { text-align: center; }
.evidence-row .ev .num { font-size: 26px; font-weight: 800; color: #fff; line-height: 1.1; }
.evidence-row .ev .num span { color: var(--highlight); }
.evidence-row .ev .lbl { font-size: 11.5px; color: rgba(255,255,255,.7); margin-top: 4px; }
.lesson {
  border-top: 1px solid var(--border);
  background: rgba(var(--highlight-rgb), .05);
  padding: 16px 28px; font-size: 13.5px; color: var(--text);
}
.lesson strong { color: var(--highlight); }

/* ---------- Lean-team comparison ---------- */
.compare-grid {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px;
}
.compare-card { border-radius: 20px; padding: 38px 34px; }
.compare-card.light { background: var(--light-bg); border: 1px solid var(--border); }
.compare-card.dark { background: var(--dark); color: #fff; }
.compare-card .c-label { font-size: 13px; font-weight: 600; letter-spacing: .5px; margin-bottom: 8px; }
.compare-card.dark .c-label { color: #fff; }
.compare-card .c-num { font-size: 60px; font-weight: 800; line-height: 1; color: var(--heading); }
.compare-card.dark .c-num { color: #fff; }
.compare-card .c-num small { font-size: 20px; font-weight: 600; color: var(--muted); }
.compare-card.dark .c-num small { color: rgba(255,255,255,.7); }
.compare-card p { font-size: 13.5px; margin: 14px 0 0; color: var(--muted); }
.compare-card.dark p { color: rgba(255,255,255,.8); }
.compare-card.dark p strong { color: var(--highlight); }
.compare-plus {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  background: var(--highlight); color: #fff; font-weight: 700; font-size: 15px;
  display: grid; place-items: center; box-shadow: 0 10px 22px rgba(var(--highlight-rgb), .4);
}
@media (max-width: 767px) {
  .compare-grid { grid-template-columns: 1fr; }
  .compare-plus { margin: -6px auto; }
}

/* ---------- AI Practice Stack list ---------- */
.stack-list { display: flex; flex-direction: column; gap: 10px; }
.stack-bar {
  border-radius: 12px; padding: 12px 20px; font-weight: 600; font-size: 14.5px;
  border: 1px solid var(--border);
  display: flex; align-items: center; min-height: 54px;
}
.stack-bar.is-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.stack-bar.is-light { background: var(--light-bg); color: var(--heading); }
.skill-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.skill-chip {
  background: var(--light-bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 16px; font-size: 13.5px; font-weight: 600; color: var(--accent);
  display: flex; align-items: center; min-height: 54px;
}
@media (max-width: 575px) { .skill-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   Platforms & Tools page
   ===================================================================== */
.tool-cat { margin-bottom: 14px; }
.tool-cat h3 { font-size: 20px; margin-bottom: 4px; }
.tool-cat p { color: var(--muted); font-size: 14px; margin: 0; }
.tool-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 20px 22px; height: 100%;
  transition: transform .3s ease, box-shadow .3s ease;
}
.tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.tool-card .tc-logo {
  width: 48px; height: 48px; flex: none; border-radius: 12px;
  display: grid; place-items: center; background: var(--light-bg); border: 1px solid var(--border);
}
.tool-card .tc-logo img { height: 28px; width: auto; }
.tool-card .tc-logo i { font-size: 24px; color: var(--accent); }
.tool-card h4 { font-size: 16px; margin: 0 0 4px; }
.tool-card p { color: var(--muted); font-size: 13.5px; margin: 0; }

/* =====================================================================
   ADDITION — "Governed Gate" animated hero (Zaiten AI page only)
   An AI-drafted artifact flows down the lane, gets pressed with a red
   human-approval stamp at the gate, then ships. Scoped to .hero-ai.
   Reduced motion -> static, settled "approved" tableau.
   ===================================================================== */
.hero-ai {
  --machine: #57b6c4;                 /* cool "machine/draft" state color */
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.hero-ai .hero-ai-inner {
  display: flex; align-items: center; gap: 56px; flex-wrap: wrap;
}
.hero-ai .hero-ai-copy { flex: 1 1 380px; min-width: 300px; }
.hero-ai .hero-ai-copy h1 { font-size: 46px; line-height: 1.1; }
.hero-ai .hero-ai-copy .lead { margin-bottom: 30px; }
.hero-ai .hero-ai-demo { flex: 1 1 460px; min-width: 300px; }

/* ---- delivery lane ---- */
.zlane {
  position: relative; height: 300px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10); border-radius: 20px; padding: 22px;
  box-shadow: 0 30px 60px rgba(0,0,0,.35); overflow: hidden;
}
.zlane::before {                       /* ambient conveyor track */
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 6px, transparent 6px 16px);
  background-size: 220px 2px; opacity: .5; animation: ztrack 3.2s linear infinite;
}
@keyframes ztrack { to { background-position: 220px 0; } }

/* ---- endpoints ---- */
.znode {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 11px; line-height: 1.3; letter-spacing: 1px;
  text-transform: uppercase; text-align: center; color: rgba(255,255,255,.6);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.znode::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.35); }
.znode.in { left: 3%; }
.znode.out { right: 3%; }
.znode.out::after { background: var(--highlight); box-shadow: 0 0 14px rgba(var(--highlight-rgb), .7); }

/* ---- gate / checkpoint ---- */
.zgate {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 158px; height: 162px; border-radius: 16px;
  border: 1.5px solid rgba(var(--highlight-rgb), .55);
  background: radial-gradient(130px 130px at 50% 0, rgba(var(--highlight-rgb), .18), transparent 70%);
  box-shadow: inset 0 0 30px rgba(var(--highlight-rgb), .10);
}
.zgate-label {
  position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 2px;
  color: var(--highlight); white-space: nowrap;
}
.zscan {
  position: absolute; left: 10px; right: 10px; top: 12px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--highlight-rgb), .9), transparent);
  opacity: 0; animation: zscan 5.5s linear infinite;
}
@keyframes zscan {
  0%, 26% { opacity: 0; top: 12px; }
  28% { opacity: 1; }
  40% { top: 140px; opacity: 1; }
  44%, 100% { opacity: 0; }
}

/* ---- the artifact packet ---- */
.zpacket {
  position: absolute; top: 50%; left: 2%; transform: translate(-50%,-50%);
  width: 144px; padding: 12px 14px; border-radius: 12px; z-index: 3;
  background: #0f1830; border: 1.5px solid var(--machine);
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 0 0 1px rgba(87,182,196,.25), 0 14px 30px rgba(0,0,0,.45);
  animation: zflow 5.5s ease-in-out infinite, zstate 5.5s linear infinite;
}
.zpacket .ptag {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .5px;
  color: var(--machine); animation: zptag 5.5s linear infinite;
}
.zpacket .ptitle { font-family: var(--mono); font-size: 12.5px; color: #fff; }
.zpacket .pcheck {
  position: absolute; top: -11px; right: -11px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--highlight); color: #fff; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; box-shadow: 0 6px 16px rgba(var(--highlight-rgb), .5);
  opacity: 0; transform: scale(.3); animation: zpcheck 5.5s ease-out infinite;
}
@keyframes zflow {
  0% { left: 2%; opacity: 0; } 6% { opacity: 1; }
  28% { left: 50%; } 44% { left: 50%; }
  68% { left: 94%; } 78% { opacity: 1; }
  86% { left: 99%; opacity: 0; } 100% { left: 99%; opacity: 0; }
}
@keyframes zstate {
  0%, 34% { border-color: var(--machine); box-shadow: 0 0 0 1px rgba(87,182,196,.25), 0 14px 30px rgba(0,0,0,.45); }
  39%, 100% { border-color: var(--highlight); box-shadow: 0 0 0 1px rgba(var(--highlight-rgb), .45), 0 16px 36px rgba(var(--highlight-rgb), .30); }
}
@keyframes zptag { 0%, 34% { opacity: 1; color: var(--machine); } 39%, 100% { opacity: .4; color: rgba(255,255,255,.5); } }
@keyframes zpcheck { 0%, 35% { opacity: 0; transform: scale(.3); } 41% { opacity: 1; transform: scale(1.15); } 46% { transform: scale(1); } 100% { opacity: 1; transform: scale(1); } }

/* ---- the red human-approval stamp (the one bold moment) ---- */
.zstamp {
  position: absolute; left: 50%; top: 50%; z-index: 4; white-space: nowrap;
  font-family: var(--mono); font-weight: 800; letter-spacing: 1px; font-size: 13px; color: #fff;
  padding: 8px 14px; border-radius: 8px;
  background: var(--highlight); border: 2px solid rgba(255,255,255,.25);
  box-shadow: 0 14px 30px rgba(var(--highlight-rgb), .5);
  opacity: 0; transform: translate(-50%,-160%) scale(1.6) rotate(-10deg);
  animation: zstamp 5.5s cubic-bezier(.2,.8,.2,1) infinite;
}
.zstamp::after {
  content: ""; position: absolute; inset: -6px; border: 2px solid rgba(var(--highlight-rgb), .6);
  border-radius: 12px; opacity: 0; animation: zring 5.5s ease-out infinite;
}
@keyframes zstamp {
  0%, 30% { opacity: 0; transform: translate(-50%,-160%) scale(1.6) rotate(-10deg); }
  35% { opacity: 1; transform: translate(-50%,-50%) scale(.9) rotate(-9deg); }
  41% { transform: translate(-50%,-50%) scale(1) rotate(-8deg); }
  64% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(-8deg); }
  74% { opacity: 0; transform: translate(-50%,-50%) scale(1) rotate(-8deg); }
  100% { opacity: 0; }
}
@keyframes zring {
  0%, 33% { opacity: 0; transform: scale(.6); }
  36% { opacity: .9; transform: scale(1); }
  50% { opacity: 0; transform: scale(1.7); }
  100% { opacity: 0; }
}

/* ---- caption ---- */
.zdemo-cap {
  margin: 16px 0 0; text-align: center; font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .3px; color: rgba(255,255,255,.55);
}
.zdemo-cap b { color: var(--highlight); font-weight: 700; }

/* ---- responsive ---- */
@media (max-width: 991px) {
  .hero-ai .hero-ai-inner { gap: 36px; }
  .hero-ai .hero-ai-copy h1 { font-size: 34px; }
  .zlane { height: 264px; }
}
@media (max-width: 575px) {
  .zlane { height: 234px; padding: 16px; }
  .zgate { width: 120px; height: 128px; }
  .zpacket { width: 116px; padding: 10px 12px; }
  .znode { font-size: 9.5px; }
}

/* ---- reduced motion: settled, approved tableau (no animation) ---- */
@media (prefers-reduced-motion: reduce) {
  .zlane::before, .zscan, .zstamp::after { animation: none; }
  .zscan { display: none; }
  .zpacket {
    animation: none; left: 50%; border-color: var(--highlight);
    box-shadow: 0 0 0 1px rgba(var(--highlight-rgb), .45), 0 16px 36px rgba(var(--highlight-rgb), .30);
  }
  .zpacket .ptag { animation: none; opacity: .5; color: rgba(255,255,255,.6); }
  .zpacket .pcheck { animation: none; opacity: 1; transform: scale(1); }
  .zstamp { animation: none; opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(-8deg); }
}

/* =====================================================================
   ADDITION — "Governed Frame" animated hero (Platforms & Tools page)
   Tools cycle through a swappable slot; the red ✓ GOVERNED stamp and the
   fixed governance row never move. Same stamp motif as the Zaiten AI hero.
   Scoped to .hero-platforms. Reduced motion -> static settled state.
   ===================================================================== */
.hero-platforms {
  --machine: #57b6c4;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.hero-platforms .pf-inner { display: flex; align-items: center; gap: 56px; flex-wrap: wrap; }
.hero-platforms .pf-copy { flex: 1 1 380px; min-width: 300px; }
.hero-platforms .pf-copy h1 { font-size: 46px; line-height: 1.1; }
.hero-platforms .pf-copy .lead { margin-bottom: 30px; }
.hero-platforms .pf-demo { flex: 1 1 460px; min-width: 300px; }

/* ---- the fixed governed frame ---- */
.pf-frame {
  position: relative; height: 300px; display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10); border-radius: 20px; padding: 26px 24px;
  box-shadow: 0 30px 60px rgba(0,0,0,.35), inset 0 2px 0 rgba(var(--highlight-rgb), .35);
  overflow: hidden;
}
.pf-frame-label {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 2px;
  color: rgba(255,255,255,.45); text-transform: uppercase;
}

/* ---- the pinned, immovable governance stamp ---- */
.pf-stamp {
  position: absolute; top: -12px; right: 18px; z-index: 4;
  font-family: var(--mono); font-weight: 800; letter-spacing: 1px; font-size: 12.5px; color: #fff;
  padding: 7px 13px; border-radius: 8px; white-space: nowrap;
  background: var(--highlight); border: 2px solid rgba(255,255,255,.25);
  box-shadow: 0 12px 26px rgba(var(--highlight-rgb), .5);
  transform: rotate(-8deg); transform-origin: center;
  animation: pf-stamp 1.8s ease-in-out infinite;
}
.pf-stamp::after {
  content: ""; position: absolute; inset: -5px; border: 2px solid rgba(var(--highlight-rgb), .55);
  border-radius: 11px; opacity: 0; animation: pf-ring 1.8s ease-out infinite;
}
@keyframes pf-stamp {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  10% { transform: rotate(-8deg) scale(1.06); }
  28% { transform: rotate(-8deg) scale(1); }
}
@keyframes pf-ring {
  0% { opacity: 0; transform: scale(.7); }
  10% { opacity: .8; transform: scale(1); }
  34% { opacity: 0; transform: scale(1.5); }
  100% { opacity: 0; }
}

/* ---- the swappable tool slot ---- */
.pf-slot { text-align: center; }
.pf-slot-label {
  display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.5px;
  text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 12px;
}
.pf-slot-label em { color: var(--machine); font-style: normal; font-weight: 700; }
.pf-reel {
  display: grid; place-items: center; min-height: 52px;
  border: 1.5px dashed rgba(87,182,196,.5); border-radius: 14px;
  background: rgba(87,182,196,.05); padding: 6px; position: relative; overflow: hidden;
}
.pf-reel::after {                      /* light sweep as tools swap */
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  animation: pf-sweep 1.8s ease-in-out infinite;
}
@keyframes pf-sweep { 0% { left: -45%; } 55%, 100% { left: 110%; } }
.pf-tool {
  grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 14px; font-weight: 600; color: #fff;
  background: #0f1830; border: 1.5px solid rgba(255,255,255,.14); border-radius: 10px;
  padding: 9px 18px; white-space: nowrap; opacity: 0;
  animation: pf-cycle 9s ease-in-out infinite;
}
.pf-tool i { width: 8px; height: 8px; border-radius: 50%; background: var(--machine); box-shadow: 0 0 10px rgba(87,182,196,.8); }
.pf-tool:nth-child(1) { animation-delay: 0s; }
.pf-tool:nth-child(2) { animation-delay: 1.8s; }
.pf-tool:nth-child(3) { animation-delay: 3.6s; }
.pf-tool:nth-child(4) { animation-delay: 5.4s; }
.pf-tool:nth-child(5) { animation-delay: 7.2s; }
@keyframes pf-cycle {
  0% { opacity: 0; transform: translateY(13px) scale(.96); }
  3% { opacity: 1; transform: translateY(0) scale(1); }
  17% { opacity: 1; transform: translateY(0) scale(1); }
  20% { opacity: 0; transform: translateY(-13px) scale(.96); }
  100% { opacity: 0; transform: translateY(-13px) scale(.96); }
}

/* ---- the fixed governance row (never animates) ---- */
.pf-fixed {
  display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .3px; color: rgba(255,255,255,.55);
}
.pf-fixed span { position: relative; }
.pf-fixed span + span::before {
  content: "·"; position: absolute; left: -9px; color: rgba(255,255,255,.3);
}
.pf-fixed span:last-child { color: var(--highlight); font-weight: 700; }

/* ---- caption ---- */
.pf-cap {
  margin: 16px 0 0; text-align: center; font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .3px; color: rgba(255,255,255,.55);
}
.pf-cap b { color: var(--highlight); font-weight: 700; }

/* ---- responsive ---- */
@media (max-width: 991px) {
  .hero-platforms .pf-inner { gap: 36px; }
  .hero-platforms .pf-copy h1 { font-size: 34px; }
  .pf-frame { height: 268px; }
}
@media (max-width: 575px) {
  .pf-frame { height: 250px; padding: 20px 16px; }
  .pf-tool { font-size: 12.5px; padding: 8px 14px; }
}

/* ---- reduced motion: one tool shown, stamp settled, nothing moves ---- */
@media (prefers-reduced-motion: reduce) {
  .pf-stamp, .pf-stamp::after, .pf-reel::after { animation: none; }
  .pf-stamp::after { display: none; }
  .pf-tool { animation: none; opacity: 0; }
  .pf-tool:first-child { opacity: 1; transform: none; }
}

/* =====================================================================
   MCP Section Concepts
   ===================================================================== */
:root {
  --machine: #3b82f6;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* AI generated CSS for concepts - LIGHT THEME */
.mcp-concepts {
   padding: 0;
   margin-top: 40px;
}
.concept{ background: #fff; border: 1px solid var(--border); border-radius: 18px;
  padding: 32px; margin-bottom: 30px; box-shadow: var(--shadow-sm); }
.concept-h{ display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
.concept-h .n{ font-family:var(--mono); font-size:16px; color:var(--highlight); font-weight:700; }
.concept-h h3{ font-size:22px; margin:0; color: var(--heading); }
.concept-cap{ color:var(--muted); font-size:14px; margin:0 0 24px; max-width:100%; }
.stage{ background: var(--light-bg); border: 1px solid var(--border); border-radius: 14px;
  padding: 32px 24px; }

/* shared chip styles */
.chip{ font-family:var(--mono); font-size:12.5px; background:#fff; border:1.5px solid var(--border);
  border-radius:9px; padding:8px 14px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; color: var(--text); }
.chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--machine); flex:none; }
.chip.src{ border-color: rgba(59, 130, 246, 0.4); }
.chip.gate{ border-color:var(--highlight); color:var(--highlight); background:rgba(var(--highlight-rgb),.05); }
.chip.gate .dot{ background:var(--highlight); }
.arrow{ font-family:var(--mono); color:rgba(0,0,0,.3); font-size:18px; padding:0 4px; }
.lbl{ font-family:var(--mono); font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); font-weight: 600; }

/* ---- C1 hub & spoke ---- */
.hub{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center; }
.hub .sources{ display:flex; flex-direction:column; gap:10px; }
.hub .sources .chip{ animation:pulse 2.4s ease-in-out infinite; }
.hub .sources .chip:nth-child(2){ animation-delay:.3s; }
.hub .sources .chip:nth-child(3){ animation-delay:.6s; }
.hub .sources .chip:nth-child(4){ animation-delay:.9s; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(59, 130, 246, 0);} 50%{ box-shadow:0 0 0 4px rgba(59, 130, 246, .15);} }
.node{ font-family:var(--mono); font-size:13.5px; text-align:center; background:#fff;
  border:1.5px solid var(--border); border-radius:12px; padding:14px 18px; font-weight: 600; color: var(--heading); }
.node.agent{ border-color:rgba(0,0,0,.2); }
.node .color-machine { color: var(--machine); }
.node small{ display:block; color:var(--muted); font-size:11px; margin-top:4px; font-weight: 400; }
.mcp-bracket{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.mcp-bracket .lbl{ color:var(--machine); }

/* ---- C2 swimlanes ---- */
.lane{ display:flex; align-items:center; gap:16px; padding:16px 0; border-bottom:1px dashed var(--border); }
.lane:last-child{ border-bottom:0; }
.lane .lane-name{ width:130px; flex:none; }
.lane .lane-body{ display:flex; gap:10px; flex-wrap:wrap; }
.step{ font-family:var(--mono); font-size:12px; background:#fff; border:1.5px solid var(--border);
  border-radius:8px; padding:8px 12px; white-space:nowrap; color: var(--text); }
.step.b{ border-color:rgba(59, 130, 246, .35); }
.lane.human .lane-body{ width:100%; justify-content:flex-end; }

/* ---- C3 orbit ---- */
.orbit{ position:relative; width:340px; height:340px; margin:10px auto; }
.orbit .center{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center;
  font-family:var(--mono); font-size:13px; background:#fff; border:1.5px solid rgba(0,0,0,.2);
  border-radius:50%; width:108px; height:108px; display:grid; place-items:center; line-height:1.3; font-weight: 600; }
.orbit .center small{ display:block; color:var(--machine); font-size:10.5px; font-weight: 400; }
.orbit .o{ position:absolute; top:50%; left:50%; font-family:var(--mono); font-size:11.5px;
  background:#fff; border:1.5px solid var(--border); border-radius:8px; padding:8px 12px; white-space:nowrap;
  transform-origin:center; box-shadow: var(--shadow-sm); }
.orbit .o.gate{ border-color:var(--highlight); color:var(--highlight); background:rgba(var(--highlight-rgb),.05); }
.ring-note{ text-align:center; margin-top: 20px; }

/* ---- C4 terminal ---- */
.term{ background:#1e1e1e; border:1px solid var(--border); border-radius:14px; overflow:hidden;
  font-family:var(--mono); color: #d4d4d4; box-shadow: var(--shadow-md); margin: 0 auto; width: 100%; max-width: 1000px; }
.term-bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; background:#2d2d2d;
  border-bottom:1px solid #111; }
.term-bar i{ width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.2); }
.term-bar i:first-child{ background:#ff5f56; } 
.term-bar i:nth-child(2){ background:#ffbd2e; } 
.term-bar i:nth-child(3){ background:#27c93f; } 
.term-bar span{ margin-left:10px; font-size:12px; color:rgba(255,255,255,.5); }
.term-body{ padding:20px 22px; font-size:13px; line-height:2; }
.term-body .ln{ opacity:0; animation:typein .35s ease forwards; white-space:pre-wrap; }
.term-body .ln:nth-child(1){ animation-delay:.1s; } .term-body .ln:nth-child(2){ animation-delay:.5s; }
.term-body .ln:nth-child(3){ animation-delay:.9s; } .term-body .ln:nth-child(4){ animation-delay:1.3s; }
.term-body .ln:nth-child(5){ animation-delay:1.7s; } .term-body .ln:nth-child(6){ animation-delay:2.1s; }
.term-body .ln:nth-child(7){ animation-delay:2.5s; } .term-body .ln:nth-child(8){ animation-delay:2.9s; }
@keyframes typein{ from{ opacity:0; transform:translateY(3px);} to{ opacity:1; transform:none;} }
.term-body .k{ color:#569cd6; } .term-body .ok{ color:#4ec9b0; }
.term-body .gate{ color:#f14c4c; }
.term-body .cur{ display:inline-block; width:8px; background:#d4d4d4; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

@media (prefers-reduced-motion: reduce){
  .hub .sources .chip, .term-body .ln, .cur{ animation:none; opacity:1; }
}
@media (max-width:560px){ .lane .lane-name{ width:90px; } .orbit{ width:260px; height:260px; } }

/* ---- C1 split track (Governance) ---- */
.track-head{ display:grid; grid-template-columns:1fr 110px 52px 1fr; gap:20px; margin-bottom:6px; }
.track-head .h-ai{ color:var(--machine); } .track-head .h-hu{ color:var(--highlight); text-align:right; }
.srow{ display:grid; grid-template-columns:1fr 110px 52px 1fr; gap:20px; align-items:center;
  padding:11px 0; border-top:1px dashed var(--border); }
.srow .ai b, .srow .own b{ font-size:13.5px; font-weight:600; color: var(--heading); }
.srow .ai span{ display:block; font-family:var(--mono); font-size:11px; color:var(--machine); margin-top:2px; }
.srow .own{ text-align:right; }
.srow .own span{ display:block; font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:2px; }
.seal{ width:30px; height:30px; margin:0 auto; border-radius:50%; background:var(--highlight); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:14px; box-shadow:0 6px 16px rgba(var(--highlight-rgb),.45);
  opacity:0; transform:scale(.3); animation:seal .5s ease-out forwards; }
.srow:nth-child(2) .seal{ animation-delay:.15s; } .srow:nth-child(3) .seal{ animation-delay:.3s; }
.srow:nth-child(4) .seal{ animation-delay:.45s; } .srow:nth-child(5) .seal{ animation-delay:.6s; }
.srow:nth-child(6) .seal{ animation-delay:.75s; } .srow:nth-child(7) .seal{ animation-delay:.9s; }
@keyframes seal{ to{ opacity:1; transform:scale(1); } }
.enforce-rail{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.enforce-rail .lbl{ width:100%; color:var(--highlight); margin-bottom:2px; }

@media (prefers-reduced-motion: reduce){
  .seal{ animation:none; opacity:1; transform:none; }
}
@media (max-width:620px){ .track-head, .srow{ grid-template-columns:1fr 70px 40px 1fr; gap:10px; } }

/* ---- Small colorful AI badges ---- */
.ai-badge-col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ai-badge {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  padding: 0px 10px; border-radius: 15px; letter-spacing: 0.5px; white-space: nowrap;
}
.srow .ai-badge-col .ai-badge {
  margin: 0;
  padding-top: 2px;
}
.ai-badge.claude { background: rgba(218, 120, 91, 0.30); color: #da785b; }
.ai-badge.chatgpt { background: rgba(0, 0, 0, 0.30); color: #000; }
.ai-badge.figma { background: linear-gradient(to right, rgba(242, 84, 37, 0.3), rgba(165, 94, 255, 0.3), rgba(18, 209, 135, 0.3)); color: #307bd1; }
.ai-badge.lovable { background: rgba(255, 105, 180, 0.30); color: #e64a99; }
.ai-badge.cursor { background: rgba(0, 0, 0, 0.30); color: #000; }
.ai-badge.copilot { background: linear-gradient(90deg, rgba(1,154,230, 0.3), rgba(114,89,177, 0.3)); color: #0a4f50; }
.ai-badge.sonarqube { background: rgba(18, 110, 211, 0.30); color: #126ed3; }
.ai-badge.ghas { background: rgba(101, 81, 243, 0.3); color: #6551f3; }

.ai-assists .enforce-rail .chip {
  border-radius: 20px;
  padding: 2px 10px;
}

/* =====================================================================
   ADDITIVE UPDATE BLOCK · CRO + unified-consultation-CTA refresh (2026)
   All selectors below are NEW and page-scoped. No existing rule changed.
   ===================================================================== */

/* Hero sub-headline — the former H1, demoted to a supporting line */
.hero-subhead {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin: -4px 0 18px;
  letter-spacing: .2px;
}
@media (max-width: 767px) { .hero-subhead { font-size: 16.5px; } }

/* Footer brand tagline lockup (customer-centric) */
.brand-tagline {
  color: var(--highlight);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .3px;
  margin: 10px 0 4px;
}

/* ---- Proven Outcomes widget (homepage) — replaces the testimonial carousel ---- */
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.outcome-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 22px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.outcome-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.outcome-card .metric {
  font-family: var(--mono);
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  color: var(--heading);
}
.outcome-card .metric .sign { color: var(--highlight); }
.outcome-card .metric .unit { font-size: 22px; color: var(--muted); }
.outcome-card .outcome-label {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
  margin-top: 12px;
}
.outcome-note {
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 28px;
}
@media (max-width: 991px) { .outcome-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .outcome-grid { grid-template-columns: 1fr; } }

/* ---- Testimonials page — static grid, no motion ---- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  align-items: stretch;
}
.testimonial-grid .featured-quote { height: 100%; }
.testimonial-placeholder {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  background: var(--light-bg);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  min-height: 200px;
}
.testimonial-placeholder i { font-size: 26px; color: var(--highlight); margin-bottom: 12px; }
.testimonial-placeholder h5 { font-size: 15px; color: var(--heading); margin: 0 0 4px; }
.testimonial-placeholder span { font-size: 13px; }
@media (max-width: 767px) { .testimonial-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   ADDITION — "Governed Pipeline" diagram (process.html)
   Four lifecycle stages read left to right. A dashed cool rail above
   carries what AI accelerates; an unbroken red rail below carries the
   named human who signs the gate. Solid = enforced, dashed = draft.
   Pure CSS, no JS, no images. Collapses to a vertical rail on mobile.
   The existing .timeline block is untouched and stays below the diagram.
   ===================================================================== */
.zpipe {
  --zp-gap: 26px;
  --zp-ai: #0a6f7c;
  --zp-ai-bg: #e9f6f8;
  --zp-ai-line: #7fc4ce;
  --zp-gate: #b03230;
  --zp-gate-bg: #fdecec;
  --zp-gate-line: rgba(234, 80, 78, 0.45);
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--zp-gap);
}
.zp-stage {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  min-width: 0;
}

/* lane chips */
.zp-ai-tag,
.zp-gate-tag {
  position: relative;
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-align: center;
  border-radius: 999px;
  padding: 7px 10px;
  border: 1px solid;
  line-height: 1.5;
}
/* each chip extends a hairline into both gutters, so the four segments
   join into one continuous lane across the row */
.zp-ai-tag::before,
.zp-gate-tag::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: calc(-1 * var(--zp-gap));
  right: calc(-1 * var(--zp-gap));
  height: 0;
}
.zp-stage:first-child .zp-ai-tag::before,
.zp-stage:first-child .zp-gate-tag::before { left: 0; }
.zp-stage:last-child .zp-ai-tag::before,
.zp-stage:last-child .zp-gate-tag::before { right: 0; }

.zp-ai-tag {
  color: var(--zp-ai);
  background: var(--zp-ai-bg);
  border-color: var(--zp-ai-line);
}
.zp-ai-tag::before { border-top: 1px dashed var(--zp-ai-line); }

.zp-gate-tag {
  color: var(--zp-gate);
  background: var(--zp-gate-bg);
  border-color: rgba(234, 80, 78, 0.4);
}
.zp-gate-tag::before { border-top: 1px solid var(--zp-gate-line); }
.zp-ai-tag span,
.zp-gate-tag span { position: relative; }

/* stage card */
.zp-core {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 20px 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.zp-core:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
  border-color: #d7dce6;
}
.zp-num {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: var(--muted);
  margin-bottom: 10px;
}
/* .zp-title is a <p>, not a heading: the four <h3> headings in the
   .timeline block below already own these stage names in the document
   outline, and duplicating them would read twice on a screen reader. */
.zp-core h3,
.zp-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.25;
  margin: 0 0 8px;
}
.zp-core p:not(.zp-title) {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* legend */
.zp-legend {
  margin: 36px 0 24px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 12px 28px;
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
}
.zcycle .zp-legend {
  grid-column: 1 / -1;
  margin-top: 36px;
  margin-bottom: 28px;
}
@media (max-width: 767px) {
  .zp-legend {
    flex-wrap: wrap;
    white-space: normal;
    font-size: 13px;
    gap: 8px 16px;
    margin: 24px 0 16px;
  }
}
.zp-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  border-radius: 999px;
  padding: 4px 12px;
  line-height: 1.4;
}
.zp-key::before {
  content: "";
  width: 20px;
  height: 0;
  flex: none;
}
.zp-key-ai {
  color: #0a6f7c;
  background: #e9f6f8;
  border: 1px solid #7fc4ce;
}
.zp-key-ai::before {
  border-top: 2px solid #0a6f7c;
}

.zp-key-gate {
  color: #b03230;
  background: #fdecec;
  border: 1px solid rgba(234, 80, 78, 0.4);
}
.zp-key-gate::before {
  border-top: 2px solid #ea504e;
}

@media (max-width: 991px) {
  .zpipe { grid-template-columns: repeat(2, 1fr); }
  .zp-stage:nth-child(2) .zp-ai-tag::before,
  .zp-stage:nth-child(2) .zp-gate-tag::before { right: 0; }
  .zp-stage:nth-child(3) .zp-ai-tag::before,
  .zp-stage:nth-child(3) .zp-gate-tag::before { left: 0; }
}
@media (max-width: 575px) {
  .zpipe { grid-template-columns: 1fr; gap: 0; }
  .zp-stage { padding-bottom: 26px; position: relative; }
  .zp-stage:last-child { padding-bottom: 0; }
  .zp-ai-tag::before,
  .zp-gate-tag::before { display: none; }
  .zp-stage:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 0;
    height: 18px;
    border-left: 1px solid var(--zp-gate-line);
  }
  .zp-core { padding: 18px 18px 20px; }
  .zp-core h3, .zp-title { font-size: 18px; }
}

/* =====================================================================
   ADDITION — Platforms & Tools page visuals
   A) .zstack — layered architecture diagram, answers "which layer am I?"
   B) .ztj    — governed toolchain journey, ticket to production
   C) .tc-logo.is-brand / .is-cap — logo normalisation. New compound
      selectors only: the existing .tool-card .tc-logo rules are untouched
      and still apply to any card that has not been tagged.
   ===================================================================== */

/* ---------- A) layer stack ---------- */
.zstack { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.zst-tier {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: 26px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 24px;
}
.zst-head { min-width: 0; }
.zst-head h3 { font-size: 17px; font-weight: 700; margin-bottom: 3px; }
.zst-head p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.zst-items { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.zst-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 13px 8px 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--heading);
  transition: border-color 0.25s ease, background 0.25s ease;
}
.zst-item:hover { border-color: #cfd6e2; background: #fff; }
.zst-item img {
  height: 20px;
  max-width: 26px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.68;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.zst-item:hover img { filter: none; opacity: 1; }
.zst-item.is-wide img { max-width: 44px; height: 15px; }
.zst-item i { font-size: 15px; color: var(--muted); }

/* capability chips read as concepts, not products */
.zst-item.is-cap {
  background: #fff;
  border-style: dashed;
  color: var(--muted);
  font-weight: 500;
}

/* the governance tier underpins every layer above it */
.zst-tier.is-gov { background: #fbf3f3; border-color: rgba(234, 80, 78, 0.38); }
.zst-tier.is-gov .zst-head h3 { color: #8f2523; }
.zst-tier.is-gov .zst-item { background: #fff; border-color: rgba(234, 80, 78, 0.22); }

/* placeholder tier — delete this rule and the is-todo class once the
   client supplies the real data-layer products */
.zst-tier.is-todo { border-style: dashed; background: #fcfcfd; }
.zst-tier.is-todo .zst-item {
  background: #fff;
  border-style: dashed;
  color: #8a93a3;
  font-weight: 500;
}

.zst-note { margin: 16px 0 0; font-size: 13px; color: var(--muted); text-align: center; }

@media (max-width: 767px) {
  .zst-tier { grid-template-columns: 1fr; gap: 14px; padding: 18px 18px 20px; }
  .zst-items { gap: 8px; }
  .zst-item { font-size: 13px; padding: 7px 11px 7px 9px; }
}

/* ---------- B) governed toolchain journey ---------- */
.ztj {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 6px 4px;
}
.ztj-step { flex: 0 1 118px; text-align: center; min-width: 96px; }
.ztj-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.ztj-icon i { font-size: 22px; color: var(--accent); }
.ztj-icon img { height: 24px; max-width: 28px; width: auto; object-fit: contain; }
.ztj-step:hover .ztj-icon { border-color: #c9d1de; transform: translateY(-3px); }
.ztj-step h3,
.ztj-step h4 { font-size: 14px; font-weight: 700; margin: 0 0 2px; }
.ztj-step p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.ztj-arrow {
  flex: 0 0 22px;
  align-self: flex-start;
  margin-top: 18px;
  text-align: center;
  color: #c2cad8;
  font-size: 15px;
}
/* the human gate — deliberately the same motif as process.html */
.ztj-step.is-gate .ztj-icon { background: #fdecec; border-color: rgba(234, 80, 78, 0.5); }
.ztj-step.is-gate .ztj-icon i { color: #b03230; }
.ztj-step.is-gate h3 { color: #b03230; }
.ztj-cap { margin: 26px 0 0; text-align: center; font-size: 13.5px; color: var(--muted); }
.ztj-cap b { color: var(--heading); font-weight: 600; }

@media (max-width: 767px) {
  .ztj {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: 480px;
    margin: 0 auto;
  }
  .ztj-step {
    flex: none;
    width: 100%;
    min-width: 0;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .ztj-step:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  }
  .ztj-icon {
    width: 46px;
    height: 46px;
    margin: 0;
    flex: none;
    border-radius: 12px;
  }
  .ztj-step h3,
  .ztj-step h4 {
    font-size: 15px;
    margin-bottom: 2px;
  }
  .ztj-step p {
    font-size: 12.5px;
    line-height: 1.4;
  }
  .ztj-step.is-gate {
    background: #fdf4f4;
    border-color: rgba(234, 80, 78, 0.4);
  }
  .ztj-arrow {
    flex: none;
    align-self: center;
    margin: 8px 0;
    font-size: 18px;
    color: var(--highlight);
  }
  .ztj-arrow .bi-chevron-right::before {
    content: "\F282";
  }
}

/* ---------- C) logo normalisation ---------- */
/* Brand marks: one optical size, grey at rest, true colour on hover. */
.tc-logo.is-brand { background: #fff; }
.tc-logo.is-brand img {
  height: auto;
  max-height: 26px;
  max-width: 30px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.66;
  transition: filter 0.28s ease, opacity 0.28s ease;
}
.tool-card:hover .tc-logo.is-brand img { filter: none; opacity: 1; }
.tc-logo.is-brand.is-wide img { max-height: 18px; max-width: 46px; }

/* Capabilities are not products, so there is no brand colour to reveal.
   A solid charcoal tile makes them read as a different category. */
.tc-logo.is-cap { background: var(--accent); border-color: var(--accent); }
.tc-logo.is-cap i { color: #fff; font-size: 21px; }

/* Governance capabilities carry the red gate accent. */
.tc-logo.is-cap.is-gate { background: var(--highlight); border-color: var(--highlight); }

@media (prefers-reduced-motion: reduce) {
  .zp-core,
  .zst-item,
  .zst-item img,
  .ztj-icon,
  .tc-logo.is-brand img { transition: none; }
  .zp-core:hover,
  .ztj-step:hover .ztj-icon { transform: none; }
}

/* =====================================================================
   ADDITION — Zaiten AI page visuals
   1) .zbands / .zpipe.is-3up — the nine SDLC stages as three governed
      bands. Deliberately reuses the .zp-* pipeline component from
      process.html: one design system, two pages, three lines of new CSS.
   2) .ev-bar   — before/after delta bar under each evidence figure.
   3) .zfig     — headcount figure stack inside the lean-team cards.
   4) .zlanes   — what AI does / what a human owns / what AI never does.
   Pure CSS. No JS. No images. All colours from existing tokens.
   ===================================================================== */

/* ---------- 1) three governed bands ---------- */
.zbands { display: grid; gap: 22px; }
.zband {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 26px 30px;
}
.zband-head { margin-bottom: 22px; }
.zband-head h3 {
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  margin: 0 12px 0 0;
  vertical-align: middle;
}
.zband-range {
  display: inline-block;
  vertical-align: middle;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
}
.zband-head p { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }

/* the only structural change needed to reuse the process.html pipeline */
.zpipe.is-3up { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991px) {
  .zpipe.is-3up { grid-template-columns: 1fr; gap: 0; }
  .zpipe.is-3up .zp-stage { padding-bottom: 24px; position: relative; }
  .zpipe.is-3up .zp-stage:last-child { padding-bottom: 0; }
  .zpipe.is-3up .zp-ai-tag::before,
  .zpipe.is-3up .zp-gate-tag::before { display: none; }
  .zpipe.is-3up .zp-stage:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 0;
    height: 16px;
    border-left: 1px solid var(--zp-gate-line, rgba(234, 80, 78, 0.45));
  }
}
@media (max-width: 767px) {
  .zband { padding: 20px 18px 24px; border-radius: 14px; }
  .zband-head h3 { font-size: 18px; }
}

/* ---------- 2) evidence delta bars ---------- */
.ev-bar {
  position: relative;
  height: 5px;
  border-radius: 3px;
  margin: 9px auto 0;
  max-width: 128px;
  background: rgba(255, 255, 255, 0.13);
}
.ev-bar .ev-base {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--ev-base, 100%);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
}
.ev-bar .ev-after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--ev-after, 100%);
  border-radius: 3px;
  background: var(--highlight);
}
/* a gain or a held threshold is not a reduction, so it is not red */
.ev-bar.is-gain .ev-after,
.ev-bar.is-gate .ev-after { background: #7fc4ce; }
/* baseline tick, for the bars where the baseline is not the full track */
.ev-bar::after {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: var(--ev-mark, 100%);
  width: 1px;
  background: rgba(255, 255, 255, 0.7);
  display: none;
}
.ev-bar.has-mark::after { display: block; }

/* ---------- 3) lean-team figure stacks ---------- */
.zfig {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 16px 0 0;
  max-width: 240px;
}
.zfig-p {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(29, 29, 27, 0.07);
}
.zfig-p i { font-size: 14px; color: var(--accent); }
.compare-card.dark .zfig-p { background: rgba(255, 255, 255, 0.14); }
.compare-card.dark .zfig-p i { color: #fff; }
/* outlined figures = the upper end of the range, only when scope demands */
.zfig-p.is-ghost { background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
.zfig-p.is-ghost i { color: rgba(255, 255, 255, 0.55); }
.zfig-note {
  margin: 10px 0 0 !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

/* ---------- 4) three lanes ---------- */
.zlanes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 40px;
}
.zlane-col {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 24px 24px;
  background: #fff;
}
.zlane-head { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.zlane-head i { font-size: 22px; display: block; margin-bottom: 12px; }
.zlane-head h3 { font-size: 18px; font-weight: 700; margin: 0 0 3px; }
.zlane-head p {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.3px;
  color: var(--muted);
}
.zlane-col ul { list-style: none; margin: 0; padding: 0; }
.zlane-col li {
  position: relative;
  padding: 0 0 0 22px;
  margin-bottom: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}
.zlane-col li:last-child { margin-bottom: 0; }
.zlane-col li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

/* cyan = AI draft state, red = human approval: the same two colours this
   site already uses on the hero gate and the pipeline rails */
.zlane-col.is-ai { border-color: #a8d8e0; background: #f4fbfc; }
.zlane-col.is-ai .zlane-head { border-bottom-color: #cbe8ed; }
.zlane-col.is-ai .zlane-head i,
.zlane-col.is-ai li::before { color: #0a6f7c; }
.zlane-col.is-ai li::before { content: "+"; }

.zlane-col.is-human { border-color: rgba(234, 80, 78, 0.4); background: #fdf5f5; }
.zlane-col.is-human .zlane-head { border-bottom-color: rgba(234, 80, 78, 0.2); }
.zlane-col.is-human .zlane-head i,
.zlane-col.is-human li::before { color: #b03230; }
.zlane-col.is-human li::before { content: "\2713"; }

.zlane-col.is-never { border-color: var(--accent); background: var(--accent); }
.zlane-col.is-never .zlane-head { border-bottom-color: rgba(255, 255, 255, 0.18); }
.zlane-col.is-never .zlane-head i { color: #fff; }
.zlane-col.is-never .zlane-head h3 { color: #fff; }
.zlane-col.is-never .zlane-head p { color: rgba(255, 255, 255, 0.62); }
.zlane-col.is-never li { color: rgba(255, 255, 255, 0.86); }
.zlane-col.is-never li::before { content: "\00D7"; color: rgba(255, 255, 255, 0.55); }

@media (max-width: 991px) {
  .zlanes { grid-template-columns: 1fr; gap: 14px; margin-bottom: 34px; }
  .zlane-col { padding: 22px 20px 20px; border-radius: 14px; }
}

/* =====================================================================
   ADDITION — Scrum sprint cycle (process.html)
   Replaces the visual reading of the old four-across .zpipe row on this
   page only. Sprint 0 is a linear entry — the architecture runway is set
   once. The four sprint activities then sit on a closed ring, because in
   Scrum they repeat every sprint rather than running once each.

   Note the deliberate pairing on the ring: build and test share one node.
   Splitting them into sequential nodes is what makes a "cycle" diagram
   secretly describe waterfall.

   Colour language is inherited, not invented: dashed cyan = what AI
   drafts, solid red = the named human who signs. Same as .zpipe.

   The existing .zpipe rules above are UNTOUCHED and still power
   zaiten-ai.html (.zpipe.is-3up). Only new .zc-* selectors are added,
   plus scoped overrides written as .zcycle .zp-core so the base .zp-core
   used elsewhere is not affected.
   ===================================================================== */
.zcycle {
  --zc-ring: rgba(234, 80, 78, 0.5);
  --zc-ai: #0a6f7c;
  --zc-ai-bg: #e9f6f8;
  --zc-ai-line: #7fc4ce;
  --zc-gate: #b03230;
  --zc-gate-bg: #fdecec;
  --zc-gate-line: rgba(234, 80, 78, 0.4);
  display: grid;
  grid-template-columns: minmax(230px, 280px) 56px minmax(0, 1fr);
  align-items: center;
}

/* ---- shared card look, tightened for the ring ---- */
.zcycle .zp-core { padding: 17px 17px 19px; }
.zcycle .zp-title { font-size: 16.5px; margin-bottom: 6px; }
.zcycle .zp-core p:not(.zp-title) { font-size: 13px; line-height: 1.55; }
.zcycle .zp-num { margin-bottom: 8px; }

/* compact two-lane chips, replacing the stacked rails of .zpipe */
.zc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.zc-tags span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1.5;
  border-radius: 999px;
  padding: 3px 9px;
  border: 1px solid;
}
.zc-ai {
  color: var(--zc-ai);
  background: var(--zc-ai-bg);
  border-color: var(--zc-ai-line);
  border-style: dashed;
}
.zc-gate {
  color: var(--zc-gate);
  background: var(--zc-gate-bg);
  border-color: var(--zc-gate-line);
}

/* ---- Sprint 0, the linear entry ---- */
.zc-phase {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.zc-entry .zp-core { border-color: #d7dce6; }

/* ---- the connector into the loop ---- */
.zc-link {
  position: relative;
  height: 0;
  border-top: 1px solid var(--zc-gate-line);
  margin: 0 4px;
}
.zc-link::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-left: 8px solid var(--zc-gate);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* ---- the ring: four nodes on the diagonals ---- */
.zc-ring {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1 / 1;
  margin: 14px auto;
}
.zc-orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.zc-orbit-ring { fill: none; stroke: var(--zc-ring); stroke-width: 2; }
.zc-orbit-arrow path { fill: var(--zc-gate); }

.zc-nodes { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.zc-node { position: absolute; width: 38%; transform: translate(-50%, -50%); }
.zc-n1 { left: 23.1%; top: 23.1%; }
.zc-n2 { left: 76.9%; top: 23.1%; }
.zc-n3 { left: 76.9%; top: 76.9%; }
.zc-n4 { left: 23.1%; top: 76.9%; }

/* hub — the cadence itself, sitting inside the loop */
.zc-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 34%;
  text-align: center;
}
.zc-hub i {
  font-size: 22px;
  color: var(--zc-gate);
  display: block;
  margin-bottom: 4px;
  animation: zc-spin 10s linear infinite;
}
@keyframes zc-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.zc-hub strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.3;
}
.zc-hub span {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 3px;
}

/* ---- stack the entry above the ring when the row gets tight ---- */
@media (max-width: 1199px) {
  .zcycle { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .zc-entry { max-width: 420px; width: 100%; text-align: left; }
  .zc-link {
    width: 0;
    height: 46px;
    margin: 18px 0;
    border-top: 0;
    border-left: 1px solid var(--zc-gate-line);
  }
  .zc-link::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -1px;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid var(--zc-gate);
    border-bottom: 0;
  }
}

/* ==========================================================================
   MOBILE SPRINT CYCLE (MAX-WIDTH: 767PX) — MINI ORBIT 2X2
   ========================================================================== */
@media (max-width: 767px) {
  .zc-ring {
    aspect-ratio: 1 / 1.1;
    width: 100%;
    max-width: 410px;
    margin: 10px auto 24px auto;
    position: relative;
  }
  .zc-orbit {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .zc-loop-return-banner {
    display: none;
  }
  .zc-nodes {
    position: absolute;
    inset: 0;
    border-left: none;
    padding-left: 0;
    margin-left: 0;
  }
  .zc-node {
    position: absolute;
    width: 43%;
    transform: translate(-50%, -50%);
    padding-bottom: 0;
    display: block !important;
    z-index: 3;
  }
  .zc-node::after,
  .zc-node::before {
    display: none;
  }
  
  /* Diagonals positioning pushed outward to free up center space */
  .zc-n1 { left: 20%; top: 20%; }
  .zc-n2 { left: 80%; top: 20%; }
  .zc-n3 { left: 80%; top: 80%; }
  .zc-n4 { left: 20%; top: 80%; }
  
  .zcycle .zp-core {
    padding: 7px 9px;
    background: #ffffff;
    border: 1px solid var(--zc-gate-line, rgba(234, 80, 78, 0.35));
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08);
    text-align: left;
  }
  .zcycle .zp-num {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--zc-gate, #b03230);
    display: block;
    margin-bottom: 2px;
  }
  .zcycle .zp-title {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 3px 0;
    color: var(--heading, #11151f);
  }
  .zcycle .zp-core p:not(.zp-title) {
    display: block !important;
    font-size: 9px;
    line-height: 1.3;
    color: var(--text, #1d2130);
    margin-bottom: 3px;
  }
  .zc-tags {
    display: flex !important;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 3px;
  }
  .zc-tags span {
    font-size: 7.5px;
    padding: 1px 4.5px;
    border-radius: 999px;
  }

  /* Center Hub - Matching Option 1 Style (Background, Border, Color) */
  .zc-hub {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 32%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--zc-gate-bg, #fdecec);
    border: 1px solid var(--zc-gate-line, rgba(234, 80, 78, 0.4));
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 14px rgba(234, 80, 78, 0.12);
    z-index: 5;
  }
  .zc-hub i {
    font-size: 22px;
    color: var(--zc-gate, #b03230);
    display: block;
    margin-bottom: 2px;
    animation: zc-spin 10s linear infinite;
  }
  @keyframes zc-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  .zc-hub strong {
    font-size: 10.5px;
    font-weight: 700;
    display: block;
    line-height: 1.15;
    color: var(--heading, #11151f);
  }
  .zc-hub span {
    font-size: 8.5px;
    display: block;
    line-height: 1.15;
    color: var(--muted, #69707d);
    margin-top: 2px;
    padding: 0 2px;
  }
}

/* ---- the ongoing band: support is not a fifth step in the loop, it runs
       alongside every sprint from the first release onward. Spans the full
       .zcycle grid so it reads as wrapping the whole cycle, not following
       one node of it. ---- */
.zc-after {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 52px;
  margin-bottom: 36px;
  border-top: 1px solid var(--border);
  padding-top: 36px;
}
.zc-after-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 28px 28px;
}
.zc-after-ico {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
}
.zc-after-ico i { font-size: 21px; color: var(--zc-gate); }
.zc-after-chip {
  display: inline-block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--zc-gate);
  background: var(--zc-gate-bg);
  border: 1px solid var(--zc-gate-line);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 8px;
}
.zc-after strong {
  display: block;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.3;
  margin-bottom: 5px;
}
.zc-after p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 575px) {
  .zc-after-card { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .zcycle .zp-core { transition: none; }
  .zcycle .zp-core:hover { transform: none; }
}

/* =====================================================================
   ADDITION — SDLC-to-sprint cadence table (process.html)
   Sits under the .zcycle diagram. Answers the question a technical buyer
   asks on sight: "where did the classic SDLC phases go?" The answer is
   the whole argument — they did not disappear and they did not become a
   sequence of gates; four of the six run on every single sprint.
   The right-hand column is the payload: read it alone and you can tell
   this is Scrum, not waterfall.
   New .zmap-* selectors only.
   ===================================================================== */
.zmap { margin-top: 46px; }
.zmap-title {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin: 0 0 16px;
}
.zmap-rows {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.zmap-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
}
.zmap-row:last-child { border-bottom: 0; }
.zmap-row.is-head {
  background: var(--light-bg);
  padding-top: 11px;
  padding-bottom: 11px;
}
.zmap-row.is-head span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.zmap-what { font-size: 14px; line-height: 1.5; color: var(--text); }
.zmap-when {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-self: start;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--heading);
}
.zmap-when::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}
/* red = inside the repeating loop, neutral = the one-time runway */
.zmap-when.is-loop { color: #b03230; }
.zmap-when.is-loop::before { background: #ea504e; }
.zmap-when.is-zero::before { background: #b4bcc9; }

.zmap-note {
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 575px) {
  .zmap-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px 16px; }
  .zmap-row.is-head { display: none; }
  .zmap-when { font-size: 12.5px; }
}

/* =====================================================================
   ADDITION — Model socket (platforms.html)
   Replaces three stacked blocks of prose with one diagram. The page hero
   already animates "tools swap, governance is fixed", so this must not
   repeat that — it does the thing the hero cannot: name the default and
   show what can replace it.

   The socket is the only dashed element in the rail. Everything dashed on
   this site means "not fixed"; everything solid means "enforced". Read
   the diagram with no labels at all and the message still lands: one part
   of the chain is a slot, the rest is welded shut.
   New .mslot-* / .mstrip-* selectors only.
   ===================================================================== */
.mslot {
  --ms-cyan: #0a6f7c;
  --ms-line: #a8d8e0;
  --ms-bg: #f4fbfc;
  --ms-gate: #b03230;
  --ms-gate-bg: #fdecec;
  --ms-gate-line: rgba(234, 80, 78, 0.4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  padding: 24px 26px 26px;
}
.mslot-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.mslot-head span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.mslot-head::after {
  content: "";
  flex: 1;
  height: 0;
  border-top: 1px solid var(--border);
}

/* ---- the rail ---- */
.mslot-rail {
  display: grid;
  grid-template-columns: 1fr 30px 1.35fr 30px 1fr 30px 1fr;
  align-items: center;
}
.mslot-step {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 15px 13px 16px;
  text-align: center;
  background: #fff;
}
.mslot-step strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.3;
}
.mslot-step em {
  display: block;
  font-style: normal;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 4px;
}
.mslot-step.is-gate {
  border-color: var(--ms-gate-line);
  background: var(--ms-gate-bg);
}
.mslot-step.is-gate strong { color: var(--ms-gate); }

.mslot-arrow { position: relative; height: 0; border-top: 1px solid var(--border); }
.mslot-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid #b4bcc9;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}

/* ---- the one swappable part ---- */
.mslot-socket {
  border: 1.5px dashed var(--ms-line);
  background: var(--ms-bg);
  border-radius: 14px;
  padding: 12px 14px 14px;
  text-align: center;
}
.mslot-socket > span {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ms-cyan);
  margin-bottom: 9px;
}
.mslot-default {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid var(--ms-line);
  border-radius: 10px;
  padding: 9px 14px;
}
.mslot-default i { font-size: 17px; color: var(--ms-cyan); }
.mslot-default b { font-size: 15px; font-weight: 700; color: var(--heading); }
.mslot-default em {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ms-cyan);
  background: var(--ms-bg);
  border-radius: 999px;
  padding: 2px 7px;
}
.mslot-alts {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ms-cyan);
}
.mslot-alts b { font-weight: 500; color: var(--muted); }

/* ---- what never moves ---- */
.mslot-fixed {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.mslot-fixed span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ms-gate);
  background: var(--ms-gate-bg);
  border: 1px solid var(--ms-gate-line);
  border-radius: 999px;
  padding: 4px 11px;
}
.mslot-uses {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---- compact tool strip, replacing six prose cards ---- */
.mstrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.mstrip-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 15px 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mstrip-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.mstrip-ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent);
  display: grid;
  place-items: center;
}
.mstrip-ico i { font-size: 18px; color: #fff; }
.mstrip-ico img { height: 20px; width: auto; }
.mstrip-ico.is-brand { background: #fff; border: 1px solid var(--border); }
.mstrip-item strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.3;
}
.mstrip-item span {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 2px;
}

@media (max-width: 991px) {
  .mslot-rail { grid-template-columns: minmax(0, 1fr); }
  .mslot-arrow {
    width: 0;
    height: 26px;
    margin: 0 auto;
    border-top: 0;
    border-left: 1px solid var(--border);
  }
  .mslot-arrow::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -1px;
    transform: translateX(-50%);
    border-left: 4.5px solid transparent;
    border-right: 4.5px solid transparent;
    border-top: 7px solid #b4bcc9;
    border-bottom: 0;
  }
  .mstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .mslot { padding: 20px 18px 22px; }
  .mstrip { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   HERO QUOTE CARD & QUOTE STRIP
   ===================================================================== */
.hero-quote-card {
  background: rgba(18, 26, 44, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-left: 4px solid var(--highlight);
  border-radius: 16px;
  padding: 28px 26px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  color: #fff;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hero-quote-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}
.hero-quote-card .quote-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(234, 80, 78, 0.18);
  color: #ff8a88;
  border: 1px solid rgba(234, 80, 78, 0.35);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.hero-quote-card .quote-icon {
  font-size: 32px;
  line-height: 1;
  color: var(--highlight);
  opacity: 0.85;
  display: block;
  margin-bottom: 8px;
}
.hero-quote-card .quote-text {
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
  font-style: italic;
  margin-bottom: 20px;
}
.hero-quote-card .quote-card-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-quote-card .person-mark {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--highlight) 0%, #c43836 100%);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 4px 12px rgba(234, 80, 78, 0.3);
}
.hero-quote-card .author-name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.hero-quote-card .author-title {
  display: block;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.7);
}
.hero-quote-card .author-company {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #ff8a88;
  font-weight: 600;
  margin-top: 2px;
}
.hero-quote-card .quote-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.15);
  width: 100%;
  color: #ff8a88;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
}
.hero-quote-card .quote-card-link:hover {
  color: #fff;
  gap: 10px;
}
.hero-quote-strip {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.hero-quote-strip .quote-strip-inner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid var(--highlight);
  border-radius: 12px;
  padding: 16px 20px;
  backdrop-filter: blur(8px);
}
.hero-quote-strip .person-mark {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--highlight) 0%, #c43836 100%);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: grid;
  place-items: center;
}
.hero-quote-strip .quote-strip-text {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.95);
  font-style: italic;
  margin-bottom: 8px;
}
.hero-quote-strip .quote-strip-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.7);
  flex-wrap: wrap;
}
.hero-quote-strip .quote-strip-meta strong {
  color: #fff;
}
.hero-quote-strip .quote-strip-meta span {
  color: #ff8a88;
}
.hero-quote-strip .quote-strip-link {
  color: #ff8a88;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  transition: all 0.25s ease;
}
.hero-quote-strip .quote-strip-link:hover {
  color: #fff;
  gap: 8px;
}
@media (max-width: 576px) {
  .hero-quote-strip .quote-strip-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 991px) {
  .hero-quote-card {
    margin-top: 16px;
  }
}

/* Accessibility Skip Link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--highlight);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
  font-weight: 600;
  text-decoration: none;
  transition: left 0.2s ease;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

/* =====================================================================
   ZAITEN AI PAGE: DETAIL ACCORDION & SCOPE GRID STYLES
   ===================================================================== */
.detail-accordion .accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--radius) !important;
  background: #fff;
  margin-bottom: 16px;
  overflow: hidden;
}
.detail-accordion .accordion-button {
  display: block;
  padding: 24px 60px 24px 28px;
  background: #fff;
  box-shadow: none;
  border-radius: var(--radius) !important;
}
.detail-accordion .accordion-button:not(.collapsed) {
  background: var(--light-bg);
  color: var(--text);
}
.detail-accordion .accordion-button:focus-visible {
  outline: 3px solid var(--highlight);
  outline-offset: -3px;
  box-shadow: none;
}
.detail-accordion .accordion-button::after {
  position: absolute;
  right: 26px;
  top: 30px;
}
.detail-accordion .di-eyebrow {
  display: block;
  font-family: var(--mono, monospace);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--highlight);
  margin-bottom: 4px;
}
.detail-accordion .di-title {
  display: block;
  font-weight: 700;
  font-size: 18px;
  color: var(--heading);
  line-height: 1.35;
}
.detail-accordion .di-blurb {
  display: block;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 4px;
}
.detail-accordion .accordion-body { padding: 8px 0 28px; }
.detail-accordion .accordion-body .section-title { margin-bottom: 32px; }
.detail-accordion .accordion-body .container { padding-left: 24px; padding-right: 24px; }
.detail-accordion .accordion-body .note-band { margin-bottom: 0; }

.scope-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.scope-col {
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
}
.scope-col .sc-head i {
  font-size: 24px;
  display: block;
  margin-bottom: 12px;
}
.scope-col .sc-head h3 { font-size: 19px; margin: 0 0 4px; }
.scope-col .sc-sub {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 20px;
  line-height: 1.5;
}
.scope-col .sc-list { list-style: none; padding: 0; margin: 0; }
.scope-col .sc-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: 14.5px;
  line-height: 1.65;
}
.scope-col .sc-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: "bootstrap-icons";
  font-size: 14px;
}
.scope-col.is-ai { border-top-color: var(--machine, #57b6c4); }
.scope-col.is-ai .sc-head i { color: var(--machine, #57b6c4); }
.scope-col.is-ai .sc-list li::before { content: "\F4FE"; color: var(--machine, #57b6c4); }

.scope-col.is-human { border-top-color: var(--highlight); background: var(--light-bg); }
.scope-col.is-human .sc-head i { color: var(--highlight); }
.scope-col.is-human .sc-list li::before { content: "\F26E"; color: var(--highlight); }

.scope-col.is-never { border-top-color: var(--accent); }
.scope-col.is-never .sc-head i { color: var(--accent); }
.scope-col.is-never .sc-list li::before { content: "\F623"; color: var(--accent); }

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

/* =====================================================================
   ZAITEN AI PAGE UX IMPROVEMENTS (MCP Tabs & Deep-Dive Swiper)
   ===================================================================== */

/* ---- MCP Segmented Tab Switcher ---- */
.mcp-tab-switcher {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.mcp-toggle-group {
  background: #e2e8f0;
  padding: 5px;
  border-radius: 30px;
  display: inline-flex;
  gap: 4px;
}
.mcp-toggle-btn {
  border-radius: 26px !important;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 22px;
  color: var(--muted);
  border: none !important;
  background: transparent;
  transition: all 0.25s ease;
}
.mcp-toggle-btn.active,
.mcp-toggle-btn:hover {
  background: #fff !important;
  color: var(--heading) !important;
  box-shadow: var(--shadow-sm);
}

/* ---- Deep-Dive Swiper Slider ---- */
.deepdive-swiper {
  padding-bottom: 10px !important;
}
.deepdive-swiper .swiper-slide {
  height: auto;
  display: flex;
}
.deepdive-swiper .deepdive {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.deepdive-controls {
  position: relative;
  max-width: 240px;
  margin: 24px auto 0;
}
.deepdive-prev,
.deepdive-next {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--heading);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.deepdive-prev::after,
.deepdive-next::after {
  display: none;
}
.deepdive-prev:hover,
.deepdive-next:hover {
  background: var(--highlight);
  color: #fff;
  border-color: var(--highlight);
}
.deepdive-pagination {
  position: relative !important;
  bottom: auto !important;
  width: auto !important;
}
.deepdive-pagination .swiper-pagination-bullet-active {
  background: var(--highlight) !important;
  width: 20px;
  border-radius: 6px;
}

@media (max-width: 767px) {
  .mcp-tab-switcher { width: 100% !important; margin-bottom: 18px !important; }
  .mcp-toggle-group { width: 100% !important; flex-direction: column !important; border-radius: 16px !important; padding: 4px !important; }
  .mcp-toggle-btn { width: 100% !important; text-align: center !important; padding: 10px 14px !important; border-radius: 12px !important; }

  .deepdive-head { padding: 20px 20px 0 !important; }
  .deepdive-body { padding: 14px 20px 8px !important; }
  .deepdive-head h3 { font-size: 18px !important; }
  .evidence-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin: 16px 16px !important;
    padding: 18px 16px !important;
  }
  .evidence-row .ev {
    text-align: center !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .evidence-row .ev:last-child {
    border-bottom: none;
  }
  .evidence-row .ev .num { font-size: 24px !important; }
  .evidence-row .ev .lbl { font-size: 12px !important; margin-top: 2px !important; }
  .lesson { padding: 14px 20px !important; }
}

/* ==========================================================================
   ZAITEN AI — ENGINEERING RIGOR & WHAT NEVER MOVES TO AI
   ========================================================================== */
.section-rigor {
  background: var(--light-bg, #f6f8fb);
  padding: 80px 0;
}
.section-rigor .lead-sub {
  max-width: 780px;
  margin: 16px auto 0 auto;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted, #69707d);
}

/* 3 Rigor Cards */
.rigor-card {
  background: #ffffff;
  border: 1px solid var(--border, #e7ebf1);
  border-radius: 16px;
  padding: 28px 24px;
  height: 100%;
  transition: all 0.3s ease;
  box-shadow: 0 4px 18px rgba(16, 24, 40, 0.04);
}
.rigor-card:hover {
  transform: translateY(-4px);
  border-color: var(--zc-gate-line, rgba(234, 80, 78, 0.4));
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.08);
}
.rigor-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--heading, #11151f);
  margin-bottom: 20px;
}
.rigor-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--heading, #11151f);
  line-height: 1.35;
  margin-bottom: 12px;
}
.rigor-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text, #4a5568);
  margin: 0;
}

/* Dark Relocate Banner */
.relocate-banner {
  background: var(--dark, #0c1322);
  border-radius: 14px;
  padding: 22px 28px;
  box-shadow: 0 8px 24px rgba(12, 19, 34, 0.15);
}
.relocate-banner p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #d1d5db;
}
.relocate-banner strong {
  color: #ffffff;
  font-weight: 700;
}

/* What Never Moves to AI Cards */
.never-card {
  background: #ffffff;
  border: 1px solid var(--border, #e7ebf1);
  border-radius: 16px;
  padding: 20px 22px;
  height: 100%;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.04);
  transition: all 0.25s ease;
}
.never-card:hover {
  transform: translateY(-3px);
  border-color: var(--zc-gate-line, rgba(234, 80, 78, 0.4));
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.08);
}
.never-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: var(--heading, #11151f);
}
.never-card h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--heading, #11151f);
  margin: 0 0 4px 0;
  line-height: 1.3;
}
.never-card p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted, #69707d);
  margin: 0;
}

/* Rigor Badge */
.rigor-badge {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--zc-gate, #b03230);
  background: var(--zc-gate-bg, #fdecec);
  border: 1px solid var(--zc-gate-line, rgba(234,80,78,0.4));
  border-radius: 6px;
  padding: 3px 8px;
  margin-bottom: 14px;
}

/* ---------- Effort Shift Visual Pie Charts (.eshift) ---------- */
.eshift {
  background: #ffffff;
  border: 1px solid var(--border, #e7ebf1);
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: 0 4px 18px rgba(16, 24, 40, 0.04);
}

.eshift-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.eshift-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: all 0.3s ease;
}

.eshift-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
  border-color: #cbd5e1;
}

.eshift-card.highlight-card {
  background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
  border: 2px solid rgba(234, 80, 78, 0.35);
  box-shadow: 0 10px 28px rgba(234, 80, 78, 0.08);
}

.eshift-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(234, 80, 78, 0.1);
  color: var(--highlight, #ea504e);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.eshift-lbl {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--heading, #11151f);
  margin-bottom: 20px;
  text-align: center;
}

.eshift-pie-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.eshift-pie-container {
  position: relative;
  width: 180px;
  height: 180px;
  margin-bottom: 5px;
}

.eshift-pie-svg {
  width: 100%;
  height: 100%;
}

.eshift-pie-svg circle.pie-seg {
  fill: none;
  stroke-width: 24;
  transform-origin: 60px 60px;
  transform: rotate(-90deg);
  transition: stroke-width 0.25s ease, filter 0.25s ease, opacity 0.25s ease;
  cursor: pointer;
}

.eshift-pie-svg circle.pie-seg:hover {
  stroke-width: 28;
  filter: brightness(1.08) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}

.eshift-pie-svg .is-spec { stroke: #3b82f6; } /* Royal Blue */
.eshift-pie-svg .is-arch { stroke: #8b5cf6; } /* Purple */
.eshift-pie-svg .is-code { stroke: #94a3b8; } /* Muted Slate */
.eshift-pie-svg .is-ver  { stroke: var(--zc-gate, #b03230); } /* Zaiten Red */

.eshift-pie-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.eshift-pie-center .center-val {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--heading, #11151f);
  line-height: 1;
}

.eshift-pie-center .center-lbl {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted, #69707d);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.eshift-key {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 16px 0 10px 0;
  justify-content: center;
}

.eshift-key li {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--heading, #11151f);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eshift-key li::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.eshift-key li.is-spec::before { background: #3b82f6; }
.eshift-key li.is-arch::before { background: #8b5cf6; }
.eshift-key li.is-code::before { background: #94a3b8; }
.eshift-key li.is-ver::before  { background: var(--zc-gate, #b03230); }

.eshift-note {
  font-size: 12.5px;
  color: var(--muted, #69707d);
  text-align: center;
  max-width: 680px;
  margin: 16px auto 0 auto;
  line-height: 1.6;
  font-style: italic;
}