/* ==========================================================================
   Components
   ========================================================================== */

/* --- Navigation --- */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-height);
  z-index: 100;
  display: flex;
  align-items: center;
  /* Note: backdrop-filter intentionally NOT in the transition list
     — animating it causes flickering / ghosting on some browsers
     (Safari, mobile WebKit). It snaps in/out with the .is-scrolled
     toggle, which is fine. */
  transition: background var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-nav.is-scrolled {
  background: rgba(0, 16, 33, 0.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--border);
}
.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.site-nav .brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text);
  font-weight: var(--fw-semi);
}
/* No editor-supplied width on the <img> → fall back to the legacy
   pinned height. With a width attribute the browser auto-scales the
   height from the image's intrinsic aspect ratio. */
.site-nav .brand img:not([width]) { height: 28px; width: auto; }
.site-nav .brand img[width]       { height: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: var(--space-2) 0;
  position: relative;
}
.nav-links a:hover, .nav-links a.is-active { color: var(--brand); }
.nav-links a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--brand);
  border-radius: var(--radius-pill);
}

/* Dropdown */
.has-dropdown { position: relative; }
.has-dropdown > button {
  all: unset;
  cursor: pointer;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) 0;
}
.has-dropdown > button:hover { color: var(--brand); }
.has-dropdown > button::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-fast) var(--ease);
}
.has-dropdown.is-open > button::after { transform: rotate(-135deg) translateY(2px); }

.dropdown-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.has-dropdown.is-open .dropdown-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.dropdown-panel a {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.dropdown-panel a:hover { background: var(--surface-2); color: var(--brand); }
.dropdown-panel .d-title { font-weight: var(--fw-semi); display: block; }
.dropdown-panel .d-sub   { font-size: var(--fs-sm); color: var(--text-muted); display: block; }
.dropdown-panel .d-icon {
  flex: 0 0 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--grad-brand);
  display: grid; place-items: center;
  font-weight: var(--fw-bold);
  color: var(--cc-ink);
}
/* Editor-controlled icon-holder colour (set per nav item in Strapi
   admin). default = the existing brand gradient look. */
.dropdown-panel .d-icon--default          { background: var(--grad-brand); color: var(--cc-ink); }
.dropdown-panel .d-icon--brand            { background: var(--brand);       color: var(--cc-ink); }
.dropdown-panel .d-icon--accent           { background: var(--accent);      color: #fff; }
.dropdown-panel .d-icon--brand-gradient   { background: var(--grad-brand);  color: var(--cc-ink); }
.dropdown-panel .d-icon--accent-gradient  { background: var(--grad-accent); color: #fff; }
.dropdown-panel .d-icon--surface          { background: var(--surface-2);   color: var(--text); }
.dropdown-panel .d-icon--none             { background: transparent;        color: var(--brand); border: 1px solid var(--border); }

/* Mobile toggle */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--text);
  cursor: pointer;
}
.nav-toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block;
  width: 20px; height: 2px;
  background: currentColor;
  content: "";
}
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after  { position: absolute; top:  6px; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    /* Pin an explicit height so translateY(-120%) actually clears
       the viewport. Without it the element collapses to content
       height (~49px) and only translates ~59px, leaving the menu
       partially visible just under the header. */
    height: calc(100vh - var(--nav-height));
    height: calc(100dvh - var(--nav-height));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-5);
    background: var(--bg-elev);
    border-top: 1px solid var(--border);
    overflow-y: auto;
    transform: translateY(-120%);
    transition: transform var(--dur-base) var(--ease);
  }
  .site-nav.is-open .nav-links { transform: none; }
  .nav-links > li { border-bottom: 1px solid var(--border); }
  .nav-links a, .has-dropdown > button {
    /* Spacier tap targets — each row is a comfortable 56px+ minimum
       (reading the new UA min target guideline) with bigger type. */
    padding: var(--space-5) var(--space-2);
    width: 100%;
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    line-height: 1;
    min-height: 56px;
    display: flex;
    align-items: center;
    text-align: left;
    justify-content: flex-start;
  }
  .nav-links .has-dropdown > button { gap: var(--space-2); }
  .nav-links { padding-top: var(--space-4); }
  /* Inside the offcanvas, the Solutions dropdown items expand inline
     and need their own breathing room. */
  .nav-links .dropdown-panel a {
    padding: var(--space-4) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    margin: var(--space-2) 0;
  }
  .nav-links .dropdown-panel .d-title { font-size: var(--fs-base); }
  .nav-links .dropdown-panel .d-sub   { font-size: var(--fs-sm); margin-top: 4px; }
  /* Book-a-demo CTA — a clear button at the bottom with extra space above. */
  .nav-cta { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
  .nav-cta .btn-nav,
  .nav-cta .btn { width: 100%; min-height: 52px; padding: 14px 20px; font-size: var(--fs-base); }
  .dropdown-panel {
    position: static;
    transform: none;
    min-width: 0;
    width: 100%;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    background: transparent;
    border: 0;
    padding: 0 0 var(--space-3) 0;
    display: none;
  }
  .has-dropdown.is-open .dropdown-panel {
    display: block;
    /* Override the desktop translateX(-50%) so the panel sits flush
       inside the offcanvas menu instead of being pushed left. */
    transform: none;
  }
  /* Phone licence-math 2-card comparison stays 2-col by default;
     drop to 1-col on tablet-down too. */
  .compare-grid { grid-template-columns: 1fr; }
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--grad-accent);
  color: #fff;
  box-shadow: var(--shadow-accent-glow);
}
.btn-primary:hover { color: #fff; box-shadow: 0 0 48px rgba(255,95,0,0.5); }

.btn-ghost {
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); color: var(--text); }

.btn-brand {
  background: var(--grad-brand);
  color: var(--cc-ink);
  box-shadow: var(--shadow-glow);
}
.btn-brand:hover { color: var(--cc-ink); }

.btn-accent {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-accent-glow);
}
.btn-accent:hover { background: var(--accent-strong); color: #fff; }

/* Rich-text block — long-form prose (legal pages, blog posts) rendered
   from editor-authored GFM markdown. Tightens vertical rhythm and
   styles the elements kramdown emits (headings, blockquote, code,
   tables) so they fit the dark surface. */
.rich-text { color: var(--text-muted); line-height: 1.65; }
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child  { margin-bottom: 0; }
.rich-text h1 { font-size: var(--fs-3xl); margin: var(--space-7) 0 var(--space-4); color: var(--text); }
.rich-text h2 { font-size: var(--fs-2xl); margin: var(--space-7) 0 var(--space-3); color: var(--text); }
.rich-text h3 { font-size: var(--fs-xl);  margin: var(--space-6) 0 var(--space-3); color: var(--text); }
.rich-text h4 { font-size: var(--fs-lg);  margin: var(--space-5) 0 var(--space-2); color: var(--text); }
.rich-text p, .rich-text ul, .rich-text ol { margin: 0 0 var(--space-4); }
.rich-text ul, .rich-text ol { padding-left: var(--space-6); }
.rich-text li { margin-bottom: var(--space-2); }
.rich-text li > p { margin-bottom: var(--space-2); }
.rich-text a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.rich-text a:hover { color: var(--brand-strong); }
.rich-text strong { color: var(--text); font-weight: var(--fw-semi); }
.rich-text blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--accent);
  background: rgba(255, 95, 0, 0.06);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--text);
}
.rich-text blockquote > :last-child { margin-bottom: 0; }
.rich-text code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}
.rich-text pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
  margin: 0 0 var(--space-4);
}
.rich-text pre code { background: transparent; padding: 0; }
.rich-text hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }
.rich-text table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-size: var(--fs-sm);
}
.rich-text th, .rich-text td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.rich-text th { color: var(--text); font-weight: var(--fw-semi); background: rgba(255, 255, 255, 0.03); }

.btn-lg { padding: 16px 28px; font-size: var(--fs-base); }
.btn-sm { padding: 8px 16px; font-size: var(--fs-xs); }

/* --- Hero --- */
.hero {
  position: relative;
  padding: calc(var(--nav-height) + var(--space-9)) 0 var(--space-9);
  overflow: hidden;
  isolation: isolate;
}
.hero-inner { max-width: 860px; margin: 0 auto; text-align: center; }
.hero h1 { margin-bottom: var(--space-5); }
.hero .lead { margin-inline: auto; margin-bottom: var(--space-6); font-size: var(--fs-xl); }
.hero-ctas { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* Fade out near the bottom of the hero so the blobs / glow blend
     smoothly into whatever section renders below — no hard horizontal
     cut as the user scrolls past the hero. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
}
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-hero);
  opacity: 0.9;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, var(--bg) 75%);
}

.blob {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  /* Static blurred gradient washes — animating filter:blur on three
     overlapping layers caused noticeable repaint flicker behind hero
     content on some GPUs. Position offsets per blob preserve the
     asymmetric atmosphere without per-frame paint cost. */
  filter: blur(80px);
  opacity: 0.5;
}
.blob-1 { top: -160px; left: -100px; background: var(--cc-blue);   transform: scale(1.05); }
.blob-2 { top: 6%;     right: -120px; background: var(--cc-sky);    transform: scale(1.1); }
.blob-3 { bottom: -180px; left: 28%;  background: var(--cc-orange); opacity: 0.32; transform: scale(0.98); }

/* --- Trust strip (logos) --- */
.trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-7);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  opacity: 0.7;
}
.trust-strip .logo-ph {
  font-weight: var(--fw-semi);
  letter-spacing: 0.1em;
  color: var(--text-dim);
  font-size: var(--fs-sm);
  text-transform: uppercase;
}

/* --- Stats --- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  padding: var(--space-7) 0;
}
.stat {
  text-align: center;
  padding: var(--space-5);
  border-left: 1px solid var(--border);
}
.stat:first-child { border-left: 0; }
.stat .num {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.stat .label { color: var(--text-muted); margin-top: var(--space-2); }
@media (max-width: 700px) {
  .stat-row { grid-template-columns: 1fr; }
  .stat { border-left: 0; border-top: 1px solid var(--border); }
  .stat:first-child { border-top: 0; }
}

/* --- Cards / feature grid --- */
.card {
  background: var(--surface);
  background-image: var(--grad-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  /* Flex layout so siblings in the same grid row share the same height
     even when their body text length differs. */
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.card h3 { margin-bottom: var(--space-3); font-size: var(--fs-xl); }
.card p { margin-bottom: 0; }
/* Push .card-link to the bottom so all cards have aligned CTAs. */
.card .card-link { margin-top: auto; padding-top: var(--space-4); }

/* Industry card — full-width image header on top, body inset below.
   Used on the Branches page for the 6 industry cards. */
.industry-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.industry-card__header {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.industry-card > h3,
.industry-card > p,
.industry-card > .muted,
.industry-card > .card-link {
  margin-left: var(--space-5);
  margin-right: var(--space-5);
}
.industry-card > h3 { margin-top: var(--space-5); }
.industry-card > p:last-child,
.industry-card > .muted:last-child { margin-bottom: var(--space-5); }
.industry-card > .card-link { margin-top: auto; padding: var(--space-3) 0 var(--space-5); }

.card-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: rgba(17, 181, 228, 0.12);
  border: 1px solid rgba(17, 181, 228, 0.25);
  display: grid; place-items: center;
  margin-bottom: var(--space-4);
  font-size: var(--fs-xl);
  color: var(--brand);
}
.card-icon.accent {
  background: rgba(255, 95, 0, 0.12);
  border-color: rgba(255, 95, 0, 0.3);
  color: var(--accent);
}

/* Big solution card */
.sol-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7);
  background: var(--surface);
  background-image: linear-gradient(135deg, rgba(17,181,228,0.08), transparent 60%), var(--grad-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  transition: all var(--dur-base) var(--ease);
  position: relative;
  overflow: hidden;
}
.sol-card.accent {
  background-image: linear-gradient(135deg, rgba(255,95,0,0.10), transparent 60%), var(--grad-surface);
}
.sol-card:hover { border-color: var(--border-strong); transform: translateY(-4px); }
.sol-card h3 { font-size: var(--fs-3xl); }
.sol-card .sol-tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--space-2);
}
.sol-card.accent .sol-tag { color: var(--accent); }
.sol-card ul { list-style: none; padding: 0; margin: var(--space-4) 0; }
.sol-card ul li {
  padding-left: 28px;
  position: relative;
  margin-bottom: var(--space-2);
  color: var(--text);
}
.sol-card ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--grad-brand);
}
.sol-card.accent ul li::before { background: var(--grad-accent); }
/* Push the CTA to the bottom so multi-card rows have aligned buttons
   regardless of body / feature-list length. */
.sol-card > .btn { margin-top: auto; align-self: flex-start; }

/* --- Pricing --- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }

.pricing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  display: flex; flex-direction: column;
  position: relative;
}
.pricing-card.is-featured {
  border-color: rgba(255, 95, 0, 0.5);
  box-shadow: var(--shadow-accent-glow);
  transform: translateY(-8px);
}
@media (max-width: 900px) {
  .pricing-card.is-featured { transform: none; }
}
.pricing-card .plan-name {
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--fw-semi);
}
.pricing-card .price {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  margin: var(--space-4) 0 var(--space-2);
}
.pricing-card .price small {
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}
.pricing-card ul { list-style: none; padding: 0; margin: var(--space-5) 0 var(--space-6); }
.pricing-card ul li {
  padding: 8px 0 8px 26px;
  position: relative;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: var(--fs-sm);
}
.pricing-card ul li:last-child { border-bottom: 0; }
.pricing-card ul li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 8px;
  color: var(--brand);
  font-weight: var(--fw-bold);
}
.pricing-card.is-featured ul li::before { color: var(--accent); }
.pricing-card .btn { margin-top: auto; }
.badge-featured {
  position: absolute;
  top: -12px;
  right: var(--space-5);
  background: var(--grad-accent);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- FAQ (details/summary) --- */
.faq {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  transition: border-color var(--dur-base) var(--ease);
}
.faq details[open] { border-color: var(--border-strong); }
.faq summary {
  list-style: none;
  cursor: pointer;
  font-weight: var(--fw-semi);
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: var(--fs-2xl);
  color: var(--brand);
  transition: transform var(--dur-fast) var(--ease);
}
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: var(--space-3) 0 0; }

.faq-group-title {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brand);
  font-weight: var(--fw-semi);
  margin: var(--space-6) 0 var(--space-3);
}

/* --- CTA band --- */
.cta-band {
  background: linear-gradient(135deg, rgba(12,100,129,0.35), rgba(255,95,0,0.2)), var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band h2 { margin-bottom: var(--space-4); }
.cta-band .hero-ctas { margin-top: var(--space-5); }

/* --- Footer --- */
.footer {
  padding: var(--space-8) 0 var(--space-6);
  border-top: 1px solid var(--border);
  margin-top: var(--space-9);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-7);
  margin-bottom: var(--space-7);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h5 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: var(--space-2); }
