/* ============================================================
   Segmental — "Partner Kit" theme
   Navy + orange look from the Segmental x Virtusa partner kit.

   Loaded AFTER each page's own styles, so it only re-points the
   existing design tokens and restyles a few shared components.
   Remove this one <link> to roll back to the previous theme.

   Approach:
   - Light body for long-form reading, with navy text and accents.
   - Navy "bands" (nav, hero, stats, CTA, footer) re-scope the same
     tokens, so every component inside them flips automatically.
   ============================================================ */

:root {
  /* Kit palette */
  --kit-navy: #1d2c69;
  --kit-navy-deep: #141f52;   /* cards on navy */
  --kit-navy-ink: #131b3f;    /* body text on light */
  --kit-lavender: #d2d7f4;    /* arcs, secondary text on navy */
  --kit-lavender-tint: #eef0fb;
  --kit-orange: #f1a139;      /* the one warm accent */
  --kit-orange-deep: #d9871f;

  /* Light surfaces (index.html token names) */
  --surface-canvas: #ffffff;
  --surface-elevated: #f5f6fc;
  --surface-tint: #eef0fb;
  --surface-divider: #e6e9f6;
  --surface-rule: #d9ddf0;

  --ink-primary: var(--kit-navy-ink);
  --ink-secondary: #3a4470;
  --ink-tertiary: #5d6690;
  --ink-faint: #9aa1c4;

  --accent: var(--kit-navy);
  --accent-deep: var(--kit-navy-deep);
  --accent-soft: #8e99d6;
  --accent-tint: var(--kit-lavender-tint);
  --highlight: var(--kit-orange);

  /* Same values under the token names styles.css uses (other pages) */
  --paper-canvas: var(--surface-canvas);
  --paper-elevated: var(--surface-elevated);
  --paper-tint: var(--surface-tint);
  --paper-divider: var(--surface-divider);
  --paper-rule: var(--surface-rule);
  --oxblood: var(--accent);
  --oxblood-deep: var(--accent-deep);
  --oxblood-soft: var(--accent-soft);
  --oxblood-tint: var(--accent-tint);

  /* One clean sans family, like the kit */
  --font-serif: 'Noto Sans', 'Manrope', system-ui, -apple-system, sans-serif;
  --font-sans: 'Noto Sans', 'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono: 'Noto Sans', 'Manrope', system-ui, sans-serif;

  --kit-radius: 10px;
}

/* ---------- Navy bands: re-scope tokens ---------- */
.ds-nav,
.ds-nav-mobile-sheet,
.v2h-hero,
.sol-hero,
.page-header,
.sol-demo-section,
.ds-stats-band,
.v2-cta,
.ds-footer {
  --surface-canvas: var(--kit-navy);
  --surface-elevated: var(--kit-navy-deep);
  --surface-tint: #24357a;
  --surface-divider: rgba(210, 215, 244, 0.14);
  --surface-rule: rgba(210, 215, 244, 0.22);
  --paper-canvas: var(--surface-canvas);
  --paper-elevated: var(--surface-elevated);
  --paper-tint: var(--surface-tint);
  --paper-divider: var(--surface-divider);
  --paper-rule: var(--surface-rule);

  --ink-primary: #ffffff;
  --ink-secondary: var(--kit-lavender);
  --ink-tertiary: #aeb6e2;
  --ink-faint: #7f89c0;

  --accent: var(--kit-orange);
  --accent-deep: var(--kit-orange);
  --accent-soft: var(--kit-orange);
  --accent-tint: rgba(241, 161, 57, 0.14);
  --oxblood: var(--accent);
  --oxblood-deep: var(--accent-deep);
  --oxblood-soft: var(--accent-soft);
  --oxblood-tint: var(--accent-tint);

  background: var(--kit-navy);
  color: #ffffff;
}

body { background: var(--surface-canvas); }

/* ---------- Type ---------- */
body { font-size: 16.5px; line-height: 1.65; }

