/* Xioma v2 — operations-platform redesign
   Inspired by Toast / ServiceTitan / Attio / Breakcold
   Clean monochrome + single accent */

:root {
  --bg: #F8F8F5;           /* off-white */
  --bg-soft: #F1F1ED;
  --bg-2: #E8E8E3;
  --ink: #0A0A0B;
  --ink-2: #1F1F22;
  --ink-title: #6E6E76;    /* silver — for h1/h2 section titles (the non-accent parts) */
  --mute: #5C5C62;
  --mute-2: #8A8A90;
  --line: #DDDAD3;
  --line-2: #E6E3DC;
  --accent: #2E86C1;       /* Xioma cloud blue — drawn from the logo */
  --accent-soft: #E5F1F9;
  --accent-dark: #1F5C8A;
  --green: #16A34A;
  --studio: #0A0A0B;
  --studio-soft: #16161A;
  --studio-line: rgba(255,255,255,0.08);
  --studio-mute: #98989E;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --maxw: 1280px;
  --pad-x: clamp(20px, 4vw, 48px);

  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  background: var(--bg); color: var(--ink);
  font-feature-settings: "ss01" on, "ss02" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--ink); color: white; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* ------- Type ------- */
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.03em; }
/* Section titles get a metallic silver gradient with a synchronized shine.
   The bg-position is driven from JavaScript (headline-shine.js) — every frame
   of the sweep, each h1/h2 (and inner .accent span) has its position computed
   from its viewport rect so the bright band lands at the SAME viewport-X
   across every line. The result is one wave of light passing horizontally
   across the whole headline at once, regardless of line length or colour.
   With no JS (or with prefers-reduced-motion), the default off-screen
   bg-position keeps the visible state at the static base colour. */
h1, h2 {
  color: var(--ink-title);
  background: linear-gradient(
    100deg,
    #54545B 0%,
    #54545B 42%,
    #B6B6BD 47%,
    #FBFBFD 50%,
    #B6B6BD 53%,
    #54545B 58%,
    #54545B 100%
  );
  background-size: 200vw 100%;
  background-position: -3000px 50%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
h1 .accent, h2 .accent {
  color: var(--accent);
  background: linear-gradient(
    100deg,
    #2E86C1 0%,
    #2E86C1 42%,
    #7CB9E0 47%,
    #D0E7F3 50%,
    #7CB9E0 53%,
    #2E86C1 58%,
    #2E86C1 100%
  );
  background-size: 200vw 100%;
  background-position: -3000px 50%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* prefers-reduced-motion: JS bails out of the rAF loop so the bg-position
   stays at the off-screen default — text shows pure base colour, no shine. */
h1 { font-size: clamp(48px, 6.2vw, 84px); line-height: 0.98; letter-spacing: -0.04em; font-weight: 500; }
h2 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -0.03em; }
h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.18; letter-spacing: -0.02em; }
p  { margin: 0; }
.lead { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; color: var(--mute); }
.body { font-size: 15px; line-height: 1.55; color: var(--mute); }
.body-sm { font-size: 13px; line-height: 1.5; color: var(--mute-2); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow::before {
  content:""; width: 6px; height: 6px;
  background: var(--accent); border-radius: 99px;
}
.mono { font-family: var(--font-mono); }

/* ------- Buttons ------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border-radius: 99px;
  font-size: 14px; font-weight: 500;
  border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
  white-space: nowrap;
}
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(3px); }
.btn-primary { background: var(--ink); color: white; }
.btn-primary:hover { background: var(--ink-2); }
.btn-accent { background: var(--accent); color: white; }
.btn-accent:hover { background: var(--accent-dark); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--bg-soft); }
.btn-link { padding: 0; background: transparent; color: var(--ink); border: none; font-weight: 500; font-size: 14px; }
.btn-link:hover { color: var(--accent); }

/* ------- NAV ------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.nav-logo {
  display: flex; align-items: center; gap: 12px;
  font-weight: 600; letter-spacing: -0.02em; font-size: 17px;
}
.brand-stack { display: flex; flex-direction: column; gap: 0; line-height: 1; }
.brand-product { font-weight: 600; letter-spacing: -0.02em; font-size: 17px; color: var(--ink); }
.brand-company { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--mute); margin-top: 3px; }
@media (max-width: 1080px) {
  .brand-stack { display: none; }
}
.logo-mark {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--ink);
  position: relative; overflow: hidden;
}
.logo-mark::after {
  content:""; position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px; border-radius: 99px;
  background: var(--accent);
}
.nav-logo img { height: 64px; width: auto; display: block; }
.nav-links { display: flex; gap: 2px; align-items: center; font-size: 14px; color: var(--ink-2); }
.nav-cta { display: flex; gap: 10px; align-items: center; }
@media (max-width: 880px) { .nav-links { display: none; } }

/* Nav dropdown menus ------------------------------------------------- */
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink-2);
  font: inherit; font-size: 14px; line-height: 1;
  border-radius: 10px;
  transition: color .15s ease, background-color .15s ease;
}
.nav-link:hover,
.nav-link[aria-expanded="true"] { color: var(--ink); background: var(--bg-soft); }
.nav-caret { opacity: 0.55; transition: transform .2s ease; }
.nav-link[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.nav-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 232px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.04);
  display: flex; flex-direction: column; gap: 1px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  z-index: 200;
}
.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu,
.nav-item.is-open .nav-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .15s ease, transform .15s ease, visibility 0s;
}
.nav-menu a {
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
.nav-menu a:hover { background: var(--bg-soft); color: var(--accent); }

/* Lighter "Get in touch" CTA --------------------------------------- */
.nav-cta-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--ink);
  font-size: 13px;
  text-decoration: none;
  background: transparent;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.nav-cta-link:hover { border-color: var(--accent); color: var(--accent); }
.nav-cta-link .arrow { transition: transform .18s ease; }
.nav-cta-link:hover .arrow { transform: translateX(2px); }

/* ============================================================
   ABOUT / CAREER / TEAM — sub-pages shared styles
   ============================================================ */
.page-hero {
  padding-top: clamp(48px, 6vw, 96px);
  padding-bottom: clamp(28px, 3.5vw, 48px);
}
.page-hero .eyebrow { display: inline-block; }
.page-hero h1 {
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 500;
  max-width: 18ch;
  margin: 14px 0 18px;
}
.page-hero h1 .accent { color: var(--accent); }
.page-hero p.lede {
  color: var(--mute);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.55;
  max-width: 60ch;
  margin: 0;
}

/* About — story 3-up */
.story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 980px) { .story-grid { grid-template-columns: 1fr; } }
.story-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.story-card h3 {
  font-size: clamp(18px, 1.5vw, 22px);
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0;
  max-width: 22ch;
}
.story-card p {
  color: var(--mute);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
}

/* About — facts strip */
.facts-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 28px;
  padding: 28px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
@media (max-width: 880px) { .facts-strip { grid-template-columns: repeat(2, 1fr); } }
.fact .n {
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.fact .l {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 8px;
}

/* Career — role cards */
.roles-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 16px;
}
.role-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.role-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.role-title { font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -0.02em; font-weight: 500; margin: 0; }
.role-meta {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--mute);
}
.role-meta .dot { width: 4px; height: 4px; border-radius: 99px; background: var(--mute-2); }
.role-summary { color: var(--mute); font-size: 15px; line-height: 1.55; margin: 0; max-width: 70ch; }
.role-body { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 760px) { .role-body { grid-template-columns: 1fr; } }
.role-body h4 {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--mute); margin: 0 0 10px;
}
.role-body ul { margin: 0; padding-left: 18px; color: var(--ink); font-size: 14.5px; line-height: 1.6; }
.role-body li { margin-bottom: 6px; }
.role-card .apply-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px solid var(--line);
}

/* Career — values 3-up (reuse story-grid look but in a stricter row) */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
@media (max-width: 980px) { .values-grid { grid-template-columns: 1fr; } }

/* Team grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 980px) { .team-grid { grid-template-columns: 1fr; } }
.member-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.member-avatar {
  width: 56px; height: 56px; border-radius: 99px;
  background: linear-gradient(135deg, var(--ink), var(--accent));
  color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 14px; font-weight: 500;
  letter-spacing: 0.04em;
}
.member-name { font-size: 19px; letter-spacing: -0.02em; font-weight: 500; margin: 0; }
.member-role {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute);
  margin-top: -8px;
}
.member-years {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--accent);
}
.member-bio { color: var(--mute); font-size: 14.5px; line-height: 1.55; margin: 0; }

.placeholder-note {
  margin-top: 28px;
  padding: 18px 22px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--mute);
}

/* About — vision callout (pull-quote style) */
.vision-callout {
  margin: 0;
  padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 56px);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  position: relative;
}
.vision-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.vision-callout blockquote {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 36ch;
}

/* ============================================================
   PARTNERS — program page
   ============================================================ */
.partners-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 880px) { .partners-benefits { grid-template-columns: 1fr; } }
.partners-benefit {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.partners-benefit h3 {
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0;
}
.partners-benefit > p {
  color: var(--mute);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}
.partners-benefit ul {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.65;
}
.partners-benefit li { margin-bottom: 4px; }

/* Scenarios (who can become a partner) */
.partners-who {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 980px) { .partners-who { grid-template-columns: 1fr; } }
.scenario-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  transition: border-color .2s ease;
}
.scenario-card:hover { border-color: rgba(46, 134, 193, 0.35); }
.scenario-tag {
  width: 36px; height: 36px; border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--bg);
  font-family: var(--font-mono); font-size: 14px; font-weight: 500;
  letter-spacing: 0.04em;
}
.scenario-card h4 {
  font-size: 18px;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0;
}
.scenario-card p {
  color: var(--mute);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
}

/* Partner tiers (Distributor / Reseller) */
.partners-tiers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 980px) { .partners-tiers { grid-template-columns: 1fr; } }
.tier-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
}
.tier-card.recommended {
  border-color: rgba(46, 134, 193, 0.4);
  box-shadow: 0 8px 32px rgba(46, 134, 193, 0.06);
}
.tier-badge {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 99px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--mute);
}
.tier-card.recommended .tier-badge {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.tier-name {
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0;
}
.tier-summary {
  color: var(--mute);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}
.tier-features {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex; flex-direction: column; gap: 10px;
}
.tier-features li {
  display: flex; gap: 10px; align-items: flex-start;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.5;
}
.tier-features li::before {
  content: "";
  flex: 0 0 14px;
  width: 14px; height: 14px;
  margin-top: 4px;
  border-radius: 99px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M2 7 L6 11 L12 3' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M2 7 L6 11 L12 3' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat;
}
.tier-commitment {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--mute);
}