.footer ul a { color: var(--text); font-size: var(--fs-sm); }
.footer ul a:hover { color: var(--brand); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  flex-wrap: wrap;
  gap: var(--space-3);
}
.footer-brand img            { margin-bottom: var(--space-4); }
.footer-brand img:not([width]) { height: 32px; }
.footer-brand img[width]       { height: auto; }

/* --- Two-column sections --- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* Real product screenshot */
.product-shot {
  width: 100%;
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  background: var(--surface);
}

/* Floating hero screenshot */
.hero-shot {
  max-width: 1120px;
  margin: var(--space-8) auto calc(-1 * var(--space-9));
  padding: 0 var(--space-4);
  position: relative;
  z-index: 1;
}
.hero-shot img {
  width: 100%;
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  box-shadow: 0 40px 80px rgba(0,0,0,.55), 0 0 80px rgba(17,181,228,0.22);
}
.hero-shot::before {
  content: "";
  position: absolute;
  inset: 20px 40px -10px 40px;
  background: linear-gradient(180deg, rgba(17,181,228,0.35), rgba(255,95,0,0.25));
  filter: blur(60px);
  opacity: 0.6;
  z-index: -1;
  border-radius: var(--radius-xl);
}
.hero.has-shot { padding-bottom: var(--space-8); }
.hero.has-shot + section { padding-top: var(--space-10); }

/* Phone / Pulse hero showcase — same framed look as .hero-shot so the
   GIF / screenshot stays contained instead of breaking out of the
   page width. */
.phone-showcase,
.pulse-showcase {
  max-width: 1120px;
  margin: var(--space-7) auto calc(-1 * var(--space-9));
  padding: 0 var(--space-4);
  position: relative;
  z-index: 1;
}
.phone-showcase__gif,
.pulse-showcase img {
  width: 100%;
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .55), 0 0 80px rgba(17, 181, 228, 0.22);
}
.phone-showcase::before,
.pulse-showcase::before {
  content: "";
  position: absolute;
  inset: 20px 40px -10px 40px;
  background: linear-gradient(180deg, rgba(17, 181, 228, 0.35), rgba(255, 95, 0, 0.25));
  filter: blur(60px);
  opacity: 0.6;
  z-index: -1;
  border-radius: var(--radius-xl);
}

@media (max-width: 700px) {
  .hero-shot { margin-bottom: calc(-1 * var(--space-7)); }
  .hero.has-shot + section { padding-top: var(--space-9); }
}

.mock {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--cc-ocean), var(--cc-teal));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  display: grid; place-items: center;
  color: rgba(255,255,255,0.7);
  font-weight: var(--fw-semi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: var(--fs-sm);
  position: relative;
  overflow: hidden;
}
.mock::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 30%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 24px);
}

/* --- Misc --- */
.badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: var(--fs-xs);
  border-radius: var(--radius-pill);
  background: rgba(17,181,228,0.12);
  border: 1px solid rgba(17,181,228,0.3);
  color: var(--brand);
  font-weight: var(--fw-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge.accent {
  background: rgba(255,95,0,0.12);
  border-color: rgba(255,95,0,0.3);
  color: var(--accent);
}

.center { text-align: center; }
.mt-6 { margin-top: var(--space-6); }

/* ==========================================================================
   Flow component — lifecycle / process diagram (react-flow style)
   ========================================================================== */

.flow-wrap {
  position: relative;
  padding: var(--space-6);
  background:
    linear-gradient(180deg, rgba(17,181,228,0.05), rgba(255,95,0,0.03)),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.flow.flow-3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }

/* Bridge variant: providers | middleware hub | end-platforms */
.flow.flow-bridge {
  grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.6fr) minmax(180px, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}
.flow.flow-bridge > .flow-stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.flow.flow-bridge > .flow-stage > .flow-node { flex: 1; }

@media (max-width: 900px) {
  .flow.flow-3, .flow.flow-bridge { grid-template-columns: 1fr; }
}

/* Hub (middleware) node: two stacked tiers inside one card */
.flow-node--hub {
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(17,181,228,0.10), rgba(255,95,0,0.08)),
    var(--surface-2);
  border-color: rgba(17, 181, 228, 0.5);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(17,181,228,0.2), 0 0 40px rgba(17,181,228,0.18);
  display: flex;
  flex-direction: column;
}
.flow-node--hub:hover {
  transform: none;
  border-color: var(--brand);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(17,181,228,0.35), var(--shadow-glow);
}
.hub-tier {
  padding: var(--space-5);
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.hub-tier + .hub-tier { border-top: 1px solid var(--border-strong); }
.hub-tier--voice { background: rgba(255, 95, 0, 0.05); }
.hub-tier .tier-label {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--space-2);
}
.hub-tier--voice .tier-label { color: var(--accent); }
.hub-tier h4 {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
  color: var(--text);
}
.hub-tier p {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}
.hub-tier .flow-chips { margin-top: auto; }

/* Compact row-style node used in bridge source/destination lists */
.flow-stage--rows { gap: var(--space-3); justify-content: space-between; }
.flow-node--row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  flex: 0 0 auto;
}
.flow-node--row .flow-icon {
  margin-bottom: 0;
  width: 32px; height: 32px;
  flex: 0 0 auto;
  font-size: 14px;
}
.flow-node--row .flow-row-body { flex: 1; min-width: 0; }
.flow-node--row h4 { font-size: var(--fs-sm); margin: 0 0 3px; }
.flow-node--row .flow-chips { margin-top: 2px; gap: 3px; }
.flow-node--row .flow-chip { font-size: 10px; padding: 1px 6px; }

/* Hub wordmark — tiny brand marker inside the middle card */
.hub-wordmark {
  position: absolute;
  top: var(--space-3); right: var(--space-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  opacity: 0.7;
}
.hub-tier--voice .hub-wordmark { color: var(--accent); }

/* Only the hub stretches inside a bridge flow */
.flow.flow-bridge > .flow-stage > .flow-node--hub { flex: 1 1 auto; }

.flow-stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  z-index: 2;
}

.flow-stage::before {
  content: attr(data-label);
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--space-2);
  text-align: center;
}

.flow-node {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.flow-node:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(17,181,228,0.25);
}

.flow-node h4 {
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
  padding-bottom: 0;
  color: var(--text);
}
.flow-node p {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  margin: 0;
  color: var(--text-muted);
}

.flow-node .flow-icon {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: rgba(17,181,228,0.12);
  border: 1px solid rgba(17,181,228,0.28);
  color: var(--brand);
  margin-bottom: var(--space-3);
  font-size: 16px;
  line-height: 1;
}
.flow-node.is-accent .flow-icon {
  background: rgba(255,95,0,0.12);
  border-color: rgba(255,95,0,0.32);
  color: var(--accent);
}

.flow-node .flow-tag {
  position: absolute;
  top: -10px; left: -10px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: var(--grad-brand);
  color: var(--cc-ink);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.flow-node.is-accent .flow-tag {
  background: var(--grad-accent);
  color: #fff;
}

.flow-node .flow-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--space-3);
}
.flow-node .flow-chip {
  font-size: var(--fs-xs);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-strong);
  color: var(--text);
  white-space: nowrap;
  font-weight: var(--fw-medium);
}

.flow-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.flow-edge {
  fill: none;
  stroke: url(#flowEdgeGrad);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 6;
  vector-effect: non-scaling-stroke;
  animation: flow-dash 3s linear infinite;
  opacity: 0.85;
}
@keyframes flow-dash {
  to { stroke-dashoffset: -44; }
}

.flow-caption {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin: var(--space-6) 0 0;
  max-width: 720px;
  margin-inline: auto;
}
.flow-caption strong { color: var(--brand); }

/* Mobile: stack vertically, hide SVG edges, let stage labels + spacing do the work. */
@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; gap: var(--space-6); }
  .flow-stage { align-items: stretch; }
  .flow-edges { display: none; }
  .flow-stage + .flow-stage::before {
    margin-top: 0;
  }
  .flow-stage + .flow-stage {
    position: relative;
    padding-top: var(--space-6);
  }
  .flow-stage + .flow-stage::after {
    content: "↓";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px; height: 28px;
    display: grid; place-items: center;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    color: var(--brand);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-edge { animation: none; }
}

/* ==========================================================================
   Epicenter — minimal 3-step hero (inputs · CallerConnect · outputs)
   Used on the home page. Intentionally independent from .flow-* family.
   ========================================================================== */

.epicenter-wrap {
  position: relative;
  padding: var(--space-7) var(--space-6);
  background:
    radial-gradient(circle at 50% 50%, rgba(17,181,228,0.06), transparent 70%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.epicenter-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(220px, auto) 1fr;
  gap: var(--space-7);
  align-items: center;
}

.epicenter-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  z-index: 2;
}

.epicenter-card {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.epicenter-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(17,181,228,0.2);
}

.epicenter-card__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--space-3);
}

.epicenter-card__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.epicenter-card__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text);
  font-weight: var(--fw-medium);
}

.epicenter-card__item .icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(17, 181, 228, 0.12);
  border: 1px solid rgba(17, 181, 228, 0.28);
  color: var(--brand);
  font-size: 13px;
  flex: 0 0 26px;
}

/* Voice variant — orange accent */
.epicenter-card.is-voice .epicenter-card__label { color: var(--accent); }
.epicenter-card.is-voice:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(255,95,0,0.25);
}
.epicenter-card.is-voice .epicenter-card__item .icon {
  background: rgba(255, 95, 0, 0.12);
  border-color: rgba(255, 95, 0, 0.3);
  color: var(--accent);
}

/* Central epicenter mark */
.epicenter-center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.epicenter-mark {
  position: relative;
  width: 220px;
  height: 220px;
  display: grid;
  place-items: center;
}

.epicenter-mark__inner {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(17,181,228,0.28), rgba(10,34,52,0.6) 65%),
    var(--surface-2);
  border: 1px solid rgba(17, 181, 228, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  box-shadow:
    0 0 60px rgba(17, 181, 228, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    var(--shadow-md);
  z-index: 3;
}

.epicenter-mark__inner img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.epicenter-mark__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.epicenter-mark__ring--outer {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(17, 181, 228, 0.25);
  animation: epicenter-pulse 4s ease-in-out infinite;
}
.epicenter-mark__ring--mid {
  width: 88%;
  height: 88%;
  border: 1px solid rgba(17, 181, 228, 0.18);
  animation: epicenter-pulse 4s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes epicenter-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.6; }
  50%      { transform: translate(-50%, -50%) scale(1.12); opacity: 0.15; }
}

.epicenter-tagline {
  text-align: center;
  max-width: 220px;
}
.epicenter-tagline .name {
  display: block;
  font-weight: var(--fw-bold);
  color: var(--text);
  font-size: var(--fs-base);
  letter-spacing: 0.02em;
}
.epicenter-tagline .sub {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Spokes */
.epicenter-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.epicenter-edge {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 6;
  vector-effect: non-scaling-stroke;
  animation: flow-dash 3s linear infinite;
  opacity: 0.85;
}

/* Mobile: stack rails above/below the mark, hide spokes */
@media (max-width: 900px) {
  .epicenter-wrap { padding: var(--space-5) var(--space-4); }
  .epicenter-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .epicenter-rail { flex-direction: column; }
  .epicenter-edges { display: none; }
  .epicenter-mark { width: 160px; height: 160px; }
  .epicenter-mark__inner { width: 140px; height: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .epicenter-mark__ring { animation: none; }
  .epicenter-edge { animation: none; }
}

/* ==========================================================================
   Layer cards — "Two layers, one platform" section below the hero
   ========================================================================== */

.layers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 900px) {
  .layers-grid { grid-template-columns: 1fr; }
}

.layer-card {
  position: relative;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.layer-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(17,181,228,0.2);
  border-color: var(--brand);
}
.layer-card--voice:hover {
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(255,95,0,0.22);
  border-color: var(--accent);
}

.layer-card h3 {
  margin-top: var(--space-2);
  font-size: var(--fs-2xl);
}
.layer-card .layer-eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}
.layer-card--voice .layer-eyebrow { color: var(--accent); }

