/* ==========================================================================
   Mande (getmande.com) - Design System
   Palette: zinc neutrals + blue-600 primary + cyan-500 secondary accent.
   No purple or violet anywhere (brandRules.forbiddenHues).
   Typography: Inter. Source of truth: public_html/design-system.json
   ========================================================================== */

:root {
  /* Colors */
  --color-primary: #2563EB;        /* blue-600 */
  --color-secondary: #1D4ED8;      /* blue-700 */
  --color-accent: #06B6D4;         /* cyan-500  - secondary accent, never a CTA */
  --color-accent-soft: #ECFEFF;    /* cyan-50   */
  --color-accent-deep: #0891B2;    /* cyan-600  */
  --color-text: #18181B;           /* zinc-900 */
  --color-text-light: #52525B;     /* zinc-600 */
  --color-text-muted: #71717A;     /* zinc-500 */
  --color-white: #FFFFFF;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F4F4F5;         /* zinc-100 - recessed sections. Was #FAFAFA,
                                      which is 1.02:1 against white: alternation
                                      that the eye cannot see is not alternation. */
  --color-bg-sunken: #F4F4F5;      /* zinc-100 - the page tone the hero panel sits on */
  --color-bg-tint: #EFF6FF;        /* blue-50 */
  --color-border: #E4E4E7;         /* zinc-200 */
  --color-border-light: #F4F4F5;   /* zinc-100 */
  --color-dark: #09090B;           /* zinc-950 */
  --color-dark-soft: #27272A;      /* zinc-800 */

  /* Typography */
  --font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Spacing scale (8px base) */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Layout */
  --container-width: 1200px;
  --header-height: 72px;
  --header-height-scrolled: 64px;
  --utility-height: 38px;

  /* Effects */
  /* Radius scale calibrated against live SaaS references (measured 2026-08-21):
     Linear btn 6 / card 12 | Stripe 4/6 | Vercel 6/6 | Notion 8/12
     Resend 8/16 | Clerk 6/8. Buttons cluster at 4-8px, cards at 6-12px.
     The previous 10px buttons / 18px cards sat above every reference. */
  --radius: 6px;        /* buttons, inputs, small controls */
  --radius-sm: 4px;     /* tight controls, inline chips */
  --radius-lg: 10px;    /* cards, panels, mockups */
  --radius-pill: 999px; /* badges and tags only - never a card */
  --shadow-sm: 0 1px 3px rgba(9,9,11,0.06);
  --shadow-md: 0 10px 30px rgba(9,9,11,0.08);
  --shadow-lg: 0 24px 48px rgba(9,9,11,0.12);
  --shadow-xl: 0 32px 64px -12px rgba(9,9,11,0.22), 0 0 0 1px rgba(9,9,11,0.04);
  --shadow-primary: 0 8px 20px rgba(37,99,235,0.25);

  /* Gradients (depth layer - blue -> cyan, brand compliant) */
  /* Hero ground is a RECESSED tone, not a near-white wash - the white panel
     on top is what reads as the hero. Measured: the old near-white wash was
     1.09:1 against the page and could not separate from it. */
  --gradient-hero: linear-gradient(160deg, #EEF2F7 0%, #E8EEF6 45%, #E7F4F7 100%);
  --gradient-brand: linear-gradient(135deg, #2563EB 0%, #0891B2 100%);
  --gradient-page-hero: linear-gradient(165deg, #FFFFFF 0%, #F6FAFF 55%, #ECFEFF 100%);

  --transition: all 0.2s ease;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text);
  letter-spacing: -0.02em;
}

h1 { font-size: 60px; font-weight: 700; line-height: 1.05; }
h2 { font-size: 40px; font-weight: 700; line-height: 1.15; }
h3 { font-size: 22px; font-weight: 600; line-height: 1.3; }
h4 { font-size: 18px; font-weight: 600; line-height: 1.35; }

p { color: var(--color-text-light); }

a { color: var(--color-primary); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--color-secondary); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { list-style: none; }

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

.container--narrow { max-width: 820px; }

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

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding: 96px 0; background: var(--color-bg); }
.section--alt {
  padding: 96px 0;
  background: var(--color-bg-alt);
  /* Explicit edges. Tone alone at 1.04:1 is near the limit of perception, so
     the hairline is what actually separates consecutive bands. */
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.section--dark { padding: 96px 0; background: var(--color-dark); }
.section--tight { padding: 64px 0; }

.section__header { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section__eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 12px;
}
.section__title { margin-bottom: 16px; }
.section__subtitle { font-size: 19px; line-height: 1.6; color: var(--color-text-light); }

.section--dark .section__title { color: var(--color-white); }
.section--dark .section__subtitle { color: #A1A1AA; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  padding: 14px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}

.btn--primary { background: var(--color-primary); color: var(--color-white); }
.btn--primary:hover {
  background: var(--color-secondary);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37,99,235,0.25);
}

.btn--secondary {
  background: var(--color-white);
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--secondary:hover {
  background: var(--color-bg-alt);
  color: var(--color-text);
  border-color: #D4D4D8;
  transform: translateY(-2px);
}

.btn--ghost { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--ghost:hover { background: var(--color-primary); color: var(--color-white); }

.btn--light { background: var(--color-white); color: var(--color-primary); }
.btn--light:hover { background: var(--color-bg-tint); color: var(--color-secondary); transform: translateY(-2px); }

.btn--outline-light { background: transparent; color: var(--color-white); border-color: rgba(255,255,255,0.35); }
.btn--outline-light:hover { background: rgba(255,255,255,0.1); color: var(--color-white); border-color: var(--color-white); }

.btn--sm { font-size: 15px; padding: 10px 18px; }
.btn--lg { font-size: 17px; padding: 16px 32px; }
.btn--block { width: 100%; }

.btn-group { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-group--center { justify-content: center; }

/* --------------------------------------------------------------------------
   Utility bar (two-tier header, top tier)
   -------------------------------------------------------------------------- */
.utility-bar {
  height: var(--utility-height);
  background: var(--color-dark);
  color: #A1A1AA;
  font-size: 13.5px;
  display: flex;
  align-items: center;
}
.utility-bar__inner { display: flex; align-items: center; justify-content: flex-end; gap: 24px; }
.utility-bar__link { color: #A1A1AA; display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.utility-bar__link:hover { color: var(--color-white); }
.utility-bar__link i { font-size: 12px; color: #71717A; }
.utility-bar__link:hover i { color: var(--color-white); }
.utility-bar__divider { width: 1px; height: 16px; background: #3F3F46; }

/* --------------------------------------------------------------------------
   Header (two-tier, main tier)
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  transition: var(--transition);
}
.header--scrolled { box-shadow: var(--shadow-sm); border-bottom-color: transparent; }
.header--scrolled .utility-bar { display: none; }
.header--scrolled .header__inner { height: var(--header-height-scrolled); }

.header__inner {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  transition: var(--transition);
}

.logo { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--gradient-brand);
  color: var(--color-white);
  line-height: 1;
}
/* The mark is Font Awesome's solid question glyph ROTATED 180deg, not a
   typeset "¿". The text character rendered thin, sat optically off-centre in
   the tile, and changed shape with whatever font actually loaded. The icon
   is heavier, geometrically consistent with the rest of the site's icon set,
   and identical on every device. */
.logo__mark i {
  font-size: 17px;
  line-height: 1;
  transform: rotate(180deg);
}
.logo__text { font-family: var(--font-heading); font-size: 19px; font-weight: 700; color: var(--color-text); letter-spacing: -0.02em; }
.logo:hover .logo__text { color: var(--color-primary); }

.nav { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 15.5px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
}
.nav__link:hover { background: var(--color-border-light); color: var(--color-primary); }
.nav__link--active { background: var(--color-bg-tint); color: var(--color-primary); font-weight: 600; }
.nav__caret { font-size: 11px; color: var(--color-text-muted); transition: var(--transition); }
.nav__item:hover .nav__caret { color: var(--color-primary); transform: rotate(180deg); }

/* Only nav items that own a dropdown get the expandable affordance. Below the
   1024px breakpoint the caret on these toggles the submenu instead of
   following the link, so the pointer has to read as a control. */
.nav__item--has-dropdown > .nav__link { cursor: pointer; }

.nav__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav__signin { font-size: 15.5px; font-weight: 500; color: var(--color-text); padding: 8px 6px; }
.nav__signin:hover { color: var(--color-primary); }

/* Desktop dropdown */
.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 280px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.97);
  transform-origin: top left;
  transition: var(--transition);
}
.nav__item:hover .dropdown, .nav__item:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: scale(1);
}
.dropdown--wide { min-width: 460px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.dropdown__link {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
}
.dropdown__link:hover { background: var(--color-bg-tint); color: var(--color-primary); }
.dropdown__link span { display: block; font-size: 13px; font-weight: 400; color: var(--color-text-muted); margin-top: 2px; }
.dropdown__link:hover span { color: var(--color-text-light); }

/* Mobile toggle */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav__toggle-bar { display: block; width: 24px; height: 2px; background: var(--color-text); border-radius: 2px; transition: var(--transition); }
.nav__toggle.is-open .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav__toggle.is-open .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer backdrop. Must be inert when closed: an invisible fixed layer
   with pointer-events:auto hit-tests over the whole page and swallows taps. */
.nav__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(9,9,11,0.5);
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  transition: opacity 0.25s ease;
}
.nav__overlay.is-active { opacity: 1; pointer-events: auto; }

/* --------------------------------------------------------------------------
   Hero (animated headline)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--gradient-hero);
  padding: 32px 0 56px;
  text-align: left;
  overflow: hidden;
  isolation: isolate;
}
/* Decorative depth washes. Blue-600 -> cyan-500 only; never purple or violet. */
.hero::before,
.hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.hero::before {
  width: 620px; height: 620px; top: -180px; right: -120px;
  background: radial-gradient(circle, rgba(37,99,235,0.13) 0%, rgba(37,99,235,0) 68%);
}
.hero::after {
  width: 520px; height: 520px; bottom: -200px; left: -140px;
  background: radial-gradient(circle, rgba(6,182,212,0.14) 0%, rgba(6,182,212,0) 68%);
}
.hero__panel {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 44px 44px;
  box-shadow: 0 1px 2px rgba(9,9,11,0.04), 0 12px 32px -20px rgba(9,9,11,0.14);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
  align-items: center;
  gap: 40px;
  /* The 80vh hero budget is spent on PANEL + PROOF STRIP together, so the
     grid itself takes the remainder. Sized so the proof strip lands inside
     the fold at 900px - in-fold social proof is the point of it. */
  min-height: calc(70vh - var(--header-height) - var(--utility-height));
}
.hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-light);
}
.hero__badge i { color: var(--color-primary); font-size: 13px; }
.hero__title { max-width: 580px; font-size: 54px; line-height: 1.06; }
.hero__rotator {
  display: inline-block;
  color: var(--color-primary);
  min-width: 5ch;
  text-align: left;
}
/* No reserved width. Measured: a 6.2ch reserve matches "answers" almost
   exactly (1px slack) but leaves ~100px of trailing gap on a short word like
   "books" mid-rotation. Reflow on swap is normal animated-headline behaviour
   and is far less visible than that gap. */
.hero--product .hero__rotator { min-width: 0; }
.hero__subtitle { max-width: 520px; font-size: 18.5px; line-height: 1.6; color: var(--color-text-light); }
.hero__note { font-size: 14.5px; color: var(--color-text-muted); }
.hero__note strong { color: var(--color-text-light); font-weight: 600; }

/* Channel pills - secondary accent lives on the icon, never on a CTA */
.hero__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  font-size: 13.5px; font-weight: 600; color: var(--color-text-light);
  white-space: nowrap;
}
.pill i { font-size: 13px; color: var(--color-accent-deep); }

/* Product side - glow sits behind the card, card itself stays opaque */
.hero__visual { position: relative; width: 100%; margin-top: 0; }
.hero__visual::before {
  content: "";
  position: absolute; z-index: 0;
  left: -6%; right: -6%; top: 6%; bottom: 6%;
  background: radial-gradient(60% 60% at 50% 45%, rgba(37,99,235,0.16) 0%, rgba(6,182,212,0.10) 55%, rgba(37,99,235,0) 100%);
  filter: blur(40px);
  pointer-events: none;
}
.hero__visual .mockup {
  position: relative;
  z-index: 1;
  /* On a white panel the card needs a real border, not a glow, to hold its
     edge. A 0.10-alpha hairline read as 1.09:1 and disappeared. */
  border: 1px solid var(--color-border);
  box-shadow: 0 12px 28px -14px rgba(9,9,11,0.18);
}

/* In-fold proof strip - sits on the recessed ground below the panel */
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  justify-content: space-between;
  padding: 26px 4px 0;
}

/* Inline prose link - brand mentions inside body copy (e.g. Artizen Media).
   Underlined so it is identifiable as a link without relying on colour alone
   (WCAG 1.4.1 Use of Colour). */
.inline-link {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(37,99,235,0.35);
  text-underline-offset: 2px;
  transition: var(--transition);
}
.inline-link:hover { color: var(--color-secondary); text-decoration-color: currentColor; }
.cta .inline-link, .section--dark .inline-link { color: #FFFFFF; text-decoration-color: rgba(255,255,255,0.5); }
.cta .inline-link:hover, .section--dark .inline-link:hover { text-decoration-color: #FFFFFF; }

/* Pricing: "everything included" strip above the plan grid */
.included-strip { max-width: 780px; margin: 0 auto 36px; text-align: center; }
.included-strip__title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.included-strip__text { font-size: 16px; line-height: 1.6; color: var(--color-text-light); }
.pricing-footnote { max-width: 780px; margin: 28px auto 0; text-align: center; font-size: 14px; line-height: 1.6; color: var(--color-text-muted); }

/* Internal page hero */
.page-hero {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  padding: 72px 0 64px;
  text-align: center;
}
.page-hero__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.page-hero__title { font-size: 46px; max-width: 820px; }
.page-hero__subtitle { max-width: 660px; font-size: 19px; line-height: 1.6; color: var(--color-text-light); }

/* Breadcrumbs */
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--color-text-muted); }
.breadcrumbs a { color: var(--color-text-muted); font-weight: 500; }
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumbs__sep { color: #D4D4D8; }
.breadcrumbs__current { color: var(--color-text-light); font-weight: 500; }

/* --------------------------------------------------------------------------
   Product mockups (CSS drawn. No stock photography, no fake screenshots.)
   -------------------------------------------------------------------------- */
.mockup {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  text-align: left;
}
.mockup__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}
.mockup__dot { width: 10px; height: 10px; border-radius: 50%; background: #D4D4D8; }
.mockup__label { margin-left: 8px; font-size: 12.5px; font-weight: 500; color: var(--color-text-muted); }
.mockup__body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }

.chat-line { display: flex; gap: 10px; align-items: flex-end; }
.chat-line--out { flex-direction: row-reverse; }
.chat-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-primary); color: var(--color-white);
  font-size: 15px; font-weight: 700; line-height: 1;
}
.chat-avatar--customer { background: var(--color-border); color: var(--color-text-light); font-size: 12px; }
.chat-bubble {
  max-width: 78%;
  padding: 11px 15px;
  /* Chat bubbles keep a rounder, chat-native radius on purpose - this is the
     product mock and should read as a messaging UI, not as a card. */
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.5;
  background: var(--color-border-light);
  color: var(--color-text);
}
.chat-bubble--out { background: var(--color-primary); color: var(--color-white); }
.chat-meta { font-size: 12px; color: var(--color-text-muted); display: flex; align-items: center; gap: 6px; }
.chat-meta i { font-size: 11px; color: var(--color-primary); }

