/* =========================================================
   NOVALYNT TECHNOLOGIES — Design System
   ========================================================= */

:root {
  /* Brand colours */
  --navy-deep: #071B38;
  --navy-corporate: #0B2854;
  --blue-electric: #087CFF;
  --cyan: #00C9F2;
  --white: #FFFFFF;
  --grey-light: #F5F8FC;
  --grey-slate: #64748B;
  --grey-border: #E2E8F0;
  --grey-ink: #1E293B;

  /* Semantic */
  --bg-page: var(--white);
  --bg-alt: var(--grey-light);
  --text-body: var(--grey-ink);
  --text-muted: var(--grey-slate);
  --text-on-dark: #E8EFFB;
  --text-on-dark-muted: #9FB3CC;
  --border-color: var(--grey-border);
  --success: #0E9F6E;
  --error: #DC2626;

  /* Gradients */
  --gradient-navy: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy-corporate) 100%);
  --gradient-accent: linear-gradient(135deg, var(--cyan) 0%, var(--blue-electric) 100%);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Manrope', 'Inter', -apple-system, sans-serif;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* Layout */
  --container-width: 1200px;
  /* Wider than --container-width on purpose: the full desktop nav (logo +
     6 links + 2 CTA buttons) needs ~1188px of content width on its own
     before any gap is added, plus its own 48px of horizontal padding —
     capping it at --container-width (1200px) left only 1152px to work
     with, so it was silently flex-shrunk down to exactly fit with zero
     gap between the logo and the first link. See .nav below. */
  --nav-max-width: 1320px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 8px rgba(7, 27, 56, 0.06);
  --shadow-md: 0 8px 24px rgba(7, 27, 56, 0.10);
  --shadow-lg: 0 20px 50px rgba(7, 27, 56, 0.16);
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--bg-page);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.2;
  color: var(--navy-deep);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
p { max-width: 70ch; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -48px; left: 0;
  background: var(--navy-deep);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
  transition: top var(--transition);
}
.skip-link:focus { top: 0; }

/* Focus states */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--blue-electric);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}
.section { padding: var(--space-2xl) 0; }
.section--tight { padding: var(--space-xl) 0; }
.section--alt { background: var(--bg-alt); }
.section--navy { background: var(--gradient-navy); color: var(--text-on-dark); }
.section--navy h2, .section--navy h3 { color: var(--white); }
.section--navy p { color: var(--text-on-dark-muted); }

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-electric);
  margin-bottom: var(--space-xs);
}
.section--navy .eyebrow { color: var(--cyan); }

.section-head {
  max-width: 720px;
  margin: 0 auto var(--space-lg);
  text-align: center;
}
.section-head p { margin: var(--space-sm) auto 0; color: var(--text-muted); font-size: 1.05rem; }
.section--navy .section-head p { color: var(--text-on-dark-muted); }

.grid {
  display: grid;
  gap: var(--space-md);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
  min-height: 48px;
}
.btn-primary {
  background: var(--gradient-accent);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-secondary {
  background: transparent;
  color: var(--navy-deep);
  border: 2px solid var(--navy-deep);
}
.btn-secondary:hover { background: var(--navy-deep); color: var(--white); }
.section--navy .btn-secondary { color: var(--white); border-color: rgba(255,255,255,0.4); }
.section--navy .btn-secondary:hover { background: var(--white); color: var(--navy-deep); border-color: var(--white); }
.btn-block { width: 100%; }
.cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-color);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 0.85rem var(--space-md);
  max-width: var(--nav-max-width);
  margin: 0 auto;
}
/* flex-shrink: 0 — without this, .nav-logo (a flex item in .nav alongside
   the links and CTA buttons) could be squeezed below its content's natural
   width whenever the row runs tight on horizontal space. Because the logo
   <img> has a fixed height with width:auto + the global img{max-width:100%}
   reset, that squeeze doesn't shrink the logo proportionally — it distorts
   it (width compressed while height stays fixed). The brand mark should
   never be the element that absorbs a tight layout; let nav-links/nav-cta
   do that instead (they already wrap/adjust via their own rules). */
