/* ==========================================================================
   Wiztra Chat — Brand theme
   Derived from "WiztraChat Branding.pdf" (Wiztra-Brand-and-Specs/), folds 2–6.
   Fold 1 (logo / wordmark) is deliberately not implemented here.

   HOW TO USE
   Load this AFTER css/styles.css and after the page stylesheet:

     <link rel="stylesheet" href="https://cms.signityglobal.com/api/site-assets/serve?websiteId=cms8hd6fz004oo601dtj0h8qx&name=styles.css">
     <link rel="stylesheet" href="https://cms.signityglobal.com/api/site-assets/serve?websiteId=cms8hd6fz004oo601dtj0h8qx&name=home.css">
     <link rel="stylesheet" href="css/theme-brand.css">   <-- delete to revert

   Deleting that one line anywhere returns that page to the original gold theme.
   Nothing in the base stylesheets was thrown away.

   WHAT IT CHANGES
     1. All five colour ramps, from the brand book's hex values
     2. Manrope replaces Plus Jakarta Sans + Inter
     3. Border radii aligned to the 4 / 6 / 8 / 12 / 16 scale
     4. Gradient treatments applied broadly (buttons, banners, icon tiles,
        card accents, section bands, badges, footer)

   Hex values are converted to OKLCH components so existing rules that apply
   their own alpha — oklch(var(--primary-500c) / 0.12) — keep working.
   ========================================================================== */

/* Manrope is requested by a <link> in each page's <head>, not by @import here.
   An @import is only valid at the very top of a stylesheet, and cms-upload/
   concatenates several sheets into one <style> block — the import would land
   mid-block and be silently dropped. The <link> survives that transform and
   loads sooner besides. */

/* --------------------------------------------------------------------------
   1. COLOUR RAMPS
   -------------------------------------------------------------------------- */

