/* === FirstCoreAI — Site stylesheet ===
   Design language: Sync evo (dark, near-black, hairline borders, glass surfaces,
   gold/lime/orange accents, eyebrow + two-tone headline pattern).
*/

:root {
  /* === FirstCoreAI brand tokens — single source of truth === */
  --bg-navy:        #0A1330;   /* primary page background — deep navy */
  --panel-navy:     #12204A;   /* cards, panels, raised surfaces */
  --panel-navy-alt: #0F1C42;   /* gradient bands, alt section backgrounds, fields */
  --accent-teal:    #2DD4BF;   /* primary accent — links, icons, headings, CTAs */
  --accent-amber:   #F4B740;   /* secondary accent — stats, highlights (sparingly) */
  --text-white:     #FFFFFF;   /* headings */
  --text-muted:     #9FB0D0;   /* body & secondary text (8.4:1 on bg-navy) */

  /* derived accent states — kept on-palette */
  --accent-teal-hover: #5FE3D1;                  /* lighter teal — hover/active */
  --accent-teal-soft:  rgba(45, 212, 191, 0.10); /* teal glow / wash */
  --accent-amber-soft: rgba(244, 183, 64, 0.08); /* amber glow / wash */
  --on-accent:         var(--bg-navy);           /* text on teal/amber fills */

  /* === Semantic aliases → brand tokens (usage stays declarative) === */
  /* surfaces */
  --background:  var(--bg-navy);
  --card:        var(--panel-navy);
  --elevated:    var(--panel-navy);
  --muted:       var(--panel-navy-alt);

  /* text */
  --foreground:       var(--text-white);
  --muted-foreground: var(--text-muted);
  --text-dim:         var(--text-muted);   /* body copy */
  --text-faint:       #8496BC;             /* micro-labels — AA-safe on panels (5.3:1) */

  /* lines / glass — blue-tinted hairlines over navy */
  --border:      rgba(159, 176, 208, 0.16);
  --border-soft: rgba(159, 176, 208, 0.10);
  --glass-fill:  var(--panel-navy);
  --field-fill:  var(--panel-navy-alt);

  /* accents — mapped to the two brand accents */
  --brand:   var(--accent-teal);    /* primary — CTAs, links, eyebrows, focus, bullets */
  --orange:  var(--accent-teal);    /* feature / section titles → teal */
  --lime:    var(--accent-amber);   /* stats & single-highlight callouts (sparingly) */
  --success: var(--accent-teal);
  --info:    #2b7bb9;
  --error:   #f87171;               /* functional error red (semantic, off-brand by design) */
  --ring:    var(--accent-teal);

  /* radii */
  --radius:        10px;
  --radius-card:   14px;
  --radius-pill:   9999px;

  /* type */
  --font-sans:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Instrument Serif", Georgia, serif;
  --font-mono:    ui-monospace, "JetBrains Mono", "Menlo", monospace;

  /* motion */
  --ease:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 120ms;
  --t-base: 240ms;
  --t-slow: 600ms;

  /* layout */
  --container: 1200px;
}

/* === Reset === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  /* Safety net, not a fix. Anything wider than the viewport stretches the layout
     viewport on a phone, which scales the *whole page* up — that is how the
     header used to break every page at 360px, not just its own row. Chase real
     overflows; this only stops one from disfiguring the site.
     `clip` rather than `hidden`: `hidden` makes body a scroll container and
     silently kills the sticky header. */
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* === Layout helpers === */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 96px 0; }

@media (max-width: 720px) {
  section { padding: 64px 0; }
}

.section-narrow {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}

.row-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

@media (max-width: 880px) {
  .row-2col { grid-template-columns: 1fr; gap: 32px; }
}

/* === Eyebrow label === */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand) 70%, transparent);
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: color-mix(in srgb, var(--brand) 70%, transparent);
}

/* === Headings === */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--foreground);
}

.display {
  font-size: clamp(40px, 7vw, 76px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.h2 {
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--orange);
  margin-bottom: 8px;
}

/* Accent words inside headings — teal so amber stays a punctuation colour */
.acc-gold  { color: var(--accent-teal); }
.acc-lime  { color: var(--accent-teal); }
.acc-orange { color: var(--accent-teal); }

/* Support copy under a heading */
.support {
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1.55;
  max-width: 60ch;
  margin-top: 20px;
}

p { color: var(--foreground); }

.muted { color: var(--muted-foreground); }
.dim   { color: var(--text-dim); }

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
  white-space: nowrap;
  line-height: 1;
}