/* Partners — CTA strip */
.partners-cta {
  margin-top: 16px;
  padding: clamp(40px, 5vw, 72px);
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-lg);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.partners-cta .eyebrow { color: var(--accent); }
.partners-cta h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.03em;
  font-weight: 500;
  line-height: 1.1;
  margin: 0;
  max-width: 22ch;
}
.partners-cta h2 .accent { color: var(--accent); }
.partners-cta p {
  color: rgba(255,255,255,0.7);
  max-width: 56ch;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
}
.partners-cta-actions {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin-top: 8px;
}
.partners-cta-actions .nav-cta-link {
  border-color: rgba(255,255,255,0.25);
  color: var(--bg);
  padding: 12px 22px;
  font-size: 14px;
}
.partners-cta-actions .nav-cta-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.partners-cta-actions .nav-cta-link.primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.partners-cta-actions .nav-cta-link.primary:hover {
  background: transparent;
  color: var(--accent);
}

/* =====================================================
   HERO with audience tabs (Toast/ServiceTitan style)
   ===================================================== */
.hero {
  padding-top: clamp(24px, 4vw, 48px);
  padding-bottom: clamp(40px, 5vw, 64px);
  position: relative;
  overflow: hidden;
}

.audience-tabs {
  display: inline-flex;
  padding: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 99px;
  gap: 2px;
  margin-bottom: 36px;
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.audience-tabs::-webkit-scrollbar { display: none; }
.audience-tab {
  padding: 9px 18px;
  border-radius: 99px;
  font-size: 13px; font-weight: 500;
  color: var(--mute);
  transition: color .2s, background .2s;
  white-space: nowrap;
  font-family: var(--font-sans);
}
.audience-tab.active {
  background: var(--ink);
  color: white;
}
.audience-tab:not(.active):hover {
  color: var(--ink);
}

.hero-h1 {
  max-width: 18ch;
  margin-bottom: 24px;
  min-height: 1.96em;
}
.hero-h1 .accent {
  color: var(--accent);
}
.hero-sub {
  max-width: 56ch;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--mute);
  margin-bottom: 32px;
  min-height: 3em;
}
.hero-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 28px; }

.hero-metrics {
  display: flex; gap: clamp(20px, 4vw, 48px);
  align-items: flex-start;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.hero-metric { display: flex; flex-direction: column; gap: 4px; }
.hero-metric .n {
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.hero-metric .l {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
/* Slightly favor the product preview on very wide screens so it has breathing room
   next to the long H1, and pin its top to the H1 baseline via padding-top. */
@media (min-width: 1281px) {
  .hero-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .hero-grid > :last-child { padding-top: 16px; }
}
/* Below the comfortable two-up width, fall back to a single column rather than
   cramming an already-busy hero into a half-width column. */
@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-metrics { padding-bottom: 24px; }
  /* When stacked, the product preview should breathe at full width. */
  .product-frame { max-width: 720px; margin-left: auto; margin-right: auto; }
}

/* =====================================================
   PRODUCT PREVIEW (Breakcold-style — real UI)
   ===================================================== */
.product-frame {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(10,10,11,0.04), 0 30px 60px -20px rgba(10,10,11,0.18), 0 8px 20px -10px rgba(10,10,11,0.10);
  position: relative;
  min-height: 540px;
  display: flex;
  flex-direction: column;
}
.product-chrome {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.product-chrome .dots { display: flex; gap: 6px; margin-right: 6px; }
.product-chrome .dots span { width: 10px; height: 10px; border-radius: 99px; background: var(--line); }
.product-chrome .dots span:nth-child(1) { background: #F6685A; }
.product-chrome .dots span:nth-child(2) { background: #FBC02D; }
.product-chrome .dots span:nth-child(3) { background: #00C853; }
.product-chrome .addr {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mute);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 99px;
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 6px;
}
.product-chrome .addr::before {
  content: ""; width: 8px; height: 8px;
  border-radius: 2px; background: var(--ink);
}

.product-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  flex: 1;
  min-height: 0;
}
@media (max-width: 960px) {
  .product-body { grid-template-columns: 180px 1fr; }
}
@media (max-width: 720px) {
  .product-body { grid-template-columns: 1fr; }
  .product-sidebar {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 8px 10px;
    gap: 6px;
    scrollbar-width: thin;
  }
  .product-sidebar .product-sidebar-section { display: none; }
  .product-sidebar button {
    flex: 0 0 auto;
    padding: 7px 10px;
  }
  .product-main { padding: 14px 16px; }
}
.product-sidebar {
  background: var(--bg-soft);
  border-right: 1px solid var(--line);
  padding: 14px 10px;
  display: flex; flex-direction: column;
  gap: 2px;
}
.product-sidebar-section {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute-2);
  padding: 14px 10px 6px;
}
.product-sidebar button {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 500;
  text-align: left;
  transition: background .15s;
  width: 100%;
  white-space: nowrap;
  min-width: 0;
}
.product-sidebar button > span:nth-child(2) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-sidebar button:hover { background: rgba(10,10,11,0.04); }
.product-sidebar button.active {
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(10,10,11,0.05);
}
.product-sidebar button .badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 99px;
  background: var(--ink);
  color: white;
}
.product-sidebar button .badge.live {
  background: var(--accent-soft);
  color: var(--accent);
}
.sidebar-ico {
  width: 14px; height: 14px;
  display: grid; place-items: center;
  color: var(--mute);
  flex-shrink: 0;
}

.product-main {
  padding: 18px 22px;
  overflow: hidden;
  background: var(--bg);
}
.product-main-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.product-main-head h4 {
  font-size: 16px; font-weight: 500; letter-spacing: -0.01em;
}
.product-main-head .pill {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--mute);
  display: inline-flex; align-items: center; gap: 6px;
}
.product-main-head .pill .live-dot {
  width: 6px; height: 6px; border-radius: 99px;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(22,163,74,0.18);
  animation: livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(22,163,74,0.18); }
  50% { box-shadow: 0 0 0 6px rgba(22,163,74,0.06); }
}

/* Service Board view */
.kanban {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  height: 100%;
  min-height: 380px;
}
.kanban-col {
  background: var(--bg-soft);
  border-radius: 10px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.kanban-col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
}
.kanban-col-head .count {
  background: var(--bg);
  border-radius: 99px;
  padding: 1px 7px;
  font-size: 10px;
  color: var(--ink);
  border: 1px solid var(--line);
}
.tk {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 11px;
  display: flex; flex-direction: column; gap: 6px;
}
.tk-top {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--mute);
}
.tk-title { font-size: 13px; color: var(--ink); font-weight: 500; letter-spacing: -0.005em; line-height: 1.3; }
.tk-meta { display: flex; gap: 10px; align-items: center; font-size: 11px; color: var(--mute); }
.tk-meta .avatar {
  width: 16px; height: 16px;
  border-radius: 99px;
  background: linear-gradient(135deg, #F1B0A0, #C56B43);
  border: 1.5px solid var(--bg);
}
.tk-meta .avatar.b2 { background: linear-gradient(135deg, #8FB3DD, #2A5BFF); }
.tk-meta .avatar.b3 { background: linear-gradient(135deg, #A8D5BA, #16A34A); }
.tk-meta .avatar.b4 { background: linear-gradient(135deg, #E0CDF0, #6A4CB8); }
.tk .ai-suggest {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 7px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--accent); background: var(--accent-soft);
  border-radius: 99px;
  align-self: flex-start;
}
.tk .ai-suggest::before {
  content: "★"; font-size: 9px;
}

/* Parts inventory table view */
.table-view { font-size: 13px; }
.table-view table { width: 100%; border-collapse: collapse; }
.table-view th, .table-view td { padding: 9px 8px; text-align: left; }
.table-view th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}
.table-view td { border-bottom: 1px solid var(--line-2); font-size: 13px; color: var(--ink-2); }
.table-view tr:hover td { background: var(--bg-soft); }
.sku-code { font-family: var(--font-mono); font-size: 12px; color: var(--mute); }
.stock-bar {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
}
.stock-bar .bar {
  width: 60px; height: 4px;
  background: var(--line); border-radius: 99px;
  position: relative; overflow: hidden;
}
.stock-bar .bar::after {
  content:""; position: absolute; inset: 0; right: auto;
  width: var(--w, 50%);
  background: var(--ink); border-radius: 99px;
}
.stock-bar.low .bar::after { background: var(--accent); }
.stock-bar.crit .bar::after { background: var(--accent); }
.stock-bar.crit { color: var(--accent); }
.chip {
  display: inline-block;
  padding: 2px 8px; border-radius: 99px;
  font-family: var(--font-mono); font-size: 10px;
  background: var(--bg-soft); color: var(--mute);
  border: 1px solid var(--line);
}
.chip.crit { background: var(--accent-soft); color: var(--accent); border-color: rgba(46, 134, 193,0.2); }
.chip.good { background: rgba(22,163,74,0.08); color: var(--green); border-color: rgba(22,163,74,0.2); }

/* Fleet map view */
.fleet-map {
  position: relative;
  height: 100%;
  min-height: 380px;
  background:
    radial-gradient(circle at 30% 40%, rgba(46, 134, 193,0.06), transparent 60%),
    var(--bg-soft);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.fleet-map-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(10,10,11,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,10,11,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
}
.van-pin {
  position: absolute;
  width: 28px; height: 28px;
  border-radius: 99px;
  background: var(--ink);
  color: white;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 10px;
  border: 2px solid var(--bg);
  box-shadow: 0 4px 10px rgba(10,10,11,0.18);
}
.van-pin.active { background: var(--accent); }
.van-pin .ring {
  position: absolute; inset: -10px;
  border-radius: 99px;
  border: 1.5px solid var(--accent);
  opacity: 0.4;
  animation: livePulse 2s ease-in-out infinite;
}
.fleet-list {
  position: absolute; left: 14px; top: 14px;
  width: 220px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  font-size: 12px;
}
.fleet-list .row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--line-2);
}
.fleet-list .row:last-child { border-bottom: none; }
.fleet-list .row .id {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--mute);
  background: var(--bg-soft);
  padding: 2px 6px; border-radius: 4px;
}
.fleet-list .row .status {
  margin-left: auto;
  width: 6px; height: 6px; border-radius: 99px;
  background: var(--green);
}
.fleet-list .row .status.busy { background: var(--accent); }
.fleet-list .row .status.idle { background: var(--mute-2); }

/* Pipeline view (showroom) */
.pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  height: 100%;
  min-height: 380px;
}
.pipeline-col {
  background: var(--bg-soft);
  border-radius: 10px;
  padding: 9px;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.pipeline-col-head {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 0 2px 4px;
  white-space: nowrap;
  gap: 6px;
}
.lead-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  display: flex; flex-direction: column; gap: 5px;
}
.lead-card .nm { font-size: 12px; color: var(--ink); font-weight: 500; }
.lead-card .car { font-family: var(--font-mono); font-size: 10px; color: var(--mute); }
.lead-card .row { display: flex; justify-content: space-between; align-items: center; font-size: 10px; }
.lead-card .score { color: var(--green); font-family: var(--font-mono); }
.lead-card .score.med { color: var(--accent); }
.lead-card .score.low { color: var(--mute-2); }

/* =====================================================
   LOGO WALL (Attio-style)
   ===================================================== */
/* ============================================================
   SECTION CONNECTORS — animated infographic links between sections
   ============================================================ */
.section-link {
  position: relative;
  height: 64px;
  margin: 0 auto;
  width: 100%;
  max-width: var(--maxw);
  padding: 0 var(--pad-x);
  pointer-events: none;
}
.section-link-inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* central animated line */
.section-link-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--line) 20%,
    var(--line) 80%,
    transparent 100%);
  transform: translateX(-50%);
}
.section-link-line::before,
.section-link-line::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--ink);
  transform: translateX(-50%);
}
.section-link-line::before { top: 12px; }
.section-link-line::after  { bottom: 12px; }