.layer-card__chips {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.layer-card__chips li {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.layer-card--voice .layer-card__chips li {
  background: rgba(255, 95, 0, 0.08);
  border-color: rgba(255, 95, 0, 0.3);
}

/* ==========================================================================
   Lifecycle canvas — full-bleed sequential flow with per-stage reveals
   (home hero centerpiece)
   Timeline (cycle 7s):
     0-14%   left fan-in pulse
     14-17%  Stage 1 (Ingest) reveal
     17-27%  S1 → S2 connector pulse
     27-30%  Stage 2 (Enrich) reveal
     30-40%  S2 → S3 connector pulse
     40-43%  Stage 3 (Deliver) reveal
     43-56%  right fan-out pulse
     56-95%  everything held visible
     95-100% fade out for loop reset
   ========================================================================== */

.lifecycle-canvas {
  position: relative;
  width: min(100vw, 1680px);
  margin-left: calc(50% - min(50vw, 840px));
  margin-right: auto;
  margin-top: var(--space-7);
  margin-bottom: calc(-1 * var(--space-8));
  padding: var(--space-6) var(--space-4);
}
.lifecycle-canvas--pulse {
  width: min(100vw, 1860px);
  margin-left: calc(50% - min(50vw, 930px));
}

.lifecycle-canvas__inner {
  position: relative;
  width: 100%;
  aspect-ratio: 1400 / 500;
  min-height: 440px;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center center;
  border-radius: var(--radius-lg);
}

/* Generic pill / card primitives reused on both sides and in the middle */
.lifecycle-pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
  line-height: 1.2;
  box-shadow: var(--shadow-sm);
  z-index: 2;
  width: 11.4%;
  min-width: 140px;
  transition: border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.lifecycle-pill:hover { border-color: var(--brand); transform: translateX(2px); }

.lifecycle-pill--out {
  background: rgba(255, 95, 0, 0.05);
  border-color: rgba(255, 95, 0, 0.25);
}
.lifecycle-pill--out:hover { border-color: var(--accent); transform: translateX(-2px); }

.lifecycle-pill__icon {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: 0 0 20px;
  color: var(--text-dim);
}
.lifecycle-pill__icon svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lifecycle-pill--out .lifecycle-pill__icon { color: var(--accent); opacity: 0.9; }

/* Pill / arch-pill marked as not yet supported. Dims the whole pill
   (text + icon + border) and styles the small "[soon]" chip beside
   the label as a subtle gold accent that reads at a glance. */
.lifecycle-pill.is-soon,
.arch-pill.is-soon,
.arch-group__item.is-soon {
  opacity: 0.55;
}
.pill-soon {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FEC84B;
  background: rgba(254, 200, 75, 0.10);
  border: 1px solid rgba(254, 200, 75, 0.4);
  border-radius: var(--radius-sm);
  vertical-align: middle;
  line-height: 1.4;
}

/* Left pills: centers at y = 80, 250, 420 of 500 → 16%, 50%, 84% */
.lifecycle-pill--in-1 { left: 1.4%; top: 12%; }
.lifecycle-pill--in-2 { left: 1.4%; top: 46%; }
.lifecycle-pill--in-3 { left: 1.4%; top: 80%; }

/* Right pills */
.lifecycle-pill--out-1 { right: 1.4%; top: 12%; }
.lifecycle-pill--out-2 { right: 1.4%; top: 46%; }
.lifecycle-pill--out-3 { right: 1.4%; top: 80%; }

/* Column labels above the top pill */
.lifecycle-col-label {
  position: absolute;
  top: 4%;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  z-index: 2;
}
.lifecycle-col-label--left  { left: 1.4%; }
.lifecycle-col-label--right { right: 1.4%; text-align: right; }

/* Middle stages — three vertical stacks positioned absolutely */
.lifecycle-stage {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12.9%;        /* ~ 180 / 1400 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 2;
}
/* Centers at x = 440, 760, 1080 → 31.4%, 54.3%, 77.1%; width 12.9% */
/* Three stages, evenly spaced between the two pill columns */
.lifecycle-stage--1 { left: 21.7%; }
.lifecycle-stage--2 { left: 43.55%; }
.lifecycle-stage--3 { left: 65.4%; }

/* Metric callout — fades in when this stage lights up */
.lifecycle-stage__metric {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translate(-50%, 4px);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.02em;
  opacity: 0;
  white-space: nowrap;
}
.lifecycle-stage__metric strong {
  color: var(--brand);
  font-weight: var(--fw-semi);
}
.lifecycle-stage.is-accent .lifecycle-stage__metric strong { color: var(--accent); }

/* Vertical dotted connector from metric down to card */
.lifecycle-stage__connector {
  position: absolute;
  left: 50%;
  top: 30%;
  bottom: 53%;
  width: 1px;
  border-left: 1px dashed var(--border-strong);
  opacity: 0;
}
.lifecycle-stage__connector--down {
  top: 56%;
  bottom: 30%;
}

/* Stage card (middle) — always visible, but gets a glow during its reveal slot */
.lifecycle-stage__card {
  position: absolute;
  top: 47%;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.lifecycle-stage__icon {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: 0 0 20px;
  color: var(--brand);
}
.lifecycle-stage.is-accent .lifecycle-stage__icon { color: var(--accent); }
.lifecycle-stage__icon svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Detail card below the stage card — fades in when stage lights up */
.lifecycle-stage__detail {
  position: absolute;
  top: 64%;
  left: 0;
  right: 0;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  opacity: 0;
  transform: translateY(6px);
  box-shadow: var(--shadow-sm);
}
.lifecycle-stage__detail-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 6px;
}
.lifecycle-stage.is-accent .lifecycle-stage__detail-label { color: var(--accent); }
.lifecycle-stage__detail-body {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}
.lifecycle-stage__detail-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--text);
  font-size: var(--fs-xs);
}
.lifecycle-stage__detail-body ul li {
  padding: 2px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lifecycle-stage__detail-body ul li::before {
  content: "✓";
  color: var(--brand);
  font-weight: var(--fw-bold);
  font-size: 11px;
}
.lifecycle-stage.is-accent .lifecycle-stage__detail-body ul li::before { color: var(--accent); }

/* ==========================================================================
   Core pillars — tall "column" cards with illustrations on top
   ========================================================================== */

.pillar-card {
  position: relative;
  text-align: center;
  padding: var(--space-7) var(--space-5) var(--space-6);
  background:
    linear-gradient(180deg, rgba(17,181,228,0.05), transparent 30%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pillar-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(17,181,228,0.22);
}

/* Thin glowing bar across the top of each pillar — like a column capital */
.pillar-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 2px;
  background: var(--grad-brand);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  opacity: 0.9;
}
.pillar-card--accent::before { background: var(--grad-accent); }

/* Small hairline at the bottom — base of the column */
.pillar-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 25%;
  right: 25%;
  height: 1px;
  background: var(--border-strong);
}

.pillar-card__img {
  display: block;
  width: 100%;
  max-width: 200px;
  height: 160px;
  object-fit: contain;
  margin: 0 auto var(--space-5);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}

/* Icon-only variant for pillar-style cards (when we don't have a full illustration) */
.pillar-card__icon {
  display: grid;
  place-items: center;
  width: 120px;
  height: 140px;
  margin: 0 auto var(--space-5);
  background:
    radial-gradient(circle at 50% 45%, rgba(17,181,228,0.18), transparent 65%);
  color: var(--brand);
  border-radius: 50%;
}
.pillar-card__icon svg {
  width: 60px;
  height: 60px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 12px rgba(17, 181, 228, 0.35));
}
.pillar-card--accent .pillar-card__icon {
  background: radial-gradient(circle at 50% 45%, rgba(255,95,0,0.22), transparent 65%);
  color: var(--accent);
}
.pillar-card--accent .pillar-card__icon svg {
  filter: drop-shadow(0 0 12px rgba(255, 95, 0, 0.4));
}

.pillar-card h3 {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-3);
  line-height: var(--lh-snug);
}
.pillar-card p {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 1100px) and (min-width: 901px) {
  .pillar-card { padding: var(--space-6) var(--space-4); }
  .pillar-card__img { height: 130px; }
  .pillar-card h3 { font-size: var(--fs-lg); }
}
@media (max-width: 900px) {
  .pillar-card { padding: var(--space-6) var(--space-5); }
  .pillar-card__img { height: 140px; }
}

/* Highlighted "group detected" chip shown inside the Detect stage's detail */
.lifecycle-stage__group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(17, 181, 228, 0.14);
  border: 1px solid rgba(17, 181, 228, 0.32);
  color: var(--brand);
  font-weight: var(--fw-semi);
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.lifecycle-stage__group::before {
  content: "→";
  color: var(--brand);
  font-weight: var(--fw-bold);
}

/* SVG overlay lines */
.lifecycle-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.lifecycle-lines .line-base {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.35;
}
.lifecycle-lines .line-pulse {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 80 1000;
  filter: drop-shadow(0 0 6px rgba(17, 181, 228, 0.6));
  opacity: 0;
}
.lifecycle-lines .line-pulse.is-voice {
  stroke: var(--accent);
  filter: drop-shadow(0 0 6px rgba(255, 95, 0, 0.6));
}

/* Sequential pulse keyframes (7s cycle) — only one group visible at a time */
.lifecycle-lines .line-pulse.group-1 { animation: pulse-group-1 7s linear infinite; }
.lifecycle-lines .line-pulse.group-2 { animation: pulse-group-2 7s linear infinite; }
.lifecycle-lines .line-pulse.group-3 { animation: pulse-group-3 7s linear infinite; }
.lifecycle-lines .line-pulse.group-4 { animation: pulse-group-4 7s linear infinite; }

@keyframes pulse-group-1 {
  0%      { opacity: 0; stroke-dashoffset: 1000; }
  1%      { opacity: 1; stroke-dashoffset: 1000; }
  14%     { opacity: 1; stroke-dashoffset: -80; }
  15%     { opacity: 0; stroke-dashoffset: -80; }
  100%    { opacity: 0; stroke-dashoffset: -80; }
}
@keyframes pulse-group-2 {
  0%, 17%   { opacity: 0; stroke-dashoffset: 1000; }
  18%       { opacity: 1; stroke-dashoffset: 1000; }
  26%       { opacity: 1; stroke-dashoffset: -80; }
  27%, 100% { opacity: 0; stroke-dashoffset: -80; }
}
@keyframes pulse-group-3 {
  0%, 30%   { opacity: 0; stroke-dashoffset: 1000; }
  31%       { opacity: 1; stroke-dashoffset: 1000; }
  39%       { opacity: 1; stroke-dashoffset: -80; }
  40%, 100% { opacity: 0; stroke-dashoffset: -80; }
}
@keyframes pulse-group-4 {
  0%, 43%   { opacity: 0; stroke-dashoffset: 1000; }
  44%       { opacity: 1; stroke-dashoffset: 1000; }
  56%       { opacity: 1; stroke-dashoffset: -80; }
  57%, 100% { opacity: 0; stroke-dashoffset: -80; }
}

/* Stage reveals — callout + detail + card glow, staged per stage */
.lifecycle-stage--1 .lifecycle-stage__metric,
.lifecycle-stage--1 .lifecycle-stage__detail,
.lifecycle-stage--1 .lifecycle-stage__connector {
  animation: stage-reveal-1 7s linear infinite;
}
.lifecycle-stage--2 .lifecycle-stage__metric,
.lifecycle-stage--2 .lifecycle-stage__detail,
.lifecycle-stage--2 .lifecycle-stage__connector {
  animation: stage-reveal-2 7s linear infinite;
}
.lifecycle-stage--3 .lifecycle-stage__metric,
.lifecycle-stage--3 .lifecycle-stage__detail,
.lifecycle-stage--3 .lifecycle-stage__connector {
  animation: stage-reveal-3 7s linear infinite;
}

.lifecycle-stage--1 .lifecycle-stage__card { animation: stage-card-glow-1 7s linear infinite; }
.lifecycle-stage--2 .lifecycle-stage__card { animation: stage-card-glow-2 7s linear infinite; }
.lifecycle-stage--3 .lifecycle-stage__card { animation: stage-card-glow-3 7s linear infinite; }

@keyframes stage-reveal-1 {
  0%, 13%   { opacity: 0; transform: translate(-50%, 4px); }
  17%, 95%  { opacity: 1; transform: translate(-50%, 0);    }
  100%      { opacity: 0; transform: translate(-50%, 4px); }
}
@keyframes stage-reveal-2 {
  0%, 26%   { opacity: 0; transform: translate(-50%, 4px); }
  30%, 95%  { opacity: 1; transform: translate(-50%, 0);    }
  100%      { opacity: 0; transform: translate(-50%, 4px); }
}
@keyframes stage-reveal-3 {
  0%, 39%   { opacity: 0; transform: translate(-50%, 4px); }
  43%, 95%  { opacity: 1; transform: translate(-50%, 0);    }
  100%      { opacity: 0; transform: translate(-50%, 4px); }
}

/* detail + connector reveal (no translate-X centering baked into keyframes) */
.lifecycle-stage--1 .lifecycle-stage__detail,
.lifecycle-stage--1 .lifecycle-stage__connector {
  animation: stage-reveal-detail-1 7s linear infinite;
}
.lifecycle-stage--2 .lifecycle-stage__detail,
.lifecycle-stage--2 .lifecycle-stage__connector {
  animation: stage-reveal-detail-2 7s linear infinite;
}
.lifecycle-stage--3 .lifecycle-stage__detail,
.lifecycle-stage--3 .lifecycle-stage__connector {
  animation: stage-reveal-detail-3 7s linear infinite;
}

@keyframes stage-reveal-detail-1 {
  0%, 13%  { opacity: 0; transform: translateY(6px); }
  17%, 95% { opacity: 1; transform: translateY(0);   }
  100%     { opacity: 0; transform: translateY(6px); }
}
@keyframes stage-reveal-detail-2 {
  0%, 26%  { opacity: 0; transform: translateY(6px); }
  30%, 95% { opacity: 1; transform: translateY(0);   }
  100%     { opacity: 0; transform: translateY(6px); }
}
@keyframes stage-reveal-detail-3 {
  0%, 39%  { opacity: 0; transform: translateY(6px); }
  43%, 95% { opacity: 1; transform: translateY(0);   }
  100%     { opacity: 0; transform: translateY(6px); }
}