.btn-primary {
  background: var(--brand);
  color: var(--on-accent);
}
.btn-primary:hover { background: var(--accent-teal-hover); }

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: rgba(255,255,255,0.6);
  font-weight: 600;
}
.btn-ghost:hover {
  border-color: rgba(255,255,255,0.4);
  color: var(--foreground);
}

.btn .arrow { display: inline-block; transition: transform var(--t-fast) var(--ease); }
.btn:hover .arrow { transform: translateX(2px); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--foreground);
  font-weight: 600;
  font-size: 14px;
}
.text-link:hover { color: var(--brand); }

/* === Pills / tags === */
.pill-tag {
  display: inline-block;
  background: var(--field-fill);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-size: 12px;
  color: var(--muted-foreground);
}

/* === Site header === */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 19, 48, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}

.site-header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand img { height: 26px; width: auto; }

.primary-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}

.primary-nav a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  padding: 8px 12px;
  border-radius: var(--radius);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.primary-nav a:hover {
  color: var(--foreground);
  background: var(--glass-fill);
}
.primary-nav a.active {
  color: var(--foreground);
}

/* Lives inside .primary-nav but is phone-only: below 640px the header bar drops
   its "Book a Demo" button (no room beside the logo and Menu), so the CTA has to
   reappear somewhere the nav still reaches. Hidden at every other width to avoid
   showing the same CTA twice. */
.nav-cta { display: none; }

.header-spacer { flex: 1; }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--foreground);
  border-radius: var(--radius);
  padding: 8px 10px;
  cursor: pointer;
}

@media (max-width: 980px) {
  .primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px 16px;
    gap: 2px;
    background: rgba(10, 19, 48, 0.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-soft);
  }
  .primary-nav.open { display: flex; }
  .primary-nav a { padding: 12px 14px; }
  .nav-toggle { display: inline-flex; }
  .site-header { position: sticky; }
  .site-header-inner { position: relative; gap: 16px; }
}

/* The header bar neither wraps nor shrinks — .btn is nowrap and the logo is a
   fixed-ratio PNG — so it demands a flat minimum width. With the CTA still in the
   bar that minimum measured 461px, and since an overflow *widens the mobile
   layout viewport* to swallow it, a 360px phone rendered the entire site scaled
   up: not a clipped button, every page wrong. Moving the CTA into the nav panel
   brings the bar to 262px measured at 360px (logo 151 + Menu 55 + 24 gaps +
   32 padding), leaving .header-spacer 97px of slack. */
@media (max-width: 640px) {
  .site-header-inner { padding: 12px 16px; gap: 12px; }
  .brand img { height: 22px; }
  /* Scoped, not bare: a bare .header-cta only ties with .btn's inline-flex and
     would start losing the moment either rule moves. */
  .site-header .header-cta { display: none; }

  /* .active beats a bare .nav-cta on contact.html and would repaint the button
     label white on teal — match its specificity and win on source order. */
  .primary-nav a.nav-cta {
    display: block;
    margin-top: 10px;
    text-align: center;
    background: var(--brand);
    color: var(--on-accent);
    font-weight: 700;
    border-radius: var(--radius);
  }
  .primary-nav a.nav-cta:hover {
    background: var(--accent-teal-hover);
    color: var(--on-accent);
  }
}

/* === Hero (home, chatbot-led) === */
.hero {
  position: relative;
  padding: 56px 0 96px;
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(45, 212, 191, 0.12), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(244, 183, 64, 0.07), transparent 65%);
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  /* Copy leads. The chat panel sizes to its content now, so it no longer needs
     the larger share it was given when it was a fixed 760px slab. */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

@media (max-width: 980px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero { padding-top: 32px; }
}

