/* SYN IT Agent Manager Platform section.
   Sizing intentionally LARGER + WIDER than the rest of the site so
   the Platform reads as the flagship product line, not a bullet
   under Solutions. Uses generous vertical rhythm, a full-bleed
   accent band behind the section, and enterprise-grade card
   proportions closer to WSO2's product-page treatment. */

/* Full-bleed treatment : the platform section paints a subtle
   accent band edge-to-edge so it reads as a distinct chapter of
   the page rather than an in-line section. */
.platform-section {
  position: relative;
  padding-top: clamp(4rem, 8vw, 8rem);
  padding-bottom: clamp(4rem, 8vw, 8rem);
  overflow: hidden;
}
.platform-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse at 20% 0%,
    rgba(255, 140, 26, 0.10) 0%,
    rgba(255, 140, 26, 0.02) 40%,
    transparent 70%
  ),
  radial-gradient(
    ellipse at 80% 100%,
    rgba(59, 130, 246, 0.08) 0%,
    rgba(59, 130, 246, 0.02) 45%,
    transparent 75%
  );
  pointer-events: none;
}

/* Enterprise headline treatment : eyebrow above title, oversized
   title, wider subhead. Keeps SYN IT's own type stack (whatever
   the base site loads) but scales it up in this section. */
.platform-eyebrow {
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.28em;
  font-weight: 700;
  color: #ff8c1a;
  margin: 0 0 1rem;
  text-transform: uppercase;
}
.platform-section .section-title {
  font-size: clamp(2.2rem, 4vw, 3.75rem) !important;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}
.platform-section .section-subtext {
  font-size: clamp(1.05rem, 1.4vw, 1.35rem) !important;
  line-height: 1.55;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(255, 255, 255, 0.75);
}

/* Capability pills : evenly-spaced, bigger touch target, subtle
   depth. Reads as a value-proposition strip, not a tag cloud. */
.platform-capabilities {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 2.5rem auto 4.5rem;
  max-width: 1100px;
}
.capability-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 140, 26, 0.35);
  background: rgba(255, 140, 26, 0.06);
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  transition: background 200ms ease, border-color 200ms ease;
}
.capability-pill:hover {
  background: rgba(255, 140, 26, 0.12);
  border-color: rgba(255, 140, 26, 0.6);
}
@media (prefers-color-scheme: light) {
  .platform-section .section-subtext { color: rgba(0, 0, 0, 0.72); }
  .capability-pill { color: rgba(0, 0, 0, 0.9); }
}

/* Three product cards : wider, taller, more headroom. Reads
   enterprise, not startup. Each has a full accent stripe on top,
   a bold badge, an oversized title, and a features list that
   feels like a datasheet excerpt. */
.products-flex {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 0 auto 4rem;
  max-width: 1400px;
}
@media (max-width: 1100px) {
  .products-flex { grid-template-columns: 1fr; max-width: 640px; }
}

.product-card {
  position: relative;
  padding: 2.75rem 2.5rem 2.5rem;
  min-height: 520px;
  border-radius: 20px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.94);
  transition: transform 250ms ease, border-color 250ms ease,
              background 250ms ease, box-shadow 250ms ease;
  overflow: hidden;
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
}
.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--product-accent, #ff8c1a);
}
.product-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 220px;
  height: 220px;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--product-accent, #ff8c1a) 22%, transparent) 0%,
    transparent 65%
  );
  transform: translate(35%, -35%);
  pointer-events: none;
  z-index: 0;
}
.product-card > * { position: relative; z-index: 1; }
.product-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--product-accent, #ff8c1a) 45%, transparent);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5),
              0 0 0 1px color-mix(in srgb, var(--product-accent, #ff8c1a) 20%, transparent);
}

/* Per-product accent colour (SYN IT orange for the core product,
   trust-blue for Fleet, growth-green for Solution). */
.product-badge--core     { --product-accent: #ff8c1a; }
.product-badge--fleet    { --product-accent: #3b82f6; }
.product-badge--solution { --product-accent: #22c55e; }
.product-card:has(.product-badge--core)     { --product-accent: #ff8c1a; }
.product-card:has(.product-badge--fleet)    { --product-accent: #3b82f6; }
.product-card:has(.product-badge--solution) { --product-accent: #22c55e; }

.product-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: white;
  background: var(--product-accent, #ff8c1a);
  margin-bottom: 1.5rem;
  align-self: flex-start;
}

.product-title {
  margin: 0 0 0.4rem;
  font-size: 2rem;
  font-weight: 700;
  color: inherit;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.product-subtitle {
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}
.product-desc {
  margin: 0 0 1.75rem;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.product-features {
  list-style: none;
  padding: 1.25rem 0 0;
  margin: auto 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.product-features li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
}
.product-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--product-accent, #ff8c1a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--product-accent, #ff8c1a) 20%, transparent);
}

@media (prefers-color-scheme: light) {
  .product-card {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.7) 100%
    );
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.92);
  }
  .product-card:hover {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.85) 100%
    );
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.2),
                0 0 0 1px color-mix(in srgb, var(--product-accent, #ff8c1a) 30%, transparent);
  }
  .product-subtitle { color: rgba(0, 0, 0, 0.55); }
  .product-desc     { color: rgba(0, 0, 0, 0.75); }
  .product-features {
    border-top-color: rgba(0, 0, 0, 0.1);
  }
  .product-features li { color: rgba(0, 0, 0, 0.75); }
}

/* Deployment + Standards strips : wider, more structured, one
   labeled row per axis, chip look mirrors enterprise product-page
   feature matrices. */
.platform-strips {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 auto 3.5rem;
  max-width: 1400px;
  padding: 1.75rem 2rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.platform-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.strip-label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  min-width: 140px;
}
.strip-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
@media (prefers-color-scheme: light) {
  .platform-strips {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
  }
  .strip-label { color: rgba(0, 0, 0, 0.5); }
  .strip-chip {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.78);
  }
}

/* Section-scoped CTA : two buttons under the strips. Bigger, more
   prominent than the hero CTA so this reads as the "call to action
   for the platform" specifically. */
.platform-cta {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.platform-cta .get-in-touch-btn {
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 600;
}

.hero-cta-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.get-in-touch-btn--ghost {
  background: transparent !important;
  border: 1px solid currentColor;
}

/* Match the enterprise-scale rhythm on the site's own container so
   the platform section can breathe without breaking the rest of
   the page. Applied ONLY inside .platform-section. */
.platform-section .main-container {
  max-width: 1400px;
  padding-left: clamp(1rem, 3vw, 3rem);
  padding-right: clamp(1rem, 3vw, 3rem);
}

/* Sibling flagships block : Data-Insights (parallel) +
   Industrial Automation (next). Sits below the Agent Manager
   Platform cards + CTA so the sub-lines are visible without
   competing with the flagship expanded view. Two-column peer
   layout ; each card compact but structured (status chip, title,
   subtitle, product list). */
.siblings {
  margin: 5rem auto 0;
  max-width: 1400px;
}
.siblings__eyebrow {
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 1.5rem;
  text-transform: uppercase;
}
.siblings__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1100px) {
  .siblings__grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
}

.sibling-card {
  position: relative;
  padding: 2rem 1.75rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
  overflow: hidden;
}
.sibling-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--sibling-accent, #64748b);
}
.sibling-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--sibling-accent, #64748b) 40%, transparent);
  background: rgba(255, 255, 255, 0.05);
}

/* Distinct hue per sibling : parallel-flagship uses cyan for
   "data" ; roadmap uses violet for "coming". Neither competes
   with the three primary product accents above. */
.sibling-card--parallel { --sibling-accent: #06b6d4; }
.sibling-card--roadmap  { --sibling-accent: #a855f7; }

.sibling-card__head {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 1.25rem;
}
.sibling-card__status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: white;
  background: var(--sibling-accent, #64748b);
  margin-bottom: 0.75rem;
}
.sibling-card__title {
  margin: 0 0 0.35rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: inherit;
  letter-spacing: -0.01em;
}
.sibling-card__sub {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}
.sibling-card__products {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.sibling-card__products li {
  padding-left: 1.25rem;
  position: relative;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
.sibling-card__products li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sibling-accent, #64748b);
}
.sibling-card__products strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
  color: inherit;
  margin-bottom: 0.15rem;
}
.sibling-card__products span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.87rem;
}

@media (prefers-color-scheme: light) {
  .siblings__eyebrow { color: rgba(0, 0, 0, 0.5); }
  .sibling-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.9);
  }
  .sibling-card:hover {
    background: rgba(0, 0, 0, 0.04);
  }
  .sibling-card__head {
    border-bottom-color: rgba(0, 0, 0, 0.08);
  }
  .sibling-card__sub { color: rgba(0, 0, 0, 0.7); }
  .sibling-card__products li { color: rgba(0, 0, 0, 0.8); }
  .sibling-card__products span { color: rgba(0, 0, 0, 0.6); }
}