.nav-logo { display: flex; align-items: center; gap: 0.65rem; flex-shrink: 0; }
/* Real logo artwork (assets/images/Logo.png), losslessly cropped into an
   icon piece and a wordmark piece with true transparency — see
   README.md "About the Logo" for how these were produced. Both pieces were
   extracted from the source at the same scale, so equal display heights
   keep them visually consistent with each other. */
.nav-logo-icon { height: 46px; width: auto; }
.nav-logo-wordmark { height: 32px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.nav-links a {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy-corporate);
  padding: 0.5rem 0;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--gradient-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--blue-electric); }
.nav-cta { display: flex; align-items: center; gap: var(--space-sm); }
.nav-cta .btn { padding: 0.65rem 1.25rem; font-size: 0.9rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy-deep);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Raised from 1200px: 1200px matched --container-width, but that's the
   nav's OUTER max-width, not its content budget — once the nav's own 48px
   of horizontal padding was subtracted, only ~1152px of content space was
   left for a row that needs ~1188px on its own with zero gap, so the full
   desktop nav was silently flex-shrunk until the logo and first link
   touched with no space between them. The nav now gets its own wider
   --nav-max-width (1320px, see :root) so this breakpoint and that value
   stay in sync: whenever the full desktop nav is shown, it's guaranteed
   enough room for a real gap between the logo, links and CTA buttons. */
@media (max-width: 1320px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: 65px; left: 0; right: 0; bottom: 0;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-md);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transition);
    visibility: hidden;
  }
  .nav-links.is-open { transform: translateX(0); visibility: visible; }
  .nav-links a { width: 100%; padding: 1rem 0; border-bottom: 1px solid var(--border-color); font-size: 1.1rem; }
  .nav-cta {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: var(--white);
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid var(--border-color);
    flex-direction: column;
    transform: translateY(100%);
    transition: transform var(--transition);
    visibility: hidden;
    z-index: 501;
  }
  .nav-cta.is-open { transform: translateY(0); visibility: visible; }
  .nav-cta .btn { width: 100%; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--gradient-navy);
  color: var(--text-on-dark);
  overflow: hidden;
  padding: var(--space-3xl) 0;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(0, 201, 242, 0.25), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(8, 124, 255, 0.22), transparent 50%);
  pointer-events: none;
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  text-align: center;
}
.hero h1 { color: var(--white); max-width: 900px; margin: 0 auto var(--space-md); }
.hero .hero-sub {
  font-size: 1.2rem;
  color: var(--text-on-dark);
  max-width: 720px;
  margin: 0 auto var(--space-sm);
  font-weight: 500;
}
.hero .hero-desc {
  color: var(--text-on-dark-muted);
  max-width: 640px;
  margin: 0 auto var(--space-lg);
  font-size: 1.05rem;
}
.hero .cta-group { justify-content: center; margin-bottom: var(--space-sm); }
.hero-note { font-size: 0.85rem; color: var(--text-on-dark-muted); margin-top: var(--space-sm); }

.page-hero {
  background: var(--gradient-navy);
  color: var(--text-on-dark);
  padding: var(--space-xl) 0 var(--space-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 0%, rgba(0,201,242,0.2), transparent 50%);
}
.page-hero .container { position: relative; }
.page-hero h1 { color: var(--white); max-width: 820px; margin: 0 auto var(--space-sm); }
.page-hero p { color: var(--text-on-dark-muted); max-width: 680px; margin: 0 auto; font-size: 1.1rem; }

.breadcrumb {
  font-size: 0.85rem;
  color: var(--text-on-dark-muted);
  margin-bottom: var(--space-sm);
}
.breadcrumb a { color: var(--cyan); }
.breadcrumb a:hover { text-decoration: underline; }

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.card-icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--gradient-accent);
  color: var(--white);
  margin-bottom: var(--space-sm);
}
.card-icon svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: 0.6rem; font-size: 1.15rem; }
.card p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: var(--space-sm); }
.card-link { font-weight: 700; color: var(--blue-electric); font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.3rem; }
.card-link:hover { text-decoration: underline; }