.hero-copy h1 {
  /* Capped so "Your data never leaves." holds one line in the copy column —
     a wrapped final line breaks the headline's three-beat rhythm. */
  font-size: clamp(38px, 5vw, 52px);
}
.hero-copy .support {
  margin-top: 24px;
  font-size: 18px;
}
.hero-ctas {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.hero-trust {
  margin-top: 40px;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: center;
}
.hero-trust .pill-tag {
  background: rgba(255,255,255,0.025);
}

.hero-alt-contact {
  margin-top: 14px;
  font-size: 14px;
  color: var(--text-faint);
}
.hero-alt-contact a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero-alt-contact a:hover { color: var(--accent-teal-hover); }

/* Industry self-identification — deliberately low weight so it reads as a
   routing aid, not a fourth CTA competing with the two above it. */
.hero-industries {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  font-size: 13px;
  color: var(--text-faint);
}
.hero-industries span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero-industries a {
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.hero-industries a:hover {
  color: var(--foreground);
  border-bottom-color: var(--brand);
}

/* === Chat panel (glass-wrapped) === */
.chat-shell {
  position: relative;
  background: var(--glass-fill);
  border: 1px solid var(--border);
  border-radius: 18px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  /* Sizes to content rather than a fixed height: with only the greeting present a
     fixed height left ~300px of dead space above the pills, which read as broken
     on first paint. The cap restores scrolling once a conversation grows. */
  height: auto;
  min-height: 360px;
  max-height: min(74vh, 720px);
  overflow: hidden;
}

.chat-shell::before {
  content: '';
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle at 30% 0%, rgba(45,212,191,0.12), transparent 55%);
  z-index: -1;
  pointer-events: none;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-soft);
}

/* Fixed chrome around the scrolling message list — only .messages may shrink
   when the shell reaches its max-height. */
.chat-header,
.chat-provenance,
.quick-pills,
.chat-form { flex-shrink: 0; }

.chat-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
}

.chat-title .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-teal);
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.18);
}

.chat-meta-inline {
  display: flex;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.chat-meta-inline .val { color: var(--muted-foreground); }
.chat-meta-inline .val.degraded { color: var(--brand); }

@media (max-width: 540px) {
  .chat-meta-inline { display: none; }
}

.chat-provenance {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(45, 212, 191, 0.04);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.messages {
  /* flex-basis auto so the panel can shrink to its content (see .chat-shell) */
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 28px 24px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

.messages::-webkit-scrollbar { width: 6px; }
.messages::-webkit-scrollbar-track { background: transparent; }
.messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.message {
  max-width: 88%;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.55;
  word-break: break-word;
  border-radius: var(--radius-card);
  animation: msg-enter var(--t-base) var(--ease) both;
}

.message.user {
  align-self: flex-end;
  background: var(--brand);
  color: var(--on-accent);
  font-weight: 500;
  border-radius: var(--radius-card) var(--radius) var(--radius-card) var(--radius-card);
  max-width: 78%;
}

.message.assistant {
  align-self: flex-start;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-soft);
  color: var(--foreground);
  border-radius: var(--radius) var(--radius-card) var(--radius-card) var(--radius-card);
}

@keyframes msg-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.message.assistant.streaming::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 1em;
  background: var(--brand);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: cursor-blink var(--t-slow) step-end infinite;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.message.assistant p           { margin-bottom: 0.6em; }
.message.assistant p:last-child{ margin-bottom: 0; }
.message.assistant ul,
.message.assistant ol          { padding-left: 1.3em; margin-bottom: 0.6em; }
.message.assistant li          { margin-bottom: 0.2em; }
.message.assistant strong      { font-weight: 600; }
.message.assistant em          { color: var(--muted-foreground); font-style: italic; }
.message.assistant code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: rgba(0,0,0,0.35);
  padding: 1px 5px;
  border-radius: var(--radius);
}
.message.assistant pre {
  background: var(--background);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0.6em 0;
}
.message.assistant pre code { background: none; padding: 0; }
.message.assistant a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.message.assistant h1,
.message.assistant h2,
.message.assistant h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  margin: 0.4em 0 0.3em;
  color: var(--foreground);
}
.message.assistant blockquote {
  border-left: 2px solid var(--border);
  padding-left: 12px;
  color: var(--muted-foreground);
  margin: 0.5em 0;
}

.message.thinking {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius) var(--radius-card) var(--radius-card) var(--radius-card);
  padding: 14px 18px;
  align-self: flex-start;
}
.thinking-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  animation: thinking-pulse 1.4s ease-in-out infinite;
}
@keyframes thinking-pulse {
  0%, 100% {
    opacity: 0.35;
    box-shadow: 0 0 0 0 rgba(45, 212, 191, 0);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 0 5px rgba(45, 212, 191, 0.14);
  }
}

