/* ============================================================
   PeopleGrid brand reskin — orange accent + navy ink.
   Scoped to .peoplegrid-page so it never affects other product pages.
   Palette: primary #f45f0f, primary-dark #c2410c, burnt #9a3412,
   light #f78c4a, navy ink #110d30 / #1e1b3f, blue accent #1e29c2.
   The generated block below remaps every hardcoded green/teal in
   product-layout.css; the manual block at the end wins over it.
   ============================================================ */

/* NOTE: no global --color-* variable overrides — those cascade into shared
   components (footer, buttons) and cause unintended colour spread. All
   PeopleGrid colours below are explicit, section-scoped rules only. */

/* RULE OF THUMB: orange is an ACCENT — buttons, numbers, icons, small
   highlights. Large section bands stay neutral grey, never washed orange. */

/* Product-suite "Coming soon" badge -> warm tint on the PeopleGrid page */
.peoplegrid-page .vocso-related-products .product-soon-badge {
  background: #fdeee4;
  color: #9a3412;
}

/* ---- generated hardcoded-colour overrides ---- */

body.peoplegrid-page .speedupmysite-btn {
  border: 2px solid #f45f0f !important;
  background: #f45f0f url(../images/white-next-arrow.svg) no-repeat;
}

.peoplegrid-page .btn-proposal.secondary-btn {
  border: 2px solid #f45f0f !important;
}

.peoplegrid-page .industry-icon {
  color: #f45f0f;
}

.darkmode .peoplegrid-page .tech-item:hover {
  border-color: #f45f0f;
}

.peoplegrid-page .vocso-stack-card:hover .vocso-toggle-btn {
  background: #110d30 url(../images/white-next-arrow.svg) no-repeat;
}

.peoplegrid-page .stack-table tbody tr:hover {
  background: rgba(30, 41, 194, 0.08);
}

.peoplegrid-page .genai-related-links a:hover .explore-btn {
  color: #1e29c2;
}

.peoplegrid-page .home-expand-card-main {
  border: 2px solid rgb(30 41 194/ 26%);
}

.peoplegrid-page .plus-icon {
  background: rgb(30 41 194/ 13%);
}

.darkmode .peoplegrid-page .cta-card {
  background: radial-gradient(at 0% 0%, rgba(247, 140, 74, 0.20) 0%, transparent 50%), radial-gradient(at 100% 100%, rgba(30, 27, 63, 0.10) 0%, transparent 55%), #000;
}

.darkmode .peoplegrid-page .cta-eyebrow {
  background: rgb(30 27 63);
}

.peoplegrid-page .cta-card {
  background: radial-gradient(at 0% 0%, rgba(247, 140, 74, 0.20) 0%, transparent 50%), radial-gradient(at 100% 100%, rgba(30, 27, 63, 0.10) 0%, transparent 55%), #fdeee4;
}

.peoplegrid-page .cta-eyebrow {
  background: rgba(30, 27, 63, 0.10);
}