/* traveling pulse along the line */
.section-link-pulse {
  position: absolute;
  left: 50%;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--accent);
  transform: translateX(-50%);
  box-shadow: 0 0 0 4px rgba(46, 134, 193, 0.18);
  animation: linkPulse 4s ease-in-out infinite;
}
@keyframes linkPulse {
  0%   { top: 12px;            opacity: 0; }
  10%  {                       opacity: 1; }
  90%  { top: calc(100% - 20px); opacity: 1; }
  100% { top: calc(100% - 20px); opacity: 0; }
}

/* floating data chip next to the line */
.section-link-chip {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink-2);
  padding: 6px 12px;
  border-radius: 99px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  animation: chipFloat 4s ease-in-out infinite;
  box-shadow: 0 1px 0 rgba(10, 10, 11, 0.04);
}
.section-link-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--accent);
  flex-shrink: 0;
}
.section-link-chip.left  { right: calc(50% + 24px); top: 50%; transform: translateY(-50%); animation-delay: 0s; }
.section-link-chip.right { left:  calc(50% + 24px); top: 50%; transform: translateY(-50%); animation-delay: 1s; }
.section-link-chip.tag-mono::before { background: var(--ink); }

@keyframes chipFloat {
  0%, 100% { opacity: 0; transform: translateY(-50%) translateX(0); }
  15%      { opacity: 1; }
  85%      { opacity: 1; }
  100%     { opacity: 0; transform: translateY(-50%) translateX(0); }
}

/* compact node mark — used on the side as decoration */
.section-link-node {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 3px;
}
.section-link-node.tl { top: 6px;    left: calc(50% - 60px); }
.section-link-node.br { bottom: 6px; left: calc(50% + 48px); }

body.dark .section-link-line {
  background: linear-gradient(to bottom, transparent 0%, var(--line) 20%, var(--line) 80%, transparent 100%);
}
body.dark .section-link-line::before,
body.dark .section-link-line::after { background: var(--ink); }
body.dark .section-link-chip { background: var(--bg-soft); border-color: var(--line); }

@media (prefers-reduced-motion: reduce) {
  .section-link-pulse, .section-link-chip { animation: none; }
}
@media (max-width: 720px) {
  .section-link { height: 80px; }
  .section-link-chip { display: none; }
}
.logo-wall {
  padding: clamp(40px, 5vw, 56px) 0 clamp(48px, 6vw, 72px);
  border-bottom: 1px solid var(--line);
}
.logo-wall .lbl {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--mute);
}
.logo-marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.logo-marquee-track {
  display: flex;
  gap: clamp(40px, 5vw, 72px);
  width: max-content;
  align-items: center;
  animation: logoMarquee 70s linear infinite;
}
.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
@keyframes logoMarquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.logo-marquee .lg-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  flex-shrink: 0;
  opacity: 0.95;
  transition: opacity .3s, transform .3s;
  mix-blend-mode: multiply;
}
.logo-marquee .lg-img:hover {
  opacity: 1;
  transform: scale(1.08);
}
.logo-marquee .lg-img img {
  max-height: 80px;
  max-width: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track { animation: none; }
}

body.dark .logo-marquee .lg-img,
body.dark .logo-marquee .lg-img img {
  mix-blend-mode: screen;
  filter: invert(1) hue-rotate(180deg);
  opacity: 0.85;
}
body.dark .logo-marquee .lg-img:hover { opacity: 1; }

/* =====================================================
   SECTION HEADER
   ===================================================== */
section.section { padding: clamp(40px, 5vw, 72px) 0; }

.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 56px);
}
.section-head h2 { max-width: 16ch; }
.section-head h2 .accent { color: var(--accent); }
.section-head .right { color: var(--mute); max-width: 48ch; font-size: 17px; line-height: 1.5; }
@media (max-width: 780px) { .section-head { grid-template-columns: 1fr; gap: 16px; } }

/* =====================================================
   OUTCOMES (outcome-led, ServiceTitan-coded)
   ===================================================== */
.outcomes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 880px) { .outcomes { grid-template-columns: 1fr; } }
.outcome {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px;
  position: relative;
  overflow: hidden;
  min-height: 260px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: border-color .2s;
}
.outcome:hover { border-color: var(--ink); }
.outcome-metric {
  font-size: clamp(56px, 7vw, 88px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--ink);
}
.outcome-metric .unit { font-size: 0.55em; color: var(--mute); margin-left: 4px; }
.outcome h3 { margin-top: 14px; max-width: 22ch; }
.outcome p { color: var(--mute); margin-top: 10px; font-size: 14px; line-height: 1.5; max-width: 38ch; }
.outcome .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

/* =====================================================
   FEATURED TESTIMONIAL (Attio slab)
   ===================================================== */
.testimonial-feature {
  background: var(--ink);
  color: white;
  border-radius: var(--radius-xl);
  padding: clamp(48px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}
.testimonial-feature::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(700px 300px at 100% 0%, rgba(46, 134, 193,0.20), transparent 60%);
  pointer-events: none;
}
.testimonial-feature .container-in { position: relative; z-index: 1; }
.tf-mark {
  font-family: "Geist", sans-serif;
  font-size: 100px;
  line-height: 0.7;
  color: var(--accent);
  height: 32px;
  font-weight: 500;
  margin-bottom: 8px;
}
.tf-quote {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  font-weight: 400;
  max-width: 22ch;
  margin-bottom: 36px;
}
.tf-quote .h { color: var(--accent); }
.tf-attrib {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.tf-avatar {
  width: 56px; height: 56px;
  border-radius: 99px;
  background: linear-gradient(135deg, #C56B43, #E8855B);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.tf-avatar::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,235,220,0.9) 12%, transparent 14%),
    radial-gradient(ellipse at 50% 82%, rgba(255,235,220,0.7) 18%, transparent 24%);
}
.tf-attrib .name { font-size: 16px; font-weight: 500; }
.tf-attrib .role { font-size: 13px; color: var(--studio-mute); font-family: var(--font-mono); letter-spacing: 0.03em; }
.tf-attrib .divider { width: 1px; height: 32px; background: var(--studio-line); }
.tf-attrib .company {
  font-family: "Geist", sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--studio-mute);
}
.tf-metrics {
  display: flex; gap: 40px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--studio-line);
}
.tf-metric { display: flex; flex-direction: column; gap: 4px; }
.tf-metric .n {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: white;
}
.tf-metric .l {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--studio-mute);
}

/* ============================================================
   Customer carousel — Breakcold-style single feature
   ============================================================ */
.cc-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(20px, 2.5vw, 32px);
  position: relative;
  overflow: hidden;
}
.cc-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
  min-height: 460px;
}
@media (max-width: 880px) {
  .cc-grid { grid-template-columns: 1fr; }
}

.cc-portrait-wrap {
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  min-height: 440px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--accent);
  transition: background .5s ease;
}
.cc-portrait-silhouette {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Geist", sans-serif;
  font-size: clamp(120px, 16vw, 200px);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: rgba(10, 10, 11, 0.18);
  pointer-events: none;
  user-select: none;
}
.cc-portrait-silhouette::after {
  /* "Person" silhouette layered above the initials */
  content: "";
  position: absolute;
  bottom: 0;
  width: 60%;
  height: 75%;
  background:
    radial-gradient(circle at 50% 22%, rgba(10,10,11,0.55) 14%, transparent 16%),
    radial-gradient(ellipse at 50% 80%, rgba(10,10,11,0.5) 32%, transparent 38%);
  filter: blur(0.5px);
  pointer-events: none;
}
.cc-portrait-tag {
  position: absolute;
  top: 18px; left: 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(10, 10, 11, 0.6);
  background: rgba(255, 255, 255, 0.4);
  padding: 5px 10px;
  border-radius: 99px;
  backdrop-filter: blur(8px);
  z-index: 2;
}
.cc-portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: multiply;
  z-index: 1;
}

.cc-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(8px, 1.5vw, 24px) 0;
  position: relative;
}
.cc-content::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: var(--line);
}
@media (max-width: 880px) {
  .cc-content::before { display: none; }
}

.cc-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mute);
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 99px;
  margin-bottom: 22px;
  align-self: flex-start;
}

.cc-headline {
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 18px;
  max-width: 22ch;
}

.cc-body {
  color: var(--mute);
  font-size: 16px;
  line-height: 1.55;
  max-width: 48ch;
  margin-bottom: 28px;
}

.cc-divider { display: none; }

.cc-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  justify-content: space-between;
}
.cc-heart {
  display: inline-flex;
  align-items: center;
}
.cc-attrib {
  text-align: right;
}
.cc-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.cc-role {
  font-size: 13px;
  color: var(--mute);
  margin-top: 2px;
}

/* Controls */
.cc-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
  padding-top: 8px;
}
.cc-nav {
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  transition: border-color .2s, background .2s;
}
.cc-nav:hover { border-color: var(--ink); background: var(--bg-soft); }