.inbox-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--color-border);
}
.inbox-row__channel {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: var(--color-bg-tint); color: var(--color-primary); font-size: 14px;
}
.inbox-row__body { flex: 1; min-width: 0; }
.inbox-row__name { font-size: 14.5px; font-weight: 600; color: var(--color-text); }
.inbox-row__preview { font-size: 13px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-row__time { font-size: 12px; color: var(--color-text-muted); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Trust bar
   -------------------------------------------------------------------------- */
.trust-bar { padding: 40px 0; background: var(--color-white); border-bottom: 1px solid var(--color-border); }
.trust-bar__grid { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.trust-bar__grid .trust-item { flex: 1 1 220px; }
.trust-item { display: flex; align-items: center; gap: 12px; }
.trust-item__icon { font-size: 20px; color: var(--color-primary); flex-shrink: 0; }
.trust-item__text { font-size: 15px; font-weight: 500; color: var(--color-text); line-height: 1.4; }

/* --------------------------------------------------------------------------
   Card grids
   -------------------------------------------------------------------------- */
.grid { display: flex; flex-wrap: wrap; gap: 24px; }
.grid-item-wrapper { display: flex; }
.grid--2 > .grid-item-wrapper { width: calc(50% - 12px); }
.grid--3 > .grid-item-wrapper { width: calc(33.333% - 16px); }
.grid--4 > .grid-item-wrapper { width: calc(25% - 18px); }

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 28px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #D4D4D8; }
.card__icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--color-bg-tint); color: var(--color-primary);
  font-size: 19px; margin-bottom: 4px;
}
.card__title { font-size: 19px; font-weight: 600; color: var(--color-text); }
.card__text { font-size: 15.5px; line-height: 1.6; color: var(--color-text-light); }
.card__list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.card__list li { display: flex; gap: 9px; font-size: 14.5px; line-height: 1.5; color: var(--color-text-light); }
.card__list i { color: var(--color-primary); font-size: 13px; margin-top: 5px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Comparison table (AI-native vs bolted-on)
   -------------------------------------------------------------------------- */
.compare { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-white); }
.compare__row { display: flex; align-items: stretch; border-bottom: 1px solid var(--color-border); }
.compare__row:last-child { border-bottom: none; }
.compare__row--head { background: var(--color-bg-alt); }
.compare__cell { flex: 1; padding: 18px 22px; font-size: 15.5px; line-height: 1.5; color: var(--color-text-light); display: flex; align-items: center; gap: 10px; }
.compare__cell--label { flex: 1.3; font-weight: 600; color: var(--color-text); }
.compare__cell--mande { background: var(--color-bg-tint); color: var(--color-text); font-weight: 500; }
.compare__cell i { flex-shrink: 0; font-size: 14px; }
.compare__cell--mande i { color: var(--color-primary); }
.compare__cell--other i { color: #A1A1AA; }
.compare__head-title { font-size: 15px; font-weight: 700; color: var(--color-text); letter-spacing: -0.01em; }
.compare__head-title--mande { color: var(--color-primary); }

/* --------------------------------------------------------------------------
   Process steps
   -------------------------------------------------------------------------- */
.steps { display: flex; flex-direction: column; gap: 0; }
.step { display: flex; gap: 24px; padding-bottom: 40px; position: relative; }
.step:last-child { padding-bottom: 0; }
.step__marker { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.step__number {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-primary); color: var(--color-white);
  font-size: 17px; font-weight: 700; line-height: 1;
}
.step__line { width: 2px; flex: 1; background: var(--color-border); border-radius: 2px; }
.step:last-child .step__line { display: none; }
.step__body { padding-top: 8px; padding-bottom: 8px; }
.step__title { font-size: 20px; font-weight: 600; color: var(--color-text); margin-bottom: 8px; }
.step__text { font-size: 16px; line-height: 1.65; color: var(--color-text-light); }

/* --------------------------------------------------------------------------
   Stats
   -------------------------------------------------------------------------- */
.stat { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; width: 100%; padding: 24px 16px; }
.stat__value { font-family: var(--font-heading); font-size: 44px; font-weight: 700; line-height: 1.05; color: var(--color-primary); letter-spacing: -0.03em; }
.stat__label { font-size: 15px; font-weight: 600; color: var(--color-text); }
.stat__note { font-size: 13.5px; line-height: 1.5; color: var(--color-text-muted); }

/* --------------------------------------------------------------------------
   Trust proof block (replaces testimonials: factual claims only)
   -------------------------------------------------------------------------- */
.proof { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
.proof__body { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.proof__title { font-size: 32px; font-weight: 700; line-height: 1.2; color: var(--color-text); }
.proof__text { font-size: 17px; line-height: 1.65; color: var(--color-text-light); }
.proof__list { display: flex; flex-direction: column; gap: 12px; }
.proof__list li { display: flex; gap: 12px; font-size: 16px; line-height: 1.55; color: var(--color-text-light); }
.proof__list i { color: var(--color-primary); font-size: 15px; margin-top: 5px; flex-shrink: 0; }
.proof__list strong { color: var(--color-text); font-weight: 600; }
.proof__panel {
  flex: 1 1 360px;
  display: flex; flex-direction: column; gap: 16px;
  padding: 32px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.proof__panel-label { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); }
.proof__panel-title { font-size: 21px; font-weight: 600; color: var(--color-text); line-height: 1.35; }
.proof__panel-text { font-size: 15.5px; line-height: 1.6; color: var(--color-text-light); }

/* --------------------------------------------------------------------------
   Industry chips (replaces partner logo cloud)
   -------------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  font-size: 15px; font-weight: 500; color: var(--color-text);
  transition: var(--transition);
}
.chip:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.chip i { font-size: 14px; color: var(--color-primary); }
.chip--anchor { background: var(--color-bg-tint); border-color: #BFDBFE; color: var(--color-secondary); font-weight: 600; }

/* --------------------------------------------------------------------------
   Operator statement (replaces team grid)
   -------------------------------------------------------------------------- */
.operator { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.operator__mark {
  display: flex; align-items: center; justify-content: center;
  width: 88px; height: 88px; border-radius: 16px; flex-shrink: 0;
  background: var(--color-primary); color: var(--color-white);
  font-size: 46px; font-weight: 700; line-height: 1;
}
.operator__body { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.operator__title { font-size: 28px; font-weight: 700; line-height: 1.25; color: var(--color-text); }
.operator__text { font-size: 17px; line-height: 1.7; color: var(--color-text-light); }

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */
.pricing-toggle { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 40px; font-size: 15px; color: var(--color-text-light); }
.pricing-toggle__note { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--color-bg-tint); color: var(--color-secondary); font-weight: 600; font-size: 14px; }
.pricing-toggle__note i { font-size: 13px; }

.price-card {
  display: flex; flex-direction: column; gap: 16px; width: 100%;
  padding: 30px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.price-card--featured { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-md); }
.price-card__badge {
  align-self: flex-start;
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--color-primary); color: var(--color-white);
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.price-card__name { font-size: 20px; font-weight: 700; color: var(--color-text); }
.price-card__blurb { font-size: 14.5px; line-height: 1.55; color: var(--color-text-light); min-height: 44px; }
.price-card__amount { display: flex; align-items: baseline; gap: 6px; }
.price-card__figure { font-family: var(--font-heading); font-size: 44px; font-weight: 700; line-height: 1; color: var(--color-text); letter-spacing: -0.03em; }
.price-card__period { font-size: 15px; color: var(--color-text-muted); font-weight: 500; }
.price-card__annual { font-size: 13.5px; color: var(--color-text-muted); }
.price-card__features { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; border-top: 1px solid var(--color-border); margin-top: 4px; }
.price-card__features li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--color-text-light); }
.price-card__features i { color: var(--color-primary); font-size: 13px; margin-top: 4px; flex-shrink: 0; }
.price-card__features li:first-child { margin-top: 12px; }
.price-card__cta { margin-top: auto; padding-top: 8px; }

.price-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-white); }
.price-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.price-table th, .price-table td { padding: 16px 20px; text-align: left; font-size: 15px; border-bottom: 1px solid var(--color-border); }
.price-table th { background: var(--color-bg-alt); font-weight: 600; color: var(--color-text); font-size: 14.5px; }
.price-table td { color: var(--color-text-light); }
.price-table tr:last-child td { border-bottom: none; }
.price-table td:first-child { font-weight: 600; color: var(--color-text); }

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin: 0 auto; }
.faq__item { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.faq__question {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 20px 24px;
  background: transparent; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-heading); font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--color-text);
  transition: var(--transition);
}
.faq__question:hover { color: var(--color-primary); }
.faq__icon { font-size: 14px; color: var(--color-primary); flex-shrink: 0; transition: var(--transition); }
.faq__item.is-open .faq__icon { transform: rotate(180deg); }
.faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq__item.is-open .faq__answer { max-height: 620px; }
.faq__answer-inner { padding: 0 24px 22px; font-size: 16px; line-height: 1.7; color: var(--color-text-light); }
.faq__answer-inner p + p { margin-top: 12px; }