.peoplegrid-page .related-intro-card {
  background: radial-gradient(circle at 20% 95%, rgba(30, 41, 194, 0.95) 0 18%, transparent 18.5%), linear-gradient(145deg, #110d30 0%, #110d30 100%);
  box-shadow: 0 20px 48px rgba(30, 41, 194, 0.24);
}

.peoplegrid-page .intro-pattern {
  background-image: radial-gradient(#1e29c2 1.7px, transparent 1.7px);
}

.peoplegrid-page .intro-circle {
  background: rgba(30, 41, 194, 0.84);
}

.peoplegrid-page .service-icon {
  box-shadow: 0 10px 24px rgba(30, 41, 194, 0.08);
}

.peoplegrid-page .dot-pattern.blue {
  background-image: radial-gradient(#1e29c2 1.5px, transparent 1.5px);
}

.peoplegrid-page .industry-visual-bg {
  background: radial-gradient(circle at 30% 30%, rgba(30, 41, 194, 0.32), transparent 34%),
        radial-gradient(circle at 75% 45%, rgba(253, 58, 48, 0.22), transparent 36%),
        linear-gradient(135deg, rgba(30, 41, 194, 0.5), #020202 62%);
}

.peoplegrid-page .case-study-card .content .see-case-study {
  color: #f78c4a;
}

.peoplegrid-page .route-link {
  color: #f78c4a;
}

.peoplegrid-page .agentic-techstack-bg {
  background: linear-gradient(90deg, rgba(30, 41, 194, 0.06) 1px, transparent 1px),
        linear-gradient(rgba(253, 58, 48, 0.045) 1px, transparent 1px);
}

.peoplegrid-page .banner-wrap {
  background: radial-gradient(at 15% 20%, rgb(244 95 15/ 25%) 0px, transparent 50%), radial-gradient(at 85% 25%, rgb(244 95 15/ 25%) 0px, transparent 45%), radial-gradient(at 50% 90%, rgba(247, 140, 74, .12) 0px, transparent 95%), #ffffff;
}

/* The 'New' pill now carries white text (set in product-layout.css), so the
   background moves to the dark brand shade -- white on the mid orange was
   only 2.8:1, which is harder to read than the dark text it replaced. */
.peoplegrid-page .datasense-trust-badge__label {
  background: #c2410c;
}

.peoplegrid-page .datasense-trust-badge__arrow {
  color: #110d30;
}

.peoplegrid-page .datasense-section-badge {
  border: 1px solid rgba(17, 13, 48, 0.16);
  color: #110d30;
  box-shadow: 0 10px 28px rgba(17, 13, 48, 0.06);
}

.peoplegrid-page .datasense-feature-icon {
  background: #fdeee4;
  color: #110d30;
}

.peoplegrid-page .datasense-feature-card:nth-child(2) .datasense-feature-icon {
  background: #eef0fb;
  color: #1e1b3f;
}

.peoplegrid-page .ds-usecases-section {
  background: rgba(247, 140, 74, 0.34);
}

.peoplegrid-page .ds-usecases-header span {
  color: #110d30;
}

.peoplegrid-page .ds-status-pill span {
  background: linear-gradient(135deg, #fd3a30, #110d30);
}

.peoplegrid-page .ds-compare-row.active {
  background: #fdeee4;
}

.peoplegrid-page .ds-growth-pill {
  background: #fbdcc9;
}

.peoplegrid-page .ds-line-chart span {
  background: linear-gradient(90deg, #110d30, #fd3a30);
}

.peoplegrid-page .ds-inventory-item span {
  background: #fdeee4;
}

.peoplegrid-page .ds-forecast-visual {
  background: radial-gradient(circle at 80% 25%, rgba(17, 13, 48, 0.14), transparent 34%),
        #ffffff;
}

.peoplegrid-page .ds-forecast-bars span {
  background: linear-gradient(180deg, #fd3a30, #110d30);
}

.peoplegrid-page .ghost-comparison-table th,
.peoplegrid-page .ghost-comparison-table td {
  border-right: 1px solid #e6e8f7;
  border-bottom: 1px solid #e6e8f7;
}

.peoplegrid-page .yes-icon {
  background: #f45f0f;
}

.peoplegrid-page .sales-star {
  color: #f45f0f;
}

.peoplegrid-page .sales-video-card {
  background: radial-gradient(at 15% 20%, rgb(244 95 15/ 25%) 0px, transparent 50%), radial-gradient(at 85% 25%, rgb(244 95 15/ 25%) 0px, transparent 45%), radial-gradient(at 50% 90%, rgba(247, 140, 74, .12) 0px, transparent 95%), #ffffff;
}

.peoplegrid-page .sales-play-btn span {
  border-left: 18px solid #f45f0f;
}

.peoplegrid-page .health-art .dash-card {
  background: linear-gradient(#fff, #fdf3ec),
        radial-gradient(circle at 18% 30%, #1e29c2, transparent 20%);
}

.peoplegrid-page .health-art .dash-card::before {
  background: #fbe5d6;
  border: 4px solid #1e29c2;
}

.peoplegrid-page .health-art .dash-card::after {
  background: repeating-linear-gradient(180deg, #1e29c2 0 5px, transparent 5px 14px);
}

.peoplegrid-page .ds-dept-header span {
  color: #f45f0f;
}

.peoplegrid-page .ds-query-box {
  color: #f45f0f;
}

.peoplegrid-page .ds-outcome-box {
  border: 1px solid rgba(17, 13, 48, 0.08);
}

.peoplegrid-page .ds-outcome-box:hover {
  box-shadow: 0 18px 45px rgba(17, 13, 48, 0.1);
}

.peoplegrid-page .ds-outcome-icon {
  box-shadow: inset 0 0 0 1px rgba(17, 13, 48, 0.06);
}

.peoplegrid-page .outcome-speed h3,
.peoplegrid-page .outcome-cost h3,
.peoplegrid-page .outcome-accuracy h3 {
  color: #9a3412;
}

.peoplegrid-page .outcome-sql h3 {
  color: #9a3412;
}

.peoplegrid-page .outcome-sql .ds-outcome-icon {
  color: #110d30;
}

.peoplegrid-page .ds-outcomes-btn:hover {
  background: #110d30;
}

.peoplegrid-page .compare-col-left {
  background: rgb(247 140 74/ 15%);
}

.peoplegrid-page .compare-col-head {
  border-bottom: 1px solid rgba(17, 13, 48, 0.08);
}

.peoplegrid-page .compare-col-head-green {
  color: #f45f0f;
}

.peoplegrid-page .head-icon-green {
  color: #110d30;
  box-shadow: 0 6px 18px rgba(17, 13, 48, 0.08);
}

.peoplegrid-page .compare-cell {
  border-bottom: 1px solid rgba(17, 13, 48, 0.08);
}

.peoplegrid-page .compare-cell-left {
  border-color: rgba(17, 13, 48, 0.08);
}

.peoplegrid-page .status-green {
  color: #c2410c;
}

.peoplegrid-page .feature-cell {
  border-bottom: 1px solid rgba(17, 13, 48, 0.08);
}

.peoplegrid-page .feature-icon {
  color: #f78c4a;
  box-shadow: 0 8px 20px rgba(17, 13, 48, 0.08);
}

.peoplegrid-page .v3-content {
  box-shadow: 0 18px 45px rgba(17, 13, 48, 0.08);
}

.peoplegrid-page .v3-content strong {
  border: 1px solid rgba(194, 65, 12, .3);
  color: #c2410c;
}

.peoplegrid-page .v3-chip-row span {
  color: #c2410c;
  border: 1px solid rgba(194, 65, 12, .3);
}

.darkmode .peoplegrid-page .v3-chip-row span,
.darkmode .peoplegrid-page .v3-content strong {
  background: rgb(194 65 12/ 23%);
}

.peoplegrid-page .v3-insight-card {
  background: radial-gradient(circle at 10% 15%, rgba(253, 58, 48, 0.16), transparent 28%), linear-gradient(339deg, #f45f0f 0%, #f78c4a 100%);
  box-shadow: 0 26px 70px rgba(17, 13, 48, 0.24);
}

.peoplegrid-page .gcard .tag {
  color: #c2410c;
}

.peoplegrid-page .enclave-badge {
  background: #f78c4a;
}

.peoplegrid-page .gcard .ic {
  color: #9a3412;
}

.peoplegrid-page .gcard .tag {
  border: 1px solid rgba(194, 65, 12, .3);
}

.peoplegrid-page .gengine {
  background: linear-gradient(160deg, #9a3412, #0c0920);
  border: 1px solid rgba(247, 140, 74, .4);
}

.peoplegrid-page .gengine::before {
  background: radial-gradient(80% 60% at 50% 0%, rgba(247, 140, 74, .25), transparent 60%);
}

.peoplegrid-page .genguine-number {
  color: #c2410c;
}

.peoplegrid-page .gengine .shield {
  background: rgba(247, 140, 74, .16);
  border: 1px solid rgba(247, 140, 74, .4);
}

.peoplegrid-page .gengine p {
  color: #fbdcc9;
}

.peoplegrid-page .gengine .retention {
  color: #f78c4a;
  border: 1px solid rgba(247, 140, 74, .5);
  background: rgba(247, 140, 74, .12);
}

.peoplegrid-page p.lbl span {
  color: #c2410c;
}

.peoplegrid-page .glasswrap>.gcol:first-of-type::after,
.peoplegrid-page .glasswrap>.gcol:last-of-type::before {
  background: radial-gradient(circle at 5px 50%, rgba(194, 65, 12, .95) 2.6px, transparent 3px);
}

.darkmode .peoplegrid-page .glasswrap>.gcol:first-of-type::after,
.darkmode .peoplegrid-page .glasswrap>.gcol:last-of-type::before {
  background-image: radial-gradient(circle at 5px 50%, rgba(247, 140, 74, .95) 2.6px, transparent 3px);
}



/* ============================================================
   Manual overrides (win over the generated rules above)
   ============================================================ */

/* ---- Large section bands: NEUTRAL, not orange ---- */

/* "Everything PeopleGrid Handles" band (was a green wash) */
.peoplegrid-page .ds-usecases-section {
  background: #f5f6f8;
}
.darkmode .peoplegrid-page .ds-usecases-section {
  background: var(--color-secondary);
}

/* "Real impact, zero fluff" band (was var(--color-secondary-light) green) */
.peoplegrid-page .ds-outcomes-section {
  background: #f5f6f8;
}
.darkmode .peoplegrid-page .ds-outcomes-section {
  background: var(--color-secondary);
}

/* "Enterprise-Grade Security Architecture" band (was var(--color-secondary-light) green) */
.peoplegrid-page .topology {
  background: #f5f6f8;
}
.darkmode .peoplegrid-page .topology {
  background: var(--color-black-fixed);
}

/* FAQ section: left at its default theme colours on purpose — never reskin the FAQ. */

/* Product-preview cards: neutral */
.peoplegrid-page .datasense-feature-card {
  background: #f7f8fa;
}
.darkmode .peoplegrid-page .datasense-feature-card {
  background: var(--color-neutral-dark);
}

/* Hero + demo-video glow: warm on both sides, the same shape StackRoom uses.
   The right-hand glow used to be the blue accent and the bottom one navy — at
   12% and 6% over white both just read as grey, so the frame looked washed out
   down the right-hand side. */
.peoplegrid-page .banner-wrap,
.peoplegrid-page .sales-video-card {
  background: radial-gradient(at 15% 20%, rgba(244, 95, 15, .25) 0px, transparent 50%),
        radial-gradient(at 85% 25%, rgba(244, 95, 15, .25) 0px, transparent 45%),
        radial-gradient(at 50% 90%, rgba(247, 140, 74, .12) 0px, transparent 95%), #ffffff;
}

/* CTA card: near-neutral with a faint warm glow (was a green wash) */
.peoplegrid-page .cta-card {
  background: radial-gradient(at 0% 0%, rgba(244, 95, 15, .12) 0%, transparent 50%),
        radial-gradient(at 100% 100%, rgba(30, 41, 194, .08) 0%, transparent 55%), #f8f8fa;
}
.darkmode .peoplegrid-page .cta-card {
  background: radial-gradient(at 0% 0%, rgba(244, 95, 15, .16) 0%, transparent 50%),
        radial-gradient(at 100% 100%, rgba(30, 41, 194, .10) 0%, transparent 55%), #000;
}

/* Comparison board: only the PeopleGrid column keeps a light warm tint */
.peoplegrid-page .compare-col-left {
  background: rgba(244, 95, 15, .07);
}
.darkmode .peoplegrid-page .compare-col-left {
  background: var(--color-border);
}
.darkmode .peoplegrid-page .feature-cell,
.darkmode .peoplegrid-page .compare-cell,
.darkmode .peoplegrid-page .compare-cell-left,
.darkmode .peoplegrid-page .compare-col-head {
  border-bottom: 1px solid #35383c;
}

/* Industry accordion: left at its original theme colours on purpose. */

/* ---- Deliberate brand surfaces (the two "hero" cards) ---- */

/* Problem-section insight card: stays light orange end-to-end so the dark
   copy on BOTH sides reads (a navy end made the right-hand text disappear) */
.peoplegrid-page .v3-insight-card {
  background: radial-gradient(circle at 10% 15%, rgba(30, 41, 194, .14), transparent 30%),
        linear-gradient(339deg, #ef5a0c 0%, #f79040 100%);
}

/* Insight-card progress bars -> navy to orange scale */
.peoplegrid-page .v3-progress div:nth-child(1) span { background: #110d30; color: #fff; }
.peoplegrid-page .v3-progress div:nth-child(2) span { background: #2b2456; color: #fff; }
.peoplegrid-page .v3-progress div:nth-child(3) span { background: #fbdcc9; color: #9a3412; }
.peoplegrid-page .v3-progress div:nth-child(4) span { background: #fdeee4; color: #c2410c; }
.peoplegrid-page .v3-progress div:nth-child(5) span { background: #ffffff; color: #110d30; }

/* Security-architecture engine card -> navy (was burnt-orange from the generator),
   with its "02" index in a visible light orange */
.peoplegrid-page .gengine {
  background: linear-gradient(160deg, #1e1b3f, #0c0920);
}
.peoplegrid-page .genguine-number {
  color: #f78c4a;
}

/* Methodology arc -> navy, not green */
.peoplegrid-page .ai-process-card .intro-arc {
  border-color: #1e1b3f;
}

/* ---- Orange accents: numbers, eyebrows, icons, small highlights ---- */

.peoplegrid-page .process-number,
.peoplegrid-page .ai-process-eyebrow,
.peoplegrid-page .cta-eyebrow,
.peoplegrid-page .deploy-sym-v3-matrix span {
  color: #c2410c;
}

.peoplegrid-page .cta-content h4 {
  color: #110d30;
}

/* "Empower every department" active/hover tab label */
.peoplegrid-page #tab-ceo:checked~.ds-dept-tabs label[for="tab-ceo"],
.peoplegrid-page #tab-sales:checked~.ds-dept-tabs label[for="tab-sales"],
.peoplegrid-page #tab-finance:checked~.ds-dept-tabs label[for="tab-finance"],
.peoplegrid-page #tab-hr:checked~.ds-dept-tabs label[for="tab-hr"],
.peoplegrid-page #tab-procurement:checked~.ds-dept-tabs label[for="tab-procurement"],
.peoplegrid-page #tab-support:checked~.ds-dept-tabs label[for="tab-support"],
.peoplegrid-page .ds-dept-tabs label:hover {
  color: #c2410c;
}

/* ---- Buttons ---- */

/* Methodology CTA buttons (background shorthand carries the arrow image, so
   only the colour is overridden) */
/* NOTE: .primary-cta (the "Book Your PeopleGrid Pilot" button in the closing CTA)
   is deliberately NOT recoloured — it stays the default theme colour. */
.peoplegrid-page .cta-primary {
  background-color: #f45f0f;
}
.peoplegrid-page .cta-secondary {
  color: #c2410c;
  border: 1px solid #c2410c;
}
.peoplegrid-page .cta-secondary:hover {
  background: #c2410c;
}

/* Hero buttons — identical in light and dark:
   DEFAULT = orange fill + orange border; HOVER = darker orange. */
body.peoplegrid-page .speedupmysite-btn {
  background-color: #f45f0f !important;
  border: 2px solid #f45f0f !important;
}
body.peoplegrid-page .speedupmysite-btn:hover {
  background-color: #c2410c !important;
  border: 2px solid #c2410c !important;
}
.peoplegrid-page .btn-proposal.secondary-btn {
  border: 2px solid #f45f0f !important;
}
.peoplegrid-page .btn-proposal.secondary-btn:hover {
  border: 2px solid #c2410c !important;
}

/* Dark mode: keep the CTA card heading + secondary button readable on the dark card */
.darkmode .peoplegrid-page .cta-content h4 {
  color: #ffffff;
}
.darkmode .peoplegrid-page .cta-secondary {
  color: #f78c4a;
  border: 1px solid #f78c4a;
}
.darkmode .peoplegrid-page .cta-secondary:hover {
  background: #c2410c;
}

/* THE PEOPLEGRID MARK ALWAYS RENDERS IN ITS OWN COLOURS, wherever it appears.
   The template recolours bullet icons to green with
   .process-points li img { filter: brightness(0) ... hue-rotate(101deg) },
   which would flatten the logo into a green blob. Matching on the filename
   keeps the logo safe in every section, now and in future. */
.peoplegrid-page img[src*="peoplegrid-mark"] {
  filter: none;
}

/* Methodology bullets: the mark needs a touch more room than the 12px notch icon
   it replaced, otherwise the ring is unreadable. Scoped to .ai-process-card so the
   industry-accordion bullets (black-tick-arrow.svg) keep their original treatment. */
.peoplegrid-page .ai-process-card .process-points li img {
  width: 16px;
}