.cc-dots {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.cc-dot {
  width: 8px; height: 8px;
  border-radius: 99px;
  background: var(--line);
  transition: background .25s, width .25s, transform .25s;
  border: none;
  padding: 0;
}
.cc-dot.active {
  background: var(--ink);
  width: 24px;
  border-radius: 99px;
}
.cc-dot:hover { background: var(--mute); }
.cc-dot.active:hover { background: var(--ink); }

body.dark .cc-card { background: var(--bg-soft); }
body.dark .cc-nav { background: var(--bg-2); }
body.dark .cc-portrait-tag { background: rgba(255,255,255,0.85); }
.testimonials-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 980px) { .testimonials-3 { grid-template-columns: 1fr; } }
.t3 {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px;
  display: flex; flex-direction: column;
  transition: border-color .2s, transform .2s;
}
.t3:hover { border-color: var(--ink); }
.t3 p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 24px;
  letter-spacing: -0.005em;
}
.t3 .attrib {
  display: flex; align-items: center; gap: 12px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line-2);
}
.t3 .avatar {
  width: 36px; height: 36px;
  border-radius: 99px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.t3 .a1 { background: linear-gradient(135deg, #88B5DD, #2A5BFF); }
.t3 .a2 { background: linear-gradient(135deg, #C8A8E0, #6A4CB8); }
.t3 .a3 { background: linear-gradient(135deg, #A8D5BA, #16A34A); }
.t3 .avatar::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 36%, rgba(255,255,255,0.85) 10%, transparent 14%),
    radial-gradient(ellipse at 50% 84%, rgba(255,255,255,0.6) 18%, transparent 24%);
}
.t3 .nm { font-size: 14px; font-weight: 500; }
.t3 .rl { font-family: var(--font-mono); font-size: 11px; color: var(--mute); letter-spacing: 0.04em; }
.t3 .co {
  margin-left: auto;
  font-size: 14px;
  font-weight: 500;
  color: var(--mute);
}

/* =====================================================
   SEGMENTS (clean grid)
   ===================================================== */
.segments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 0;
}
.seg {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0;
  min-height: 280px;
  display: block;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease;
  cursor: pointer;
  color: white;
}
.seg:hover { transform: scale(1.005); }
.seg-bg {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  z-index: 0;
  border-radius: 0 !important;
}
.seg-bg::part(image),
.seg-bg::part(placeholder) {
  border-radius: 0;
}
.seg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(10,10,11,0.85) 0%, rgba(10,10,11,0.4) 55%, rgba(10,10,11,0.15) 100%);
  pointer-events: none;
  transition: background .2s;
}
.seg:hover .seg-overlay {
  background:
    linear-gradient(to top, rgba(10,10,11,0.92) 0%, rgba(10,10,11,0.5) 55%, rgba(10,10,11,0.25) 100%);
}
.seg-content {
  position: relative;
  z-index: 2;
  padding: 28px 24px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
}
.seg-content > div:not(.seg-icon) { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.seg-content .seg-icon { display: none; }
.seg-content .seg-title { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: white; }
.seg-content .seg-desc { color: rgba(255,255,255,0.72); font-size: 13px; line-height: 1.4; margin-top: 4px; }
.seg-content .seg-link {
  position: absolute; right: 24px; bottom: 24px;
  font-size: 14px; color: rgba(255,255,255,0.8);
  transition: color .2s, transform .2s;
}
.seg:hover .seg-content .seg-link { color: var(--accent); transform: translateX(3px); }
.seg-click {
  position: absolute;
  inset: 0;
  z-index: 3;
  text-indent: -9999px;
  overflow: hidden;
}
@media (max-width: 980px) { .segments { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .segments { grid-template-columns: 1fr; } }

/* =====================================================
   INTEGRATIONS (SAP B1 lives here)
   ===================================================== */
.integrations {
  background: var(--bg);
  color: var(--ink);
  padding: clamp(80px, 9vw, 120px) 0;
  position: relative; overflow: hidden;
}
.integrations::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(800px 400px at 15% 0%, rgba(46, 134, 193,0.10), transparent 60%),
    radial-gradient(600px 300px at 90% 100%, rgba(46, 134, 193,0.06), transparent 60%);
  pointer-events: none;
}
.integrations .container { position: relative; z-index: 1; }
.integrations .eyebrow { color: var(--mute); }
.integrations h2 { color: var(--ink-title); }
.integrations h2 .accent { color: var(--accent); }
.integrations .right { color: var(--mute); }
.int-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  margin-top: 56px;
}
@media (max-width: 980px) { .int-layout { grid-template-columns: 1fr; } }

.sap-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px;
  position: relative;
  overflow: hidden;
}
.sap-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 20px;
}
.sap-card h3 {
  font-size: clamp(28px, 3vw, 38px);
  color: var(--ink);
  margin-bottom: 16px;
  letter-spacing: -0.025em;
}
.sap-card p {
  color: var(--mute);
  font-size: 16px; line-height: 1.55;
  max-width: 50ch;
}
.sap-card ul {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}
.sap-card li {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--mute);
  display: flex; gap: 8px; align-items: center;
}
.sap-card li::before {
  content:""; width: 4px; height: 4px;
  background: var(--accent); border-radius: 99px;
}

.int-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.int-item {
  padding: 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink);
  display: flex; align-items: center; gap: 12px;
}
.int-item:nth-child(2n) { border-right: none; }
.int-item:nth-last-child(-n+2) { border-bottom: none; }
.int-item .ico {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: rgba(0,0,0,0.03);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 500; font-size: 12px;
  flex-shrink: 0;
  color: var(--ink);
}
.int-item small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--mute);
  margin-top: 2px;
}

/* =====================================================
   CTA + Footer
   ===================================================== */
.cta-section {
  padding: clamp(80px, 9vw, 120px) 0;
}
.cta-block {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto;
}
.cta-block h2 { margin-bottom: 18px; }
.cta-block h2 .accent { color: var(--accent); }
.cta-block p { color: var(--mute); font-size: 18px; line-height: 1.5; margin-bottom: 28px; }
.cta-actions { display: inline-flex; gap: 12px; }

footer.foot {
  padding: 56px 0 36px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--mute);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 48px;
}
/* The columns are rendered by content.js into a wrapper <div data-list="footer.columns">.
   `display: contents` removes that wrapper from the grid so the 4 column <div>s become
   direct grid items alongside the logo block — keeping the 5-column layout intact. */
.foot-grid > div[data-list],
.foot-grid > div[data-listed] { display: contents; }
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-grid h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 14px;
  font-weight: 500;
}
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.foot-grid a { color: var(--ink-2); }
.foot-grid a:hover { color: var(--accent); }
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--mute-2);
}
.foot-bottom .right { display: flex; gap: 24px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ============================================================
   Hero brandline + solutions strip + spotlight + network KPIs
   ============================================================ */
.hero-brandline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.hero-brand-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--mute);
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--bg-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.hero-brand-tag::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 99px;
}

.hero-agents-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--ink);
  color: white;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.hero-brand-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mute);
  white-space: nowrap;
}
.hero-brand-divider {
  width: 24px;
  height: 1px;
  background: var(--line);
}
@media (max-width: 720px) {
  .hero-brand-line { display: none; }
}
.hero-agents-dot {
  width: 6px; height: 6px;
  border-radius: 99px;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(22,163,74,0.20);
  animation: livePulse 1.8s ease-in-out infinite;
}
body.dark .hero-agents-pill { background: var(--accent); color: white; }

/* The solutions explorer lives in its own full-width section now (not inside the hero).
   Wide context lets the detail panel actually breathe. */
.solutions-explorer { margin-top: 16px; }

.solutions-split { margin-top: 24px; }
.solutions-split-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--mute-2);
  margin-bottom: 14px;
}
.solutions-split-grid {
  display: grid;
  grid-template-columns: minmax(220px, 28%) 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg);
}
/* Below ~860px the 20/80 split feels squeezed — switch to a horizontal tab strip
   above the detail panel so neither side gets pinched. */
@media (max-width: 860px) {
  .solutions-split-grid { grid-template-columns: 1fr; }
}

.solutions-split-list {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--bg-soft);
}
@media (max-width: 860px) {
  .solutions-split-list {
    border-right: none;
    border-bottom: 1px solid var(--line);
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .solutions-split-list .vsol {
    flex: 0 0 auto;
    border-bottom: none;
    border-right: 1px solid var(--line);
    min-height: 40px;
  }
  .solutions-split-list .vsol:last-child { border-right: none; }
  .solutions-split-list .vsol-bar {
    width: auto;
    height: 3px;
    align-self: auto;
  }
  .solutions-split-list .vsol-label { padding: 10px 14px; }
}

.vsol {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 0;
  text-align: left;
  cursor: pointer;
  transition: background .2s ease;
  width: 100%;
  min-height: 58px;
}
.vsol:last-child { border-bottom: none; }
.vsol:hover { background: rgba(10, 10, 11, 0.04); }
.vsol-bar {
  width: 3px;
  align-self: stretch;
  background: transparent;
  transition: background .2s ease;
  flex-shrink: 0;
}
.vsol.active { background: var(--bg); }
.vsol.active .vsol-bar { background: var(--accent); }
.vsol-index {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mute-2);
  padding-left: 14px;
  flex-shrink: 0;
}
.vsol.active .vsol-index { color: var(--accent); }
.vsol-label {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--mute);
  transition: color .2s ease;
  padding: 14px 8px 14px 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vsol:hover .vsol-label { color: var(--ink); }
.vsol.active .vsol-label { color: var(--ink); font-weight: 600; }
.vsol-chevron {
  display: none;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--mute-2);
  padding-right: 14px;
  transition: transform .2s ease;
  flex-shrink: 0;
}

/* Mobile-only accordion panel — hidden by default (shown ≤860 below) */
.vsol-panel { display: none; }

.solutions-split-detail {
  padding: clamp(20px, 2.5vw, 32px);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 24px);
}

/* Product-screenshot hero. Real DMS UI inside browser chrome, with a glassmorphic
   info panel overlaid at the bottom (short message + meta) — Toast-coded. */
.ssd-hero {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-soft);
  isolation: isolate;
  border: 1px solid var(--line);
  box-shadow:
    0 1px 0 rgba(10,10,11,0.04),
    0 30px 60px -20px rgba(10,10,11,0.20),
    0 8px 20px -10px rgba(10,10,11,0.10);
  display: flex;
  flex-direction: column;
}