/* ==========================================================================
   Product-page template.
   Every product page (agent-manager, panda, kpi-studio, ...) uses the
   same shell : hero, capability strip, value-prop grid, feature deep-
   dive cards, architecture note, deployment options, standards chips,
   shipped-vs-roadmap block, composes-with block, CTA. Everything sits
   on the light ground already established by platform-section.
   ========================================================================== */
.product-page { padding-top: clamp(48px, 6vw, 96px); padding-bottom: clamp(48px, 6vw, 96px); }

.product-hero { margin-bottom: clamp(48px, 6vw, 88px); }
.product-hero__crumb {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.65);
  text-decoration: none;
  margin-bottom: 16px;
}
.product-hero__crumb--flagship { border-color: rgba(235, 98, 27, 0.35); color: #eb621b; }
.product-hero__crumb--parallel { border-color: rgba(6, 182, 212, 0.35); color: #06b6d4; }
.product-hero__crumb--roadmap { border-color: rgba(168, 85, 247, 0.35); color: #a855f7; }

.product-hero__title {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.05;
  margin: 0 0 16px;
  text-wrap: balance;
}
.product-hero__tagline {
  font-size: clamp(1.05rem, 1.6vw, 1.5rem);
  line-height: 1.4;
  max-width: 780px;
  color: rgba(0, 0, 0, 0.75);
  margin: 0 0 28px;
}
.product-hero__cta { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.product-hero__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.7);
}
.product-hero__status--shipping { background: rgba(34, 197, 94, 0.12); color: #15803d; }
.product-hero__status--beta { background: rgba(6, 182, 212, 0.12); color: #0e7490; }
.product-hero__status--roadmap { background: rgba(168, 85, 247, 0.12); color: #7e22ce; }
.product-hero__status--mockup { background: rgba(234, 179, 8, 0.15); color: #a16207; }

.value-props {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 32px 0 64px;
}
.value-prop {
  padding: 24px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
}
.value-prop__title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 10px;
  color: #1d1d1b;
}
.value-prop__body {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.7);
  margin: 0;
}

.section-lead {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(0, 0, 0, 0.55);
  margin: 0 0 8px;
}
.section-h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 12px;
  text-wrap: balance;
}
.section-intro {
  font-size: 1.05rem;
  line-height: 1.5;
  max-width: 720px;
  color: rgba(0, 0, 0, 0.7);
  margin: 0 0 32px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 64px;
}
.feature-card {
  padding: 24px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  background: #ffffff;
}
.feature-card__eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #eb621b;
  margin: 0 0 6px;
  font-weight: 700;
}
.feature-card__title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: #1d1d1b;
}
.feature-card__body {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.75);
  margin: 0 0 14px;
}
.feature-card__list {
  margin: 0;
  padding-left: 20px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.75);
}
.feature-card__list li { margin-bottom: 4px; }
.feature-card__code {
  display: block;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.85);
  color: #f5f5f5;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.82rem;
  overflow-x: auto;
  white-space: pre;
}