/* Quick pills */
.quick-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 24px 12px;
}
.quick-pills.hidden { display: none; }
.quick-pills:empty  { display: none; }

.pill {
  background: var(--field-fill);
  border: 1px solid var(--border-soft);
  color: var(--muted-foreground);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-size: 12px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.pill:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.pill:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Composer */
.chat-form {
  padding: 12px 20px 18px;
  border-top: 1px solid var(--border-soft);
  background: rgba(0,0,0,0.15);
}

.input-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: var(--field-fill);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 10px 10px 10px 14px;
  transition: border-color var(--t-fast);
}
.input-row:focus-within {
  border-color: color-mix(in srgb, var(--brand) 50%, transparent);
}

.composer-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-teal);
  flex-shrink: 0;
  margin-bottom: 8px;
  opacity: 0.6;
  transition: opacity var(--t-fast);
}
.input-row:focus-within .composer-dot { opacity: 1; }
.is-streaming .composer-dot {
  background: var(--brand);
  animation: thinking-pulse 1.4s ease-in-out infinite;
  opacity: 1;
}

#user-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--foreground);
  font-family: var(--font-sans);
  /* 16px on phones is not a taste call: iOS Safari zooms the viewport in when a
     focused field is under 16px, and it does not zoom back out. Tapping the demo
     chatbot — the first thing anyone does here — left the page stuck magnified. */
  font-size: 15px;
  line-height: 1.6;
  resize: none;
  overflow-y: auto;
  max-height: 160px;
  padding: 2px 0;
  caret-color: var(--brand);
}
#user-input::placeholder { color: var(--text-faint); }

#send-btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  background: var(--brand);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius);
  padding: 9px 16px;
  cursor: pointer;
  transition: background var(--t-fast), opacity var(--t-fast);
  flex-shrink: 0;
  white-space: nowrap;
}
#send-btn:hover { background: var(--accent-teal-hover); }
#send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
#send-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* === Standard page hero (non-home) === */
.page-hero {
  position: relative;
  padding: 96px 0 64px;
  overflow: hidden;
}
.page-hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(45,212,191,0.09), transparent 60%);
  z-index: 0;
}
.page-hero .container { position: relative; z-index: 1; }

.page-hero .display {
  max-width: 16ch;
}

.page-hero .support {
  font-size: 18px;
  max-width: 64ch;
}

/* === Three-up value blocks (with dividers, no boxes) === */
.three-up {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.three-up > .col {
  padding: 40px 32px;
  border-right: 1px solid var(--border-soft);
}
.three-up > .col:last-child { border-right: none; }

@media (max-width: 880px) {
  .three-up { grid-template-columns: 1fr; }
  .three-up > .col { border-right: none; border-bottom: 1px solid var(--border-soft); padding: 32px 0; }
  .three-up > .col:last-child { border-bottom: none; }
}

.three-up .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--text-faint);
  margin-bottom: 16px;
}
.three-up h3 {
  color: var(--orange);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}
.three-up p {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.6;
}

/* === Pillars grid (four pillars) === */
.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}
@media (max-width: 720px) {
  .pillars { grid-template-columns: 1fr; }
}
.pillar-card {
  background: var(--glass-fill);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 28px;
  backdrop-filter: blur(12px);
  transition: border-color var(--t-fast);
}
.pillar-card:hover { border-color: rgba(255,255,255,0.18); }
.pillar-card .tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: color-mix(in srgb, var(--brand) 70%, transparent);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.pillar-card h3 {
  color: var(--orange);
  font-size: 22px;
  margin-bottom: 10px;
}
.pillar-card p {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 16px;
}

/* === Stats / proof row === */
.proof-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}
@media (max-width: 880px) { .proof-strip { grid-template-columns: 1fr; } }

.proof-card {
  background: var(--glass-fill);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
  backdrop-filter: blur(12px);
}
.proof-card .stat {
  font-family: var(--font-sans);
  font-size: 36px;
  font-weight: 700;
  color: var(--lime);
  line-height: 1;
  margin-bottom: 8px;
}
/* Word-valued stat — sets smaller so it doesn't read as a broken number
   alongside the numeric cards. Used where no figure has been verified. */