/* Stage card glow pulse — briefly highlights when pulse arrives */
@keyframes stage-card-glow-1 {
  0%, 14%, 22%, 100% { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
  15%, 18%           { border-color: var(--brand); box-shadow: 0 0 18px rgba(17,181,228,0.4), var(--shadow-sm); }
}
@keyframes stage-card-glow-2 {
  0%, 27%, 34%, 100% { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
  28%, 30%           { border-color: var(--brand); box-shadow: 0 0 18px rgba(17,181,228,0.4), var(--shadow-sm); }
}
@keyframes stage-card-glow-3 {
  0%, 40%, 47%, 100% { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
  41%, 43%           { border-color: var(--accent); box-shadow: 0 0 18px rgba(255,95,0,0.4), var(--shadow-sm); }
}

/* Mobile: drop absolute positioning, stack everything, hide SVG */
@media (max-width: 900px) {
  .lifecycle-canvas { margin: var(--space-5) auto 0; padding: var(--space-4) var(--space-3); }
  .lifecycle-canvas__inner {
    aspect-ratio: auto;
    min-height: 0;
    background-image: none;
    display: flex;
    flex-direction: column;
    /* Tight gap so the flow ticks read as connectors between stages
       rather than ambient padding. The ::before ticks themselves
       carry the spacing for their slot. */
    gap: var(--space-2);
    padding: var(--space-3) 0;
  }
  .lifecycle-lines { display: none; }
  .lifecycle-col-label { position: static; display: block; margin-bottom: var(--space-2); }
  .lifecycle-pill {
    position: static;
    width: 100%;
    min-width: 0;
  }
  .lifecycle-stage {
    position: static;
    width: 100%;
    /* Tight internal gap (metric → card → detail) so the stage reads
       as a single unit and the flow tick to the NEXT stage carries
       the rhythmic spacing instead of stage-level margins. */
    gap: var(--space-2);
    margin: 0;
    display: flex;
    flex-direction: column;
  }
  .lifecycle-stage__metric,
  .lifecycle-stage__card,
  .lifecycle-stage__detail {
    position: static;
    transform: none;
    opacity: 1;
    width: 100%;
    white-space: normal;
  }
  .lifecycle-stage__connector { display: none; }
  /* On mobile, show everything at once, no animation */
  .lifecycle-stage__metric,
  .lifecycle-stage__detail,
  .lifecycle-stage__card,
  .lifecycle-stage--1 .lifecycle-stage__metric,
  .lifecycle-stage--2 .lifecycle-stage__metric,
  .lifecycle-stage--3 .lifecycle-stage__metric,
  .lifecycle-stage--1 .lifecycle-stage__detail,
  .lifecycle-stage--2 .lifecycle-stage__detail,
  .lifecycle-stage--3 .lifecycle-stage__detail,
  .lifecycle-stage--1 .lifecycle-stage__card,
  .lifecycle-stage--2 .lifecycle-stage__card,
  .lifecycle-stage--3 .lifecycle-stage__card {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lifecycle-lines .line-pulse,
  .lifecycle-stage__metric,
  .lifecycle-stage__detail,
  .lifecycle-stage__connector,
  .lifecycle-stage__card {
    animation: none;
  }
  .lifecycle-stage__metric,
  .lifecycle-stage__detail,
  .lifecycle-stage__connector {
    opacity: 1;
    transform: none;
  }
  .lifecycle-lines .line-pulse { opacity: 0.4; }
  .arch-lines .arch-icon { display: none; }
  .arch-group__item.is-hit { animation: none; }
}

/* ==========================================================================
   Lifecycle canvas — 5-stage variant for the Pulse page
   Timeline (cycle 11s):
     0-1%     init
     1-11%    left fan-in pulse          (group p1)
     11-14%   Stage 1 (Detect)   reveal
     14-24%   S1 → S2 pulse              (group p2)
     24-27%   Stage 2 (Match)    reveal
     27-37%   S2 → S3 pulse              (group p3)
     37-40%   Stage 3 (Plan)     reveal
     40-50%   S3 → S4 pulse              (group p4)
     50-53%   Stage 4 (Approve)  reveal
     53-63%   S4 → S5 pulse              (group p5)
     63-66%   Stage 5 (Deliver)  reveal
     66-78%   right fan-out pulse         (group p6)
     78-95%   everything held visible
     95-100%  fade for loop reset
   ========================================================================== */

.lifecycle-canvas--pulse .lifecycle-canvas__inner {
  aspect-ratio: 1500 / 500;
  min-height: 440px;
}
@media (max-width: 900px) {
  .lifecycle-canvas--pulse .lifecycle-canvas__inner {
    aspect-ratio: auto;
    min-height: 0;
  }
  /* Disable pulse-specific reveal animations on mobile — the
     keyframes set `transform: translate(-50%, ...)` which is meant
     for the desktop absolute-positioned metric (left: 50%). On the
     static mobile flow it shifts the metric off-screen left. */
  .lifecycle-canvas--pulse .lifecycle-stage__metric,
  .lifecycle-canvas--pulse .lifecycle-stage__detail,
  .lifecycle-canvas--pulse .lifecycle-stage__connector,
  .lifecycle-canvas--pulse .lifecycle-stage__card {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Right pills for 5-stage variant — shift to accommodate wider layout */
.lifecycle-canvas--pulse .lifecycle-pill--out-1,
.lifecycle-canvas--pulse .lifecycle-pill--out-2,
.lifecycle-canvas--pulse .lifecycle-pill--out-3 { right: 0%; }

/* Stage column positions (centers at x = 320, 540, 760, 980, 1200 of viewBox 1500) */
.lifecycle-canvas--pulse .lifecycle-stage { width: 9.33%; }
.lifecycle-canvas--pulse .lifecycle-stage--1 { left: 16.67%; }
.lifecycle-canvas--pulse .lifecycle-stage--2 { left: 31.33%; }
.lifecycle-canvas--pulse .lifecycle-stage--3 { left: 46.00%; }
.lifecycle-canvas--pulse .lifecycle-stage--4 { left: 60.67%; }
.lifecycle-canvas--pulse .lifecycle-stage--5 { left: 75.33%; }

/* On mobile each stage occupies its own row, full width — override
   the desktop 9.33% width and column positioning. Placed AFTER the
   desktop rules above so the cascade resolves correctly. */
@media (max-width: 900px) {
  .lifecycle-canvas--pulse .lifecycle-stage {
    width: 100%;
    left: auto;
  }
}

/* Tighten stage card padding inside the wider canvas */
.lifecycle-canvas--pulse .lifecycle-stage__card {
  padding: 9px 12px;
  font-size: var(--fs-xs);
}
.lifecycle-canvas--pulse .lifecycle-stage__detail { padding: 8px 10px; }

/* Pulse pulse paths — 6 groups, 11s cycle */
.lifecycle-canvas--pulse .lifecycle-lines .line-pulse.group-p1 { animation: pulse-pg1 11s linear infinite; }
.lifecycle-canvas--pulse .lifecycle-lines .line-pulse.group-p2 { animation: pulse-pg2 11s linear infinite; }
.lifecycle-canvas--pulse .lifecycle-lines .line-pulse.group-p3 { animation: pulse-pg3 11s linear infinite; }
.lifecycle-canvas--pulse .lifecycle-lines .line-pulse.group-p4 { animation: pulse-pg4 11s linear infinite; }
.lifecycle-canvas--pulse .lifecycle-lines .line-pulse.group-p5 { animation: pulse-pg5 11s linear infinite; }
.lifecycle-canvas--pulse .lifecycle-lines .line-pulse.group-p6 { animation: pulse-pg6 11s linear infinite; }

@keyframes pulse-pg1 {
  0%      { opacity: 0; stroke-dashoffset: 1000; }
  1%      { opacity: 1; stroke-dashoffset: 1000; }
  11%     { opacity: 1; stroke-dashoffset: -80; }
  12%,100%{ opacity: 0; stroke-dashoffset: -80; }
}
@keyframes pulse-pg2 {
  0%,14%   { opacity: 0; stroke-dashoffset: 1000; }
  15%      { opacity: 1; stroke-dashoffset: 1000; }
  24%      { opacity: 1; stroke-dashoffset: -80; }
  25%,100% { opacity: 0; stroke-dashoffset: -80; }
}
@keyframes pulse-pg3 {
  0%,27%   { opacity: 0; stroke-dashoffset: 1000; }
  28%      { opacity: 1; stroke-dashoffset: 1000; }
  37%      { opacity: 1; stroke-dashoffset: -80; }
  38%,100% { opacity: 0; stroke-dashoffset: -80; }
}
@keyframes pulse-pg4 {
  0%,40%   { opacity: 0; stroke-dashoffset: 1000; }
  41%      { opacity: 1; stroke-dashoffset: 1000; }
  50%      { opacity: 1; stroke-dashoffset: -80; }
  51%,100% { opacity: 0; stroke-dashoffset: -80; }
}
@keyframes pulse-pg5 {
  0%,53%   { opacity: 0; stroke-dashoffset: 1000; }
  54%      { opacity: 1; stroke-dashoffset: 1000; }
  63%      { opacity: 1; stroke-dashoffset: -80; }
  64%,100% { opacity: 0; stroke-dashoffset: -80; }
}
@keyframes pulse-pg6 {
  0%,66%   { opacity: 0; stroke-dashoffset: 1000; }
  67%      { opacity: 1; stroke-dashoffset: 1000; }
  78%      { opacity: 1; stroke-dashoffset: -80; }
  79%,100% { opacity: 0; stroke-dashoffset: -80; }
}

/* Override the stage 1-3 reveal rules in pulse canvas so they use 11s keyframes */
.lifecycle-canvas--pulse .lifecycle-stage--1 .lifecycle-stage__metric { animation: p-stage-reveal-1 11s linear infinite; }
.lifecycle-canvas--pulse .lifecycle-stage--2 .lifecycle-stage__metric { animation: p-stage-reveal-2 11s linear infinite; }
.lifecycle-canvas--pulse .lifecycle-stage--3 .lifecycle-stage__metric { animation: p-stage-reveal-3 11s linear infinite; }
.lifecycle-canvas--pulse .lifecycle-stage--4 .lifecycle-stage__metric { animation: p-stage-reveal-4 11s linear infinite; }
.lifecycle-canvas--pulse .lifecycle-stage--5 .lifecycle-stage__metric { animation: p-stage-reveal-5 11s linear infinite; }

.lifecycle-canvas--pulse .lifecycle-stage--1 .lifecycle-stage__detail,
.lifecycle-canvas--pulse .lifecycle-stage--1 .lifecycle-stage__connector { animation: p-stage-detail-1 11s linear infinite; }
.lifecycle-canvas--pulse .lifecycle-stage--2 .lifecycle-stage__detail,
.lifecycle-canvas--pulse .lifecycle-stage--2 .lifecycle-stage__connector { animation: p-stage-detail-2 11s linear infinite; }
.lifecycle-canvas--pulse .lifecycle-stage--3 .lifecycle-stage__detail,
.lifecycle-canvas--pulse .lifecycle-stage--3 .lifecycle-stage__connector { animation: p-stage-detail-3 11s linear infinite; }
.lifecycle-canvas--pulse .lifecycle-stage--4 .lifecycle-stage__detail,
.lifecycle-canvas--pulse .lifecycle-stage--4 .lifecycle-stage__connector { animation: p-stage-detail-4 11s linear infinite; }
.lifecycle-canvas--pulse .lifecycle-stage--5 .lifecycle-stage__detail,
.lifecycle-canvas--pulse .lifecycle-stage--5 .lifecycle-stage__connector { animation: p-stage-detail-5 11s linear infinite; }

.lifecycle-canvas--pulse .lifecycle-stage--1 .lifecycle-stage__card { animation: p-card-glow-1 11s linear infinite; }
.lifecycle-canvas--pulse .lifecycle-stage--2 .lifecycle-stage__card { animation: p-card-glow-2 11s linear infinite; }
.lifecycle-canvas--pulse .lifecycle-stage--3 .lifecycle-stage__card { animation: p-card-glow-3 11s linear infinite; }
.lifecycle-canvas--pulse .lifecycle-stage--4 .lifecycle-stage__card { animation: p-card-glow-4 11s linear infinite; }
.lifecycle-canvas--pulse .lifecycle-stage--5 .lifecycle-stage__card { animation: p-card-glow-5 11s linear infinite; }

@keyframes p-stage-reveal-1 {
  0%,10%   { opacity: 0; transform: translate(-50%, 4px); }
  14%,95%  { opacity: 1; transform: translate(-50%, 0);    }
  100%     { opacity: 0; transform: translate(-50%, 4px); }
}
@keyframes p-stage-reveal-2 {
  0%,23%   { opacity: 0; transform: translate(-50%, 4px); }
  27%,95%  { opacity: 1; transform: translate(-50%, 0);    }
  100%     { opacity: 0; transform: translate(-50%, 4px); }
}
@keyframes p-stage-reveal-3 {
  0%,36%   { opacity: 0; transform: translate(-50%, 4px); }
  40%,95%  { opacity: 1; transform: translate(-50%, 0);    }
  100%     { opacity: 0; transform: translate(-50%, 4px); }
}
@keyframes p-stage-reveal-4 {
  0%,49%   { opacity: 0; transform: translate(-50%, 4px); }
  53%,95%  { opacity: 1; transform: translate(-50%, 0);    }
  100%     { opacity: 0; transform: translate(-50%, 4px); }
}
@keyframes p-stage-reveal-5 {
  0%,62%   { opacity: 0; transform: translate(-50%, 4px); }
  66%,95%  { opacity: 1; transform: translate(-50%, 0);    }
  100%     { opacity: 0; transform: translate(-50%, 4px); }
}

@keyframes p-stage-detail-1 {
  0%,10%  { opacity: 0; transform: translateY(6px); }
  14%,95% { opacity: 1; transform: translateY(0);   }
  100%    { opacity: 0; transform: translateY(6px); }
}
@keyframes p-stage-detail-2 {
  0%,23%  { opacity: 0; transform: translateY(6px); }
  27%,95% { opacity: 1; transform: translateY(0);   }
  100%    { opacity: 0; transform: translateY(6px); }
}
@keyframes p-stage-detail-3 {
  0%,36%  { opacity: 0; transform: translateY(6px); }
  40%,95% { opacity: 1; transform: translateY(0);   }
  100%    { opacity: 0; transform: translateY(6px); }
}
@keyframes p-stage-detail-4 {
  0%,49%  { opacity: 0; transform: translateY(6px); }
  53%,95% { opacity: 1; transform: translateY(0);   }
  100%    { opacity: 0; transform: translateY(6px); }
}
@keyframes p-stage-detail-5 {
  0%,62%  { opacity: 0; transform: translateY(6px); }
  66%,95% { opacity: 1; transform: translateY(0);   }
  100%    { opacity: 0; transform: translateY(6px); }
}

@keyframes p-card-glow-1 {
  0%,11%,18%,100% { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
  12%,14%         { border-color: var(--brand); box-shadow: 0 0 18px rgba(17,181,228,0.4), var(--shadow-sm); }
}
@keyframes p-card-glow-2 {
  0%,24%,31%,100% { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
  25%,27%         { border-color: var(--brand); box-shadow: 0 0 18px rgba(17,181,228,0.4), var(--shadow-sm); }
}
@keyframes p-card-glow-3 {
  0%,37%,44%,100% { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
  38%,40%         { border-color: var(--brand); box-shadow: 0 0 18px rgba(17,181,228,0.4), var(--shadow-sm); }
}
@keyframes p-card-glow-4 {
  0%,50%,57%,100% { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
  51%,53%         { border-color: var(--brand); box-shadow: 0 0 18px rgba(17,181,228,0.4), var(--shadow-sm); }
}
@keyframes p-card-glow-5 {
  0%,63%,70%,100% { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
  64%,66%         { border-color: var(--accent); box-shadow: 0 0 18px rgba(255,95,0,0.4), var(--shadow-sm); }
}

/* Approve stage: chosen approver row's check turns green at the
   right moment in the 11s loop. Non-chosen rows dim. */
.lifecycle-canvas--pulse .approve-list li {
  transition: opacity 0.4s ease;
  opacity: 0.45;
}
.lifecycle-canvas--pulse .approve-list[data-chosen-approver="auto"]    li[data-approver-row="auto"],
.lifecycle-canvas--pulse .approve-list[data-chosen-approver="manager"] li[data-approver-row="manager"],
.lifecycle-canvas--pulse .approve-list[data-chosen-approver="msp"]     li[data-approver-row="msp"] {
  opacity: 1;
}
.lifecycle-canvas--pulse .approve-list[data-chosen-approver="auto"]    li[data-approver-row="auto"]::before {
  animation: p-approve-auto 11s linear infinite;
}
.lifecycle-canvas--pulse .approve-list[data-chosen-approver="manager"] li[data-approver-row="manager"]::before,
.lifecycle-canvas--pulse .approve-list[data-chosen-approver="msp"]     li[data-approver-row="msp"]::before {
  animation: p-approve-late 11s linear infinite;
}
@keyframes p-approve-auto {
  0%,53%   { color: var(--brand); text-shadow: none; }
  54%,100% { color: #22c55e; text-shadow: 0 0 8px rgba(34,197,94,0.6); }
}
@keyframes p-approve-late {
  0%,62%   { color: var(--brand); text-shadow: none; }
  64%,100% { color: #22c55e; text-shadow: 0 0 8px rgba(34,197,94,0.6); }
}

/* ==========================================================================
   Typography — mono-face + tech-brand accents
   ========================================================================== */

/* Small uppercase labels across the site use JetBrains Mono — but NOT
   inside the animated flow charts (those read better in the sans face). */
.stat .label,
.stat .num,
.epicenter-card__label,
.epicenter-tagline .sub,
.hub-tier .tier-label,
.hub-wordmark,
.badge,
.badge-featured,
.sol-tag,
.plan-name,
.pillar-card .layer-eyebrow,
.layer-card .layer-eyebrow,
.layer-card__chips li,
.footer h5 {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

/* Numbers read as dashboard readouts */
.stat .num {
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}

/* Stage cards look like technical nodes (mono label, sans content) */
.lifecycle-stage__card {
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
}

/* Keep lead paragraphs in the body sans */
.lead,
.pillar-card p,
.layer-card p,
.lifecycle-stage__detail-body,
.lifecycle-stage__detail-body p,
.epicenter-card__item,
.epicenter-tagline .name {
  font-family: var(--font-sans);
}

/* ==========================================================================
   Architecture diagram — platform map with two layers, central hub,
   Phone highlighted as "our product"
   ========================================================================== */

.arch-canvas {
  position: relative;
  width: min(100vw, 1760px);
  margin-left: calc(50% - min(50vw, 880px));
  margin-top: var(--space-7);
  padding: var(--space-6) var(--space-4);
}

/* Architecture diagram block — when the section-head with CTAs sits
   above the diagram, tighten the gap so the CTAs feel attached to the
   visualisation rather than floating mid-section. */
.arch-section .section-head { margin-bottom: var(--space-4); }
.arch-section .arch-canvas  { margin-top: 0; }
.arch-canvas__inner {
  position: relative;
  width: 100%;
  aspect-ratio: 1600 / 820;
  min-height: 560px;
}

/* SVG overlay — lives under everything visually (z-index 1) */
.arch-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.arch-lines .arch-line {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.85;
}
.arch-lines .arch-line--app   { stroke: var(--brand); }
.arch-lines .arch-line--voice { stroke: var(--accent); }
.arch-lines .arch-line--shared { stroke: url(#archSharedGrad); }
.arch-lines .arch-line--divider {
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1.5;
  stroke-dasharray: 10 6;
  opacity: 1;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.12));
}

/* Hit highlights — applied by architecture_flow.js to the destination
   item(s) when a flow arrives. Lines and source pills stay static; only
   the right-column nodes that "got hit" pulse and shift border color
   in the matching brand/accent. */
.arch-group__item.is-hit {
  animation: arch-hit-pulse 1100ms ease-in-out;
}
.arch-group__item.is-hit[data-arch-item^="connectors:"],
.arch-group__item.is-hit[data-arch-item^="services:"] {
  border-color: rgba(17, 181, 228, 0.9);
}
.arch-group__item.is-hit[data-arch-item^="sbc:"],
.arch-group__item.is-hit[data-arch-item^="breakouts:"] {
  border-color: rgba(255, 95, 0, 0.9);
}
@keyframes arch-hit-pulse {
  0%   { transform: scale(1);    }
  35%  { transform: scale(1.06); }
  100% { transform: scale(1);    }
}

/* Traveling icons — small coloured circle with a glyph, riding a motion path */
.arch-lines .arch-icon circle { filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.4)); }
.arch-lines .arch-icon--app circle[fill="#11B5E4"] {
  filter: drop-shadow(0 0 8px rgba(17, 181, 228, 0.85));
}
.arch-lines .arch-icon--voice circle[fill="#FF5F00"] {
  filter: drop-shadow(0 0 8px rgba(255, 95, 0, 0.85));
}

/* Layer labels right on the divider */
.arch-band-label {
  position: absolute;
  left: 1.3%;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--bg);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  z-index: 3;
  white-space: nowrap;
}
.arch-band-label--app   { top: calc(50% - 18px); color: var(--brand);  }
.arch-band-label--voice { top: calc(50% + 4px);  color: var(--accent); }

/* Pills (directories on the left) */
.arch-pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  width: 10%;
  min-width: 150px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
  z-index: 2;
  box-shadow: var(--shadow-sm);
  transform: translateY(-50%);
  line-height: 1.2;
}
.arch-pill__icon {
  display: grid; place-items: center;
  width: 18px; height: 18px;
  flex: 0 0 18px;
  color: var(--text-dim);
}
.arch-pill__icon svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.arch-pill--app { left: 15%; }
.arch-pill--voice {
  left: 15%;
  border-color: rgba(255, 95, 0, 0.28);
}
.arch-pill--voice .arch-pill__icon { color: var(--accent); opacity: 0.9; }

/* Pill y-positions (app top band) */
.arch-pill--in-app-1 { top: 14.6%; }   /* y=120  / 820 */
.arch-pill--in-app-2 { top: 22.0%; }   /* y=180 */
.arch-pill--in-app-3 { top: 29.3%; }   /* y=240 */

/* Pill y-positions (voice bottom band) */
.arch-pill--in-voice-1 { top: 70.7%; }  /* y=580 */
.arch-pill--in-voice-2 { top: 78.0%; }  /* y=640 */
.arch-pill--in-voice-3 { top: 85.4%; }  /* y=700 */

/* SBC group — standalone but styled like other right-column groups */
.arch-group--sbc {
  left: 75%;
  right: 1.3%;
  top: 68%;
  border-color: rgba(255, 95, 0, 0.35);
}
.arch-group--sbc .arch-group__title { color: var(--accent); }

/* Central hub — the "heart" */
.arch-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20%;
  min-width: 260px;
  aspect-ratio: 320 / 180;
  background: var(--surface-2);
  border: 1px solid rgba(17, 181, 228, 0.5);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  box-shadow:
    0 0 24px rgba(17, 181, 228, 0.18),
    0 0 48px rgba(17, 181, 228, 0.08),
    0 10px 30px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  z-index: 3;
}
.arch-hub__logo {
  max-width: 82%;
  height: auto;
  opacity: 0.95;
  /* Turn the full wordmark white so "CALLER" and "CONNECT" read with equal contrast */
  filter: brightness(0) invert(1);
}
.arch-hub__caption {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Groups — connectors, services, breakouts */
.arch-group {
  position: absolute;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  z-index: 2;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.arch-group__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.arch-group__items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.arch-group__item {
  font-size: var(--fs-sm);
  color: var(--text);
  padding: 7px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  gap: 9px;
  line-height: 1.2;
  position: relative;
  font-weight: var(--fw-medium);
}
.arch-group__item-icon {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  flex: 0 0 18px;
  color: var(--text-dim);
}
.arch-group__item-icon svg {
  width: 16px; height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.arch-group--connectors .arch-group__item-icon { color: var(--brand); opacity: 0.9; }
.arch-group--services   .arch-group__item-icon { color: var(--text); opacity: 0.9; }
.arch-group--sbc        .arch-group__item-icon { color: var(--accent); opacity: 0.9; }
.arch-group--breakouts  .arch-group__item-icon { color: var(--accent); opacity: 0.85; }

/* Connectors group — top-right, application band only */
.arch-group--connectors {
  left: 75%;
  right: 1.3%;
  top: 4%;
  border-color: rgba(17, 181, 228, 0.35);
}
.arch-group--connectors .arch-group__title { color: var(--brand); }

/* Services group — straddles the divider, right.
   Narrower than Connectors to leave room on the right for the "Our product" callout. */
.arch-group--services {
  left: 75%;
  right: 10%;
  top: 36%;
  border-image: linear-gradient(180deg, rgba(17,181,228,0.4), rgba(255,95,0,0.4)) 1;
  border-color: rgba(17,181,228,0.3);
}
.arch-group--services .arch-group__title {
  background: linear-gradient(90deg, var(--brand), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Breakouts group — below the hub, centered */
.arch-group--breakouts {
  left: 37.5%;
  width: 25%;
  top: 68.3%;
  border-color: rgba(255, 95, 0, 0.35);
}
.arch-group--breakouts .arch-group__title { color: var(--accent); }
.arch-group--breakouts .arch-group__items {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}
.arch-group--breakouts .arch-group__item {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  padding: 4px 9px;
}

/* Coming-soon state — slightly muted title + items (badge stays full brightness) */
.arch-group--coming-soon .arch-group__title,
.arch-group--coming-soon .arch-group__items { opacity: 0.7; filter: saturate(0.9); }
.arch-group--coming-soon .arch-group__item { background: transparent; }
.arch-group__badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FEC84B;
  padding: 2px 6px;
  border: 1px dashed rgba(254, 200, 75, 0.6);
  background: rgba(254, 200, 75, 0.08);
  border-radius: var(--radius-sm);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.arch-group__badge--corner {
  position: absolute;
  top: 8px;
  right: 8px;
}

/* Phone — our product, golden glow */
.arch-group__item.arch-item--ours {
  border-color: #FEC84B;
  background: rgba(254, 200, 75, 0.08);
  box-shadow: 0 0 16px rgba(254, 200, 75, 0.35);
  color: #FEC84B;
  font-weight: var(--fw-semi);
}
.arch-group__item.arch-item--ours::after {
  content: "★";
  color: #FEC84B;
  margin-left: auto;
  font-size: 11px;
}

/* Callout — sits to the RIGHT of the Phone pill with a dashed connector, no box */
.arch-item--ours { position: relative; }
/* Desktop: the .arch-item--ours__pill wrapper has no visual box —
   its children flow as if the wrapper isn't there, so the LI's
   inherited pill border + ★ ::after rendering stay intact. */
.arch-item--ours__pill { display: contents; }
.arch-callout {
  position: absolute;
  top: 50%;
  left: calc(100% + 48px);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  z-index: 5;
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}
.arch-callout::before {
  content: "";
  position: absolute;
  right: calc(100% + 6px);
  top: 50%;
  width: 42px;
  border-top: 1px dashed #FEC84B;
  opacity: 0.85;
}
.arch-callout img {
  width: 40px;
  height: auto;
  opacity: 0.95;
  filter: brightness(0) invert(1);
}
.arch-callout__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.arch-callout__text strong {
  color: #FEC84B;
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
}
.arch-callout__text span {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* Mobile: collapse everything into a vertical stack, hide SVG */
@media (max-width: 900px) {
  .arch-canvas {
    width: 100%;
    margin-left: auto;
    padding: var(--space-5) var(--space-4);
  }
  .arch-canvas__inner {
    aspect-ratio: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .arch-lines,
  .arch-band-label { display: none; }
  .arch-pill,
  .arch-hub,
  .arch-group {
    /* relative (not static) so absolute-positioned children like
       .arch-group__badge--corner anchor inside the group instead
       of escaping to the canvas inner. */
    position: relative;
    transform: none;
    width: 100%;
    min-width: 0;
    right: auto;
    left: auto;
    top: auto;
    bottom: auto;
    aspect-ratio: auto;
  }
  .arch-hub { min-width: 0; padding: var(--space-5); }
  /* Phone "Our product" item — keep the inherited .arch-group__item
     flex layout so the icon + "Phone" text sit on one row, but
     enable flex-wrap so the callout can flow to its own row below.
     Drop the desktop yellow halo (border + glow + tinted bg) so the
     Phone pill matches the other Service items, with the callout
     below as the only "this is special" indicator. (Specificity has
     to match `.arch-group__item.arch-item--ours` to win.) */
  /* Two visually independent gold-themed elements stacked vertically:
       1. The Phone pill — its own pill border + gold dash, painted by
          the .arch-item--ours__pill wrapper inside.
       2. The OUR PRODUCT callout — already-styled gold dashed box
          below, sibling of the pill wrapper.
     The LI itself is invisible on mobile (no border, no bg, no
     padding) so the two children read as separate cards. */
  .arch-group__item.arch-item--ours {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text);
    padding: 0;
    gap: var(--space-2);
    font-weight: var(--fw-medium);
  }
  .arch-item--ours__pill {
    /* Match the dimensions of the sibling Service pills (MS Teams,
       Zoom, Webex) on mobile — same padding, font size + weight,
       gap. The mobile @media block tightens .arch-group__item to
       padding:4px 6px / font-weight:500, so we mirror that here. */
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 6px;
    border: 1px dashed rgba(254, 200, 75, 0.6);
    background: rgba(254, 200, 75, 0.06);
    border-radius: var(--radius-pill);
    color: #FEC84B;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    align-self: stretch;
  }
  .arch-item--ours__pill .arch-group__item-icon { color: #FEC84B; }
  /* Hide the desktop ★ on mobile (the callout already conveys the
     "Our product" pitch with more clarity). */
  .arch-group__item.arch-item--ours::after { display: none; }
  .arch-item--ours .arch-callout {
    /* Force its own row inside the wrapped flex item. */
    flex-basis: 100%;
    position: static;
    transform: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    white-space: normal;
    margin: 0;
    padding: 6px 10px;
    border: 1px dashed rgba(254, 200, 75, 0.5);
    border-radius: var(--radius-md);
    background: rgba(254, 200, 75, 0.06);
  }
  .arch-callout::before,
  .arch-callout::after { display: none; }
  .arch-callout img { width: 18px; height: auto; }
  .arch-callout__text { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.3; }
  .arch-callout__text strong { font-size: 10px; }
  .arch-callout__text span   { font-size: 10px; }
}

/* Timeline — vertical milestone strip. Use it for company history,
   product roadmap, or a mix. The status enum on each item
   (done | current | planned) drives the dot styling so a single
   block can carry past + present + future in one strip. */
.timeline-section { padding: var(--space-9) 0; }
.timeline-section--brand  .section-head h2,
.timeline-section--brand  .timeline__label { color: var(--brand); }
.timeline-section--accent .section-head h2,
.timeline-section--accent .timeline__label { color: var(--accent); }

.timeline {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 760px;
  position: relative;
}
.timeline__item {
  position: relative;
  padding: 0 0 var(--space-6) var(--space-7);
  border-left: 1px dashed var(--border);
  margin-left: 6px;
}
.timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline__dot {
  position: absolute;
  left: -7px;
  top: 6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--border-strong);
  box-sizing: border-box;
}
.timeline__item--done .timeline__dot {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(12, 170, 220, 0.12);
}
.timeline__item--current .timeline__dot {
  background: var(--accent);
  border-color: var(--accent);
  animation: timeline-pulse 1.8s ease-in-out infinite;
}
.timeline__item--planned .timeline__dot {
  background: transparent;
  border-color: var(--border-strong);
}
@keyframes timeline-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 95, 0, 0.50); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 95, 0, 0.00); }
}

.timeline__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--space-1);
}
.timeline__item--planned .timeline__label { color: var(--text-dim); }
.timeline__item--current .timeline__label { color: var(--accent); }

.timeline__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-size: var(--fs-lg);
  color: var(--text);
}
.timeline__icon { width: 20px; height: 20px; flex-shrink: 0; }
.timeline__body {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: 1.6;
}

@media (max-width: 700px) {
  .timeline { max-width: 100%; }
  .timeline__item { padding-left: var(--space-6); }
  .timeline__title { font-size: var(--fs-base); }
}

/* Browser shot — single screenshot inside a fake browser chrome.
   Larger, centered variant of the pulse-shot-card pattern. Width
   per-instance via inline `style="max-width: …px"`. Click the image
   to pop out via the existing lightbox.js (matches `[data-lightbox] img`). */
.browser-shot-section { padding: var(--space-7) 0; }
.browser-shot {
  margin: 0 auto;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, 0 8px 40px rgba(0,16,33,0.35);
}
.browser-shot__chrome {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border-bottom: 1px solid var(--border);
}
.browser-shot__dots {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}
.browser-shot__dots i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: inline-block;
}
.browser-shot__dots i:nth-child(1) { background: #ff5f57; }
.browser-shot__dots i:nth-child(2) { background: #febc2e; }
.browser-shot__dots i:nth-child(3) { background: #28c840; }
.browser-shot__url {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  text-align: center;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-shot__img {
  width: 100%;
  display: block;
  height: auto;
  object-fit: contain;
  background: var(--surface-2);
}
.browser-shot[data-lightbox] .browser-shot__img { cursor: zoom-in; }
.browser-shot__caption {
  padding: var(--space-5) var(--space-6) var(--space-6);
}
.browser-shot__eyebrow {
  display: block;
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  margin-bottom: var(--space-2);
}
.browser-shot__heading {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-xl);
  color: var(--text);
}
.browser-shot__body {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: 1.6;
}
@media (max-width: 700px) {
  .browser-shot__chrome { padding: 6px 8px; }
  .browser-shot__dots i { width: 10px; height: 10px; }
  .browser-shot__url { font-size: var(--fs-xs); padding: 4px 10px; }
  .browser-shot__caption { padding: var(--space-4); }
}

/* Pulse screenshot gallery — fake browser chrome on top, screenshot
   below, then breathing room before the title/body. */
.pulse-shot-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pulse-shot-card .browser-chrome {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border-bottom: 1px solid var(--border);
}
.pulse-shot-card .browser-chrome__dots {
  display: inline-flex;
  gap: 6px;
}
.pulse-shot-card .browser-chrome__dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: inline-block;
}
.pulse-shot-card .browser-chrome__dots i:nth-child(1) { background: #ff5f57; }
.pulse-shot-card .browser-chrome__dots i:nth-child(2) { background: #febc2e; }
.pulse-shot-card .browser-chrome__dots i:nth-child(3) { background: #28c840; }
.pulse-shot-card .browser-chrome__url {
  flex: 1;
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  text-align: center;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pulse-shot-card__img {
  width: 100%;
  display: block;
  border-bottom: 1px solid var(--border-strong);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  background: var(--surface-2);
}
.pulse-shot-card > h3,
.pulse-shot-card .pulse-shot-card__heading {
  margin: var(--space-5) var(--space-5) 0;
  font-size: var(--fs-xl);
}
.pulse-shot-card > p,
.pulse-shot-card > .muted {
  margin: var(--space-3) var(--space-5) 0;
}
.pulse-shot-card > p:last-child,
.pulse-shot-card > .muted:last-child {
  margin-bottom: var(--space-5);
}
.pulse-shot-card > ul.card-features {
  margin: var(--space-3) var(--space-5) var(--space-5);
}
.pulse-shot-card > .card-link {
  margin: var(--space-3) var(--space-5) var(--space-5);
}

/* Voice-wave texture helper — for sections that want the pattern more
   prominent (hero-level intensity). The body already has the base
   texture; this class intensifies it. */
.voice-bg {
  position: relative;
}
.voice-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/voice-wave-95f48c57.svg");
  background-repeat: repeat;
  background-size: 600px auto;
  background-position: center top;
  opacity: 0.6;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 40%, transparent 80%);
  z-index: 0;
}
.voice-bg > * { position: relative; z-index: 1; }
@media (max-width: 700px) {
  .voice-bg::before { background-size: 420px auto; }
}

/* ============================================================================
   Booking page — /book-a-demo
   ========================================================================= */

.booking-hero {
  padding: var(--space-9) 0 var(--space-7);
  text-align: center;
}
.booking-hero__inner { max-width: 720px; margin: 0 auto; }
.booking-hero h1 { margin-top: var(--space-3); }
.booking-hero .lead { margin-inline: auto; }

.booking-section { padding-bottom: var(--space-10); }

.booking-card {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-7);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, 0 8px 40px rgba(0,16,33,0.35);
}

.booking-card--unavailable { text-align: center; }

/* Block bottom-spacing — editors pick a per-block bottom margin in
   Strapi admin (`default | none | tight | loose | xl`). Cms::BlockRenderer
   injects a `<div class="block-spacer block-spacer--<value>">` after
   the block's normal markup; this rule turns it into either negative
   margin (compresses the gap to the next block) or extra height. */
.block-spacer { display: block; pointer-events: none; }
.block-spacer--none  { margin-top: calc(-1 * var(--space-9)); }
.block-spacer--tight { margin-top: calc(-1 * var(--space-5)); }
.block-spacer--loose { height: var(--space-7); }
.block-spacer--xl    { height: var(--space-10); border-top: 1px solid var(--border); margin-top: var(--space-7); }

/* `.block-showcase` — wraps any non-hero block when its `as_showcase`
   field is set in Strapi. Provides the nav-clearance top padding and
   reuses the existing `.hero-bg` decoration so any block (card grid,
   pillars, two-column, etc.) can stand in for the hero on a page. */
.block-showcase {
  position: relative;
  padding-top: var(--nav-height);
  overflow: hidden;
  isolation: isolate;
}
.block-showcase > section:first-of-type { padding-top: var(--space-9); }

/* Top-spacing variants — prepended before a block. `none`/`tight` use a
   negative margin-bottom (height 0) to pull the following section up
   into the previous one. `loose`/`xl` add extra room above. */
.block-spacer--top-none  { margin-bottom: calc(-1 * var(--space-9)); }
.block-spacer--top-tight { margin-bottom: calc(-1 * var(--space-5)); }
.block-spacer--top-loose { height: var(--space-7); }
.block-spacer--top-xl    { height: var(--space-10); border-bottom: 1px solid var(--border); margin-bottom: var(--space-7); }

/* Email-shield — anchors with class .mailto-shield render as link-like
   text without a real href until JS arms them on hover/focus. The
   user/domain spans + literal '@' span keep the email split across
   three nodes in the source DOM so scrapers miss it. Visually
   identical to any other <a> link. */
.mailto-shield { cursor: pointer; }
.mailto-shield .mailto-shield__user,
.mailto-shield .mailto-shield__at,
.mailto-shield .mailto-shield__domain {
  display: inline;
}

/* Honeypot field — visually + spatially hidden from real users but
   still in the DOM so form-stuffing bots auto-fill it. Avoid
   `display: none` and `visibility: hidden`, since some bots skip
   those. The clip-path technique used here is the same as the
   recommended .visually-hidden helper. */
.booking-honeypot,
.form-honeypot {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
}

.booking-noscript {
  padding: var(--space-4);
  background: rgba(254,200,75,0.08);
  border: 1px dashed rgba(254,200,75,0.6);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  color: var(--text);
}

.booking-step + .booking-step { margin-top: var(--space-7); padding-top: var(--space-7); border-top: 1px solid var(--border); }
.booking-step__title { font-size: var(--fs-lg); margin: 0 0 var(--space-4); }
.booking-step__hint,
.booking-step__empty { font-size: var(--fs-sm); margin: var(--space-3) 0 0; }

/* Date grid */
.booking-date-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--space-2);
}
.booking-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--space-3) var(--space-2);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.booking-date:hover { background: rgba(17,181,228,0.08); border-color: var(--brand); }
.booking-date.is-selected { background: rgba(17,181,228,0.16); border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.booking-date__dow { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; }
.booking-date__day { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1; }
.booking-date__mon { font-size: var(--fs-xs); color: var(--text-muted); }

/* Slot chips */
.booking-slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.booking-slots__loading { font-size: var(--fs-sm); }
.booking-slot {
  padding: 8px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.booking-slot:hover { background: rgba(17,181,228,0.08); border-color: var(--brand); }
.booking-slot.is-selected {
  background: var(--grad-brand);
  border-color: transparent;
  color: #001021;
  font-weight: var(--fw-semi);
}

/* Form fields */
.booking-field { display: block; margin-bottom: var(--space-4); }
.booking-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.booking-field .req { color: var(--accent); }
.booking-field input,
.booking-field textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.booking-field input::placeholder,
.booking-field textarea::placeholder { color: var(--text-dim); }
.booking-field input:focus,
.booking-field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(17,181,228,0.25);
}
.booking-field textarea { resize: vertical; min-height: 84px; }

.booking-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}
.booking-summary { font-family: var(--font-mono); font-size: var(--fs-sm); }
.booking-error {
  margin-top: var(--space-3);
  color: var(--accent);
  font-size: var(--fs-sm);
}

/* Confirmed */
.booking-confirmed { text-align: center; padding: var(--space-5) 0; }
.booking-confirmed__icon {
  width: 64px; height: 64px;
  margin: 0 auto var(--space-4);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  color: #001021;
  background: var(--grad-brand);
  border-radius: 50%;
}

@media (max-width: 640px) {
  .booking-card { padding: var(--space-5); }
  .booking-actions { flex-direction: column; align-items: stretch; }
  .booking-summary { text-align: center; }
}

/* ============================================================================
   Contact page — /contact (two-column layout)
   ========================================================================= */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-6);
  align-items: start;
  max-width: 1240px;
  margin: 0 auto;
}

.contact-card { max-width: none; margin: 0; }

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-7);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, 0 8px 40px rgba(0,16,33,0.35);
}

.contact-block {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border);
}
.contact-block:first-child { border-top: 0; padding-top: 0; }
.contact-block:last-child { padding-bottom: 0; }

.contact-block__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
  margin-bottom: var(--space-2);
}

.contact-block__title {
  font-size: var(--fs-lg);
  margin: 0 0 var(--space-3);
}

.contact-block .muted { font-size: var(--fs-sm); margin: 0 0 var(--space-3); }

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.contact-list li {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}
.contact-list__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.contact-list a { color: var(--text); border-bottom: 1px dashed var(--border); }
.contact-list a:hover { color: var(--brand); border-bottom-color: var(--brand); }

.contact-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.contact-field-row .booking-field { margin-bottom: var(--space-4); }

@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .contact-info { padding: var(--space-5); }
  .contact-field-row { grid-template-columns: 1fr; gap: 0; }
  .contact-list li { grid-template-columns: 90px 1fr; }
}