/* Browser chrome at the top — makes the screenshot read as "real product UI". */
.ssd-hero-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.ssd-hero-chrome-dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.ssd-hero-chrome-dots span {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: var(--line);
}
.ssd-hero-chrome-dots span:nth-child(1) { background: #F6685A; }
.ssd-hero-chrome-dots span:nth-child(2) { background: #FBC02D; }
.ssd-hero-chrome-dots span:nth-child(3) { background: #00C853; }
.ssd-hero-chrome-addr {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mute);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 4px 12px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.ssd-hero-chrome-favicon {
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--ink);
  flex-shrink: 0;
}
.ssd-hero-chrome-caption {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute-2);
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 720px) {
  .ssd-hero-chrome-caption { display: none; }
}

/* The actual screenshot region. Aspect ratio keeps it consistent across solutions. */
.ssd-hero-shot {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 240px;
  background:
    radial-gradient(circle at 100% 0%, rgba(46, 134, 193, 0.18), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(10, 10, 11, 0.08), transparent 55%),
    var(--bg-soft);
  overflow: hidden;
}
.ssd-hero-shot image-slot,
.ssd-hero-shot .ssd-hero-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  z-index: 0;
}
.ssd-hero-shot .ssd-hero-video {
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/* Soft scrim only at the bottom 40% — keeps most of the screenshot fully visible
   while ensuring the overlay panel reads cleanly. */
.ssd-hero-overlay {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.00) 0%,
    rgba(0,0,0,0.30) 60%,
    rgba(0,0,0,0.65) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Floating overlay panel — anchored bottom-left, half-width on desktop, full on mobile. */
.ssd-hero-content {
  position: absolute;
  left: clamp(16px, 2.4vw, 28px);
  right: clamp(16px, 2.4vw, 28px);
  bottom: clamp(16px, 2.4vw, 28px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 38ch;
  padding: 14px 16px;
  background: rgba(10, 10, 11, 0.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-md);
}
.ssd-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ssd-hero-meta .ssd-eyebrow {
  color: #fff;
  background: var(--accent);
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 10px;
  letter-spacing: 0.10em;
  font-weight: 500;
}
.ssd-hero-meta .ssd-agent {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  font-size: 9px;
  letter-spacing: 0.10em;
}
.ssd-hero-headline {
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: #fff;
  margin: 0;
}
.ssd-hero-headline .accent { color: var(--accent); }
.ssd-hero-headline strong { font-weight: 600; }

/* Solution index stamped in the top-right corner of the screenshot area. */
.ssd-hero-stamp {
  position: absolute;
  /* Account for the chrome bar (~46px) plus a small inset. */
  top: 58px;
  right: clamp(16px, 2vw, 28px);
  font-family: var(--font-mono);
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.20);
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
  z-index: 2;
  pointer-events: none;
}

@media (max-width: 720px) {
  .ssd-hero-shot { aspect-ratio: 4 / 3; min-height: 220px; }
  .ssd-hero-stamp { font-size: 36px; top: 52px; }
  .ssd-hero-content { max-width: none; }
}

body.dark .ssd-hero { background: var(--studio-soft); border-color: var(--studio-line); }
body.dark .ssd-hero-chrome { background: var(--studio); border-bottom-color: var(--studio-line); }
body.dark .ssd-hero-chrome-addr { background: var(--studio-soft); border-color: var(--studio-line); color: var(--studio-mute); }
body.dark .ssd-hero-chrome-favicon { background: var(--studio-ink); }
.ssd-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.ssd-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-weight: 500;
}
.ssd-agent {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--mute);
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 99px;
}
.ssd-headline {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
  max-width: 28ch;
}
.ssd-headline .accent { color: var(--accent); }
.ssd-headline strong { font-weight: 600; }
.ssd-details {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute);
  max-width: 56ch;
  margin: 0;
}
.ssd-details strong {
  color: var(--ink);
  font-weight: 600;
}
.ssd-details .accent {
  color: var(--accent);
  font-weight: 500;
}
.ssd-metrics {
  display: flex;
  gap: clamp(20px, 2.4vw, 36px);
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
  margin-top: auto;
}
.ssd-metric { display: flex; flex-direction: column; gap: 4px; }
.ssd-metric-n {
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
}
.ssd-metric-l {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
}
.ssd-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.ssd-hint::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: var(--accent);
  animation: livePulse 1.8s ease-in-out infinite;
}

body.dark .solutions-split-grid { background: var(--bg-soft); }
body.dark .solutions-split-list { background: var(--bg-2); }
body.dark .vsol.active { background: var(--bg-soft); }
body.dark .solutions-split-detail { background: var(--bg-soft); }
body.dark .ssd-headline { color: var(--studio-ink); }
body.dark .ssd-details { color: var(--studio-mute); }
body.dark .ssd-details strong { color: var(--studio-ink); }
body.dark .ssd-metric-n { color: var(--studio-ink); }

/* Mobile / small-tablet accordion — at narrow widths collapse the right
   detail panel and surface each solution's content inline beneath its row
   when expanded. Bumped from 560 → 860 to cover phone-landscape and small
   tablets, where the legacy horizontal-scroll rule above would otherwise
   stretch each tab to the full container width and break the layout. */
@media (max-width: 860px) {
  .solutions-split-grid {
    grid-template-columns: 1fr;
    border-radius: var(--radius-md);
  }
  .solutions-split-list {
    flex-direction: column;
    overflow-x: visible;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .solutions-split-list .vsol {
    border-bottom: 1px solid var(--line);
    border-right: none;
    min-height: 52px;
    flex: 1 1 auto;
    width: 100%;
  }
  .solutions-split-list .vsol-bar { width: 3px; height: auto; align-self: stretch; }
  .solutions-split-list .vsol-label { padding: 14px 8px 14px 0; }
  .vsol-chevron {
    display: inline-block;
  }
  .vsol.mobile-open .vsol-chevron {
    transform: rotate(45deg);
    color: var(--accent);
  }
  .vsol-panel {
    display: flex;
    flex-direction: column;
    padding: 14px 16px 18px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    gap: 14px;
  }
  .vsol-panel[hidden] { display: none; }
  /* The hero block reuses the desktop styles; just compact the screenshot
     region and the title overlay to fit a phone width. */
  .vsol-panel .ssd-hero { border-radius: var(--radius-md); }
  .vsol-panel .ssd-hero-shot {
    aspect-ratio: 4 / 3;
    min-height: 200px;
  }
  .vsol-panel .ssd-hero-content {
    max-width: none;
    padding: 14px;
  }
  .vsol-panel .ssd-hero-headline {
    font-size: 18px;
    line-height: 1.2;
  }
  .vsol-panel .ssd-hero-stamp { font-size: 32px; top: 44px; }
  /* Chrome URL pill — at 390px the path overflows. Drop padding and shrink. */
  .vsol-panel .ssd-hero-chrome { padding: 8px 10px; gap: 8px; }
  .vsol-panel .ssd-hero-chrome-addr {
    font-size: 10px;
    padding: 3px 10px;
    max-width: none;
    min-width: 0;
    flex: 1 1 auto;
  }
  .vsol-panel .ssd-details {
    font-size: 13px;
    line-height: 1.55;
  }
  .vsol-panel .ssd-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    padding-top: 14px;
    margin-top: 2px;
    border-top: 1px solid var(--line-2);
  }
  .vsol-panel .ssd-metric-n {
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--ink);
  }
  .vsol-panel .ssd-metric-l {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mute);
    margin-top: 4px;
  }
  /* Hide the wide-screen detail panel — the inline accordion replaces it. */
  .solutions-split-detail { display: none; }
}

.net-kpi {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.net-kpi .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
}
.net-kpi .num {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-top: 2px;
}

/* ============================================================
   PILLARS — CV360 + Analytics
   ============================================================ */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 980px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  min-height: 360px;
}
.pillar .pillar-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
}
.pillar h3 {
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.025em;
  font-weight: 500;
  max-width: 18ch;
}
.pillar p {
  color: var(--mute);
  font-size: 15px;
  line-height: 1.5;
  max-width: 42ch;
}
.pillar-visual {
  margin-top: auto;
  padding-top: 16px;
}

/* ============================================================
   DELIVERY phases — Setup / Training / Launch
   ============================================================ */
.delivery-phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 980px) { .delivery-phases { grid-template-columns: 1fr; } }
.delivery-phase {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.delivery-phase-step {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.delivery-phase h3 {
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: -0.02em;
  font-weight: 500;
  max-width: 18ch;
  margin: 0;
}
.delivery-phase p {
  color: var(--mute);
  font-size: 15px;
  line-height: 1.5;
  max-width: 42ch;
  margin: 0;
}

/* ============================================================
   PLATFORM pillars — agentic customization / observability / guidance / open APIs
   ============================================================ */
.platform-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 1200px) { .platform-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .platform-pillars { grid-template-columns: 1fr; } }
.platform-pillar {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.platform-pillar h3 {
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.02em;
  font-weight: 500;
  max-width: 22ch;
  margin: 0;
}
.platform-pillar p {
  color: var(--mute);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
}

/* ============================================================
   SECURITY & COMPLIANCE — trust grid above the contact form
   ============================================================ */
.security-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 960px) { .security-grid { grid-template-columns: 1fr; } }
.security-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: border-color .2s ease, transform .2s ease;
}
.security-card:hover { border-color: rgba(46, 134, 193, 0.35); }
.security-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 5px 10px 5px 8px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.security-card h3 {
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.02em;
  font-weight: 500;
  max-width: 22ch;
  margin: 0;
}
.security-card p {
  color: var(--mute);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
}

/* ============================================================
   DELIVERY phase + PLATFORM pillar visuals — animated, decorative
   ============================================================ */
.delivery-phase-visual,
.platform-pillar-visual {
  margin-top: auto;
  padding-top: 16px;
  min-height: 80px;
  display: flex;
  align-items: center;
}
.dv, .pv {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--mute);
}