.card--dark {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-on-dark);
}
.card--dark h3 { color: var(--white); }
.card--dark p { color: var(--text-on-dark-muted); }
.card--dark:hover { border-color: var(--cyan); }

/* Challenge / checklist items */
.check-list { display: grid; gap: var(--space-sm); }
.check-item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: var(--space-sm);
  background: var(--white);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}
.check-item .icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--gradient-accent);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  font-weight: 800;
}
.check-item p { margin: 0; color: var(--text-muted); font-size: 0.92rem; }
.check-item strong { color: var(--navy-deep); display: block; margin-bottom: 0.15rem; font-size: 0.98rem; }

/* Process steps */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  counter-reset: step;
}
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: var(--space-sm); }
.step-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.25rem;
  background: linear-gradient(135deg, var(--cyan), var(--blue-electric));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.5rem;
  display: block;
}
.step h3 { margin-bottom: 0.4rem; font-size: 1.05rem; }
.step p { font-size: 0.9rem; color: var(--text-muted); }
.section--navy .step p { color: var(--text-on-dark-muted); }

/* Industry cards */
.industry-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  height: 100%;
}
.industry-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.industry-card .tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--gradient-accent);
  color: var(--white);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-bottom: var(--space-sm);
  width: fit-content;
}
.industry-card-body { padding: var(--space-md); display: flex; flex-direction: column; flex: 1; }
.industry-card ul { margin: var(--space-xs) 0 var(--space-sm); display: grid; gap: 0.4rem; }
.industry-card li { font-size: 0.88rem; color: var(--text-muted); padding-left: 1.2rem; position: relative; }
.industry-card li::before {
  content: '';
  position: absolute; left: 0; top: 0.5em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue-electric);
}
.industry-card .card-link { margin-top: auto; }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-weight: 700; font-size: 0.9rem; color: var(--navy-deep); }
.form-field .required { color: var(--error); }
.form-field input,
.form-field select,
.form-field textarea {
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 0.95rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  min-height: 48px;
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--blue-electric);
  box-shadow: 0 0 0 4px rgba(8, 124, 255, 0.12);
  outline: none;
}
.form-field input:invalid[aria-invalid="true"],
.form-field textarea:invalid[aria-invalid="true"] { border-color: var(--error); }
.form-hint { font-size: 0.8rem; color: var(--text-muted); }
.form-error { font-size: 0.82rem; color: var(--error); display: none; }
.form-error.is-visible { display: block; }
.form-status {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.form-status.error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-deep);
  color: var(--text-on-dark-muted);
  padding: var(--space-xl) 0 var(--space-md);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
/* The real logo's wordmark text (dark navy) has ~1.4:1 contrast against this
   navy footer background — nowhere near WCAG AA's 4.5:1 minimum, confirmed
   by calculation. Recolouring the wordmark image itself would mean
   repainting the original typography, which isn't an option here (see
   README.md "About the Logo"). So the footer uses the authentic icon
   artwork (its own blue/gradient tones have real contrast against navy)
   paired with real, accessible light-coloured text for the company name,
   rather than an unreadable or inauthentically-recoloured image. */