.proof-card .stat.stat-word {
  font-size: 26px;
  letter-spacing: -0.01em;
}
.proof-card .label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 14px;
}
.proof-card p {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.55;
}
.proof-card .underline-bar {
  margin-top: 16px;
  height: 2px;
  background: linear-gradient(to right, var(--brand), var(--lime));
  border-radius: 1px;
  opacity: 0.6;
}

/* === Factory at a glance (physical-infrastructure proof under the hero) === */
.factory-glance {
  padding: 0 0 40px;
}

/* Sized for the real Umhlanga photograph when it lands — see index.html */
.factory-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  margin-bottom: 24px;
}

.factory-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.fs-item {
  background: var(--glass-fill);
  padding: 22px 24px;
}

.fs-val {
  font-size: 19px;
  font-weight: 600;
  color: var(--foreground);
  line-height: 1.2;
  margin-bottom: 6px;
}

.fs-key {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.factory-glance-note {
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-dim);
}
.factory-glance-note .text-link { margin-left: 6px; }

@media (max-width: 880px) {
  .factory-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .factory-strip { grid-template-columns: 1fr; }
}

/* === Wedge band (CTA strip) === */
.cta-band {
  background:
    radial-gradient(ellipse 60% 80% at 20% 50%, rgba(45,212,191,0.08), transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(244,183,64,0.06), transparent 60%),
    var(--panel-navy-alt);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 56px 40px;
  margin-top: 32px;
  text-align: center;
}
.cta-band h2 { margin-bottom: 16px; }
.cta-band .support { margin-left: auto; margin-right: auto; }
.cta-band .hero-ctas { justify-content: center; margin-top: 32px; }

/* === Bulleted lists (page body) === */
.body-prose p { color: var(--text-dim); margin-bottom: 1.1em; font-size: 17px; line-height: 1.65; }
.body-prose p strong { color: var(--foreground); }
.body-prose ul { list-style: none; padding: 0; margin: 1.2em 0; }
.body-prose ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1.5;
}
.body-prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 1px;
  background: var(--brand);
}
.body-prose ol {
  list-style: none;
  counter-reset: ol;
  padding: 0;
  margin: 1.2em 0;
}
.body-prose ol li {
  counter-increment: ol;
  position: relative;
  padding-left: 36px;
  margin-bottom: 16px;
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1.6;
}
.body-prose ol li::before {
  content: counter(ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--brand);
}
.body-prose ol li strong { color: var(--foreground); display: block; margin-bottom: 4px; }

.body-prose h2 {
  font-size: clamp(28px, 4vw, 40px);
  margin: 48px 0 16px;
}
.body-prose h2:first-child { margin-top: 0; }

.body-prose h3 {
  font-family: var(--font-sans);
  color: var(--foreground);
  font-size: 22px;
  font-weight: 700;
  margin: 32px 0 8px;
}

.body-prose blockquote {
  border-left: 2px solid var(--brand);
  padding: 4px 0 4px 18px;
  margin: 24px 0;
  color: var(--foreground);
  font-size: 19px;
}

/* === Use-case industry cards === */
.industry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
}
.industry-card {
  background: var(--glass-fill);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 32px;
}
.industry-card h3 {
  font-family: var(--font-sans);
  color: var(--foreground);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}
.industry-card p {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 12px;
}
.industry-card .example {
  background: var(--field-fill);
  border-left: 2px solid var(--lime);
  padding: 12px 16px;
  border-radius: 4px;
  margin-top: 16px;
  color: var(--muted-foreground);
  font-size: 14px;
  font-style: italic;
}

/* === Insights list === */
.insights-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--border-soft);
  margin-top: 32px;
}
.insights-item {
  display: block;
  padding: 28px 0;
  border-bottom: 1px solid var(--border-soft);
  transition: padding-left var(--t-fast) var(--ease);
}
.insights-item:hover { padding-left: 8px; }
.insights-item .label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand) 70%, transparent);
  margin-bottom: 8px;
}
.insights-item h3 {
  font-family: var(--font-sans);
  color: var(--foreground);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.insights-item p {
  color: var(--text-dim);
  font-size: 15px;
  max-width: 70ch;
}

/* === Contact form === */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: start;
}
@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
}

.contact-form {
  background: var(--glass-fill);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 32px;
  backdrop-filter: blur(12px);
}

.field {
  margin-bottom: 18px;
}

.field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}