.arch-block {
  padding: 32px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.04));
  border: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 64px;
}
.arch-block__title { font-size: 1.4rem; margin: 0 0 12px; font-weight: 700; }
.arch-block__body { font-size: 1rem; line-height: 1.6; color: rgba(0, 0, 0, 0.75); margin: 0 0 20px; max-width: 820px; }
.arch-block__stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.arch-block__stack span {
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(235, 98, 27, 0.08);
  color: #eb621b;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(235, 98, 27, 0.2);
}

.roadmap-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 64px;
}
.roadmap-col {
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.roadmap-col--shipping { background: rgba(34, 197, 94, 0.04); border-color: rgba(34, 197, 94, 0.25); }
.roadmap-col--beta { background: rgba(6, 182, 212, 0.04); border-color: rgba(6, 182, 212, 0.25); }
.roadmap-col--roadmap { background: rgba(168, 85, 247, 0.04); border-color: rgba(168, 85, 247, 0.25); }
.roadmap-col__title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin: 0 0 12px;
}
.roadmap-col--shipping .roadmap-col__title { color: #15803d; }
.roadmap-col--beta .roadmap-col__title { color: #0e7490; }
.roadmap-col--roadmap .roadmap-col__title { color: #7e22ce; }
.roadmap-col__list { margin: 0; padding-left: 20px; font-size: 0.92rem; line-height: 1.55; color: rgba(0, 0, 0, 0.75); }
.roadmap-col__list li { margin-bottom: 6px; }

.deploy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 64px;
}
.deploy-card {
  padding: 24px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #ffffff;
}
.deploy-card__title { font-size: 1.1rem; font-weight: 700; margin: 0 0 10px; }
.deploy-card__body { font-size: 0.92rem; line-height: 1.5; color: rgba(0, 0, 0, 0.7); margin: 0 0 12px; }
.deploy-card__list { margin: 0; padding-left: 18px; font-size: 0.88rem; line-height: 1.5; color: rgba(0, 0, 0, 0.7); }
.deploy-card__list li { margin-bottom: 3px; }

.compose-block {
  padding: 32px;
  border-radius: 16px;
  background: #1d1d1b;
  color: #f5f5f5;
  margin-bottom: 64px;
}
.compose-block__title { font-size: 1.4rem; margin: 0 0 12px; color: #ffffff; }
.compose-block__body { font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.75); margin: 0 0 20px; max-width: 780px; }
.compose-block__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.compose-block__chips a {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.compose-block__chips a:hover {
  background: rgba(235, 98, 27, 0.2);
  border-color: rgba(235, 98, 27, 0.4);
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  padding: 28px 32px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 48px;
}
.stat { text-align: left; }
.stat__value { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; color: #eb621b; line-height: 1; margin: 0 0 6px; }
.stat__label { font-size: 0.85rem; color: rgba(0, 0, 0, 0.6); margin: 0; text-transform: uppercase; letter-spacing: 0.06em; }

.honesty-note {
  padding: 16px 20px;
  margin-bottom: 32px;
  border-left: 3px solid #a16207;
  background: rgba(234, 179, 8, 0.08);
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.75);
  font-size: 0.92rem;
  line-height: 1.5;
}
.honesty-note strong { color: #a16207; }

/* Dark scheme mirrors of product-page tokens. */
@media (prefers-color-scheme: dark) {
  .product-hero__title { color: #ffffff; }
  .product-hero__tagline { color: rgba(255, 255, 255, 0.8); }
  .product-hero__status { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.75); }
  .value-prop { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); }
  .value-prop__title { color: #ffffff; }
  .value-prop__body { color: rgba(255, 255, 255, 0.75); }
  .section-lead { color: rgba(255, 255, 255, 0.55); }
  .section-h2 { color: #ffffff; }
  .section-intro { color: rgba(255, 255, 255, 0.75); }
  .feature-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); }
  .feature-card__title { color: #ffffff; }
  .feature-card__body, .feature-card__list { color: rgba(255, 255, 255, 0.75); }
  .arch-block { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.06)); border-color: rgba(255, 255, 255, 0.08); }
  .arch-block__title { color: #ffffff; }
  .arch-block__body { color: rgba(255, 255, 255, 0.75); }
  .roadmap-col { border-color: rgba(255, 255, 255, 0.1); }
  .roadmap-col__list { color: rgba(255, 255, 255, 0.75); }
  .deploy-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); }
  .deploy-card__title { color: #ffffff; }
  .deploy-card__body, .deploy-card__list { color: rgba(255, 255, 255, 0.75); }
  .stat-strip { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); }
  .stat__label { color: rgba(255, 255, 255, 0.6); }
  .honesty-note { background: rgba(234, 179, 8, 0.1); color: rgba(255, 255, 255, 0.85); }
}

/* ==========================================================================
   Nav Products mega-menu.
   Sits inside .nav-links between plain text-nav links. Overrides the
   legacy inline+float layout with flex so every nav item (plain <a>
   and dropdown alike) shares one baseline and equal spacing.

   Desktop range only : below 600px nav.css turns this same element into
   the full-screen burger panel, and an unscoped flex row here would
   override that and hold a broken band open across the top of the page.
   ========================================================================== */
@media (min-width: 601px) {
  .nav > .nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    float: right;
  }
}

.nav-dropdown {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 13px 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  font-size: var(--font-size-nav);
  line-height: 1;
}

.nav-dropdown__caret {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.7em;
  transition: transform 0.15s ease;
}

.nav-dropdown:hover .nav-dropdown__caret,
.nav-dropdown:focus-within .nav-dropdown__caret {
  transform: rotate(180deg);
}

.nav-dropdown__menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 3000;
  min-width: 0;
  max-width: none;
  padding: 24px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: left;
}

.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
  display: grid;
}

.nav-dropdown__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 8px;
}

.nav-dropdown__group:hover {
  background: rgba(235, 98, 27, 0.04);
}

