/* ============================================================
   StackRoom brand reskin — brand red + soft red-tinted neutrals.
   Scoped to .stackroom-page so it never affects other product pages.
   Palette: primary #dc2626 (product brand red), dark #b91c1c/#991b1b/#7f1d1d,
   accent #f4b740 (amber, unchanged), tints #fef2f2/#fdeaea, dark #1a0f0f/#241414.
   Re-skinned from warm orange to red on 08-09-2026 at the product team's request.
   The variable block sets the theme tokens; the generated rules below
   remap every hardcoded green/teal in product-layout.css to the red palette.
   ============================================================ */

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

/* Product-suite "Coming soon" badge -> red tint on the StackRoom page */
.stackroom-page .vocso-related-products .product-soon-badge {
  background: #fcdcdc;
  color: #7f1d1d;
}

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

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

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

.stackroom-page .industry-icon {
  color: #dc2626;
}

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

.stackroom-page .stack-table tbody tr:hover {
  background: rgba(244, 183, 64, 0.08);
}

.stackroom-page .genai-related-links a:hover .explore-btn {
  color: #f4b740;
}

.stackroom-page .cta-card {
  background: radial-gradient(at 0% 0%, rgba(220, 38, 38, 0.20) 0%, transparent 50%), radial-gradient(at 100% 100%, rgba(127, 29, 29, 0.10) 0%, transparent 55%), #fef2f2;
}

.stackroom-page .cta-eyebrow {
  background: rgba(127, 29, 29, 0.10);
}

