/* ============================================================
   StackRoom brand reskin — light, warm-orange + cream.
   Scoped to .stackroom-page so it never affects other product pages.
   Palette from stackroom.io: primary #f97316, primary-dark #ea580c,
   accent #f4b740, warm cream #f4ece4/#fbf5ee, warm dark #17110d/#201811.
   The variable block sets the theme tokens; the generated rules below
   remap every hardcoded green/teal in product-layout.css to the warm 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 -> warm tint on the StackRoom page */
.stackroom-page .vocso-related-products .product-soon-badge {
  background: #fbe7d1;
  color: #7a3a12;
}

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

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

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

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

.stackroom-page .vocso-stack-card:hover .vocso-toggle-btn {
  background: #b5450c 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(249, 115, 22, 0.20) 0%, transparent 50%), radial-gradient(at 100% 100%, rgba(122, 58, 18, 0.10) 0%, transparent 55%), #fbf1e8;
}

.stackroom-page .cta-eyebrow {
  background: rgba(122, 58, 18, 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, #b5450c 0%, #b5450c 100%);
  box-shadow: 0 20px 48px rgba(122, 58, 18, 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(122, 58, 18, 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(253, 58, 48, 0.22), transparent 36%),
        linear-gradient(135deg, rgba(122, 58, 18, 0.5), #020202 62%);
}

.stackroom-page .banner-wrap {
  background: radial-gradient(at 15% 20%, rgb(249 115 22 / 25%) 0px, transparent 50%), radial-gradient(at 85% 25%, rgb(249 115 22 / 25%) 0px, transparent 45%), radial-gradient(at 50% 90%, rgba(249, 115, 22, .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. */
.stackroom-page .datasense-trust-badge__label {
  background: #c2410c;
}

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

.stackroom-page .datasense-section-badge {
  border: 1px solid rgba(122, 58, 18, 0.16);
  color: #b5450c;
  box-shadow: 0 10px 28px rgba(122, 58, 18, 0.06);
}

.stackroom-page .datasense-feature-icon {
  background: #fbf1e8;
  color: #b5450c;
}

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

.stackroom-page .ds-usecases-section {
  background: rgba(244, 162, 89, 0.34);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.stackroom-page .compare-col-left {
  background: rgb(244 162 89 / 15%);
}

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

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

.stackroom-page .head-icon-green {
  color: #b5450c;
  box-shadow: 0 6px 18px rgba(122, 58, 18, 0.08);
}

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

.stackroom-page .compare-cell-left {
  border-color: rgba(122, 58, 18, 0.08);
}

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

.stackroom-page .feature-icon {
  color: #f4a259;
  box-shadow: 0 8px 20px rgba(122, 58, 18, 0.08);
}

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

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

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

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

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

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

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

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

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

.stackroom-page .gengine {
  background: linear-gradient(160deg, #c2410c, #2b1508);
  border: 1px solid rgba(244, 162, 89, .4);
}

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

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

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

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

.stackroom-page .gengine .retention {
  color: #f4a259;
  border: 1px solid rgba(244, 162, 89, .5);
  background: rgba(244, 162, 89, .12);
}

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

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


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

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

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

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

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

/* Dark mode: compare/feature row divider lines -> theme grey (not the faint warm 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 warm peach (was var(--color-secondary-light) green) */
.stackroom-page .ds-outcomes-section {
  background: #fbeee1;
}
/* 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 orange) */
.stackroom-page .btn-proposal.secondary-btn:hover {
  border: 2px solid var(--color-secondary) !important;
}

/* Primary "Start Free" button in dark mode: orange by default (theme would fill it
   green, so force orange for a clean fill+border), then green fill + green border on hover. */
/* Start Free button — same in light & dark:
   DEFAULT = orange fill + orange border; HOVER = green fill + green border. */
body.stackroom-page .speedupmysite-btn {
  background-color: #f97316 !important;
  border: 2px solid #f97316 !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 -> warm (were var(--color-secondary-dark) green) */
.stackroom-page .process-number,
.stackroom-page .ai-process-eyebrow {
  color: #c2410c;
}

/* "Enterprise-Grade Security Architecture" (topology) band -> light warm (was var(--color-secondary-light) green) */
.stackroom-page .topology {
  background: #fbeee1;
}
/* 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 warm-dark card */
.stackroom-page .genguine-number {
  color: #f4b740;
}

/* "Empower every department" active/hover tab label -> warm (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: #c2410c;
}

/* Insight-card progress bars -> warm dark->light gradient (were green/blue theme vars) */
.stackroom-page .v3-progress div:nth-child(1) span { background: #17110d; }
.stackroom-page .v3-progress div:nth-child(2) span { background: #7a3a12; }
.stackroom-page .v3-progress div:nth-child(3) span { background: #fbeee1; color: #7a3a12; }
.stackroom-page .v3-progress div:nth-child(4) span { background: #fdf1e5; color: #c2410c; }
.stackroom-page .v3-progress div:nth-child(5) span { background: #f4b740; color: #17110d; }

/* ============================================================
   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;
}