.nav-dropdown__group-title-link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 4px 6px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 6px;
}

.nav-dropdown__group-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1d1d1b;
}

.nav-dropdown__tag {
  display: inline-block;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 4px;
  color: #ffffff;
}

.nav-dropdown__tag--flagship { background: #eb621b; }
.nav-dropdown__tag--parallel { background: #06b6d4; }
.nav-dropdown__tag--roadmap { background: #a855f7; }


.nav-dropdown__menu a[role="menuitem"] {
  display: flex;
  flex-direction: column;
  padding: 8px 6px;
  border-radius: 6px;
  text-decoration: none;
  color: #1d1d1b;
  line-height: 1.35;
}

.nav-dropdown__menu a[role="menuitem"] strong {
  font-size: 14px;
  font-weight: 600;
}

.nav-dropdown__menu a[role="menuitem"] small {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 2px;
}

.nav-dropdown__menu a[role="menuitem"]:hover {
  background: rgba(235, 98, 27, 0.08);
  color: #eb621b;
}

/* Dark scheme : swap the surface + text tokens, keep accents. */
@media (prefers-color-scheme: dark) {
  .nav-dropdown__menu {
    background: #1d1d1b;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.25);
  }
  .nav-dropdown__group-title { color: #ffffff; }
  .nav-dropdown__menu a[role="menuitem"] { color: #f5f5f5; }
  .nav-dropdown__menu a[role="menuitem"] small { color: rgba(255, 255, 255, 0.6); }
  .nav-dropdown__group-title-link { border-bottom-color: rgba(255, 255, 255, 0.1); }
}

/* Mobile : nav-links becomes a fullscreen panel via burger. Show the
   mega-menu content inline so touch users still see the products. */
@media (max-width: 600px) {
  .nav-dropdown { display: block; width: 100%; }
  .nav-dropdown__trigger { display: block; width: 100%; }
  .nav-dropdown__caret { display: none; }
  .nav-dropdown__menu {
    display: grid !important;
    position: static;
    min-width: 0;
    max-width: none;
    grid-template-columns: 1fr;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 8px 0 16px;
  }
  .nav-dropdown__group { padding: 0 8px; }

  /* The collapse behaviour and the panel's block layout live in nav.css
     (its 601px block), NOT here. imprint.html and privacy.html do not
     load this sheet and were equally broken, so the fix has to be in the
     shared nav stylesheet or it only reaches some pages. This block keeps
     only what is genuinely platform-specific: the mega-menu shown inline
     on touch. */

  /* Burger bars are near-white in nav.css, which is invisible against
     the light page. Paint them with the page's own text colour. */
  .nav > .nav-btn > label > span { border-top-color: currentColor; }
}

/* ==========================================================================
   Products page + home additions.
   Same tokens as everything above : white ground, black display type,
   one orange accent, generous space. No new font, no second accent.
   ========================================================================== */

/* Ghost button fix.
   The base rule paints a black pill with white text, and the ghost
   variant only cleared the background : the label stayed white, so
   every "Explore" / secondary button rendered white-on-white and its
   pill overlapped whatever followed it. Restore a readable colour. */
.get-in-touch-btn.get-in-touch-btn--ghost { color: var(--color-dark); }
@media (prefers-color-scheme: dark) {
  .get-in-touch-btn.get-in-touch-btn--ghost { color: var(--color-white); }
}

/* One accent in the tinted band : drop the second (blue) wash. */
.platform-section::before {
  background: radial-gradient(
    ellipse at 18% 0%,
    rgba(235, 98, 27, 0.10) 0%,
    rgba(235, 98, 27, 0.025) 42%,
    transparent 72%
  );
}

/* Centred section head : eyebrow, title and lead share one axis. */
.section-head {
  text-align: center;
  max-width: 940px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.section-head .section-title { margin-bottom: 1rem; }
.section-head .section-subtext {
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.55;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Body of the products page : plain white ground under the band. */
.products-body {
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

/* A product family : left-aligned head with a rule under it, then the
   cards. Head and grid have real spacing between them, so nothing can
   sit on top of anything else. */
.product-family {
  max-width: 1400px;
  margin: 0 auto clamp(3rem, 6vw, 5.5rem);
}
.product-family:last-of-type { margin-bottom: clamp(2rem, 4vw, 3rem); }
.product-family__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2.5rem;
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.product-family__text { max-width: 660px; }
.product-family__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.product-family__sub {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.68);
}
.product-family__head .get-in-touch-btn {
  margin-top: 0;
  flex: 0 0 auto;
  white-space: nowrap;
}
.product-family .products-flex { margin-bottom: 0; }
@media (prefers-color-scheme: dark) {
  .product-family__head { border-bottom-color: rgba(255, 255, 255, 0.14); }
  .product-family__sub { color: rgba(255, 255, 255, 0.72); }
}

/* Card without a datasheet list : sized by its own content. */
.product-card--brief {
  min-height: 0;
  padding: 2.25rem 2rem 2rem;
}

/* Capability chips : what the product speaks and where it runs.
   Never a status word. */
.product-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: auto 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.product-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(0, 0, 0, 0.7);
  background: rgba(0, 0, 0, 0.035);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
@media (prefers-color-scheme: dark) {
  .product-chips { border-top-color: rgba(255, 255, 255, 0.1); }
  .product-chip {
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
  }
}


/* Delivery method : photograph beside the four phases. */
.method-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .method-split { grid-template-columns: 1fr; }
}
.method-photo {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px -35px rgba(0, 0, 0, 0.45);
}
.method-photo img { display: block; width: 100%; height: auto; }
.method-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 520px) {
  .method-steps { grid-template-columns: 1fr; }
}
.method-step {
  padding: 1.25rem 1.25rem 1.35rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.02);
}
.method-step__phase {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-action);
  margin-bottom: 0.45rem;
}
.method-step__title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
}
.method-step__body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.7);
}
@media (prefers-color-scheme: dark) {
  .method-step { border-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); }
  .method-step__body { color: rgba(255, 255, 255, 0.75); }
}