.footer-logo { display: flex; align-items: center; gap: 0.65rem; margin-bottom: var(--space-sm); }
.footer-logo-icon { height: 40px; width: auto; }
.footer-logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.footer-logo-text strong { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--white); letter-spacing: 0.01em; }
.footer-logo-text small { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.14em; color: var(--text-on-dark-muted); text-transform: uppercase; }
.footer-brand p { font-size: 0.9rem; max-width: 320px; margin-bottom: var(--space-sm); }
.footer-tagline { color: var(--cyan); font-weight: 700; font-size: 0.85rem; }
.footer-col h4 { color: var(--white); font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--space-sm); }
.footer-col ul { display: grid; gap: 0.65rem; }
.footer-col a { font-size: 0.92rem; transition: color var(--transition); }
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  font-size: 0.82rem;
}
.footer-legal { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.footer-legal a:hover { color: var(--white); }

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed;
  left: var(--space-md); right: var(--space-md); bottom: var(--space-md);
  max-width: 560px;
  margin: 0 auto;
  background: var(--navy-deep);
  color: var(--text-on-dark);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-lg);
  z-index: 900;
  display: none;
}
.cookie-banner.is-visible { display: block; }
.cookie-banner p { font-size: 0.88rem; color: var(--text-on-dark-muted); margin-bottom: var(--space-sm); }
.cookie-banner a { color: var(--cyan); text-decoration: underline; }
.cookie-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.cookie-actions .btn { padding: 0.6rem 1.2rem; font-size: 0.85rem; }

/* ---------- Misc content ---------- */
.content-block { max-width: 820px; margin: 0 auto; }
.content-block h2 { margin-top: var(--space-lg); margin-bottom: var(--space-sm); }
.content-block h2:first-child { margin-top: 0; }
.content-block h3 { margin-top: var(--space-md); margin-bottom: var(--space-xs); }
.content-block p { margin-bottom: var(--space-sm); color: var(--text-muted); }
.content-block ul, .content-block ol { margin: 0 0 var(--space-sm) 1.3rem; list-style: disc; color: var(--text-muted); }
.content-block ol { list-style: decimal; }
.content-block li { margin-bottom: 0.4rem; }
.content-block a { color: var(--blue-electric); text-decoration: underline; }
.content-block strong { color: var(--navy-deep); }
.last-updated { color: var(--text-muted); font-size: 0.9rem; margin-bottom: var(--space-lg); }

.badge-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.badge {
  font-size: 0.8rem; font-weight: 700;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--grey-light);
  color: var(--navy-corporate);
  border: 1px solid var(--border-color);
}
.section--navy .badge { background: rgba(255,255,255,0.08); color: var(--text-on-dark); border-color: rgba(255,255,255,0.15); }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; gap: var(--space-lg); } }

.quote-panel {
  background: var(--gradient-navy);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  color: var(--white);
}

.final-cta {
  text-align: center;
  padding: var(--space-2xl) 0;
}
.final-cta h2 { margin-bottom: var(--space-sm); }
.final-cta p { max-width: 560px; margin: 0 auto var(--space-lg); color: var(--text-muted); }
.final-cta .cta-group { justify-content: center; }
.section--navy.final-cta p { color: var(--text-on-dark-muted); }

/* Table (used sparingly, e.g. comparisons) */
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); }
th { color: var(--navy-deep); font-family: var(--font-display); }

@media (max-width: 600px) {
  .section { padding: var(--space-xl) 0; }
  h1 { font-size: 2rem; }
}

/* ---------- AI Chat Widget ---------- */
.chat-widget {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 950;
}
/* Elements inside the widget that are toggled via the native `hidden`
   attribute also set their own unconditional `display` (flex/block) for
   when they ARE shown — without this rule, that display value would win
   over the browser's default [hidden] styling and the element would never
   actually hide. Scoped to the widget only. */
.chat-widget [hidden] { display: none !important; }
.chat-toggle {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--gradient-accent);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition);
}
.chat-toggle:hover { transform: translateY(-2px) scale(1.04); }
.chat-toggle-icon { width: 26px; height: 26px; }

