/* "Living System" visual theme — homepage only (loaded by index.html alone, after site.css).
   Every rule here either (a) redefines a :root token that site.css's shared component classes
   already build on, so cards/pills/buttons/nav/footer/compare-table reskin themselves for free,
   or (b) patches the small number of hardcoded (non-token) colors in site.css that would otherwise
   stay indigo/cool-white against this warm palette. No shared component class is redefined here —
   nothing in this file touches any OTHER page, since only index.html links it. */

:root{
  --bg:            #FAF6EE;
  --bg-alt:        #F1E9DA;
  --bg-dark:       #1D1815;
  --bg-dark-alt:   #241E19;
  --ink:           #211D1A;
  --ink-soft:      #6B625A;
  --ink-faint:     #9B9187;
  --line:          rgba(33,29,26,0.10);
  --line-dark:     rgba(255,255,255,0.12);
  --white:         #FFFFFF;

  --accent:        #FF5A3C;
  --accent-ink:    #C23F26;
  --accent-soft:   #FFE7E1;
  --accent-glow:   rgba(255,90,60,0.30);
  --green:         #0C9C8B;
  --green-soft:    #DFF5F1;

  --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --shadow-sm: 0 3px 10px rgba(76,50,30,0.07);
  --shadow-md: 0 14px 34px rgba(76,50,30,0.10);
  --shadow-lg: 0 26px 60px rgba(76,50,30,0.14);
  --shadow-glow: 0 12px 40px var(--accent-glow);
}

/* Hardcoded colors in site.css that don't derive from a token: */
nav.site-nav::before{ background:rgba(250,246,238,0.82); }
.section-dark .eyebrow{ color:#7FD9CC; }
.chat-head .ch-sub{ color:#FFD7CC; }
.cell.us{ background:rgba(255,90,60,0.05); }
.pill.green{ color:#0A7A6E; }

/* ---- Desktop layout: left-aligned, not centered-in-a-narrow-column ---- */
.hero{ text-align:left; background:
    radial-gradient(ellipse 800px 500px at 15% -10%, var(--accent-soft) 0%, transparent 60%),
    radial-gradient(ellipse 700px 500px at 90% 20%, var(--green-soft) 0%, transparent 60%);
}
.hero-head{ margin:0; }
.hero .cta-row{ justify-content:flex-start; }
.hero .lede{ margin-left:0; margin-right:0; text-align:left; }

/* site.css's .wrap-narrow centers itself (margin:0 auto) as a 760px reading column — on a wide
   desktop that leaves every section intro floating as a narrow island with huge empty gutters on
   both sides, instead of using the screen. Anchoring it to the left edge of the page (matching the
   three section intros — pillars/platform/comparison — that already override this inline) lets the
   page use the available width instead of shrinking to the same fixed block regardless of
   viewport. Paragraph line-length inside stays readable either way, since the 760px cap is
   unchanged — only the block's own position moves. */
.wrap-narrow{ margin-left:0; margin-right:0; }