/* Office photograph band above the footer. */
.office-band { padding: clamp(2rem, 5vw, 4rem) 0 clamp(1rem, 2vw, 2rem); }
.office-band__media {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px -35px rgba(0, 0, 0, 0.45);
  margin-bottom: 1.5rem;
}
.office-band__media img { display: block; width: 100%; height: auto; }
.office-band__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.office-band__title { margin: 0 0 0.35rem; font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 700; line-height: 1.2; }
.office-band__body { margin: 0; max-width: 620px; font-size: 1rem; line-height: 1.55; color: rgba(0, 0, 0, 0.7); }
.office-band__row .get-in-touch-btn { margin-top: 0; flex: 0 0 auto; }
@media (prefers-color-scheme: dark) {
  .office-band__body { color: rgba(255, 255, 255, 0.75); }
}

/* Three product lines side by side instead of two. */
.siblings__grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.sibling-card__products a { text-decoration: none; color: inherit; }
.sibling-card__products a:hover strong { color: var(--color-action); }

/* Nav mega-menu : one column per product family, however many there are. */
.nav-dropdown__menu {
  /* auto-fit rather than a fixed column count: a family can be added or the
     menu can narrow, and the columns wrap instead of squeezing a chip until
     it spills out of its column. */
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  grid-auto-flow: row;
  /* Five columns now, and the longest chips ("Realtime automation",
     "Label management") need about 180px of column to sit on one line. */
}
@media (max-width: 600px) {
  .nav-dropdown__menu {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    min-width: 0;
    max-width: none;
  }
}

/* ==========================================================================
   Team grid.
   One set : same portrait crop and aspect for everyone, greyscale at
   rest and full colour on hover (the same move the client logo wall
   already makes). A person without a photograph gets a monogram tile
   in the house orange, never someone else's face.
   ========================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  max-width: 1400px;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}
.person { perspective: 900px; }
.person__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.55);
  transition: transform 450ms cubic-bezier(0.2, 0.7, 0.3, 1),
              box-shadow 450ms ease;
  will-change: transform;
}
.person__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 26%;
  filter: grayscale(1);
  transition: filter 500ms ease, transform 600ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.person:hover .person__photo,
.person:focus-within .person__photo {
  transform: translateY(-8px) rotateX(4deg);
  box-shadow: 0 34px 60px -28px rgba(0, 0, 0, 0.6);
}
.person:hover .person__photo img,
.person:focus-within .person__photo img {
  filter: grayscale(0);
  transform: scale(1.045);
}
.person__photo--monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(155deg, rgba(235, 98, 27, 0.16), rgba(235, 98, 27, 0.04));
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.person__photo--monogram span {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-action);
}
.person__name {
  margin: 1rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}
.person__rule {
  display: block;
  width: 26px;
  height: 2px;
  margin: 0.55rem 0;
  background: var(--color-action);
  transform: scaleX(0.42);
  transform-origin: left center;
  transition: transform 350ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.person:hover .person__rule,
.person:focus-within .person__rule { transform: scaleX(1); }
.person__role {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.6);
  min-height: 1.3em;
}
@media (prefers-color-scheme: dark) {
  .person__photo { background: rgba(255, 255, 255, 0.05); }
  .person__photo--monogram { border-color: rgba(255, 255, 255, 0.1); }
  .person__role { color: rgba(255, 255, 255, 0.65); }
}

/* Motion is decoration : switch every bit of it off on request, and
   make sure the scroll-reveal elements stay visible when it is off. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animate__animated,
  .animate__animated.animate__fadeIn,
  .animate__animated.animate__fadeInUp,
  .animate__animated.animate__fadeInDown {
    animation: none !important;
    opacity: 1 !important;
  }
  .wow { visibility: visible !important; }
  .person__photo,
  .person__photo img,
  .person__rule,
  .product-card,
  .sibling-card { transition: none !important; }
  .person:hover .person__photo,
  .person:focus-within .person__photo { transform: none; }
  .person:hover .person__photo img,
  .person:focus-within .person__photo img { transform: none; }
  .product-card:hover { transform: none; }
  .sibling-card:hover { transform: none; }
}

/* Final pass : one accent everywhere, balanced headlines, and the
   method photograph matching the height of the phases beside it. */
.sibling-card { --sibling-accent: var(--color-action); }
.section-head .section-title { text-wrap: balance; }
.method-split { align-items: stretch; }
.method-photo img { height: 100%; }
@media (max-width: 900px) {
  .method-photo img { height: auto; }
}

/* A page that opens straight into the tinted band sits under the fixed
   header, so it clears it explicitly. */
.products-intro { padding-top: clamp(9rem, 13vw, 11rem); }
.products-intro .section-head:last-child { margin-bottom: 0; }

/* Phone : two portraits to a row, so the team reads as a group rather
   than a column of very large pictures. */
@media (max-width: 600px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem 0.85rem; }
  .person__name { font-size: 0.95rem; margin-top: 0.75rem; }
  .person__role { font-size: 0.82rem; }
}

/* Breakpoint corrections found by looking at 1024. */
.siblings__grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (max-width: 1100px) {
  .method-split { grid-template-columns: 1fr; }
  .method-photo img { height: auto; }
}

/* Tablet : cards keep the same left edge as the heading above them,
   and use the width that is actually there. */