/* setup & integration */
.dv-setup { display: flex; align-items: center; gap: 10px; }
.dv-setup-stack { display: flex; flex-direction: column; gap: 4px; }
.dv-tag { padding: 3px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.dv-wire { flex: 1; height: 1px; background: var(--line); position: relative; min-width: 30px; }
.dv-wire-pulse {
  position: absolute; top: -2px; left: 0; width: 10px; height: 5px;
  background: var(--accent); border-radius: 2px;
  animation: dv-wire-flow 2.4s linear infinite;
}
@keyframes dv-wire-flow { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
.dv-hub { padding: 5px 10px; background: var(--accent); color: #fff; border-radius: 6px; font-weight: 600; }

/* training & enablement */
.dv-train { display: flex; flex-direction: column; gap: 6px; }
.dv-train-row { display: flex; align-items: center; gap: 8px; }
.dv-tick {
  width: 12px; height: 12px; border: 1px solid var(--line); border-radius: 50%;
  flex-shrink: 0; position: relative;
  animation: dv-tick-fill 5s ease-in-out infinite;
}
.dv-tick::after {
  content: ""; position: absolute; inset: 3px;
  background: var(--accent); border-radius: 50%;
  opacity: 0;
  animation: dv-tick-dot 5s ease-in-out infinite;
}
.dv-train-row:nth-child(1) .dv-tick, .dv-train-row:nth-child(1) .dv-tick::after { animation-delay: 0.0s; }
.dv-train-row:nth-child(2) .dv-tick, .dv-train-row:nth-child(2) .dv-tick::after { animation-delay: 0.6s; }
.dv-train-row:nth-child(3) .dv-tick, .dv-train-row:nth-child(3) .dv-tick::after { animation-delay: 1.2s; }
.dv-train-row:nth-child(4) .dv-tick, .dv-train-row:nth-child(4) .dv-tick::after { animation-delay: 1.8s; }
@keyframes dv-tick-fill { 0%, 30% { border-color: var(--line); } 35%, 100% { border-color: var(--accent); } }
@keyframes dv-tick-dot { 0%, 30% { opacity: 0; transform: scale(0.4); } 50%, 100% { opacity: 1; transform: scale(1); } }

/* launch & tuning */
.dv-launch { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.dv-launch-bar { height: 4px; background: var(--line); border-radius: 2px; position: relative; overflow: hidden; }
.dv-launch-fill {
  position: absolute; top: 0; left: 0; height: 100%; width: 0;
  background: var(--accent); border-radius: 2px;
  animation: dv-launch-progress 5s ease-in-out infinite;
}
@keyframes dv-launch-progress { 0% { width: 0; } 75%, 100% { width: 100%; } }
.dv-launch-labels { display: flex; justify-content: space-between; }
.dv-launch-live { color: var(--accent); font-weight: 700; opacity: 0; animation: dv-launch-live 5s ease-in-out infinite; }
@keyframes dv-launch-live { 0%, 65% { opacity: 0; } 80%, 100% { opacity: 1; } }

/* customize */
.pv-customize { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.pv-flow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pv-block { padding: 3px 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.pv-block.hl { background: var(--accent); color: #fff; border-color: var(--accent); animation: pv-block-pulse 3s ease-in-out infinite; }
@keyframes pv-block-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.pv-flow-arr { opacity: 0.5; }
.pv-slider { height: 4px; background: var(--line); border-radius: 2px; position: relative; margin-top: 4px; }
.pv-slider-knob {
  position: absolute; top: -3px; width: 10px; height: 10px;
  background: var(--accent); border-radius: 50%;
  animation: pv-slider-move 4s ease-in-out infinite;
}
@keyframes pv-slider-move { 0%, 100% { left: 10%; } 50% { left: calc(100% - 10px); } }

/* observe */
.pv-observe { display: flex; flex-direction: column; gap: 4px; }
.pv-obs-row { display: grid; grid-template-columns: 1fr auto 60px; align-items: center; gap: 8px; padding: 2px 0; }
.pv-obs-val { font-weight: 600; color: var(--ink); }
.pv-spark { width: 60px; height: 16px; color: var(--accent); }
.pv-spark polyline { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 120; stroke-dashoffset: 120; animation: pv-spark-draw 3s ease-in-out infinite; }
.pv-obs-row:nth-child(1) .pv-spark polyline { animation-delay: 0s; }
.pv-obs-row:nth-child(2) .pv-spark polyline { animation-delay: 0.4s; }
.pv-obs-row:nth-child(3) .pv-spark polyline { animation-delay: 0.8s; }
@keyframes pv-spark-draw { 0% { stroke-dashoffset: 120; } 60%, 100% { stroke-dashoffset: 0; } }

/* guide */
.pv-guide { display: flex; flex-direction: column; gap: 8px; }
.pv-guide-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pv-guide-chip { padding: 3px 8px; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); }
.pv-guide-chip.ag { color: var(--accent); border-color: var(--accent); }
.pv-guide-chip.ok { background: var(--accent); color: #fff; border-color: var(--accent); animation: pv-block-pulse 3s ease-in-out infinite; }
.pv-guide-arr { opacity: 0.5; }
.pv-guide-meter { height: 4px; background: var(--line); border-radius: 2px; position: relative; overflow: hidden; }
.pv-guide-meter-fill {
  position: absolute; top: 0; left: 0; height: 100%; width: 0;
  background: var(--accent); border-radius: 2px;
  animation: dv-launch-progress 4s ease-in-out infinite;
}

/* apis */
.pv-apis {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  align-items: center;
  justify-items: center;
}
.pv-hub {
  padding: 5px 10px; background: var(--accent); color: #fff; border-radius: 6px;
  font-weight: 700; font-size: 11px;
}
.pv-spoke {
  padding: 3px 6px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg); font-size: 10px;
  animation: pv-spoke-pulse 4s ease-in-out infinite;
}
@keyframes pv-spoke-pulse { 0%, 100% { opacity: 0.55; border-color: var(--line); color: var(--mute); } 50% { opacity: 1; border-color: var(--accent); color: var(--accent); } }
.pv-spoke.s1 { animation-delay: 0.0s; }
.pv-spoke.s2 { animation-delay: 0.3s; }
.pv-spoke.s3 { animation-delay: 0.6s; }
.pv-spoke.s4 { animation-delay: 0.9s; }
.pv-spoke.s5 { animation-delay: 1.2s; }
.pv-spoke.s6 { animation-delay: 1.5s; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dv-wire-pulse, .dv-tick, .dv-tick::after,
  .dv-launch-fill, .dv-launch-live,
  .pv-block.hl, .pv-slider-knob,
  .pv-spark polyline, .pv-guide-chip.ok, .pv-guide-meter-fill,
  .pv-spoke { animation: none; }
  .dv-tick { border-color: var(--accent); }
  .dv-tick::after { opacity: 1; }
  .dv-launch-fill { width: 100%; }
  .dv-launch-live { opacity: 1; }
  .pv-guide-meter-fill { width: 80%; }
  .pv-slider-knob { left: 60%; }
  .pv-spark polyline { stroke-dashoffset: 0; }
  .pv-spoke { opacity: 1; }
}

/* ============================================================
   SOLUTIONS — slide-5 capability strip (Omnichannel · CRM · DMS Core)
   ============================================================ */
.solutions-capabilities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
@media (max-width: 980px) { .solutions-capabilities { grid-template-columns: 1fr; } }
.solutions-capability {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  min-height: 220px;
}
.solutions-capability-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.solutions-capability-label {
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: -0.025em;
  font-weight: 500;
}
.solutions-capability-items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}
.solutions-capability-items li {
  font-size: 14px;
  color: var(--mute);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  padding-left: 18px;
  position: relative;
}
.solutions-capability-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 1px;
  background: var(--accent);
}
.solutions-badge {
  margin-top: 24px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--mute);
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.solutions-lob-eyebrow {
  margin-top: 40px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ============================================================
   CV360 animated visual
   ============================================================ */
.cv360 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  position: relative;
}
.cv360-avatar {
  width: 56px; height: 56px;
  border-radius: 99px;
  background: linear-gradient(135deg, #C56B43, #E8855B);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  animation: cv360-avatar-pulse 4s ease-in-out infinite;
}
.cv360-avatar::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,235,220,0.9) 12%, transparent 14%),
    radial-gradient(ellipse at 50% 82%, rgba(255,235,220,0.7) 18%, transparent 24%);
}
.cv360-avatar::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 99px;
  border: 1.5px solid var(--accent);
  opacity: 0;
  animation: cv360-avatar-ring 4s ease-out infinite;
  pointer-events: none;
}
@keyframes cv360-avatar-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 134, 193,0); }
  50%      { box-shadow: 0 0 0 4px rgba(46, 134, 193,0.15); }
}
@keyframes cv360-avatar-ring {
  0%   { transform: scale(0.85); opacity: 0.55; }
  70%  { transform: scale(1.6);  opacity: 0; }
  100% { transform: scale(1.6);  opacity: 0; }
}

.cv360-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  position: relative;
}
.cv360-pip {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--mute);
  text-align: center;
  position: relative;
  transition: background .2s, color .2s, border-color .2s;
}
/* Sequential "fill" — every pip lights up in order, then dims, looping */
.cv360-pip.on {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
  animation: cv360-fill 8s ease-in-out infinite;
}
.cv360-pip.on:nth-of-type(1) { animation-delay: 0.0s; }
.cv360-pip.on:nth-of-type(2) { animation-delay: 0.6s; }
.cv360-pip.on:nth-of-type(3) { animation-delay: 1.2s; }
.cv360-pip.on:nth-of-type(4) { animation-delay: 1.8s; }
.cv360-pip.on:nth-of-type(5) { animation-delay: 2.4s; }
.cv360-pip.on:nth-of-type(6) { animation-delay: 3.0s; }
@keyframes cv360-fill {
  0%, 5%   { background: var(--bg);  color: var(--mute); border-color: var(--line); transform: scale(1); }
  8%       { background: var(--accent); color: white; border-color: var(--accent); transform: scale(1.04); }
  15%, 95% { background: var(--ink);  color: white; border-color: var(--ink); transform: scale(1); }
  100%     { background: var(--ink);  color: white; border-color: var(--ink); transform: scale(1); }
}

.cv360-pip.live {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  animation: cv360-live 1.6s ease-in-out infinite;
}
@keyframes cv360-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 134, 193,0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(46, 134, 193,0); }
}

/* Dark variant */
body.dark .cv360-pip { background: var(--bg-2); border-color: var(--line); }
body.dark @keyframes cv360-fill {
  0%, 5%   { background: var(--bg-2); color: var(--mute); border-color: var(--line); }
  8%       { background: var(--accent); color: white; border-color: var(--accent); }
  15%, 95% { background: var(--ink);  color: var(--ink-2); border-color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  .cv360-pip.on, .cv360-avatar, .cv360-avatar::before, .cv360-pip.live { animation: none; }
}

/* Analytics visual — animated bars + scan line */
.an-mini {
  display: flex; align-items: flex-end; gap: 4px;
  height: 80px;
  position: relative;
}
.an-mini .b {
  flex: 1;
  background: var(--ink);
  border-radius: 2px 2px 0 0;
  transform-origin: bottom;
  animation: barRise 4.5s ease-in-out infinite;
}
.an-mini .b.hl { background: var(--accent); }

.an-mini .b:nth-child(1)  { animation-delay: 0.00s; }
.an-mini .b:nth-child(2)  { animation-delay: 0.08s; }
.an-mini .b:nth-child(3)  { animation-delay: 0.16s; }
.an-mini .b:nth-child(4)  { animation-delay: 0.24s; }
.an-mini .b:nth-child(5)  { animation-delay: 0.32s; }
.an-mini .b:nth-child(6)  { animation-delay: 0.40s; }
.an-mini .b:nth-child(7)  { animation-delay: 0.48s; }
.an-mini .b:nth-child(8)  { animation-delay: 0.56s; }
.an-mini .b:nth-child(9)  { animation-delay: 0.64s; }
.an-mini .b:nth-child(10) { animation-delay: 0.72s; }
.an-mini .b:nth-child(11) { animation-delay: 0.80s; }

@keyframes barRise {
  0%   { transform: scaleY(0.12); }
  30%  { transform: scaleY(1.12); }
  40%  { transform: scaleY(1);    }
  88%  { transform: scaleY(1);    }
  100% { transform: scaleY(0.12); }
}

/* horizontal scan line sweeping across the chart */
.an-mini::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  opacity: 0;
  animation: anScan 4.5s ease-in-out infinite;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(46, 134, 193,0.7);
  pointer-events: none;
}
@keyframes anScan {
  0%   { left: 0%;   opacity: 0; }
  8%   { opacity: 0.55; }
  85%  { left: 100%; opacity: 0.55; }
  92%  { opacity: 0; }
  100% { left: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .an-mini .b, .an-mini::after { animation: none !important; }
}

body.dark .pillar { background: var(--bg-soft); }
body.dark .cv360-pip { background: var(--bg-2); }
body.dark .net-kpi { background: var(--bg-2); }

/* ============================================================
   INTEGRATIONS — tiered (equal weight to certified SAP solutions)
   ============================================================ */
.int-tier { position: relative; }
.int-tier-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.int-tier-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.int-cert-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 880px) { .int-cert-grid { grid-template-columns: 1fr; } }