/* ============================================================================
   CMS / Preview
   ========================================================================= */

/* Preview banner — fixed strip at the very top of the viewport. The
   site-nav is also position:fixed at top:0, so we push it down by 40px
   and add matching body padding so flow content doesn't slide under. */
.preview-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;            /* above .site-nav (z-index 100) */
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-5);
  background: linear-gradient(90deg, #FEC84B, #FF5F00);
  color: #001021;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-align: center;
  font-weight: var(--fw-semi);
  letter-spacing: 0.04em;
}

body.has-preview-banner {
  padding-top: 40px;
}
body.has-preview-banner .site-nav {
  top: 40px;
}
.preview-banner code {
  background: rgba(0, 16, 33, 0.15);
  border-color: rgba(0, 16, 33, 0.2);
  color: inherit;
}

.custom-embed-placeholder {
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
}

/* ============================================================================
   Pricing comparison table — modernised look
   ========================================================================= */

.pricing-section { padding: var(--space-8) 0; }

.pricing-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}

.pricing-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
}

.pricing-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg);
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-weight: var(--fw-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.pricing-table th.pricing-table__plan { text-align: center; }
.pricing-table th.pricing-table__plan--featured {
  color: var(--accent);
  position: relative;
}
.pricing-table th.pricing-table__plan--featured::after {
  content: "Most popular";
  display: block;
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: var(--fw-semi);
}

.pricing-table tbody tr {
  border-bottom: 1px solid var(--border);
}
.pricing-table tbody td {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.pricing-table tbody tr:last-child td { border-bottom: 0; }

.pricing-table__feature {
  font-weight: var(--fw-medium);
}
.pricing-table__cell {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.pricing-table__cell--featured {
  background: rgba(255, 95, 0, 0.04);
}

.pricing-table__cell.is-dash { color: var(--text-dim); }
.pricing-table__cell.is-check { color: var(--brand); font-size: var(--fs-base); }
.pricing-table__cell.pricing-table__cell--featured.is-check { color: var(--accent); }
.pricing-table__cell.is-opt {
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--fs-xs);
}
.pricing-table__cell.is-plus { color: var(--accent); font-weight: var(--fw-semi); }
.pricing-table__cell.is-value { color: var(--text); font-weight: var(--fw-medium); }

.pricing-table__group-row td {
  padding: var(--space-5) var(--space-5) var(--space-3);
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border);
}
.pricing-table__group-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  color: var(--text);
  letter-spacing: -0.01em;
}
.pricing-table__group-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.pricing-table__footnote {
  margin-top: var(--space-4);
  font-size: var(--fs-xs);
  text-align: center;
}