@media (max-width: 1100px) {
  .products-flex,
  .siblings__grid { max-width: none; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .products-flex { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------------------
   Header clearance, every width.

   .sticky is position:fixed, so it takes no space in flow and each page
   reserves its own. The clamp above tops out at 96px, but the header is
   127px at 1440 and 117px at 390, so the breadcrumb above the H1 was
   painted UNDERNEATH the header on every product page at every width.
   Only its rounded bottom border showed, which read as a stray empty box
   floating above the headline.

   Measured, not guessed: header 127px at 1440, 117px at 390. A flat
   152px clears the taller of the two with room to breathe, and the H1
   keeps the spacing it had because the crumb was always in that gap.
   ------------------------------------------------------------------- */
.product-page { padding-top: 152px; }

/* The open panel is dark : everything inside it reads light. */
@media (max-width: 600px) {
  .nav > .nav-links > a,
  .nav > .nav-links .text-nav,
  .nav > .nav-links a { color: var(--color-white); }
  .nav > .nav-links > a,
  .nav-dropdown__trigger { padding: 12px 0; }
  .nav-dropdown__menu { text-align: left; padding: 4px 0 20px; }
  .nav-dropdown__group { padding: 12px 0 0; }
  .nav-dropdown__group:hover { background: transparent; }
  .nav-dropdown__group-title { color: rgba(255, 255, 255, 0.55); font-size: 12px; }
  .nav-dropdown__group-title-link {
    padding: 0 0 8px;
    border-bottom-color: rgba(255, 255, 255, 0.18);
    margin-bottom: 8px;
  }
  .nav-dropdown__menu a[role="menuitem"] {
    padding: 9px 0;
    color: var(--color-white);
    align-items: flex-start;
  }
  .nav-dropdown__group-title-link { text-align: left; }
  .nav-dropdown__menu a[role="menuitem"] small { color: rgba(255, 255, 255, 0.6); }
  .nav-dropdown__menu a[role="menuitem"]:hover { background: transparent; color: var(--color-action); }
}

/* Desktop mega-menu : it hangs off the Products link and grows leftwards, so
   its width is what fits to the left of that link, not what the columns would
   like. An explicit width is what makes auto-fit wrap: left to min/max the
   grid tracks simply push the container wider and it never wraps at all.
   Five families fit on one row from 1400 up; below that they wrap. */
@media (min-width: 601px) {
  /* The menu's right edge sits on the Products link, which sits at roughly
     three quarters of the viewport, so the room to its left is a fraction of
     the window rather than the whole of it. Measured: at 768 the link ends at
     550, so a 700px menu started at -150. */
  .nav-dropdown__menu { width: min(700px, calc(70vw - 16px)); }
}
@media (min-width: 1200px) {
  .nav-dropdown__menu { width: 880px; }
}
@media (min-width: 1400px) {
  .nav-dropdown__menu { width: 1010px; }
}

/* -------------------------------------------------------------------
   Per-product accent on the products grid.

   The card already draws a 5px top bar, a corner wash and a hover glow
   from --product-accent, but the only rules that SET it were keyed on
   the old internal badge classes (--core / --fleet / --solution). Those
   badges were removed as internal vocabulary, so every card silently
   fell back to the same orange and the grid read flat.

   Accent now comes from data-accent, and the badge says what the product
   is FOR rather than what tier we filed it under.
   ------------------------------------------------------------------- */
.product-card[data-accent="automation"] { --product-accent: #eb621b; }
.product-card[data-accent="value"]      { --product-accent: #22a06b; }
.product-card[data-accent="insight"]    { --product-accent: #2f6fd0; }
.product-card[data-accent="trust"]      { --product-accent: #6d5ce7; }
.product-card[data-accent="machine"]    { --product-accent: #0e7490; }
.product-card[data-accent="shopfloor"]  { --product-accent: #b7791f; }
.product-card[data-accent="advisory"]   { --product-accent: #be185d; }
.product-card[data-accent="assist"]     { --product-accent: #7c3aed; }

/* The badge carries the accent as a tint, so it reads as part of the
   card rather than a sticker on top of it. */
.products-grid .product-badge,
.product-card .product-badge {
  align-self: flex-start;
  margin-bottom: 0.75rem;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--product-accent, #eb621b);
  background: color-mix(in srgb, var(--product-accent, #eb621b) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--product-accent, #eb621b) 28%, transparent);
}

/* -------------------------------------------------------------------
   Colour back in the products dropdown.

   The menu used to carry coloured tags, but they said Flagship /
   Parallel / Roadmap, which is internal programme vocabulary and was
   stripped. That took the colour with it and left a flat grey list.
   The tags return with the same accent and the same words as the
   product cards, so the menu and the grid agree.
   ------------------------------------------------------------------- */
.nav-dropdown__tag[data-accent="automation"] { --tag-accent: #eb621b; }
.nav-dropdown__tag[data-accent="value"]      { --tag-accent: #22a06b; }
.nav-dropdown__tag[data-accent="insight"]    { --tag-accent: #2f6fd0; }
.nav-dropdown__tag[data-accent="trust"]      { --tag-accent: #6d5ce7; }
.nav-dropdown__tag[data-accent="machine"]    { --tag-accent: #0e7490; }
.nav-dropdown__tag[data-accent="shopfloor"]  { --tag-accent: #b7791f; }
.nav-dropdown__tag[data-accent="advisory"]   { --tag-accent: #be185d; }
.nav-dropdown__tag[data-accent="assist"]     { --tag-accent: #7c3aed; }

.nav-dropdown__menu .nav-dropdown__tag {
  /* The menu item is a flex column, so an inline-block child still
     stretches to the column width. Hug the text instead. */
  display: inline-block;
  align-self: flex-start;
  width: fit-content;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
  /* One colour per column, not one per product: a chip is there to say what
     kind of thing this is, and the column already answers that. Falls back to
     the product's own accent where a column is not tagged with a family. */
  color: var(--fam-accent, var(--tag-accent, #eb621b));
  background: color-mix(in srgb, var(--fam-accent, var(--tag-accent, #eb621b)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--fam-accent, var(--tag-accent, #eb621b)) 30%, transparent);
}
/* Early-stage sticker.

   A category chip sitting in the row would read as one more label. This is a
   stamp across the corner of the entry instead: red, rotated, overlapping the
   product name, so nobody scanning the menu mistakes a product that is still
   being designed for one that ships today. Declared after the chip rules so
   it wins without !important. */
.nav-dropdown__menu a[role="menuitem"]:has(.nav-dropdown__tag--early) {
  position: relative;
  /* No reserved band: the sticker sits on the entry itself now. */
}
.nav-dropdown__menu .nav-dropdown__tag--early {
  position: absolute;
  /* Sitting across the join between the product name and its chip, and
     hanging into the gutter between columns rather than into the 163px entry:
     at right: -2px a 90px stamp ate half the product name. */
  top: 15px;
  right: -22px;
  margin: 0;
  padding: 2px 7px;
  transform: rotate(-7deg);
  transform-origin: right center;
  border-radius: 3px;
  background: #d92d20;
  border: 1px solid #b42318;
  color: #ffffff;
  /* Small: every pixel of stamp is a pixel of product name covered. */
  font-size: 0.48rem;
  letter-spacing: 0.06em;
  box-shadow: 0 3px 8px -3px rgba(217, 45, 32, 0.6);
  pointer-events: none;
}
@media (max-width: 600px) {
  .nav-dropdown__menu .nav-dropdown__tag--early {
    color: #ffffff;
    background: #d92d20;
    border-color: #b42318;
  }
}

/* A coloured rule under each group title, so the four families read as
   four families at a glance rather than four identical columns. */
/* Keyed off the family rather than the column's position, so reordering or
   inserting a family cannot silently give a column the wrong rule. */
.nav-dropdown__group[data-fam] .nav-dropdown__group-title-link {
  border-bottom-color: var(--fam-accent);
}

/* On the mobile panel the menu sits on a dark ground, so the tint has
   to lift instead of darken. */
@media (max-width: 600px) {
  .nav-dropdown__menu .nav-dropdown__tag {
    color: color-mix(in srgb, var(--fam-accent, var(--tag-accent, #eb621b)) 55%, #ffffff);
    background: color-mix(in srgb, var(--fam-accent, var(--tag-accent, #eb621b)) 22%, transparent);
    border-color: color-mix(in srgb, var(--fam-accent, var(--tag-accent, #eb621b)) 45%, transparent);
  }
}

/* -------------------------------------------------------------------
   Family badge : AI / DATA / OT / CONSULTING.
   One short word per product family, on the dropdown group titles and
   on the products-page family headings, so the four lines of business
   are legible at a glance without reading every product name.
   ------------------------------------------------------------------- */
[data-fam="ai"]   { --fam-accent: #eb621b; }
[data-fam="data"] { --fam-accent: #2f6fd0; }
[data-fam="ot"]   { --fam-accent: #0e7490; }
[data-fam="adv"]  { --fam-accent: #be185d; }
[data-fam="plan"] { --fam-accent: #7c3aed; }

.fam-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.6;
  vertical-align: middle;
  white-space: nowrap;
  color: var(--fam-accent, #eb621b);
  background: color-mix(in srgb, var(--fam-accent, #eb621b) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--fam-accent, #eb621b) 32%, transparent);
}
/* Larger heading on the products page carries a slightly bigger badge. */
.product-family__title .fam-badge {
  font-size: 0.62rem;
  padding: 3px 10px;
  margin-left: 12px;
  vertical-align: 0.28em;
}
@media (max-width: 600px) {
  .nav-dropdown__menu .fam-badge {
    color: color-mix(in srgb, var(--fam-accent, #eb621b) 55%, #ffffff);
    background: color-mix(in srgb, var(--fam-accent, #eb621b) 22%, transparent);
    border-color: color-mix(in srgb, var(--fam-accent, #eb621b) 45%, transparent);
  }
}

/* Closing team card. Deliberately quieter than a portrait: it stands for
   the people not pictured, so it should read as a full stop on the grid
   rather than compete with a real face. */
.person--more .person__photo--more {
  background: color-mix(in srgb, var(--mat-sys-outline, #8b909c) 8%, transparent);
  border: 1px dashed color-mix(in srgb, #8b909c 45%, transparent);
}
.person--more .person__photo--more span {
  color: #8b909c;
  font-weight: 700;
}

/* The family badge sat on the same line as the group title with a fixed
   left margin, so the longest one (CONSULTING, beside a title that
   already wraps to two lines) pushed past its column. Let the pair wrap
   as a unit instead: the badge drops under the title when the column is
   too narrow, which is exactly what happens in the fourth group. */
.nav-dropdown__group-title-link,
.nav-dropdown__group-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
}
.nav-dropdown__menu .fam-badge { margin-left: 0; }

/* -------------------------------------------------------------------
   Diagram band.

   .photo-band is built for photographs: a fixed 460px height with
   object-fit: cover and overflow hidden, which crops the frame to a
   pleasing strip. That is exactly wrong for a drawing, where cropping
   removes content: the Octopus schema lost its lower half, including
   the report-back rail that carries the point.

   Let the artwork keep its own aspect ratio and simply scale.
   ------------------------------------------------------------------- */
/* A diagram is not a photograph: it must never be cropped to a band height
   or sat on a tinted ground. Every product page carries its own .photo-band
   block in a page-local <style>, which comes after this file, so these have
   to out-specify it rather than merely follow it. */
.photo-band.diagram-band,
.diagram-band {
  overflow: visible;
  height: auto;
  background: transparent;
  box-shadow: none;
}
.photo-band.diagram-band img,
.diagram-band img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  border-radius: 20px;
}

/* -------------------------------------------------------------------
   Notebook.

   A product screenshot shown at full page width reads as documentation.
   Sat in a notebook it reads as a product, and it can be small: the point
   is to show that the thing exists and looks finished, not to be read.

   Built in CSS rather than baked into the image, so it stays crisp at any
   density and the screenshots behind it can be swapped without re-rendering
   a mockup. Reusable: any product page can drop a .device in with two or
   more slides and the script picks it up.
   ------------------------------------------------------------------- */
.device {
  --device-w: 500px;
  max-width: var(--device-w);
  margin: 4px auto 60px;
}
.device--wide { --device-w: 660px; }

.device__screen {
  position: relative;
  background: #16171a;
  border-radius: 12px 12px 3px 3px;
  padding: 11px 11px 13px;
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(0, 0, 0, 0.06),
              0 2px 0 rgba(255, 255, 255, 0.05) inset;
}
/* camera dot on the top bezel */
.device__screen::before {
  content: '';
  position: absolute;
  top: 4px; left: 50%;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: #383b42;
}

/* The screen itself. Fixed 16:10 so the frame never reflows as slides
   change, and overflow hidden so the track is clipped to the glass. */
.device__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 3px;
  background: #0b0c0e;
}
.device__track {
  display: flex;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.device__track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

/* the base, slightly wider than the lid, with a thumb notch */
.device__base {
  position: relative;
  width: 116%;
  margin-left: -8%;
  height: 11px;
  border-radius: 0 0 11px 11px;
  background: linear-gradient(180deg, #dcdfe4 0%, #b8bec8 58%, #99a0ab 100%);
  box-shadow: 0 12px 22px -12px rgba(0, 0, 0, 0.42);
}
.device__base::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 74px; height: 4px;
  margin-left: -37px;
  border-radius: 0 0 5px 5px;
  background: #8d94a0;
}

/* Arrows either side of a row of progress bars. The bar for the current
   screen fills as its time runs down, so the slide never changes without
   warning, and the row doubles as a place indicator. */
.device__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}
.device__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  padding: 0;
  border: 1px solid #e0e2e7;
  border-radius: 50%;
  background: #fff;
  color: #6b6f7a;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.device__arrow:hover {
  color: var(--product-accent, #ff5a1f);
  border-color: var(--product-accent, #ff5a1f);
}
.device__arrow:focus-visible {
  outline: 2px solid var(--product-accent, #ff5a1f);
  outline-offset: 2px;
}

.device__bars {
  display: flex;
  align-items: center;
  gap: 6px;
}
.device__bar {
  position: relative;
  overflow: hidden;
  width: 26px; height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: #dcdee3;
  cursor: pointer;
  transition: width 0.35s ease;
}
.device__bar[aria-selected='true'] { width: 40px; }
.device__bar:focus-visible {
  outline: 2px solid var(--product-accent, #ff5a1f);
  outline-offset: 3px;
}
.device__bar-fill {
  display: block;
  width: 100%; height: 100%;
  border-radius: inherit;
  background: var(--product-accent, #ff5a1f);
  transform: scaleX(0);
  transform-origin: left center;
}
/* A screen already shown stays filled, so the row reads as progress
   through the set rather than a single lit dot. */
.device__bar.is-done .device__bar-fill { transform: scaleX(1); }
.device__bar-fill.is-filling {
  animation: device-fill 6s linear forwards;   /* matches DWELL in device.js */
}
.device.is-paused .device__bar-fill { animation-play-state: paused; }

@keyframes device-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.device__caption {
  margin: 12px auto 0;
  max-width: 460px;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #6b6f7a;
  min-height: 2.5em;
}

@media (max-width: 600px) {
  .device { --device-w: 100%; margin-bottom: 40px; }
  .device__screen { padding: 7px 7px 9px; border-radius: 9px 9px 3px 3px; }
  .device__base { height: 9px; }
  .device__base::after { width: 56px; margin-left: -28px; }
}

/* Someone who has asked for less motion gets the slides without the
   travel: the script also stops advancing them on its own. */
@media (prefers-reduced-motion: reduce) {
  .device__track { transition: none; }
  .device__bar { transition: none; }
  /* Nothing advances on its own here, so a draining bar would be lying. */
  .device__bar-fill { animation: none; }
  .device__bar[aria-selected='true'] .device__bar-fill { transform: scaleX(1); }
}

/* A diagram whose product boxes are links. The SVG has to be inline in the
   page for that to work at all: links inside an <img> are inert. */
.diagram-band--linked svg { display: block; width: 100%; height: auto; }
.diagram-band--linked a { cursor: pointer; }
.diagram-band--linked a rect,
.diagram-band--linked a text { transition: opacity 0.15s ease; }
.diagram-band--linked a:hover rect,
.diagram-band--linked a:hover text { opacity: 0.82; }
.diagram-band--linked a:focus-visible rect {
  outline: 2px solid #1c1d21;
  outline-offset: 2px;
}

/* Products that do not exist yet. They are listed because they are coming,
   but there is nothing to open, so they are anchors without an href: not
   clickable, not focusable, and visibly quieter than the rest. */
.nav-dropdown__menu a[role="menuitem"][aria-disabled="true"] {
  cursor: default;
  opacity: 0.75;
}
.nav-dropdown__menu a[role="menuitem"][aria-disabled="true"]:hover {
  background: transparent;
}

/* Products that are not built yet, on the products page. They are cards
   without a link, so they must not offer the affordances of one: no hover
   lift, no pointer, and a plain marker saying why. */
.product-card--soon {
  cursor: default;
  opacity: 0.86;
}
.product-card--soon:hover {
  transform: none;
  box-shadow: none;
}
.product-card--soon { position: relative; }
.product-soon {
  /* Stamped on the corner rather than placed in the flow: the card is a flex
     column, so an inline-block child stretches the full width and the rotation
     turns it into a diagonal band across the title. */
  position: absolute;
  top: 16px;
  right: 14px;
  padding: 4px 10px;
  border-radius: 3px;
  transform: rotate(-4deg);
  background: #d92d20;
  border: 1px solid #b42318;
  color: #ffffff;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  box-shadow: 0 3px 8px -3px rgba(217, 45, 32, 0.55);
}
[data-accent="plan"] { --product-accent: #7c3aed; }

/* A product line item with nothing to open yet: same shape as its siblings,
   quieter, and no pointer, because it is not a link. */
.sibling-card__product--soon strong { color: inherit; }
.sibling-card__product--soon {
  opacity: 0.72;
  cursor: default;
}