.field-input,
.field-textarea {
  width: 100%;
  background: var(--field-fill);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--foreground);
  transition: border-color var(--t-fast);
}
.field-input::placeholder,
.field-textarea::placeholder { color: var(--text-faint); }
.field-input:focus,
.field-textarea:focus { outline: none; border-color: var(--brand); }
.field-textarea { resize: vertical; min-height: 120px; line-height: 1.5; }

.contact-form .btn { margin-top: 8px; }
.contact-form .reassure {
  margin-top: 20px;
  color: var(--text-faint);
  font-size: 13px;
}

.contact-side h3 {
  font-family: var(--font-sans);
  color: var(--foreground);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}
.contact-side p {
  color: var(--text-dim);
  font-size: 16px;
  margin-bottom: 16px;
  line-height: 1.6;
}
.contact-side .channel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--border-soft);
}
.contact-side .channel:last-child { border-bottom: 1px solid var(--border-soft); }
.contact-side .channel .key {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  min-width: 100px;
}
.contact-side .channel .val { color: var(--foreground); font-weight: 600; }

/* === Footer === */
.site-footer {
  background: var(--card);
  border-top: 1px solid var(--border-soft);
  padding: 64px 0 32px;
  margin-top: 80px;
}
.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.footer-cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}
@media (max-width: 880px) {
  .footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .footer-cols { grid-template-columns: 1fr; }
}

.footer-brand img { height: 26px; margin-bottom: 12px; }
.footer-brand p { color: var(--text-faint); font-size: 13px; line-height: 1.55; max-width: 30ch; }

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand) 70%, transparent);
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  color: var(--text-dim);
  font-size: 14px;
  transition: color var(--t-fast);
}
.footer-col a:hover { color: var(--foreground); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.footer-bottom p { color: var(--text-faint); font-size: 12px; }
.footer-bottom a { color: var(--text-faint); font-size: 12px; }
.footer-bottom a:hover { color: var(--foreground); }
.footer-meta { display: flex; gap: 18px; }

/* === Utility classes (no inline styles — CSP is style-src 'self') === */
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-28 { margin-top: 28px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mt-48 { margin-top: 48px; }
.mt-56 { margin-top: 56px; }
.mt-64 { margin-top: 64px; }

.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }

.text-13 { font-size: 13px; }
.text-14 { font-size: 14px; }
.text-18 { font-size: 18px; }

.flex-center { display: flex; justify-content: center; }
.no-side-pad { padding-left: 0; padding-right: 0; }

/* Status messages for the contact form */
.status-error    { color: var(--error); }
.status-success  { color: var(--accent-teal); }

/* .cta-band centres text already; force the eyebrow inside it to centre too */
.cta-band .eyebrow {
  margin-left: auto;
  margin-right: auto;
}

/* === Phone refinements ===
   Desktop-first values that were never re-checked at phone widths: heroes sized
   for a two-column grid they no longer sit in, and 16px form text (see
   #user-input) to stop iOS zooming on focus. */
@media (max-width: 720px) {
  /* .page-hero (0,1,0) outranks the `section` mobile padding rule (0,0,1), so
     every inner page kept its full 96px desktop top padding on phones. */
  .page-hero { padding: 56px 0 40px; }

  #user-input,
  .field-input,
  .field-textarea { font-size: 16px; }

  .cta-band { padding: 40px 24px; }
}

@media (max-width: 540px) {
  /* The 38px floor was chosen to hold "Your data never leaves." on one line in
     the desktop copy column. That column is the full screen here and the line
     wraps regardless, so the floor only cost vertical space above the fold. */
  .hero-copy h1 { font-size: 34px; }
  .hero-copy .support { font-size: 16px; }
  .page-hero .support { font-size: 16px; }

  /* Claw back side padding for the message column — 24px each side left the
     bubbles about 264px wide inside a 312px panel. */
  .messages     { padding: 20px 16px 8px; }
  .quick-pills  { padding: 4px 16px 12px; }
  .chat-form    { padding: 12px 14px 14px; }
  .chat-header,
  .chat-provenance { padding-left: 16px; padding-right: 16px; }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .thinking-pulse { animation: none; opacity: 1; }
  .is-streaming .composer-dot { animation: none; opacity: 1; }
  .message { animation: none; }
  .message.assistant.streaming::after { animation: none; opacity: 1; }
  html { scroll-behavior: auto; }
}