@media (max-width: 720px) {
  .pricing-table thead th,
  .pricing-table tbody td { padding: var(--space-3) var(--space-3); }
  .pricing-table { font-size: var(--fs-xs); }
}

/* ============================================================================
   Comparison two-column (license math etc.)
   ========================================================================= */

.compare-grid { gap: var(--space-5); align-items: stretch; }

.compare-card {
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  position: relative;
}
.compare-card--brand  { border-top: 3px solid var(--brand); }
.compare-card--accent { border-top: 3px solid var(--accent); background: rgba(255, 95, 0, 0.04); }

.compare-card__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.compare-card--brand  .compare-card__eyebrow { color: var(--brand); }
.compare-card--accent .compare-card__eyebrow { color: var(--accent); }

.compare-card h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-2xl);
}

.compare-card__chips {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
}
.compare-card__chips li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.compare-card__chips li:last-child { border-bottom: 0; }
.compare-card--brand  .compare-card__chips li::before  { content: "✓ "; color: var(--brand); margin-right: 6px; }
.compare-card--accent .compare-card__chips li::before  { content: "✓ "; color: var(--accent); margin-right: 6px; }

/* ============================================================================
   Check-list (used by two-column chips inside text columns)
   ========================================================================= */
ul.check-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
}
ul.check-list li {
  padding: 6px 0 6px 20px;
  position: relative;
  color: var(--text);
}
ul.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--brand);
  font-weight: var(--fw-bold);
}

/* Card inside default grid: make features list look right */
.card ul.card-features {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0;
  font-size: var(--fs-sm);
}
.card ul.card-features li {
  padding: 4px 0 4px 18px;
  position: relative;
  color: var(--text);
}
.card ul.card-features li::before {
  content: "·";
  position: absolute;
  left: 4px;
  color: var(--text-muted);
}

/* ============================================================================
   Image lightbox
   ========================================================================= */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(0, 16, 33, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: zoom-out;
  animation: lightbox-fade var(--dur-base) var(--ease-out);
}
.lightbox-overlay.is-open { display: flex; }

.lightbox-image {
  max-width: min(95vw, 1600px);
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  cursor: default;
}

.lightbox-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.16); }

body.lightbox-locked { overflow: hidden; }