.stackroom-page .related-intro-card {
  background: radial-gradient(circle at 20% 95%, rgba(244, 183, 64, 0.95) 0 18%, transparent 18.5%), linear-gradient(145deg, #991b1b 0%, #991b1b 100%);
  box-shadow: 0 20px 48px rgba(127, 29, 29, 0.24);
}

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

.stackroom-page .intro-circle {
  background: rgba(244, 183, 64, 0.84);
}

.stackroom-page .service-icon {
  box-shadow: 0 10px 24px rgba(127, 29, 29, 0.08);
}

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

.stackroom-page .industry-visual-bg {
  background:
        radial-gradient(circle at 30% 30%, rgba(244, 183, 64, 0.32), transparent 34%),
        radial-gradient(circle at 75% 45%, rgba(220, 38, 38, 0.22), transparent 36%),
        linear-gradient(135deg, rgba(127, 29, 29, 0.5), #020202 62%);
}

.stackroom-page .banner-wrap {
  background: radial-gradient(at 15% 20%, rgb(220 38 38 / 25%) 0px, transparent 50%), radial-gradient(at 85% 25%, rgb(220 38 38 / 25%) 0px, transparent 45%), radial-gradient(at 50% 90%, rgba(220, 38, 38, .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 red was
   only 2.8:1, which is harder to read than the dark text it replaced. */
.stackroom-page .datasense-trust-badge__label {
  background: #b91c1c;
}

.stackroom-page .datasense-trust-badge__arrow {
  color: #991b1b;
}

.stackroom-page .datasense-section-badge {
  border: 1px solid rgba(127, 29, 29, 0.16);
  color: #991b1b;
  box-shadow: 0 10px 28px rgba(127, 29, 29, 0.06);
}

.stackroom-page .datasense-feature-icon {
  background: #fef2f2;
  color: #991b1b;
}

.stackroom-page .datasense-feature-card:nth-child(2) .datasense-feature-icon {
  color: #7f1d1d;
}

.stackroom-page .ds-usecases-section {
  background: rgba(248, 113, 113, 0.34);
}

.stackroom-page .ds-usecases-header span {
  color: #991b1b;
}

.stackroom-page .ds-status-pill span {
  background: linear-gradient(135deg, #dc2626, #991b1b);
}

.stackroom-page .ds-compare-row.active {
  background: #fef2f2;
}

.stackroom-page .ds-line-chart span {
  background: linear-gradient(90deg, #991b1b, #dc2626);
}

.stackroom-page .ds-inventory-item span {
  background: #fef2f2;
}

.stackroom-page .ds-forecast-visual {
  background:
        radial-gradient(circle at 80% 25%, rgba(127, 29, 29, 0.14), transparent 34%),
        #ffffff;
}

.stackroom-page .ds-forecast-bars span {
  background: linear-gradient(180deg, #dc2626, #991b1b);
}

.stackroom-page .sales-star {
  color: #dc2626;
}

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

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

.stackroom-page .ds-query-box {
  color: #dc2626;
}

.stackroom-page .ds-outcome-box {
  border: 1px solid rgba(127, 29, 29, 0.08);
}

.stackroom-page .ds-outcome-box:hover {
  box-shadow: 0 18px 45px rgba(127, 29, 29, 0.1);
}

.stackroom-page .ds-outcome-icon {
  box-shadow: inset 0 0 0 1px rgba(127, 29, 29, 0.06);
}

.stackroom-page .outcome-speed h3,
.stackroom-page .outcome-cost h3,
.stackroom-page .outcome-accuracy h3 {
  color: #b91c1c;
}

.stackroom-page .outcome-sql h3 {
  color: #b91c1c;
}

.stackroom-page .outcome-sql .ds-outcome-icon {
  color: #991b1b;
}

.stackroom-page .ds-outcomes-btn:hover {
  background: #991b1b;
}

.stackroom-page .compare-col-left {
  background: rgb(248 113 113 / 15%);
}

.stackroom-page .compare-col-head {
  border-bottom: 1px solid rgba(127, 29, 29, 0.08);
}

.stackroom-page .compare-col-head-green {
  color: #dc2626;
}

.stackroom-page .head-icon-green {
  color: #991b1b;
  box-shadow: 0 6px 18px rgba(127, 29, 29, 0.08);
}

.stackroom-page .compare-cell {
  border-bottom: 1px solid rgba(127, 29, 29, 0.08);
}

.stackroom-page .compare-cell-left {
  border-color: rgba(127, 29, 29, 0.08);
}

.stackroom-page .feature-cell {
  border-bottom: 1px solid rgba(127, 29, 29, 0.08);
}

.stackroom-page .feature-icon {
  color: #f87171;
  box-shadow: 0 8px 20px rgba(127, 29, 29, 0.08);
}

.stackroom-page .ds-query-box {
  color: #dc2626;
}

.stackroom-page .v3-content {
  box-shadow: 0 18px 45px rgba(127, 29, 29, 0.08);
}

.stackroom-page .v3-content strong {
  border: 1px solid rgba(185, 28, 28, .3);
  color: #b91c1c;
}

.stackroom-page .v3-chip-row span {
  color: #b91c1c;
  border: 1px solid rgba(185, 28, 28, .3);
}

.stackroom-page .v3-insight-card {
  background: radial-gradient(circle at 10% 15%, rgba(220, 38, 38, 0.16), transparent 28%), linear-gradient(339deg, #dc2626 0%, #f87171 100%);
  box-shadow: 0 26px 70px rgba(127, 29, 29, 0.24);
}

.stackroom-page .gcard .tag {
  color: #b91c1c;
}

.stackroom-page .enclave-badge {
  background: #f87171;
}

.stackroom-page .gcard .ic {
  color: #b91c1c;
}

.stackroom-page .gcard .tag {
  border: 1px solid rgba(185, 28, 28, .3);
}

.stackroom-page .gengine {
  background: linear-gradient(160deg, #b91c1c, #2a0e0e);
  border: 1px solid rgba(248, 113, 113, .4);
}

.stackroom-page .gengine::before {
  background: radial-gradient(80% 60% at 50% 0%, rgba(248, 113, 113, .25), transparent 60%);
}

.stackroom-page .genguine-number {
  color: #b91c1c;
}

.stackroom-page .gengine .shield {
  background: rgba(248, 113, 113, .16);
  border: 1px solid rgba(248, 113, 113, .4);
}

.stackroom-page .gengine p {
  color: #f8dcdc;
}

.stackroom-page .gengine .retention {
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, .5);
  background: rgba(248, 113, 113, .12);
}

.stackroom-page p.lbl span {
  color: #b91c1c;
}

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


/* ============================================================
   Manual section-background overrides (win over generated rules)
   ============================================================ */

/* Problem-section insight card -> deeper, premium brand red */
.stackroom-page .v3-insight-card {
  background: radial-gradient(circle at 12% 15%, rgba(244, 183, 64, 0.20), transparent 30%), linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

/* Product-preview feature card -> light red tint (was light green #eef4f0) */
.stackroom-page .datasense-feature-card {
  background: #fdf0f0;
}
/* Dark mode: card -> neutral dark (overrides the light tint above) */
.darkmode .stackroom-page .datasense-feature-card {
  background: var(--color-neutral-dark);
}

/* Dark mode: use-cases section -> theme secondary (not the light red tint) */
.darkmode .stackroom-page .ds-usecases-section {
  background: var(--color-secondary);
}

/* Dark mode: compare highlighted column -> theme border (not the light red tint) */
.darkmode .stackroom-page .compare-col-left {
  background: var(--color-border);
}

/* Dark mode: compare/feature row divider lines -> theme grey (not the faint red border) */
.darkmode .stackroom-page .feature-cell,
.darkmode .stackroom-page .compare-cell,
.darkmode .stackroom-page .compare-cell-left,
.darkmode .stackroom-page .compare-col-head {
  border-bottom: 1px solid #35383c;
}

/* Outcomes ("Real impact, zero fluff") band -> light red tint (was var(--color-secondary-light) green) */
.stackroom-page .ds-outcomes-section {
  background: #fdeaea;
}
/* Dark mode: outcomes band -> theme secondary */
.darkmode .stackroom-page .ds-outcomes-section {
  background: var(--color-secondary);
}

/* Dark mode: CTA card -> original dark near-black gradient */
.darkmode .stackroom-page .cta-card {
  background: radial-gradient(at 0% 0%, rgba(95, 163, 133, 0.20) 0%, transparent 50%), radial-gradient(at 100% 100%, rgba(35, 73, 62, 0.10) 0%, transparent 55%), #000;
}

/* Hero secondary button: on hover the border -> theme secondary (base border stays brand red) */
.stackroom-page .btn-proposal.secondary-btn:hover {
  border: 2px solid var(--color-secondary) !important;
}

/* Primary "Start Free" button in dark mode: brand red by default (theme would fill it
   green, so force red for a clean fill+border), then green fill + green border on hover. */
/* Start Free button — same in light & dark:
   DEFAULT = red fill + red border; HOVER = green fill + green border. */
body.stackroom-page .speedupmysite-btn {
  background-color: #dc2626 !important;
  border: 2px solid #dc2626 !important;
}
body.stackroom-page .speedupmysite-btn:hover {
  background-color: var(--color-secondary) !important;
  border: 2px solid var(--color-secondary) !important;
}

/* "How It Thinks" methodology: process numbers (01/02/03) + eyebrow -> brand red (were var(--color-secondary-dark) green) */
.stackroom-page .process-number,
.stackroom-page .ai-process-eyebrow {
  color: #b91c1c;
}

/* "Enterprise-Grade Security Architecture" (topology) band -> light red tint (was var(--color-secondary-light) green) */
.stackroom-page .topology {
  background: #fdeaea;
}
/* Dark mode: topology band -> theme black */
.darkmode .stackroom-page .topology {
  background: var(--color-black-fixed);
}

/* Security-architecture engine card: "02" index -> visible amber on the dark red card */
.stackroom-page .genguine-number {
  color: #f4b740;
}

/* "Empower every department" active/hover tab label -> brand red (was var(--color-secondary-dark) green) */
.stackroom-page #tab-ceo:checked~.ds-dept-tabs label[for="tab-ceo"],
.stackroom-page #tab-sales:checked~.ds-dept-tabs label[for="tab-sales"],
.stackroom-page #tab-finance:checked~.ds-dept-tabs label[for="tab-finance"],
.stackroom-page #tab-hr:checked~.ds-dept-tabs label[for="tab-hr"],
.stackroom-page #tab-procurement:checked~.ds-dept-tabs label[for="tab-procurement"],
.stackroom-page #tab-support:checked~.ds-dept-tabs label[for="tab-support"],
.stackroom-page .ds-dept-tabs label:hover {
  color: #b91c1c;
}

/* Insight-card progress bars -> red dark->light gradient (were green/blue theme vars) */
.stackroom-page .v3-progress div:nth-child(1) span { background: #1a0f0f; }
.stackroom-page .v3-progress div:nth-child(2) span { background: #7f1d1d; }
.stackroom-page .v3-progress div:nth-child(3) span { background: #fdeaea; color: #7f1d1d; }
.stackroom-page .v3-progress div:nth-child(4) span { background: #fef2f2; color: #b91c1c; }
.stackroom-page .v3-progress div:nth-child(5) span { background: #f4b740; color: #1a0f0f; }

/* ============================================================
   StackRoom mark now stands in for the generic bullet icon.
   product-layout.css 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 -- so the mark always keeps
   its own colours. Matching on the filename keeps it safe everywhere.
   ============================================================ */
.stackroom-page img[src*="stackroom-short-logo"] {
  filter: none;
}

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