:root {

  /* ---- Primary — fiery orange-red. Brand & CTA ---- */
  --primary-50c:  0.9678 0.0166 40.8;   /* #FFF1EC */
  --primary-100c: 0.9290 0.0381 42.4;   /* #FFE0D4 */
  --primary-200c: 0.8670 0.0760 44.0;   /* #FFC4AB */
  --primary-300c: 0.7977 0.1220 42.4;   /* #FFA27D */
  --primary-400c: 0.7383 0.1656 40.5;   /* #FF8152 */
  --primary-500c: 0.6956 0.2014 40.5;   /* #FF6522 */
  --primary-600c: 0.6270 0.1856 40.2;   /* #E05518 */
  --primary-700c: 0.5621 0.1677 40.5;   /* #C2480F */
  --primary-800c: 0.4853 0.1426 41.7;   /* #9E3B08 */
  --primary-900c: 0.4054 0.1163 43.3;   /* #7A2E04 */
  --primary-950c: 0.2969 0.0832 46.2;   /* #4D1C00 */

  /* ---- Accent — warm amber. Badges, stats, timeline markers ---- */
  --accent-50:  #FFF9EC;
  --accent-100: #FFEDCC;
  --accent-200: #FFDBA3;
  --accent-300: #FFC775;
  --accent-400: #F5B04C;
  --accent-500: #E89E2E;
  --accent-600: #CC861F;
  --accent-700: #A86D14;
  --accent-800: #85540C;
  --accent-900: #633D07;
  --accent-950: #3D2402;

  /* ---- Secondary — muted warm greys. Panels, filters, chips ---- */
  --secondary-50c: 0.9746 0.0051 67.8;   /* #F9F6F3 */
  --secondary-100c: 0.9423 0.0097 72.7;   /* #F0EBE5 */
  --secondary-200c: 0.8930 0.0157 67.6;   /* #E3DAD1 */
  --secondary-300c: 0.8291 0.0206 70.0;   /* #D0C5B9 */
  --secondary-400c: 0.7483 0.0248 69.5;   /* #B8AB9D */
  --secondary-500c: 0.6619 0.0252 65.3;   /* #9E9083 */
  --secondary-600c: 0.5810 0.0241 65.1;   /* #85786C */
  --secondary-700c: 0.4939 0.0220 62.1;   /* #6B5F55 */
  --secondary-800c: 0.4068 0.0189 54.5;   /* #524740 */
  --secondary-900c: 0.3237 0.0155 59.1;   /* #3A322C */
  --secondary-950c: 0.2405 0.0120 55.7;   /* #241E1A */

  /* ---- Background — layered warm whites. Canvas, cards, panels ---- */
  --background-50c: 0.9913 0.0029 84.6;   /* #FDFCFA */
  --background-100c: 0.9711 0.0074 80.7;   /* #F8F5F0 */
  --background-200c: 0.9415 0.0132 82.4;   /* #F0EBE2 */
  --background-300c: 0.9003 0.0196 80.1;   /* #E5DDD0 */
  --background-400c: 0.8422 0.0269 82.4;   /* #D4CAB8 */
  --background-500c: 0.7745 0.0309 80.6;   /* #C0B4A0 */
  --background-600c: 0.6863 0.0329 76.8;   /* #A69884 */
  --background-700c: 0.5964 0.0309 76.0;   /* #8A7D6B */
  --background-800c: 0.4946 0.0296 78.7;   /* #6B604F */
  --background-900c: 0.3891 0.0251 74.2;   /* #4D4336 */
  --background-950c: 0.2808 0.0167 74.9;   /* #2E2820 */

  /* ---- Foreground — neutral grey-black. Text, icons, contrast ---- */
  --foreground-50c: 0.9736 0.0017 67.8;   /* #F7F6F5 */
  --foreground-100c: 0.9408 0.0046 78.3;   /* #EDEBE8 */
  --foreground-200c: 0.8832 0.0076 80.7;   /* #DBD8D3 */
  --foreground-300c: 0.8036 0.0072 67.7;   /* #C2BEBA */
  --foreground-400c: 0.7023 0.0082 61.4;   /* #A39E9A */
  --foreground-500c: 0.6030 0.0085 61.4;   /* #85807C */
  --foreground-600c: 0.5030 0.0089 61.3;   /* #68635F */
  --foreground-700c: 0.4083 0.0073 59.5;   /* #4D4946 */
  --foreground-800c: 0.3152 0.0068 67.6;   /* #34312E */
  --foreground-900c: 0.2279 0.0049 67.6;   /* #1E1C1A */
  --foreground-950c: 0.1595 0.0045 84.6;   /* #0E0D0B */

  /* ---- The four brand gradients ---- */
  --grad-primary:       linear-gradient(135deg, #FF6522 0%, #EA3700 100%);
  --grad-primary-soft:  linear-gradient(135deg, #FFB899 0%, #F5704D 100%);
  --grad-faded:         linear-gradient(135deg, #FF8A5C 0%, #F04D1A 100%);
  --grad-deep:          linear-gradient(135deg, #E05518 0%, #B83300 100%);

  /* ---- Typography — Manrope throughout ---- */
  --font-heading: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-label:   'Manrope', system-ui, -apple-system, sans-serif;

  /* ---- Radii — brand scale ---- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;

  /* The warm-white canvas the brand book uses behind every page. */
  --footer-top:    #2E2820;
  --footer-bottom: #1A1613;
}

/* Manrope's lowercase runs a little wider than Plus Jakarta Sans; pulling the
   display tracking in slightly keeps the big headings from loosening. */
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.018em; }

body { background: var(--background-50); }

/* --------------------------------------------------------------------------
   2. GRADIENT TREATMENTS
   The brand book fills its primary controls with the gradient rather than a
   flat colour. These override the flat backgrounds set in the base sheets.
   -------------------------------------------------------------------------- */

/* ---- Buttons ---- */
.btn-primary {
  background: var(--grad-primary);
  box-shadow: 0 1px 3px oklch(var(--primary-500c) / 0.25);
}
.btn-primary:hover { background: var(--grad-deep); }

.btn-invert { background: var(--grad-primary); color: #fff; }

@keyframes btnPulse {
  0%, 100% { transform: translateY(0);     box-shadow: 0 1px 3px oklch(var(--primary-500c) / 0.25); }
  50%      { transform: translateY(-1px);  box-shadow: 0 6px 16px oklch(var(--primary-500c) / 0.35); }
}

/* ---- Shared CTA banner ---- */
.cta-card { background: var(--grad-primary); }
.cta-btn-light { color: var(--primary-600); }

/* ---- Home: plan cards ---- */
.plan-badge { background: var(--grad-primary); }
.plan-icon  { background: var(--grad-primary-soft); color: var(--primary-800); }
.plan-card:hover .plan-icon { background: var(--grad-faded); color: #fff; }
.plan-cta.btn-primary { background: var(--grad-primary); }
.post-cta { background: var(--grad-primary); }

/* ---- Home: the warm section band behind the pricing cards ---- */
.started {
  background: linear-gradient(160deg, #FFF1EC 0%, #FFE0D4 50%, #FFF6F1 100%);
  border-top-color: #FFC4AB;
  border-bottom-color: #FFC4AB;
}
.started-mesh {
  background-image:
    linear-gradient(oklch(var(--primary-500c) / 0.5) 1px, transparent 1px),
    linear-gradient(90deg, oklch(var(--primary-500c) / 0.5) 1px, transparent 1px);
}

/* ---- Home: rocket panel keeps its night sky, stars pick up the brand ---- */
.plan-star { background: oklch(var(--primary-400c) / 0.85); }
.plan-rocket i { color: oklch(var(--primary-400c)); }

/* ---- Pricing ---- */
.pr-cta-primary { background: var(--grad-primary); }
.pr-cta-primary:hover { background: var(--grad-deep); }
.pr-badge { background: var(--grad-primary); }
.pr-toggle-save { background: var(--grad-primary-soft); color: var(--primary-800); }
.pr-card-featured { border-color: var(--primary-300); }

/* ---- Resources ---- */
.res-tab.is-active { background: var(--grad-primary); }
/* The lime "Read More" chip is not in the brand palette. It was first mapped to
   the accent ramp, but accent is a golden amber and read as leftover gold — so
   it takes the primary gradient like every other card CTA. */
.res-more {
  background: var(--grad-primary);
  color: #fff;
}
.res-card:hover .res-more { background: var(--grad-deep); }
.res-more i { color: #fff; }
.res-hero { background: linear-gradient(180deg, #2E2820 0%, #3A322C 55%, #241E1A 100%); }

/* ---- Features ---- */
.feat-pill.is-active { background: var(--grad-primary); }

/* ---- ROI calculator ---- */
.roi-bar-support { background: var(--grad-primary); }
.roi-bar-revenue { background: var(--grad-faded); }
.roi-recalc:hover { background: var(--grad-primary-soft); }

/* ---- Solutions ---- */
.sol-bullet-icon { background: var(--grad-primary-soft); }
.sol-bullet-icon i { color: var(--primary-800); }

/* ---- Pills and badges ---- */
.pill-light { background: var(--grad-primary-soft); border-color: var(--primary-300); }
.pill-light span { color: var(--primary-900); }
.pill-light i { color: var(--primary-700); }

/* ---- Footer ---- */
.site-footer { border-top: 2px solid transparent; border-image: var(--grad-primary) 1; }
.footer-social:hover {
  background: oklch(var(--primary-500c) / 0.18);
  border-color: oklch(var(--primary-500c) / 0.35);
  color: var(--primary-400);
}

/* --------------------------------------------------------------------------
   3. RADII
   The base sheets use a rounder, softer scale than the brand book. These pull
   the most visible surfaces onto the 12 / 16px steps.
   -------------------------------------------------------------------------- */

.btn            { border-radius: var(--radius-xl); }
.plan-card,
.pr-card,
.roi-card,
.res-card,
.ct-card,
.sol-shot,
.roi-field,
.roi-breakdown  { border-radius: var(--radius-2xl); }

.ct-input,
.ct-textarea,
.res-tab,
.feat-pill,
.pr-cta,
.res-more       { border-radius: var(--radius-xl); }

.plan-icon,
.sol-bullet-icon,
.mega-card-icon,
.drop-item-icon { border-radius: var(--radius-lg); }

/* --------------------------------------------------------------------------
   4. PALETTES THE FIRST PASS MISSED

   Three groups of colour never went through the primary ramp, so overriding it
   left them on the old scheme:
     a) the AI Workforce fold's own --wf-* tokens (gold + cool Tailwind greys)
     b) the .theme-* agent/solution swatches (Tailwind amber/rose/emerald/sky)
     c) the dark navy section bands (#1A2332 / #0F1729)
   -------------------------------------------------------------------------- */

/* ---- a) AI Workforce fold (home fold 3) ----
   Gold becomes brand orange; the cool Tailwind greys become the warm
   Background/Foreground ramps. Success green is kept: the brand book's alert
   row uses a green success state, so it is intentional, not a leftover. */
:root {
  --wf-gold:         #FF6522;   /* was #E4AC00 */
  --wf-gold-light:   #FFF1EC;   /* was #FDF6E3 */
  --wf-border:       #F0EBE2;   /* was #E8E8E8, cool grey */
  --wf-gray-text:    #68635F;   /* was #6B7280, cool grey */
  --wf-dark-text:    #1E1C1A;   /* was #111827, cool near-black */
  /* --wf-green* deliberately unchanged */
}

.agents  { background: var(--background-50); }
.wf-head { background: var(--background-100); }   /* was #FAFAFA */
.wf-dot  { background: var(--background-100); }   /* was #F3F4F6 */

/* The workforce card's gold chip reads better on the brand orange as a
   gradient, matching the other pill treatments. */
.wf-badge { background: var(--grad-primary-soft); color: var(--primary-900); }
.wf-badge-dot,
.wf-head-icon { background: var(--grad-primary); }

/* ---- b) Agent / solution swatches ----
   The brand is a warm monochrome system, so the original cool hues have no
   equivalent. These four still need to read as *different* agents, so rather
   than flattening them all to orange they are spread across the warm ramps:
   golden amber, brand orange, warm grey, and deep burnt orange. */
.theme-amber   { background: var(--accent-100);    color: var(--accent-700); }
.theme-rose    { background: var(--primary-100);   color: var(--primary-600); }
.theme-emerald { background: var(--secondary-100); color: var(--secondary-700); }
.theme-sky     { background: var(--primary-200);   color: var(--primary-900); }
.theme-violet  { background: var(--accent-200);    color: var(--accent-900); }
.theme-orange  { background: var(--primary-50);    color: var(--primary-500); }

/* ---- c) Dark section bands ----
   Warm near-black from the Background ramp, replacing the blue-black. Applies
   to the home page's pain-points, capabilities, impact, final-CTA and live
   product bands, and to the How-It-Works band on features.html. */
.pains,
.caps,
.impact,
.final-cta,
.hiw {
  background: linear-gradient(160deg, #2E2820 0%, #1A1613 50%, #2E2820 100%);
}
.lpe-intel {
  background: linear-gradient(160deg, #2E2820 0%, #1A1613 100%);
}

/* ---- d) Cool-hue leftovers ----
   A handful of rules were authored in violet (hue 290) and cool blue-grey
   (hues 260–270) rather than the warm palette. On the gold theme they passed as
   near-neutral; against brand orange they read visibly cold. */

/* Home: the glow behind the floating workspace mock was violet. */
.workspace-glow {
  background: radial-gradient(ellipse 60% 50% at 50% 50%,
              oklch(var(--primary-500c) / 0.12) 0%, transparent 70%);
}

/* Features hero wash. */
.feat-hero {
  background: linear-gradient(180deg,
              var(--background-50) 0%, #FFFDFB 50%, var(--background-100) 100%);
}

/* Cool blue-grey borders on the industries carousel. */
.industries-carousel { border-color: oklch(var(--primary-200c) / 0.4); }
.industries-arrow    { border-color: oklch(var(--primary-200c) / 0.6); }

/* The rocket panel's night sky and the orbit panel's fill. */
.plan-visual-rocket { background: #241E1A; }
.plan-moon {
  background: linear-gradient(180deg,
              oklch(0.24 0.012 56 / 0), oklch(0.20 0.010 56 / 0.8));
}
.plan-visual-enterprise { background: var(--background-100); }

/* Features: How-It-Works step chrome was cool blue-grey on the dark band. */
.hiw-step-bar   { background: oklch(0.26 0.014 56); }
.hiw-step-num   { color: oklch(0.52 0.012 56); }
.hiw-step-title { color: oklch(0.62 0.012 56); }

/* Footer wordmark fallback tile — currently unused markup, kept in sync so it
   is not a violet surprise if the <img> lockup is ever swapped for it. */
.footer-logo-mark { color: var(--primary-400); }

/* ---- Exit-intent popup ----
   css/exit-popup.css is byte-identical in both builds, so it is styled from the
   shared tokens and picks up the orange ramp automatically. Only two things
   need the brand's opinion applied on top. */

/* The reference design ran gold into a green. Against the brand orange that is
   a large hue jump, so the header takes the brand gradient instead — the same
   fill as every other primary CTA on this build. To restore the green accent,
   delete this rule and the shared sheet's orange-to-green gradient returns. */
.exitpop-head { background: var(--grad-primary); }

/* Brand radius scale: 16px cards, 12px controls. */
.exitpop-card  { border-radius: var(--radius-2xl); }
.exitpop-input { border-radius: var(--radius-xl); }

/* ---- e) Semantics that were borrowing the amber ramp ----
   The gold theme had no red, so error states were coloured from the Accent
   ramp. Accent is a golden amber in the brand book — legitimate for badges and
   stats, but wrong for a failure, and it reads as leftover gold. The brand's
   alert row specifies a red error state; these use the same red the site
   already uses for its error cards. */
.form-status[data-state='error'] { color: #DC2626; }
.ct-req { color: #DC2626; }