/* --------------------------------------------------------------------------
   CTA section
   -------------------------------------------------------------------------- */
.cta {
  background: var(--color-primary);
  padding: 88px 0;
  text-align: center;
}
.cta__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cta__title { font-size: 40px; font-weight: 700; line-height: 1.15; color: var(--color-white); max-width: 760px; }
.cta__text { font-size: 19px; line-height: 1.6; color: rgba(255,255,255,0.88); max-width: 620px; }
.cta__note { font-size: 14.5px; color: rgba(255,255,255,0.75); }

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */
.contact-layout { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.contact-layout__form { flex: 1 1 520px; min-width: 0; }
.contact-layout__aside { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

.form { display: flex; flex-direction: column; gap: 20px; padding: 32px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.form__row { display: flex; flex-wrap: wrap; gap: 20px; }
.form__group { display: flex; flex-direction: column; gap: 7px; flex: 1 1 220px; min-width: 0; }
.form__label { font-size: 14.5px; font-weight: 600; color: var(--color-text); }
.form__label span { color: var(--color-text-muted); font-weight: 400; }
.form__input, .form__select, .form__textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.form__input:focus, .form__select:focus, .form__textarea:focus {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.form__textarea { min-height: 140px; resize: vertical; }
.form__consent { font-size: 13px; line-height: 1.55; color: var(--color-text-muted); margin-top: 2px; }
.form__consent a { color: var(--color-text-light); text-decoration: underline; }
.form__consent a:hover { color: var(--color-primary); }
.form__checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: var(--color-text-light); }
.form__checkbox input { margin-top: 4px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--color-primary); }
.form__error { font-size: 13px; color: #B91C1C; display: none; }
.form__group.has-error .form__error { display: block; }
.form__group.has-error .form__input, .form__group.has-error .form__textarea { border-color: #B91C1C; }
.form__success { display: none; padding: 16px 18px; border-radius: var(--radius-sm); background: var(--color-bg-tint); color: var(--color-secondary); font-size: 15px; font-weight: 500; }
.form__success.is-visible { display: block; }
/* Honeypot. Elementor Pro renders its own honeypot as display:none, so the
   static side matches: it is not a control, not a tap target, and not in the
   accessibility tree. A filled value fails validation server-side. */
.form__honeypot { display: none !important; }

.info-card { display: flex; flex-direction: column; gap: 14px; padding: 26px; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); }
.info-card__title { font-size: 17px; font-weight: 600; color: var(--color-text); }
.info-card__list { display: flex; flex-direction: column; gap: 12px; }
.info-card__list li { display: flex; gap: 12px; font-size: 15.5px; line-height: 1.5; color: var(--color-text-light); }
.info-card__list i { color: var(--color-primary); font-size: 15px; margin-top: 4px; flex-shrink: 0; width: 18px; text-align: center; }

/* --------------------------------------------------------------------------
   Legal document pages
   -------------------------------------------------------------------------- */
.legal { padding: 64px 0 88px; }
.legal__title { font-size: 40px; margin-bottom: 8px; }
.legal__meta { font-size: 14px; color: var(--color-text-muted); margin-bottom: 32px; }
.legal h2 { font-size: 22px; margin: 36px 0 10px; }
.legal p { font-size: 16px; line-height: 1.75; color: var(--color-text-light); }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 22px; margin: 10px 0; list-style: disc; }
.legal li { font-size: 16px; line-height: 1.75; color: var(--color-text-light); margin-bottom: 8px; }
.legal b { color: var(--color-text); font-weight: 600; }
.legal a { text-decoration: underline; }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.error-page { padding: 120px 0; text-align: center; }
.error-page__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.error-page__code { font-family: var(--font-heading); font-size: 96px; font-weight: 700; line-height: 1; color: var(--color-primary); letter-spacing: -0.04em; }
.error-page__title { font-size: 34px; }
.error-page__text { font-size: 18px; color: var(--color-text-light); max-width: 520px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--color-dark); color: #A1A1AA; padding: 72px 0 0; }
.footer__grid { display: flex; flex-wrap: wrap; gap: 48px; padding-bottom: 56px; }
.footer__brand { flex: 1 1 300px; display: flex; flex-direction: column; gap: 16px; }
.footer__logo { display: inline-flex; align-items: center; gap: 10px; }
.footer__logo-text { font-family: var(--font-heading); font-size: 19px; font-weight: 700; color: var(--color-white); letter-spacing: -0.02em; }
.footer__tagline { font-size: 15.5px; line-height: 1.6; color: #A1A1AA; max-width: 320px; }
.footer__gloss { font-size: 14px; color: #71717A; }
.footer__col { flex: 1 1 160px; display: flex; flex-direction: column; gap: 14px; }
.footer__heading { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-white); }
.footer__list { display: flex; flex-direction: column; gap: 10px; }
.footer__link { font-size: 15px; color: #A1A1AA; }
.footer__link:hover { color: var(--color-white); }
.footer__contact { display: flex; flex-direction: column; gap: 10px; }
.footer__contact li { display: flex; gap: 10px; font-size: 15px; color: #A1A1AA; line-height: 1.5; }
.footer__contact i { color: var(--color-primary); font-size: 14px; margin-top: 4px; width: 16px; flex-shrink: 0; }
.footer__contact a { color: #A1A1AA; }
.footer__contact a:hover { color: var(--color-white); }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px 0 32px; border-top: 1px solid #27272A;
}
.footer__fineprint { font-size: 13.5px; line-height: 1.6; color: #71717A; max-width: 640px; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__legal a { font-size: 13.5px; color: #A1A1AA; }
.footer__legal a:hover { color: var(--color-white); }

/* --------------------------------------------------------------------------
   Back to top
   -------------------------------------------------------------------------- */
.back-to-top {
  position: fixed; bottom: 24px; right: 24px; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--color-primary); color: var(--color-white); font-size: 16px;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: var(--transition);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--color-secondary); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   Entrance animation
   -------------------------------------------------------------------------- */
[data-animate] { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
[data-animate].is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-animate] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Photography
   Real imagery rather than text-only sections. Every photo is decorative or
   illustrative of an industry: none of it is presented as a Mande customer,
   a Mande interface, or first-party photography.
   -------------------------------------------------------------------------- */
.photo-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.photo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #D4D4D8; }
.photo-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-border-light); }
.photo-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.photo-card:hover .photo-card__media img { transform: scale(1.04); }
.photo-card__tag {
  position: absolute; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.94); backdrop-filter: blur(4px);
  font-size: 13.5px; font-weight: 600; color: var(--color-text);
}
.photo-card__tag i { font-size: 12px; color: var(--color-primary); }
.photo-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 26px; }
.photo-card__title { font-size: 19px; font-weight: 600; color: var(--color-text); }
.photo-card__text { font-size: 15px; line-height: 1.6; color: var(--color-text-light); }

/* Alternating image and copy band */
.media-row { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.media-row--flip { flex-direction: row-reverse; }
.media-row__media { flex: 1 1 440px; min-width: 0; }
.media-row__media img {
  width: 100%; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; object-fit: cover;
}
.media-row__body { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.media-row__eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-primary);
}
.media-row__title { font-size: 34px; font-weight: 700; line-height: 1.18; color: var(--color-text); letter-spacing: -0.02em; }
.media-row__text { font-size: 17px; line-height: 1.7; color: var(--color-text-light); }
.media-row__list { display: flex; flex-direction: column; gap: 12px; }
.media-row__list li { display: flex; gap: 12px; font-size: 16px; line-height: 1.55; color: var(--color-text-light); }
.media-row__list i { color: var(--color-primary); font-size: 15px; margin-top: 5px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   SaaS marketing layer
   Product UI carries the feature sections, the way Podium and its peers do.
   Backgrounds stay light; contrast comes from the blue accent, not dark bands.
   -------------------------------------------------------------------------- */

/* Hero type is owned by the .hero / .hero--product rules above.
   The old .hero--lg block (72px centred headline) was removed when the
   homepage moved to hero-product-showcase - no element carries that class. */

/* Bento feature grid: two wide tiles, four standard */
.bento { display: flex; flex-wrap: wrap; gap: 20px; }
.bento__item { display: flex; }
.bento__item--wide { width: calc(50% - 10px); }
.bento__item--third { width: calc(33.333% - 14px); }
.tile {
  display: flex; flex-direction: column; gap: 14px; width: 100%;
  padding: 28px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
}
.tile:hover { border-color: #C7D2FE; box-shadow: var(--shadow-md); transform: translateY(-3px); }
.tile__label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-primary);
}
.tile__title { font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--color-text); letter-spacing: -0.01em; }
.tile__text { font-size: 15.5px; line-height: 1.6; color: var(--color-text-light); }
.tile__visual { margin-top: auto; padding-top: 8px; }