.chat-panel {
  /* position: fixed (not absolute-within-the-fixed-toggle) and explicit
     left+right bounds on narrow viewports — the same proven anchoring
     technique already used by .cookie-banner — so the panel can never be
     positioned outside the visible viewport regardless of device/emulation. */
  position: fixed;
  right: var(--space-md);
  bottom: 92px;
  width: 380px;
  max-width: calc(100vw - 2 * var(--space-md));
  height: 560px;
  max-height: calc(100vh - 140px);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-panel-header {
  background: var(--gradient-navy);
  color: var(--white);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-shrink: 0;
}
.chat-panel-header-text { display: flex; flex-direction: column; gap: 0.15rem; }
.chat-panel-header strong { font-family: var(--font-display); font-size: 1rem; }
.chat-ai-disclosure { font-size: 0.72rem; color: var(--text-on-dark-muted); }
.chat-close-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--white);
  flex-shrink: 0;
}
.chat-close-btn svg { width: 18px; height: 18px; }
.chat-close-btn:hover { background: rgba(255,255,255,0.12); }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.chat-message { display: flex; }
.chat-message-user { justify-content: flex-end; }
.chat-message-assistant { justify-content: flex-start; }
.chat-bubble {
  max-width: 85%;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-message-assistant .chat-bubble { background: var(--grey-light); color: var(--text-body); border-bottom-left-radius: 2px; }
.chat-message-user .chat-bubble { background: var(--gradient-accent); color: var(--white); border-bottom-right-radius: 2px; }

/* Structure produced by renderAssistantContent() in chat-widget.js (paragraphs,
   bullet lists, bold text) — built via safe DOM construction, never innerHTML. */
.chat-bubble p { margin: 0 0 0.6em; }
.chat-bubble p:last-child { margin-bottom: 0; }
.chat-bubble .chat-bullet-list { margin: 0 0 0.6em 1.1em; padding: 0; }
.chat-bubble .chat-bullet-list:last-child { margin-bottom: 0; }
.chat-bubble .chat-bullet-list li { margin-bottom: 0.25em; }
.chat-bubble .chat-bullet-list li:last-child { margin-bottom: 0; }
.chat-bubble strong { font-weight: 700; }

.chat-typing {
  display: flex;
  gap: 4px;
  padding: 0 var(--space-md) var(--space-sm);
  flex-shrink: 0;
}
.chat-typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--grey-slate);
  animation: chat-typing-bounce 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.chat-error-banner {
  margin: 0 var(--space-md) var(--space-sm);
  padding: var(--space-sm);
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.chat-error-banner p { color: #991B1B; font-size: 0.85rem; margin-bottom: 0.5rem; }
.chat-retry-btn { padding: 0.4rem 0.9rem; font-size: 0.82rem; }

.chat-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0 var(--space-md) var(--space-sm);
  flex-shrink: 0;
}
.chat-quick-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--blue-electric);
  padding: 0.5rem 0.75rem;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  text-align: center;
  transition: border-color var(--transition), background var(--transition);
}
.chat-quick-link:hover { border-color: var(--blue-electric); background: var(--grey-light); }

.chat-input-form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}
.chat-input {
  flex: 1;
  resize: none;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  font-family: var(--font-sans);
  max-height: 120px;
  min-height: 42px;
}
.chat-input:focus {
  border-color: var(--blue-electric);
  box-shadow: 0 0 0 4px rgba(8, 124, 255, 0.12);
  outline: none;
}
.chat-send-btn {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--gradient-accent);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  transition: opacity var(--transition);
}
.chat-send-btn svg { width: 18px; height: 18px; }
.chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 480px) {
  /* Positioned via `left`/`top` + vw/vh calc rather than `right`/`bottom` —
     some mobile/device-emulation environments resolve `right` and `bottom`
     offsets against a different (physical-pixel) dimension than
     `left`/`top`/`vw`/`vh`, which can place a `right`- or `bottom`-anchored
     fixed element entirely outside the visible viewport. `left`/`top` have
     proven reliable (same technique as .cookie-banner), so both the toggle
     button and the panel are anchored that way here instead. */
  .chat-widget {
    right: auto;
    left: calc(100vw - 60px - var(--space-sm));
    bottom: auto;
    top: calc(100vh - 60px - var(--space-sm));
  }
  .chat-panel {
    right: auto;
    left: var(--space-sm);
    width: calc(100vw - 2 * var(--space-sm));
    max-width: none;
    bottom: auto;
    top: 38px; /* equivalent to the desktop rule's bottom:72px + height:calc(100vh - 110px) */
    height: calc(100vh - 110px);
  }
}