.ds-display,
.ds-headline,
.ds-section-title,
.ds-pilot-headline,
.ds-footer-wordmark,
h1, h2 {
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ds-display { line-height: 1.06; }
.ds-headline, .ds-section-title { line-height: 1.16; }
h3 { font-weight: 600; }

/* Kicker: letter-spaced caps like the kit's "THE PROBLEM" */
.ds-kicker,
.doc-section-num,
.v2-specimen-bar,
.v2-specimen-label,
.ds-stat-label {
  letter-spacing: 0.16em;
  font-weight: 500;
}
.ds-kicker, .doc-section-num { color: var(--ink-tertiary); }
.ds-kicker-dot { background: var(--kit-orange); }

/* Orange emphasis, as in "only the exceptions" */
.kit-em { color: var(--kit-orange); }

/* ---------- Nav ---------- */
.ds-nav { border-bottom: 1px solid rgba(210, 215, 244, 0.12); }
.ds-nav-mark,
.ds-footer-mark { filter: brightness(0) invert(1); }
.ds-nav-wordmark { font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.ds-nav-link, .ds-nav-mega-trigger { color: var(--kit-lavender); }
.ds-nav-link:hover, .ds-nav-mega-trigger:hover,
.ds-nav-link.is-active { color: #fff; }
.ds-nav-mega-panel {
  border-radius: var(--kit-radius);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(8, 12, 40, 0.35);
}

/* ---------- Buttons ---------- */
.ds-btn-primary,
.ds-btn-secondary {
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 13px 22px;
}
.ds-btn-primary {
  background: var(--kit-orange);
  border-color: var(--kit-orange);
  color: var(--kit-navy-ink);
}
.ds-btn-primary:hover,
.ds-btn-primary:focus-visible {
  background: var(--kit-orange-deep);
  border-color: var(--kit-orange-deep);
  color: var(--kit-navy-ink);
}
.ds-btn-secondary {
  background: transparent;
  color: var(--ink-primary);
  border-color: var(--surface-rule);
}
.ds-btn-secondary:hover { border-color: var(--ink-primary); }

/* ---------- Hero with the kit's arc motif ---------- */
.v2h-hero {
  position: relative;
  overflow: hidden;
  padding-bottom: var(--sp-air-1);
}
.v2h-hero::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -180px;
  width: 760px;
  height: 760px;
  pointer-events: none;
  opacity: 0.9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke-linecap='round'%3E%3Cpath d='M300 52 A170 170 0 1 0 300 348' stroke='%23f1a139' stroke-width='9'/%3E%3Cpath d='M290 92 A132 132 0 1 0 290 308' stroke='%23d2d7f4' stroke-width='9' opacity='.55'/%3E%3Cpath d='M278 130 A96 96 0 1 0 278 270' stroke='%23d2d7f4' stroke-width='9' opacity='.45'/%3E%3Cpath d='M262 166 A60 60 0 1 0 262 234' stroke='%23d2d7f4' stroke-width='9' opacity='.35'/%3E%3C/svg%3E") no-repeat center / contain;
}
.v2h-hero-inner { position: relative; z-index: 1; }
.v2h-hero .ds-body-lead { color: var(--kit-lavender); }

/* ---------- Cards / specimens ---------- */
.v2-specimen,
.ds-pilot-kit,

.v2-case {
  border-radius: var(--kit-radius);
  overflow: hidden;
}
.v2h-hero .v2-specimen {
  background: var(--kit-navy-deep);
  box-shadow: 0 24px 60px rgba(6, 10, 40, 0.35);
}
.v2h-hero .v2h-context-item { background: var(--kit-navy-deep); }
.v2h-hero .v2-specimen-foot { background: rgba(241, 161, 57, 0.10); }
.v2h-hero .v2-specimen-note { color: #fff; }

/* Light-section cards get a soft lavender frame */
.doc-section .v2-specimen { border-color: var(--surface-rule); }
.v2-specimen-list--connected .v2-specimen-list-icon { color: var(--kit-navy); }

/* Step lists: kit-style numbered feel via orange icons */
.sol-step-icon { color: var(--kit-orange); }

/* ---------- Stats band ---------- */
.ds-stats-band { border: 0; }
.ds-stat { border-top-color: rgba(241, 161, 57, 0.6); }
.ds-stat-figure { color: #fff; font-weight: 700; }
.ds-stat-label { color: var(--kit-lavender); }

/* ---------- CTA ---------- */
.v2-cta { border-top: 0; }
.ds-pilot-kit {
  background: var(--kit-navy-deep);
  border: 1px solid rgba(210, 215, 244, 0.18);
}

/* ---------- Footer ---------- */
.ds-footer { border-top: 1px solid rgba(210, 215, 244, 0.12); }
.ds-footer-nav a { color: var(--kit-lavender); }
.ds-footer-nav a:hover { color: var(--kit-orange); }

/* ---------- Selection ---------- */
::selection { background: rgba(241, 161, 57, 0.35); }

/* Keep the arcs clear of the headline on small screens */
@media (max-width: 1023px) {
  .v2h-hero::before { width: 420px; height: 420px; top: -150px; right: -220px; opacity: 0.45; }
}

/* ---------- Inner-page heroes (sol-hero, page-header) ---------- */
.sol-hero,
.page-header {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
}
.sol-hero::before,
.page-header::before {
  content: "";
  position: absolute;
  top: -160px;
  right: -260px;
  width: 640px;
  height: 640px;
  pointer-events: none;
  opacity: 0.5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke-linecap='round'%3E%3Cpath d='M300 52 A170 170 0 1 0 300 348' stroke='%23f1a139' stroke-width='9'/%3E%3Cpath d='M290 92 A132 132 0 1 0 290 308' stroke='%23d2d7f4' stroke-width='9' opacity='.55'/%3E%3Cpath d='M278 130 A96 96 0 1 0 278 270' stroke='%23d2d7f4' stroke-width='9' opacity='.45'/%3E%3Cpath d='M262 166 A60 60 0 1 0 262 234' stroke='%23d2d7f4' stroke-width='9' opacity='.35'/%3E%3C/svg%3E") no-repeat center / contain;
}
.sol-hero > *,
.page-header > * { position: relative; z-index: 1; }
/* Product mock cards inside a navy hero */
.sol-hero [class*="specimen"],
.sol-hero [class*="console"],
.sol-hero [class*="mock"] { border-radius: var(--kit-radius); }

.sol-demo-section { border-top: 0; }

/* ============================================================
   Platform layer stack ("five-layer cake")
   Applications on top, data at the base; widths step out
   toward the base, as in the partner kit.
   ============================================================ */
.kit-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 16px;
  margin-top: var(--sp-2xl);
  max-width: 1040px;
}
.kit-stack-layers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.kit-layer {
  --inset: 0px;
  margin-inline: var(--inset);
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 16px 20px;
  border-radius: var(--kit-radius);
  background: var(--kit-navy-deep);
  border: 1px solid rgba(210, 215, 244, 0.16);
  color: #fff;
}
.kit-layer:nth-child(1) { --inset: 64px; }
.kit-layer:nth-child(2) { --inset: 48px; }
.kit-layer:nth-child(3) { --inset: 32px; }
.kit-layer:nth-child(4) { --inset: 16px; }
.kit-layer-num {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kit-lavender);
  opacity: 0.85;
}
.kit-layer-name {
  display: block;
  margin-top: 2px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}
.kit-layer-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--kit-lavender);
}
.kit-layer--ip {
  background: #24357a;
  border: 1.5px solid var(--kit-orange);
}
.kit-layer--ip .kit-layer-num { color: var(--kit-orange); opacity: 1; }
.kit-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kit-chips li {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(210, 215, 244, 0.12);
  border: 1px solid rgba(210, 215, 244, 0.22);
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
}
.kit-stack-rails {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kit-rail {
  flex: 1;
  padding: 16px 18px;
  border-radius: var(--kit-radius);
  border: 1.5px dashed rgba(210, 215, 244, 0.45);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.kit-rail b { font-size: 15px; color: #fff; }
.kit-rail span { font-size: 13px; line-height: 1.45; color: var(--kit-lavender); }

@media (max-width: 860px) {
  .kit-stack { grid-template-columns: minmax(0, 1fr); }
  .kit-layer { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .kit-layer:nth-child(n) { --inset: 0px; }
  .kit-chips li { white-space: normal; }
  .kit-stack-rails { flex-direction: row; flex-wrap: wrap; }
  .kit-rail { flex: 1 1 200px; }
}

/* Platform header: let the stack use the full content width */
.page-header-inner--stack { grid-template-columns: 200px minmax(0, 1fr) !important; }
@media (max-width: 1023px) { .page-header-inner--stack { grid-template-columns: 1fr !important; } }
.kit-layer--apps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.kit-layer--apps .kit-layer-name { display: inline; margin-left: 10px; }
.kit-layer--apps .kit-layer-num { display: inline; }
@media (max-width: 1023px) {
  .sol-hero::before, .page-header::before { width: 380px; height: 380px; top: -170px; right: -220px; opacity: 0.35; }
}