.int-cert {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s;
}
.int-cert:hover { border-color: rgba(46, 134, 193,0.4); }
.int-cert-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sap-product-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  flex-shrink: 0;
  min-height: 36px;
}
.sap-product-mark img {
  height: 22px;
  width: auto;
  display: block;
}
.sap-product-cube {
  font-family: "Geist", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: white;
  background: linear-gradient(135deg, #0FAAFF 0%, #006FE6 60%, #00408A 100%);
  padding: 5px 9px;
  border-radius: 4px;
  line-height: 1;
  display: inline-block;
}
.sap-product-name {
  font-family: "Geist", sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.15;
  letter-spacing: 0;
  color: #003E7E;
  text-transform: none;
}
.int-cert-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  align-self: flex-start;
  padding: 4px 10px 4px 8px;
  border-radius: 99px;
  background: rgba(46, 134, 193,0.12);
  border: 1px solid rgba(46, 134, 193,0.22);
  white-space: nowrap;
}
.int-cert-name {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 4px;
}
.int-cert-desc {
  color: var(--mute);
  font-size: 14px;
  line-height: 1.5;
  max-width: 44ch;
}
.int-cert-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.int-cert-tags span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 99px;
  white-space: nowrap;
}

.int-tier-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 980px) { .int-tier-row { grid-template-columns: 1fr; } }

.int-tier-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 240px;
}
.int-card-head { display: flex; flex-direction: column; gap: 8px; }
.int-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
}
.int-tier-card h4 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 22ch;
  line-height: 1.25;
}
.int-tier-card p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--mute);
  max-width: 38ch;
}
.int-card-logos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}
.int-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.025);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink);
}
.int-logo-mark {
  width: 32px; height: 32px;
  border-radius: 7px;
  background: white;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 500; font-size: 12px;
  color: var(--ink);
  flex-shrink: 0;
  border: 1px solid var(--line);
}
.int-logo strong { font-weight: 500; }
.int-logo small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--mute);
  margin-top: 2px;
}
.agents-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 980px) { .agents-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .agents-grid { grid-template-columns: 1fr; } }

.agent-card-tile {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
  transition: border-color .2s, transform .2s, background .2s;
  cursor: pointer;
  position: relative;
}
.agent-card-tile:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.agent-tile-id {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mute);
}
.agent-tile-name {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.agent-tile-desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--mute);
  flex: 1;
}
.agent-tile-metric {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.04em;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.agent-tile-metric strong {
  color: var(--accent);
  font-weight: 500;
  font-size: 13px;
}

.agent-card-tile.featured {
  background: var(--accent-soft);
  border-color: rgba(46, 134, 193,0.22);
}
.agent-card-tile.featured .agent-tile-id { color: var(--accent); }
.agent-card-tile.featured:hover { border-color: var(--accent); }

.agent-card-tile.dark {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
}
.agent-card-tile.dark .agent-tile-id { color: var(--accent); font-size: 28px; line-height: 1; }
.agent-card-tile.dark .agent-tile-name { color: white; }
.agent-card-tile.dark .agent-tile-desc { color: rgba(255,255,255,0.65); }
.agent-card-tile.dark .agent-tile-metric { border-top-color: rgba(255,255,255,0.10); color: white; }
.agent-card-tile.dark .agent-tile-metric strong { color: white; }
.agent-card-tile.dark:hover { background: var(--ink-2); transform: translateY(-2px); }

body.dark .agent-card-tile { background: var(--bg-2); }
body.dark .agent-card-tile.featured { background: rgba(46, 134, 193,0.08); }
body.dark .agent-card-tile.dark { background: var(--accent); border-color: var(--accent); }
body.dark .agent-card-tile.dark:hover { background: var(--accent-dark); }
body.dark .agent-card-tile.dark .agent-tile-id { color: white; }
/* ============================================================
   Multi-brand · Multi-country pillar — animated flag wave
   ============================================================ */
.globe-stat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--mute);
}
.globe-stat .row {
  display: flex; justify-content: space-between;
  padding: 6px 9px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.globe-stat .row strong { color: var(--ink); font-weight: 500; }

.globe-flag-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 10px;
  position: relative;
}
.globe-flag-grid .f {
  height: 16px;
  border-radius: 2px;
  background: var(--ink);
  position: relative;
  animation: flagWave 5s ease-in-out infinite;
}
.globe-flag-grid .f.hl  { background: var(--accent); }
.globe-flag-grid .f.mid { background: var(--mute);   }
.globe-flag-grid .f.dim { background: var(--line);   }

/* Travel a brightness wave across the 7-wide grid based on column position */
.globe-flag-grid .f:nth-child(7n+1) { animation-delay: 0.0s;  }
.globe-flag-grid .f:nth-child(7n+2) { animation-delay: 0.12s; }
.globe-flag-grid .f:nth-child(7n+3) { animation-delay: 0.24s; }
.globe-flag-grid .f:nth-child(7n+4) { animation-delay: 0.36s; }
.globe-flag-grid .f:nth-child(7n+5) { animation-delay: 0.48s; }
.globe-flag-grid .f:nth-child(7n+6) { animation-delay: 0.60s; }
.globe-flag-grid .f:nth-child(7n+7) { animation-delay: 0.72s; }
@keyframes flagWave {
  0%, 80%, 100% { transform: translateY(0);    filter: brightness(1); }
  10%           { transform: translateY(-3px); filter: brightness(1.35); }
  20%           { transform: translateY(0);    filter: brightness(1); }
}

/* "Country going live" — a single orange flash that hops around the grid */
.globe-flag-grid::after {
  content: "";
  position: absolute;
  width: calc((100% - 24px) / 7);
  height: 16px;
  background: var(--accent);
  border-radius: 2px;
  pointer-events: none;
  animation: flagActivate 7s linear infinite;
  opacity: 0;
  box-shadow: 0 0 12px rgba(46, 134, 193,0.5);
}
@keyframes flagActivate {
  0%   { top: 0;    left: 0%;  opacity: 0; }
  2%   { top: 0;    left: 0%;  opacity: 0.95; }
  9%   { top: 0;    left: 0%;  opacity: 0; }
  18%  { top: 20px; left: 42%; opacity: 0; }
  20%  { top: 20px; left: 42%; opacity: 0.95; }
  27%  { top: 20px; left: 42%; opacity: 0; }
  44%  { top: 40px; left: 85%; opacity: 0; }
  46%  { top: 40px; left: 85%; opacity: 0.95; }
  53%  { top: 40px; left: 85%; opacity: 0; }
  72%  { top: 60px; left: 28%; opacity: 0; }
  74%  { top: 60px; left: 28%; opacity: 0.95; }
  81%  { top: 60px; left: 28%; opacity: 0; }
  100% { top: 0;    left: 0%;  opacity: 0; }
}

body.dark .globe-stat .row { background: var(--bg-2); }
body.dark .globe-flag-grid .f.dim { background: rgba(255,255,255,0.1); }

@media (prefers-reduced-motion: reduce) {
  .globe-flag-grid .f, .globe-flag-grid::after { animation: none !important; }
}