/* Hint that product shots are clickable */
.product-shot,
.pulse-shot-card__img {
  cursor: zoom-in;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.product-shot:hover,
.pulse-shot-card__img:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

@keyframes lightbox-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================================
   Light theme — overrides for places where the dark palette was hardcoded
   in earlier sections. We use a body-scoped helper class .theme-light so
   one selector covers both [data-theme="light"] and [data-theme="auto"]
   under prefers-color-scheme: light (set by inline <head> script).
   ========================================================================= */

/* Dark-mode body atmosphere — solid bg colour; the voice mask is
   painted by the [data-bg=*] pseudo-elements below (spectrum is the
   default). Keeps every section inside the same fixed canvas. */
.theme-dark body {
  background-color: var(--bg);
  position: relative;
}

/* ============================================================================
   Voice-themed dark backgrounds — all use the same rainbow gradient
   masked through a different SVG silhouette. Selection via URL:
       /                (default)  spectrum — flowing rainbow voice-wave
       /?bg=spectrum    explicit alias of the default
       /?bg=equalizer   vertical dotted bars, varying heights
       /?bg=pulse       dotted waveform envelope (audio-energy field)
       /?bg=plain       no voice mask — flat dark bg with subtle glow
   Each is full-page (fixed position) and built from a non-repeating
   composition. Choice persists in localStorage('cc-bg').
   ========================================================================= */

/* Default (when [data-bg] is unset) and explicit ?bg=spectrum
   share the same paint. */
.theme-dark body::before,
.theme-dark[data-bg="spectrum"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(
    90deg,
    #ff2d5f  0%,
    #ff5f00 14%,
    #ffae22 28%,
    #ffe066 42%,
    #6cd24a 56%,
    #11b5e4 70%,
    #1481ba 84%,
    #7f3fff 100%
  );
  -webkit-mask-image: url("/assets/voice-wave-95f48c57.svg");
          mask-image: url("/assets/voice-wave-95f48c57.svg");
  -webkit-mask-size: cover;
          mask-size: cover;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  opacity: 0.85;
  mix-blend-mode: screen;
  pointer-events: none;
}
.theme-dark body::after,
.theme-dark[data-bg="spectrum"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse 90% 80% at center,
    transparent 0%,
    transparent 65%,
    var(--bg) 100%
  );
  pointer-events: none;
}

/* When a non-spectrum variant is chosen, suppress the default mask. */
.theme-dark[data-bg="equalizer"] body::before,
.theme-dark[data-bg="pulse"]     body::before,
.theme-dark[data-bg="plain"]     body::before,
.theme-dark[data-bg="equalizer"] body::after,
.theme-dark[data-bg="pulse"]     body::after,
.theme-dark[data-bg="plain"]     body::after {
  content: none;
}

/* ---------- equalizer — vertical dotted bars ---------------------------
   Same dimmed mechanics as spectrum: rainbow gradient masked through
   the SVG, screen-blended over a soft vignette so the bars feel like
   atmosphere rather than foreground graphics. Low opacity keeps body
   text fully readable. */
.theme-dark[data-bg="equalizer"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(
    90deg,
    #ff2d5f  0%,
    #ff5f00 14%,
    #ffae22 28%,
    #ffe066 42%,
    #6cd24a 56%,
    #11b5e4 70%,
    #1481ba 84%,
    #7f3fff 100%
  );
  -webkit-mask-image: url("/assets/voice-equalizer-effc48bd.svg");
          mask-image: url("/assets/voice-equalizer-effc48bd.svg");
  -webkit-mask-size: cover;
          mask-size: cover;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  opacity: 0.32;
  mix-blend-mode: screen;
  pointer-events: none;
}
.theme-dark[data-bg="equalizer"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse 90% 80% at center,
    transparent 0%,
    transparent 65%,
    var(--bg) 100%
  );
  pointer-events: none;
}

/* ---------- pulse — dotted waveform envelope --------------------------- */
.theme-dark[data-bg="pulse"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(
    90deg,
    #ff2d5f  0%,
    #ff5f00 14%,
    #ffae22 28%,
    #ffe066 42%,
    #6cd24a 56%,
    #11b5e4 70%,
    #1481ba 84%,
    #7f3fff 100%
  );
  -webkit-mask-image: url("/assets/voice-pulse-1be4f6f0.svg");
          mask-image: url("/assets/voice-pulse-1be4f6f0.svg");
  -webkit-mask-size: cover;
          mask-size: cover;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  opacity: 0.38;
  mix-blend-mode: screen;
  pointer-events: none;
}
.theme-dark[data-bg="pulse"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse 90% 80% at center,
    transparent 0%,
    transparent 65%,
    var(--bg) 100%
  );
  pointer-events: none;
}

/* ---------- plain — flat dark bg, no voice mask ------------------------ */
.theme-dark[data-bg="plain"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 1200px 800px at 15% 10%, rgba(17, 181, 228, 0.10), transparent 60%),
    radial-gradient(ellipse 1000px 800px at 85% 35%, rgba(255,  95,   0, 0.07), transparent 60%),
    radial-gradient(ellipse 1400px 900px at 50% 90%, rgba(12, 100, 129, 0.10), transparent 60%);
  pointer-events: none;
}

.theme-light .site-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.78);
  border-bottom-color: var(--border);
}
.theme-light body { color: var(--text); }

/* Light-mode body atmosphere — replace the dark voice-wave SVG with
   soft, brand-tinted radial gradients so the page reads "complete"
   like dark mode does, just airy. background-attachment: fixed so
   the gradients don't scroll-jitter on long pages. */
.theme-light body {
  background-image:
    radial-gradient(ellipse 1200px 720px at 12% -5%,  rgba(17, 181, 228, 0.07), transparent 70%),
    radial-gradient(ellipse 1000px 720px at 88% 25%,  rgba(255,  95,   0, 0.05), transparent 70%),
    radial-gradient(ellipse 1400px 800px at 50% 110%, rgba(12, 100, 129, 0.05), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
}
/* Card surfaces — keep a subtle tint instead of pure white so they
   read as separate panels against the airy body bg. */
.theme-light .layer-card,
.theme-light .pricing-card,
.theme-light .compare-card,
.theme-light .pillar-card,
.theme-light .card,
.theme-light .sol-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 249, 252, 0.96));
  border-color: rgba(0, 16, 33, 0.08);
  box-shadow: 0 1px 2px rgba(0, 16, 33, 0.04);
}
.theme-light .layer-card:hover,
.theme-light .pillar-card:hover,
.theme-light .card:hover,
.theme-light .sol-card:hover {
  border-color: rgba(17, 181, 228, 0.35);
  box-shadow: 0 8px 24px rgba(12, 100, 129, 0.10);
}

/* Stats / accent numbers — keep brand colour intensity, the dark text
   default washes them out. */
.theme-light .stat .num,
.theme-light .pricing-card .plan-name {
  color: var(--cc-blue);
}

/* Sticky pricing-table header bg should be soft, not pure white */
.theme-light .pricing-table thead th {
  background: rgba(247, 249, 252, 0.95);
}
.theme-light .pricing-table-wrap {
  background: #ffffff;
}

/* Lifecycle + architecture canvases — light-mode theming. The dot grid
   was rgba(255,255,255,0.06) (white-on-dark); flip to dark-on-light
   so it stays visible on the now-light surface. Add a soft brand-tinted
   glow so the canvas still feels "alive". */
.theme-light .lifecycle-canvas__inner,
.theme-light .arch-canvas__inner {
  background-color: #f7f9fc;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(17, 181, 228, 0.10), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(255,  95,   0, 0.07), transparent 55%),
    radial-gradient(circle, rgba(0, 16, 33, 0.08) 1px, transparent 1px) !important;
  background-size: auto, auto, 28px 28px;
  border: 1px solid rgba(17, 181, 228, 0.20);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(12, 100, 129, 0.08);
}

/* Pills and stage cards inside the canvas — give them a clean white
   surface with a brand-tinted border so they pop on the light bg. */
.theme-light .lifecycle-pill,
.theme-light .lifecycle-stage__card,
.theme-light .lifecycle-stage__detail,
.theme-light .arch-pill,
.theme-light .arch-group,
.theme-light .arch-hub {
  background: #ffffff;
  border-color: rgba(17, 181, 228, 0.20);
  color: var(--cc-ink);
  box-shadow: 0 2px 6px rgba(0, 16, 33, 0.04);
}
.theme-light .lifecycle-pill--out,
.theme-light .arch-pill--voice {
  background: rgba(255, 95, 0, 0.04);
  border-color: rgba(255, 95, 0, 0.30);
}

/* Connector dashes — currently use white-translucent border. Flip to
   dark-translucent for visibility on the light bg. */
.theme-light .lifecycle-stage__connector,
.theme-light .arch-lines .arch-line,
.theme-light .lifecycle-lines .line-base {
  border-color: rgba(0, 16, 33, 0.16);
}
.theme-light .lifecycle-lines .line-base,
.theme-light .arch-lines .arch-line {
  stroke: rgba(0, 16, 33, 0.18);
}

/* Column labels and band labels were near-white; bring them down to
   muted ink so they read on the light bg. */
.theme-light .lifecycle-col-label,
.theme-light .lifecycle-stage__metric {
  color: rgba(0, 16, 33, 0.55);
}
.theme-light .lifecycle-stage__metric strong { color: var(--cc-blue); }
.theme-light .lifecycle-stage.is-accent .lifecycle-stage__metric strong { color: var(--accent); }

/* Group titles and item rows in the architecture diagram — the
   default theme uses muted-on-dark; flip to muted-on-light. */
.theme-light .arch-group__title { color: var(--cc-blue); }
.theme-light .arch-group--sbc .arch-group__title,
.theme-light .arch-group--breakouts .arch-group__title { color: var(--accent); }
.theme-light .arch-group__item,
.theme-light .arch-pill,
.theme-light .arch-hub__caption {
  color: var(--cc-ink);
}
.theme-light .arch-pill__icon,
.theme-light .lifecycle-pill__icon { color: var(--cc-blue); }
.theme-light .arch-pill--voice .arch-pill__icon,
.theme-light .lifecycle-pill--out .lifecycle-pill__icon { color: var(--accent); }

.theme-light .btn-ghost {
  background: rgba(0, 16, 33, 0.04);
  color: var(--text);
}
.theme-light .btn-ghost:hover { background: rgba(0, 16, 33, 0.08); }

.theme-light .booking-card { box-shadow: var(--shadow-md); }

/* Pricing-table accent overlay was dark-only. */
.theme-light .pricing-table__cell--featured {
  background: rgba(255, 95, 0, 0.06);
}
.theme-light .pricing-table__group-row td {
  background: rgba(0, 16, 33, 0.02);
}

/* CTA bands had dark backgrounds set inline. */
.theme-light .cta-band {
  background-image: linear-gradient(135deg, rgba(17,181,228,0.08), rgba(255,95,0,0.06));
  border-color: var(--border);
}

/* Preview banner: already gold gradient — keep, but lighten the code chip. */
.theme-light .preview-banner code {
  background: rgba(0, 16, 33, 0.10);
  border-color: rgba(0, 16, 33, 0.16);
}

.theme-light .footer { border-top-color: var(--border); }

/* ============================================================================
   Theme toggle button (in the site nav)
   ========================================================================= */

/* Theme toggle pill — sits OUTSIDE the centered container so it stays
   pinned to the viewport's right edge regardless of content width.
   Other nav elements (logo, links, CTA) keep their usual layout
   inside .container. */
.theme-toggle {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
  z-index: 1;
}
.theme-toggle[hidden] { display: none; }
.theme-light .theme-toggle { background: rgba(0, 16, 33, 0.04); }