/* Product UI fragments used inside tiles and bands */
.ui {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ui--flush { background: var(--color-white); }
.ui__row { display: flex; align-items: center; gap: 10px; }
.ui__pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--color-bg-tint); color: var(--color-secondary);
  font-size: 12.5px; font-weight: 600;
}
.ui__pill--muted { background: var(--color-border-light); color: var(--color-text-muted); }
.ui__pill--solid { background: var(--color-primary); color: var(--color-white); }
.ui__bar { height: 8px; border-radius: 4px; background: var(--color-border); flex: 1; }
.ui__bar--fill { background: var(--color-primary); }
.ui__label { font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); }
.ui__text { font-size: 13.5px; line-height: 1.5; color: var(--color-text); }

/* Pipeline board */
.ui-pipe { display: flex; gap: 8px; }
.ui-pipe__col { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ui-pipe__head { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); }
.ui-pipe__card {
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: 6px; padding: 8px 10px; font-size: 12.5px; font-weight: 500; color: var(--color-text);
}
.ui-pipe__card--active { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(37,99,235,0.12); }

/* Booking calendar */
.ui-cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ui-cal__slot {
  padding: 9px 4px; border-radius: 6px; text-align: center;
  background: var(--color-white); border: 1px solid var(--color-border);
  font-size: 12.5px; font-weight: 600; color: var(--color-text);
}
.ui-cal__slot--taken { background: var(--color-border-light); color: #A1A1AA; border-color: var(--color-border-light); }
.ui-cal__slot--picked { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }

/* Before / after contrast band */
.contrast { display: flex; flex-wrap: wrap; gap: 24px; }
.contrast__col { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 30px; border-radius: var(--radius-lg); }
.contrast__col--before { background: var(--color-bg-alt); border: 1px solid var(--color-border); }
.contrast__col--after { background: var(--color-bg-tint); border: 1px solid #BFDBFE; }
.contrast__label { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.contrast__col--before .contrast__label { color: var(--color-text-muted); }
.contrast__col--after .contrast__label { color: var(--color-primary); }
.contrast__headline { font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--color-text); letter-spacing: -0.01em; }
.contrast__list { display: flex; flex-direction: column; gap: 11px; }
.contrast__list li { display: flex; gap: 11px; font-size: 15.5px; line-height: 1.55; color: var(--color-text-light); }
.contrast__list i { font-size: 14px; margin-top: 4px; flex-shrink: 0; }
.contrast__col--before i { color: #A1A1AA; }
.contrast__col--after i { color: var(--color-primary); }

/* ==========================================================================
   Aesthetic layer
   Depth from layered blue->cyan washes, spacing, borders and shadow.
   Gradients are permitted as a DEPTH layer only (hero wash, product glow,
   accent rules); every CTA stays a solid blue-600 fill.
   No purple or violet anywhere (design-system.json brandRules.forbiddenHues),
   and no coloured side-borders on cards.
   ========================================================================== */

:root {
  --blue-50:  #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;
  --ring: 0 0 0 1px rgba(9,9,11,0.06);
  --shadow-xl: 0 40px 80px -24px rgba(9,9,11,0.20), 0 12px 28px -12px rgba(9,9,11,0.10);
}

/* --- Sticky header: glass, solid underline on hover ---------------------- */
/* The blur lives on a backdrop layer, NOT on .header itself.
   backdrop-filter (like filter and transform) makes an element a containing
   block for position:fixed descendants. Applied to .header it re-anchored the
   closed mobile drawer to the header instead of the viewport, so the drawer's
   own width became horizontal page overflow on every page and breakpoint. */
.header { background: transparent; }
.header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.header--scrolled { box-shadow: 0 1px 0 rgba(9,9,11,0.07), 0 8px 24px -12px rgba(9,9,11,0.14); }
.nav__link { position: relative; }
.nav__link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; border-radius: 2px; background: var(--color-primary);
  transform: scaleX(0); transform-origin: center; transition: transform 0.22s ease;
}
.nav__link:hover::after, .nav__link--active::after { transform: scaleX(1); }

/* --- Hero: recessed ground + bounded white panel ------------------------- */
.hero { border-bottom: 1px solid var(--color-border); }
.hero__panel { border-radius: var(--radius-lg); }
.hero__badge {
  background: var(--color-white);
  border-color: var(--blue-200);
  box-shadow: 0 1px 2px rgba(9,9,11,0.05);
}
.hero__rotator { color: var(--color-primary); }
.hero .mockup { box-shadow: var(--shadow-xl); border-color: rgba(9,9,11,0.10); }

/* --- Buttons ------------------------------------------------------------- */
.btn--primary { background: var(--color-primary); box-shadow: 0 1px 2px rgba(9,9,11,0.08); }
.btn--primary:hover { background: var(--color-secondary); box-shadow: 0 10px 22px -12px rgba(9,9,11,0.4); }
.btn--secondary { background: var(--color-white); box-shadow: var(--ring); }

/* --- Section eyebrow: FLAT micro-label, not a pill ----------------------- */
/* Researched 2026-08-21 against Linear, Vercel, Attio, Clerk, Resend, Cal.com:
   EVERY uppercase micro-label on all six renders at border-radius 0 with no
   background. The tinted pill chip is a mid-2010s SaaS signature. The label is
   now carried by weight, letter-spacing and colour alone.
   (The HERO ANNOUNCEMENT badge is a different element and stays a pill -
   Attio, Cal.com and Vercel all still use a pill there.) */
.section__eyebrow, .media-row__eyebrow, .tile__label {
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.section__eyebrow { margin-bottom: 16px; }

/* Alternating accent so consecutive bands do not read as one flat blue.
   Accent is cyan-500 family - decorative only, never a CTA. */
.section--alt .section__eyebrow,
.media-row__eyebrow { color: var(--color-accent-deep); }
.tile__label { color: var(--color-primary); }
.media-row__eyebrow, .tile__label { align-self: flex-start; }

/* --- Cards: deeper radius, even border on every edge --------------------- */
/* Card radius follows --radius-lg (10px). Measured SaaS references put cards
   at 6-12px; 18px read as consumer-app rather than B2B SaaS. */
.card, .tile, .photo-card, .price-card, .faq__item, .info-card, .form,
.mockup, .compare, .price-table-wrap, .proof__panel, .contrast__col {
  border-radius: var(--radius-lg);
}
/* The hero mockup keeps the firmer border set above - do not let the generic
   card shadow rule flatten it back onto the white panel. */
.hero__visual .mockup { border-color: var(--color-border); }
.card, .tile, .photo-card, .price-card { box-shadow: var(--ring), 0 2px 4px rgba(9,9,11,0.04); }
.card:hover, .tile:hover, .photo-card:hover, .price-card:hover {
  border-color: #D4D4D8;
  box-shadow: 0 24px 48px -22px rgba(9,9,11,0.22);
}
.card__icon { background: var(--blue-50); color: var(--color-primary); }

/* --- Dark section: solid, for rhythm ------------------------------------ */
.section--dark { background: var(--color-dark); color: #E4E4E7; }
.section--dark .section__eyebrow { color: #22D3EE; }
.section--dark .proof__title { color: #FFFFFF; }
.section--dark .proof__text { color: #A1A1AA; }
.section--dark .proof__list li { color: #D4D4D8; }
.section--dark .proof__list strong { color: #FFFFFF; }
.section--dark .proof__list i { color: #22D3EE; }
.section--dark .proof__panel {
  background: #18181B;
  border-color: #3F3F46;
  box-shadow: 0 30px 60px -28px rgba(0,0,0,0.6);
}
.section--dark .proof__panel-label { color: var(--blue-400); }
.section--dark .proof__panel-title { color: #FFFFFF; }
.section--dark .proof__panel-text { color: #A1A1AA; }

/* --- CTA band: brand gradient, blue -> cyan-600 -------------------------- */
.cta { background: var(--gradient-brand); }

/* --- Footer accent rule: brand gradient --------------------------------- */

/* --- Footer -------------------------------------------------------------- */
.footer { position: relative; }
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-brand); }

/* --- Media row image ----------------------------------------------------- */
.media-row__media img { box-shadow: var(--shadow-xl); }

/* --- Contrast band: the winning side is lifted, not tinted with gradient -- */
.page-hero {
  position: relative;
  background: var(--gradient-page-hero);
  overflow: hidden;
  isolation: isolate;
}
.page-hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 560px; height: 560px; top: -240px; right: -160px;
  background: radial-gradient(circle, rgba(6,182,212,0.13) 0%, rgba(6,182,212,0) 68%);
}

.contrast__col--after {
  background: var(--blue-50);
  border-color: var(--blue-200);
  box-shadow: 0 24px 56px -30px rgba(9,9,11,0.35);
}

/* --- Back to top --------------------------------------------------------- */
.back-to-top { background: var(--color-primary); box-shadow: 0 12px 28px -12px rgba(9,9,11,0.45); }

@media (prefers-reduced-motion: reduce) { .nav__link::after { transition: none; } }