/* ---------- Mode: dark ---------- */
body.dark {
  --bg: #0A0A0B;
  --bg-soft: #15151A;
  --bg-2: #1B1B20;
  --ink: #FAFAF7;
  --ink-2: #E2E2E5;
  --mute: #9A9AA0;
  --mute-2: #6E6E74;
  --line: rgba(255,255,255,0.10);
  --line-2: rgba(255,255,255,0.06);
  --studio: #050506;
  --studio-soft: #101015;
  --studio-line: rgba(255,255,255,0.08);
}
body.dark .nav {
  background: rgba(10,10,11,0.78);
}
body.dark .product-chrome .dots span { background: rgba(255,255,255,0.14); }
body.dark .product-chrome .dots span:nth-child(1) { background: #F6685A; }
body.dark .product-chrome .dots span:nth-child(2) { background: #FBC02D; }
body.dark .product-chrome .dots span:nth-child(3) { background: #00C853; }
body.dark .audience-tab.active { background: var(--accent); color: white; }
body.dark .testimonial-feature {
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
body.dark .testimonial-feature::before {
  background: radial-gradient(700px 300px at 100% 0%, rgba(46, 134, 193,0.16), transparent 60%);
}
body.dark .tf-attrib .divider { background: var(--line); }
body.dark .integrations { background: var(--bg); }
body.dark img[alt="Xioma"] { filter: brightness(0) invert(1); }
body.dark .nav-logo img { filter: none; }
body.dark .foot-grid img { filter: brightness(0) invert(1); }
body.dark .product-sidebar button.active {
  background: var(--bg-2);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04);
}
body.dark .tk, body.dark .lead-card { background: var(--bg-2); }
body.dark .fleet-list { background: var(--bg-2); }
body.dark .van-pin { border-color: var(--bg-2); }
body.dark .table-view tr:hover td { background: var(--bg-2); }

/* ---------- Temperament: Editorial (serif italic accent) ---------- */
body.temperament-editorial .hero-h1 .accent,
body.temperament-editorial .section-head h2 .accent,
body.temperament-editorial .cta-block h2 .accent,
body.temperament-editorial .integrations h2 .accent,
body.temperament-editorial .tf-quote .h {
  font-family: "Newsreader", "Iowan Old Style", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}
body.temperament-editorial h1,
body.temperament-editorial h2 { font-weight: 400; letter-spacing: -0.035em; }
body.temperament-editorial .tf-quote { font-weight: 300; }

/* ---------- Temperament: Brutalist (uppercase, monochrome rigor) ---------- */
body.temperament-brutalist .hero-h1,
body.temperament-brutalist .section-head h2,
body.temperament-brutalist .cta-block h2,
body.temperament-brutalist .integrations h2 {
  text-transform: uppercase;
  letter-spacing: -0.025em;
  font-weight: 600;
  line-height: 0.95;
}
body.temperament-brutalist .hero-h1 .accent,
body.temperament-brutalist .section-head h2 .accent,
body.temperament-brutalist .cta-block h2 .accent,
body.temperament-brutalist .integrations h2 .accent {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
}
body.temperament-brutalist .tf-quote { text-transform: uppercase; font-weight: 500; letter-spacing: -0.015em; }
body.temperament-brutalist .tf-quote .h { color: var(--accent); }
body.temperament-brutalist .eyebrow { letter-spacing: 0.16em; }
body.temperament-brutalist .audience-tab { text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }
body.temperament-brutalist .outcome-metric { font-weight: 600; }
body.temperament-brutalist h3 { text-transform: uppercase; letter-spacing: -0.015em; font-weight: 500; }
body.temperament-brutalist .lead, body.temperament-brutalist .hero-sub { font-size: clamp(15px, 1.2vw, 18px); }

/* =====================================================
   MOBILE BREAKPOINT (≤ 560px) — phone-only refinements
   Additive: does not modify desktop/tablet rules above.
   ===================================================== */
@media (max-width: 560px) {
  :root {
    --pad-x: 16px;
  }

  /* Type — tighten oversized clamp() floors for phone widths */
  h1 { font-size: clamp(34px, 9vw, 44px); line-height: 1.02; }
  h2 { font-size: clamp(28px, 7.4vw, 36px); line-height: 1.06; }
  h3 { font-size: 19px; }
  .lead { font-size: 15px; }

  /* Nav — compact bar, hide brand stack already handled */
  .nav-inner { height: 68px; }
  .nav-logo { font-size: 15px; gap: 8px; }
  .nav-logo img { height: 52px; }
  .logo-mark { width: 20px; height: 20px; }
  .nav-cta { gap: 6px; }
  .nav-cta .btn { padding: 8px 12px; font-size: 13px; }
  .nav-cta .btn-ghost { display: none; }

  /* Buttons */
  .btn { padding: 11px 16px; font-size: 13px; }

  /* Hero */
  .hero { padding-top: 20px; padding-bottom: 28px; }
  .hero-h1 { min-height: 0; max-width: none; margin-bottom: 18px; }
  .hero-sub { min-height: 0; font-size: 15px; margin-bottom: 24px; }
  .hero-cta { gap: 8px; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }

  /* Reorder hero content on mobile so the product picture appears right after
     the CTA — solutions accordion drops below it.
     The text wrapper has no class; `display: contents` flattens it into the
     grid so we can `order` its children alongside the sibling product-frame. */
  .hero-grid > div:first-child { display: contents; }
  .hero-grid > div:first-child > .hero-h1 { order: 1; }
  .hero-grid > div:first-child > .hero-sub { order: 2; }
  .hero-grid > div:first-child > .hero-cta { order: 3; margin-bottom: 0; }
  .hero-grid > .product-frame { order: 4; margin-top: 4px; }
  .hero-grid > div:first-child > .solutions-split { order: 5; margin-top: 28px; }
  .hero-metrics {
    gap: 20px;
    padding-top: 22px;
    flex-wrap: wrap;
  }
  .hero-metric { flex: 1 1 40%; }
  .hero-metric .n { font-size: 24px; }
  .hero-brandline { gap: 6px; margin-bottom: 20px; }
  .hero-brand-tag,
  .hero-agents-pill { font-size: 10px; padding: 4px 9px; letter-spacing: 0.08em; }

  /* Audience tabs scroll already; tighten padding */
  .audience-tab { padding: 8px 14px; font-size: 12px; }

  /* Product preview — collapse sidebar so the email/list view fits */
  .product-frame { min-height: 0; }
  .product-body { grid-template-columns: 1fr; }
  .product-sidebar {
    display: none;
  }
  .product-chrome .addr { font-size: 10px; padding: 3px 8px; }

  /* Solutions split — vertical numbered accordion (no horizontal scroll).
     Overrides the @860px row-flex rule and hides the side detail panel
     in favor of inline per-item drawers rendered by app-v2.jsx. */
  .vsol-index,
  .vsol-chevron { display: inline-flex; }
  .vsol-panel { display: flex; }
  .vsol-panel[hidden] { display: none; }

  .solutions-split-list {
    flex-direction: column;
    overflow-x: visible;
    border-right: none;
    border-bottom: none;
    background: var(--bg);
  }
  .solutions-split-list .vsol {
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    border-right: none;
    border-bottom: 1px solid var(--line);
    background: var(--bg-soft);
  }
  .solutions-split-list .vsol:last-child { border-bottom: none; }
  .solutions-split-list .vsol-bar { display: none; }
  .solutions-split-list .vsol-index {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--mute-2);
  }
  .solutions-split-list .vsol-label {
    padding: 0;
    font-size: 14px;
    color: var(--ink-2);
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
    text-align: left;
  }
  .solutions-split-list .vsol-chevron {
    font-size: 22px;
    line-height: 1;
    color: var(--mute);
    transition: transform .25s ease, color .2s ease;
    width: 18px;
    text-align: center;
  }
  .solutions-split-list .vsol.mobile-open { background: var(--bg); }
  .solutions-split-list .vsol.mobile-open .vsol-index { color: var(--accent); }
  .solutions-split-list .vsol.mobile-open .vsol-label { color: var(--ink); font-weight: 600; }
  .solutions-split-list .vsol.mobile-open .vsol-chevron {
    transform: rotate(45deg);
    color: var(--accent);
  }

  .vsol-panel {
    padding: 14px 16px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .vsol-panel .ssd-sub {
    font-size: 14px;
    line-height: 1.5;
    color: var(--mute);
    margin: 0;
  }
  .vsol-panel .ssd-metrics {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--line-2);
    margin-top: 4px;
  }
  .vsol-panel .ssd-metric { display: flex; flex-direction: column; gap: 2px; }
  .vsol-panel .ssd-metric-n {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--ink);
  }
  .vsol-panel .ssd-metric-l {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mute);
  }

  /* Side detail panel is replaced by inline drawers on mobile */
  .solutions-split-detail { display: none; }

  /* Logo wall */
  .logo-marquee .lg-img { height: 56px; }
  .logo-marquee .lg-img img { max-height: 56px; max-width: 140px; }

  /* Sections — tighten vertical rhythm */
  section.section { padding: 32px 0; }
  .section-head { margin-bottom: 28px; }
  .cta-section { padding: 56px 0; }

  /* Outcomes */
  .outcome { padding: 24px; }

  /* Pillars */
  .pillar { padding: 24px; min-height: 0; }

  /* Customer carousel */
  .cc-grid { min-height: 0; gap: 24px; }
  .cc-portrait-wrap { min-height: 280px; }
  .cc-portrait-silhouette { font-size: 96px; }
  .cc-headline { font-size: 22px; margin-bottom: 14px; }
  .cc-body { font-size: 15px; margin-bottom: 20px; }
  .cc-footer { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cc-attrib { text-align: left; }

  /* Segments — already 1fr below 640px; reduce tile height */
  .seg { min-height: 220px; }
  .seg-content { padding: 22px 20px 20px; }
  .seg-content .seg-title { font-size: 19px; }

  /* Integrations */
  .integrations { padding-left: 0; padding-right: 0; }
  .int-cert { padding: 22px; }
  .int-tier-card { padding: 22px; }
  .int-card-logos { gap: 14px; }

  /* Agents */
  .agent-card-tile { padding: 20px; min-height: 0; }

  /* Testimonials */
  .t3 { padding: 22px; }

  /* CTA */
  .cta-actions { flex-direction: column; gap: 10px; width: 100%; }
  .cta-actions .btn { width: 100%; justify-content: center; }

  /* Footer */
  .foot-grid { grid-template-columns: 1fr; gap: 28px; margin-bottom: 36px; }
  .foot-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
  }
  .foot-bottom .right { flex-wrap: wrap; gap: 14px; }

  /* Section link connector — already height: 80 at 720; chip hidden */
  .section-link { height: 56px; }
}

/* Extra-narrow (≤ 380px) — protect against the smallest phones */
@media (max-width: 380px) {
  .hero-metric { flex: 1 1 100%; }
  .nav-cta .btn { padding: 7px 10px; font-size: 12px; }
  .audience-tab { padding: 7px 12px; font-size: 11px; }
}

/* ============================================================
   LEGAL PAGES — terms / privacy / security / gdpr
   ============================================================ */
.legal-meta {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
.legal-doc {
  max-width: 76ch;
}
.legal-draft-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--mute);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-left: 3px solid var(--accent);
  padding: 14px 18px;
  border-radius: var(--radius-md);
  margin-bottom: 28px;
}
.legal-sections {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.legal-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.legal-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.legal-section h2 {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.legal-paragraphs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.legal-paragraphs p {
  color: var(--mute);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}
.legal-contact {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--mute);
}
.legal-contact a {
  color: var(--accent);
  text-decoration: none;
}
.legal-contact a:hover { text-decoration: underline; }

/* ============================================================
   SEGMENT PAGES — passenger / trucks / motorcycle / agriculture /
   construction / marine
   Reuses page-hero, story-grid, story-card, facts-strip.
   Adds: hero image, modules 2-col grid, agents 3-col, related strip.
   ============================================================ */
.seg-hero-image {
  margin: 8px 0 32px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  aspect-ratio: 21 / 9;
}
.seg-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 720px) {
  .seg-hero-image { aspect-ratio: 16 / 10; }
}

.seg-section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: baseline;
  margin-bottom: 24px;
}
.seg-section-head h2 {
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.025em;
  font-weight: 500;
  margin: 10px 0 0;
  max-width: 28ch;
}
.seg-section-head .right {
  color: var(--mute);
  font-size: 15px;
  line-height: 1.55;
  max-width: 56ch;
  justify-self: end;
}
@media (max-width: 820px) {
  .seg-section-head { grid-template-columns: 1fr; }
  .seg-section-head .right { justify-self: start; }
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 8px;
}
@media (max-width: 820px) { .modules-grid { grid-template-columns: 1fr; } }
.module-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.module-card h3 {
  font-size: clamp(16px, 1.3vw, 19px);
  letter-spacing: -0.015em;
  font-weight: 500;
  margin: 0;
}
.module-card p {
  color: var(--mute);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

.agents-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 8px;
}
@media (max-width: 980px) { .agents-grid { grid-template-columns: 1fr; } }
.agent-card-seg {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.agent-card-seg .agent-id {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 99px;
  align-self: flex-start;
}
.agent-card-seg h3 {
  font-size: clamp(18px, 1.5vw, 22px);
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0;
}
.agent-card-seg p {
  color: var(--mute);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 8px;
}
@media (max-width: 980px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .related-grid { grid-template-columns: 1fr; } }
.related-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 18px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.related-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.related-card .arrow {
  font-family: var(--font-mono);
  color: var(--mute);
  transition: transform .18s ease, color .18s ease;
}
.related-card:hover .arrow {
  color: var(--accent);
  transform: translateX(2px);
}

.seg-cta {
  margin-top: 40px;
  padding: clamp(28px, 4vw, 48px);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
}
@media (max-width: 820px) {
  .seg-cta { grid-template-columns: 1fr; }
}
.seg-cta h2 {
  font-size: clamp(24px, 3vw, 38px);
  letter-spacing: -0.025em;
  font-weight: 500;
  margin: 10px 0 14px;
  max-width: 22ch;
}
.seg-cta h2 .accent { color: var(--accent); }
.seg-cta p {
  color: var(--mute);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  max-width: 56ch;
}
.seg-cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-self: end;
}
@media (max-width: 820px) {
  .seg-cta-actions { justify-self: start; }
}