.theme-toggle__opt {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: var(--fw-semi);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.theme-toggle__opt:hover { color: var(--text); }
.theme-toggle__opt[aria-pressed="true"] {
  background: var(--brand);
  color: var(--cc-ink);
}

/* Hide on narrow screens — toggle moves into the mobile nav drawer there. */
@media (max-width: 900px) {
  .theme-toggle {
    position: static;
    transform: none;
    margin: var(--space-4) auto 0;
  }
}

/* Top-bar primary CTA. Specificity needs to beat `.nav-links a`
   (0,2,0) which sets padding: 8px 0; — using `.btn.btn-nav` matches
   that specificity (0,2,0) and our rule appears later in the
   cascade, so it wins. */
.btn.btn-nav {
  padding: 9px 20px;
  font-size: var(--fs-sm);
  line-height: 1.1;
  font-weight: var(--fw-semi);
  letter-spacing: 0.01em;
}

/* ============================================================================
   Mobile fine-tuning — layered on top of the 900px tablet breakpoint.
   600px = phones, 420px = small phones, 640px = pricing-table swap.
   Desktop / tablet styles above stay untouched.
   ========================================================================= */

@media (max-width: 600px) {
  /* --- Voice background SVGs: swap to lean -sm.svg variants ------------ */
  .theme-dark body::before,
  .theme-dark[data-bg="spectrum"] body::before {
    -webkit-mask-image: url("/assets/voice-wave-sm-1b0f32cc.svg");
            mask-image: url("/assets/voice-wave-sm-1b0f32cc.svg");
    opacity: 0.55;
  }
  .theme-dark[data-bg="equalizer"] body::before {
    -webkit-mask-image: url("/assets/voice-equalizer-sm-77aab9c8.svg");
            mask-image: url("/assets/voice-equalizer-sm-77aab9c8.svg");
    opacity: 0.22;
  }
  .theme-dark[data-bg="pulse"] body::before {
    -webkit-mask-image: url("/assets/voice-pulse-sm-bf87ddc4.svg");
            mask-image: url("/assets/voice-pulse-sm-bf87ddc4.svg");
    opacity: 0.26;
  }

  /* --- Hero typography + CTA stacking ---------------------------------- */
  .hero h1 {
    font-size: var(--fs-3xl);
    line-height: var(--lh-tight);
  }
  .hero .lead { font-size: var(--fs-base); }
  .hero-inner {
    padding-block: var(--space-6) var(--space-5);
  }
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .hero-ctas .btn { width: 100%; justify-content: center; }

  /* --- Diagram canvases (lifecycle / architecture): tighter padding --- */
  .lifecycle-canvas, .arch-canvas {
    padding: var(--space-5) var(--space-3);
  }
  .lifecycle-stage, .arch-pill {
    font-size: var(--fs-sm);
    padding: var(--space-3) var(--space-4);
  }

  /* --- Pillar / industry cards: less padding, shorter image header ---- */
  .pillar-card { padding: var(--space-5) var(--space-4); }
  .industry-card__header { height: 110px; }

  /* --- Phone / Pulse hero showcase: drop overlap + glow on small ----- */
  .phone-showcase, .pulse-showcase {
    margin: var(--space-5) auto var(--space-3);
    padding: 0 var(--space-3);
  }
  .phone-showcase::before, .pulse-showcase::before { display: none; }

  /* --- Lightbox: make the image fit inside the viewport -------------- */
  .lightbox img { max-height: 92vh; }
  .lightbox__close {
    min-width: 44px;
    min-height: 44px;
  }
}

/* The pricing-comparison mobile note is hidden by default; it gets
   shown by the <=640px block below in place of the full table. */
.pricing-table-mobile-note { display: none; }

@media (max-width: 640px) {
  /* Pricing comparison matrix is unreadably narrow on phones. The
     stacked tier cards above already carry per-plan feature lists,
     so the table is hidden and replaced by a small note. */
  .pricing-table { display: none; }
  .pricing-table-mobile-note {
    display: block;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    margin-top: var(--space-5);
  }
}

@media (max-width: 420px) {
  /* Smallest phones — pull headings down one more step. */
  .hero h1 { font-size: var(--fs-2xl); }
  .container { padding-inline: var(--space-3); }
}

/* ============================================================================
   Lifecycle / Pulse-showcase mobile flow ticks
   On desktop the diagrams have horizontal connector SVGs (lifecycle-lines).
   On mobile those are hidden and the layout stacks vertically — without
   them the "flow" cue (input → process → output) gets lost. Inject a
   thin animated track between consecutive stages: a static dashed
   line + a cyan dot traveling top-to-bottom, repeating every ~1.6s.
   ========================================================================= */

@media (max-width: 900px) {
  /* The track sits ABOVE every stage (including the first one, so
     flow visually starts at the input pills above) and above the
     first output pill, pulling the eye downward through the path. */
  .lifecycle-stage--1::before,
  .lifecycle-stage--2::before,
  .lifecycle-stage--3::before,
  .lifecycle-stage--4::before,
  .lifecycle-stage--5::before,
  .lifecycle-pills--out::before {
    content: "";
    display: block;
    width: 2px;
    height: 28px;
    margin: 0 auto;
    border-radius: 2px;
    /* Static dim track + animated bright dot stacked via layered
       backgrounds. Layer 1 is the traveling dot (200% tall, animated
       via background-position so the bright zone slides down); layer
       2 is the constant dim line beneath. */
    background:
      linear-gradient(
        to bottom,
        transparent 0%,
        transparent 35%,
        var(--brand) 50%,
        transparent 65%,
        transparent 100%
      ),
      linear-gradient(
        to bottom,
        rgba(17, 181, 228, 0.10),
        rgba(17, 181, 228, 0.10)
      );
    background-size: 100% 200%, 100% 100%;
    background-repeat: no-repeat;
    animation: lifecycle-flow-tick 1.6s linear infinite;
    pointer-events: none;
  }
  /* The output-pills wrapper turns its ::before into a flex item
     spanning the full row (flex-basis 100%) so it forces a row break
     above the chip strip. The actual tick is rendered as a 2px-wide
     gradient centered horizontally on the full-row element — never
     inside a chip. */
  .lifecycle-pills--out::before {
    flex-basis: 100%;
    width: auto;
    margin-bottom: var(--space-1, 4px);
    background:
      linear-gradient(
        to bottom,
        transparent 0%,
        transparent 35%,
        var(--accent) 50%,
        transparent 65%,
        transparent 100%
      ),
      linear-gradient(
        to bottom,
        rgba(255, 95, 0, 0.10),
        rgba(255, 95, 0, 0.10)
      );
    /* Render the gradient as a narrow 2px column centered, instead
       of the default 100% width that would create a horizontal bar. */
    background-size: 2px 200%, 2px 100%;
    background-position: center top, center top;
    background-repeat: no-repeat;
  }
}

/* Bright dot travels TOP → BOTTOM to mirror the visual flow direction
   (inputs at top, outputs at the bottom of the stack). Horizontal
   axis stays `center` so wide host elements (e.g. the
   .lifecycle-pills--out wrapper that spans the full row) still
   render the tick in the centre. */
@keyframes lifecycle-flow-tick {
  from { background-position: center 100%, center 0; }
  to   { background-position: center -100%, center 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lifecycle-stage--1::before,
  .lifecycle-stage--2::before,
  .lifecycle-stage--3::before,
  .lifecycle-stage--4::before,
  .lifecycle-stage--5::before,
  .lifecycle-pills--out::before {
    animation: none;
    /* When motion is disabled, leave the track visible without the
       traveling dot — just the dim line as a static connection. */
    background-size: 100% 0, 100% 100%;
  }
}

/* ============================================================================
   Architecture-diagram mobile flow ticks
   The diagram conceptually shows many inputs converging at the hub and
   diverging out to multiple output groups. On mobile the layout is a
   vertical stack — show TWO flow indicators: one cyan tick above the
   hub (inputs flowing in) and one accent tick before the first output
   group (flow leaving the hub).
   ========================================================================= */

/* The arch-col wrappers are transparent on desktop (children keep
   their absolute positioning) and resolve into real flex columns on
   mobile via the @media block below. */
.arch-col { display: contents; }

@media (max-width: 900px) {
  /* Two-column grid mobile layout for the platform diagram.
     Voice (orange) left, Application (cyan) right.
     Hub spans the full width as the heart between the two flows.
     Services group runs full-width below as a cross-cutting band. */
  .arch-canvas__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-4);
    /* Generous row gap so the absolute-positioned flow ticks
       between rows have room to live without overlapping the boxes
       above/below. Each tick is 28px tall plus 4px breathing room. */
    row-gap: 44px;
    align-items: start;
  }
  /* Vertical dashed divider between the voice and app columns —
     painted via a fixed-position pseudo on the canvas inner that
     spans the full content height. */
  .arch-canvas__inner { position: relative; }
  .arch-canvas__inner::after {
    content: "";
    position: absolute;
    top: var(--space-3);
    bottom: var(--space-3);
    left: 50%;
    width: 1px;
    border-left: 1px dashed var(--border-strong);
    pointer-events: none;
    transform: translateX(-50%);
  }
  /* Top row: voice pills | app pills. */
  .arch-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  /* Row 1: column labels.
     Row 2: pill strips (voice | app).
     Row 3: hub (full width — the heart).
     Row 4: SERVICES (full width — cross-cutting, both layers feed in).
     Row 5: breakouts (voice, left) | connectors (app, right).
     Row 6: voice systems (left) | (connectors continues if taller).
  */
  .arch-col--voice { grid-column: 1; grid-row: 2; }
  .arch-col--app   { grid-column: 2; grid-row: 2; }
  .arch-hub {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 0 auto;
    background: var(--bg-elev);
    z-index: 1;
  }
  .arch-group--services { grid-column: 1 / -1; grid-row: 4; }
  .arch-group--breakouts { grid-column: 1; grid-row: 5; }
  .arch-group--sbc       { grid-column: 1; grid-row: 6; }
  .arch-group--connectors { grid-column: 2; grid-row: 5 / span 2; }

  /* The pill strips inside each col — narrow them to fit. */
  .arch-pills--voice,
  .arch-pills--app {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    width: 100%;
    margin: 0;
  }
  .arch-pills--voice .arch-pill,
  .arch-pills--app   .arch-pill {
    width: 100%;
    justify-content: flex-start;
  }

  /* Compact group items so they fit in narrow columns. */
  .arch-group { padding: var(--space-3); }
  .arch-group__title { font-size: var(--fs-xs); }
  .arch-group__item { font-size: var(--fs-xs); padding: 4px 6px; }
  .arch-group__item-icon { width: 14px; height: 14px; }
  .arch-group__item-icon svg { width: 12px; height: 12px; }
}

/* ----- Architecture flow ticks on mobile -----
   The dot animation lives BETWEEN elements (outside any box), painted
   via a pseudo on the column wrapper so it doesn't appear inside the
   pill or group boxes. Two flows visible:
     • cyan — runs down the application column (top → middle → bottom)
     • orange — runs down the voice column
   Each side's dot is a separate animation loop. */
@media (max-width: 900px) {
  .arch-col {
    position: relative;
  }
  /* Track 1: between input pills and the row that follows (the hub
     spans into row 2). Painted as a ::after on the pills wrapper so
     it sits OUTSIDE the pill box. */
  .arch-pills--voice::after,
  .arch-pills--app::after {
    content: "";
    display: block;
    width: 2px;
    height: 28px;
    margin: var(--space-2) auto 0;
    border-radius: 2px;
    background:
      linear-gradient(to bottom,
        transparent 0%, transparent 35%,
        var(--brand) 50%,
        transparent 65%, transparent 100%),
      linear-gradient(to bottom, rgba(17, 181, 228, 0.10), rgba(17, 181, 228, 0.10));
    background-size: 100% 200%, 100% 100%;
    background-repeat: no-repeat;
    animation: lifecycle-flow-tick 1.6s linear infinite;
    pointer-events: none;
  }
  /* Voice column gets the orange/accent variant. */
  .arch-pills--voice::after {
    background:
      linear-gradient(to bottom,
        transparent 0%, transparent 35%,
        var(--accent) 50%,
        transparent 65%, transparent 100%),
      linear-gradient(to bottom, rgba(255, 95, 0, 0.10), rgba(255, 95, 0, 0.10));
    background-size: 100% 200%, 100% 100%;
    background-repeat: no-repeat;
  }
  /* Track 2: dual flow into SERVICES (the cross-cutting card under
     the hub). Two ticks side-by-side painted above the box —
     ::before is the orange (voice) one on the left, ::after is the
     cyan (app) one on the right. Both feed from the hub above. */
  .arch-group--services { position: relative; }
  .arch-group--services::before,
  .arch-group--services::after {
    content: "";
    position: absolute;
    top: -36px;
    width: 2px;
    height: 28px;
    background-size: 100% 200%, 100% 100%;
    background-repeat: no-repeat;
    animation: lifecycle-flow-tick 1.6s linear infinite;
    pointer-events: none;
  }
  .arch-group--services::before {
    left: 33%;
    /* Use background-image (not the shorthand) so the size + repeat
       set on the parent rule aren't reset to auto. */
    background-image:
      linear-gradient(to bottom,
        transparent 0%, transparent 35%,
        var(--accent) 50%,
        transparent 65%, transparent 100%),
      linear-gradient(to bottom, rgba(255, 95, 0, 0.10), rgba(255, 95, 0, 0.10));
  }
  .arch-group--services::after {
    left: 67%;
    background-image:
      linear-gradient(to bottom,
        transparent 0%, transparent 35%,
        var(--brand) 50%,
        transparent 65%, transparent 100%),
      linear-gradient(to bottom, rgba(17, 181, 228, 0.10), rgba(17, 181, 228, 0.10));
  }

  /* Track 3: between SERVICES and the output groups (breakouts left,
     connectors right). Position absolutely above each group so the
     tick lives entirely in the row-gap area — never inside a box. */
  .arch-group--breakouts,
  .arch-group--connectors { position: relative; }
  .arch-group--breakouts::before,
  .arch-group--connectors::before {
    content: "";
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 28px;
    background-size: 100% 200%, 100% 100%;
    background-repeat: no-repeat;
    animation: lifecycle-flow-tick 1.6s linear infinite;
    pointer-events: none;
  }
  .arch-group--breakouts::before {
    /* voice (left col) → orange */
    background:
      linear-gradient(to bottom,
        transparent 0%, transparent 35%,
        var(--accent) 50%,
        transparent 65%, transparent 100%),
      linear-gradient(to bottom, rgba(255, 95, 0, 0.10), rgba(255, 95, 0, 0.10));
    background-size: 100% 200%, 100% 100%;
    background-repeat: no-repeat;
  }
  .arch-group--connectors::before {
    /* app (right col) → cyan */
    background:
      linear-gradient(to bottom,
        transparent 0%, transparent 35%,
        var(--brand) 50%,
        transparent 65%, transparent 100%),
      linear-gradient(to bottom, rgba(17, 181, 228, 0.10), rgba(17, 181, 228, 0.10));
    background-size: 100% 200%, 100% 100%;
    background-repeat: no-repeat;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arch-pills--voice::after,
  .arch-pills--app::after,
  .arch-group--breakouts::before,
  .arch-group--connectors::before,
  .arch-group--services::before,
  .arch-group--services::after {
    animation: none;
    background-size: 100% 0, 100% 100%;
  }
}

/* ============================================================================
   Compact pill strips on mobile — wrap input/output pills as a
   horizontal flex row of small chips so the lifecycle and arch
   diagrams take less vertical space. Desktop layout uses the
   `display: contents` wrapper so the absolute-positioned pills
   are unaffected.
   ========================================================================= */

.lifecycle-pills,
.arch-pills { display: contents; }

@media (max-width: 900px) {
  /* Lifecycle keeps the horizontal chip-strip layout (single row,
     wraps as needed). Arch-pills are handled by the .arch-col grid
     above (vertical pills in narrow voice/app columns). */
  .lifecycle-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    margin: 0;
  }
  .lifecycle-pills .lifecycle-pill {
    position: static;
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
    padding: 4px 10px;
    font-size: var(--fs-xs);
    gap: 6px;
    box-shadow: none;
  }
  .lifecycle-pills .lifecycle-pill__icon { width: 16px; height: 16px; }
  .lifecycle-pills .lifecycle-pill__icon svg { width: 12px; height: 12px; }

  /* Arch pill compact sizing — applies inside the .arch-col grid. */
  .arch-pills--voice .arch-pill,
  .arch-pills--app   .arch-pill {
    font-size: var(--fs-xs);
    padding: 6px 10px;
    gap: 6px;
  }
  .arch-pills--voice .arch-pill__icon,
  .arch-pills--app   .arch-pill__icon { width: 16px; height: 16px; }
  .arch-pills--voice .arch-pill__icon svg,
  .arch-pills--app   .arch-pill__icon svg { width: 12px; height: 12px; }

  /* Hide the side "Users" / "Platforms" labels on mobile — the chip
     strips and column layout are self-evident at this size. */
  .lifecycle-col-label { display: none; }
  /* Re-show the architecture-diagram band labels as small captions
     above each mobile column so the voice/app split is unambiguous. */
  .arch-band-label {
    display: block;
    position: static;
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 var(--space-1, 4px);
    padding: 0;
    background: transparent;
    border: 0;
    grid-row: 0;            /* placed via grid-row-start: voice/app rows */
  }
  .arch-band-label--voice { grid-column: 1; grid-row: 1; color: var(--accent); }
  .arch-band-label--app   { grid-column: 2; grid-row: 1; color: var(--brand); }
}

/* ============================================================================
   Output platform pills — light up briefly when the fan-out line-pulse
   animation reaches them. Same loop duration as the line animation so
   the pill flash is perfectly synced with the bright spot arriving.
   ========================================================================= */

/* Home lifecycle: line-pulse group-4 fires 44–56% of a 7s loop. */
.lifecycle-pill--out-1,
.lifecycle-pill--out-2,
.lifecycle-pill--out-3 {
  animation: pill-out-glow 7s linear infinite;
}

@keyframes pill-out-glow {
  0%, 50%   { border-color: rgba(255, 95, 0, 0.25); box-shadow: var(--shadow-sm); }
  56%, 62%  { border-color: var(--accent);          box-shadow: 0 0 22px rgba(255, 95, 0, 0.55), var(--shadow-md); }
  70%, 100% { border-color: rgba(255, 95, 0, 0.25); box-shadow: var(--shadow-sm); }
}

/* Pulse showcase: line-pulse group-p6 fires 67–78% of an 11s loop. */
.lifecycle-canvas--pulse .lifecycle-pill--out-1,
.lifecycle-canvas--pulse .lifecycle-pill--out-2,
.lifecycle-canvas--pulse .lifecycle-pill--out-3 {
  animation: pulse-pill-out-glow 11s linear infinite;
}

@keyframes pulse-pill-out-glow {
  0%, 73%   { border-color: rgba(255, 95, 0, 0.25); box-shadow: var(--shadow-sm); }
  78%, 85%  { border-color: var(--accent);          box-shadow: 0 0 22px rgba(255, 95, 0, 0.55), var(--shadow-md); }
  92%, 100% { border-color: rgba(255, 95, 0, 0.25); box-shadow: var(--shadow-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .lifecycle-pill--out-1,
  .lifecycle-pill--out-2,
  .lifecycle-pill--out-3 {
    animation: none;
  }
}