/* master.css — Talitu master stylesheet (the COMPLETE homepage stylesheet, shared site-wide).
   The homepage has no inline <style>; other pages add only page-specific rules below the link. */

:root {
  --display: "Manrope", system-ui, sans-serif;
  --body: "Manrope", system-ui, sans-serif;

  /* Tight geometry (September 2026): reads as an engineered system and a
       considered B2B purchase, not self-serve SaaS. Buttons 10px, labels 6px. */
  --radius-lg: 14px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-soft: 0 18px 40px rgba(var(--ink-rgb), 0.07);
  --shadow-card: 0 8px 24px rgba(var(--ink-rgb), 0.06);
  --shadow-lift: 0 6px 22px rgba(var(--ink-rgb), 0.05);
  --shadow-float: 0 24px 60px rgba(var(--ink-rgb), 0.12);

  /* MCPForm.io brand colours, used only by the homepage #proof section, so a
     different product reads as different at a glance. Fixed across themes. */
  --mcp-ink: #172554;
  --mcp-ink-rgb: 23, 37, 84;
  --mcp-accent: #4f46e5;
  --mcp-accent-rgb: 79, 70, 229;
  --mcp-tint: #f3f4fd;
  --mcp-line: #dfe1f8;

  /* default to teal-gold theme.
       Re-tuned September 2026 for the Workflow Sprint offer: a cleaner, more
       saturated teal for buttons and links, a teal-tinted ink instead of navy
       (one hue family, calmer), cool neutrals instead of cream (reads
       "operations", not "boutique"), and a lighter gold kept for the one
       action on dark surfaces. */
  --bg: #ffffff;
  --bg-warm: #f4f7f6;
  --ink: #102b36;
  --ink-rgb: 16, 43, 54;
  --ink-soft: #2d434b;
  --ink-faint: #5d7078;
  --line: #d9e2e0;
  --line-soft: #e9efee;
  --accent: #0e5c63;
  --accent-rgb: 14, 92, 99;
  --accent-dark: #0a464c;
  --accent-soft: #dceceb;
  --tertiary: #c79a46;
  --tertiary-soft: #f3e7ce;
  --accent-line: #b9d3d1;
  --sage: #e7eeed;
  --sage-deep: #1f6370;
  --lilac: #e7eeed;
  --sky: #dceceb;
  --cream: #f4f7f6;
  --hero-white: #f9fbfb;
  --section-white: #f4f7f6;
  --orb-1: rgba(14, 92, 99, 0.16);
  --orb-2: rgba(16, 43, 54, 0.14);
  --orb-3: rgba(199, 154, 70, 0.14);
  --shadow-btn-hover:
    0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 14px 32px rgba(14, 92, 99, 0.3);
  --shadow-after: 0 14px 36px rgba(14, 92, 99, 0.16);
  /* dark surfaces (hero, promises, final CTA) and the action colour on them */
  --deep: #102b36;
  --deep-2: #0a4249;
  --deep-glow: rgba(24, 121, 126, 0.33);
  --on-deep: #d3e1df;
  --gold-light: #e1bd72;
  --cta: #d7b36a;
  --cta-hover: #e3c27e;
}

/* ============================================================
     THEME PALETTES — switch by setting data-theme on <html>:
     <html lang="en" data-theme="teal-gold"> (cream | teal | teal-gold | teal-simple | blue | green)
     ============================================================ */
[data-theme="cream"] {
  --bg: #ffffff;
  --bg-warm: #faf7f2;
  --ink: #1c1b1a;
  --ink-rgb: 28, 27, 26;
  --ink-soft: #463f3a;
  --ink-faint: #6e6862;
  --line: #efece6;
  --line-soft: #f6f4ef;
  --accent: #e8643c;
  --accent-dark: #cf4f29;
  --accent-soft: #fdeee7;
  --accent-line: #f6d4c6;
  --sage: #eef1e9;
  --sage-deep: #6f9367;
  --lilac: #efebf5;
  --sky: #e8eef2;
  --cream: #faf3e8;
  --hero-white: #fdfbf7;
  --section-white: #fbf9f5;
  --orb-1: rgba(232, 100, 60, 0.15);
  --orb-2: rgba(174, 191, 163, 0.28);
  --orb-3: rgba(179, 167, 201, 0.26);
  --shadow-btn-hover: 0 6px 16px rgba(232, 100, 60, 0.22);
  --shadow-after: 0 14px 36px rgba(232, 100, 60, 0.16);
}
[data-theme="teal"] {
  --bg: #ffffff;
  --bg-warm: #faf7f2;
  --ink: #0b2239;
  --ink-rgb: 11, 34, 57;
  --ink-soft: #252a35;
  --ink-faint: #5b6470;
  --line: #e3e0da;
  --line-soft: #f0ede7;
  --accent: #124750;
  --accent-dark: #0e3a41;
  --accent-soft: #e2ebec;
  --accent-line: #c2d5d6;
  --sage: #e6edec;
  --sage-deep: #1f6370;
  --lilac: #e9e9e4;
  --sky: #e2ebec;
  --cream: #faf7f2;
  --hero-white: #fcfaf6;
  --section-white: #f9f6f1;
  --orb-1: rgba(18, 71, 80, 0.16);
  --orb-2: rgba(11, 34, 57, 0.14);
  --orb-3: rgba(201, 149, 58, 0.14);
  --shadow-btn-hover:
    0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 14px 32px rgba(18, 71, 80, 0.3);
  --shadow-after: 0 14px 36px rgba(18, 71, 80, 0.16);
}

[data-theme="teal-simple"] {
  --bg: #ffffff;
  --bg-warm: #f7f5f1;
  --ink: #19211f;
  --ink-rgb: 25, 33, 31;
  --ink-soft: #3d4541;
  --ink-faint: #646b67;
  --line: #e9e5dd;
  --line-soft: #f2efe8;
  --accent: #1a6e74;
  --accent-dark: #12565b;
  --accent-soft: #e0eeef;
  --accent-line: #bcdadc;
  --sage: #e9ede9;
  --sage-deep: #6f9367;
  --lilac: #ebe8e2;
  --sky: #e3edef;
  --cream: #f6efe2;
  --hero-white: #fbfaf6;
  --section-white: #faf8f3;
  --orb-1: rgba(26, 110, 116, 0.15);
  --orb-2: rgba(174, 191, 163, 0.24);
  --orb-3: rgba(26, 110, 116, 0.12);
  --shadow-btn-hover: 0 6px 16px rgba(26, 110, 116, 0.24);
  --shadow-after: 0 14px 36px rgba(26, 110, 116, 0.16);
}
[data-theme="blue"] {
  --bg: #ffffff;
  --bg-warm: #f4f6f9;
  --ink: #141a22;
  --ink-rgb: 20, 26, 34;
  --ink-soft: #38414e;
  --ink-faint: #626c79;
  --line: #e6e9ee;
  --line-soft: #f0f2f5;
  --accent: #1f5fbf;
  --accent-dark: #184996;
  --accent-soft: #e5edfa;
  --accent-line: #c5d7f1;
  --sage: #e7eef0;
  --sage-deep: #2f7d8c;
  --lilac: #e8eaf2;
  --sky: #e6eef7;
  --cream: #eef1f5;
  --hero-white: #fbfcfe;
  --section-white: #f7f9fb;
  --orb-1: rgba(31, 95, 191, 0.15);
  --orb-2: rgba(47, 125, 140, 0.2);
  --orb-3: rgba(31, 95, 191, 0.12);
  --shadow-btn-hover: 0 6px 16px rgba(31, 95, 191, 0.24);
  --shadow-after: 0 14px 36px rgba(31, 95, 191, 0.16);
}
[data-theme="green"] {
  --bg: #ffffff;
  --bg-warm: #f4f8f5;
  --ink: #15201a;
  --ink-rgb: 21, 32, 26;
  --ink-soft: #3a463f;
  --ink-faint: #5f6b63;
  --line: #e5ebe7;
  --line-soft: #eef3f0;
  --accent: #1f9d63;
  --accent-dark: #167a4c;
  --accent-soft: #e2f3ea;
  --accent-line: #c3e3d0;
  --sage: #e7efe9;
  --sage-deep: #2f7d8c;
  --lilac: #e9ece9;
  --sky: #e6eff0;
  --cream: #eef3ee;
  --hero-white: #fafcfb;
  --section-white: #f7faf8;
  --orb-1: rgba(31, 157, 99, 0.15);
  --orb-2: rgba(47, 125, 140, 0.2);
  --orb-3: rgba(31, 157, 99, 0.12);
  --shadow-btn-hover: 0 6px 16px rgba(31, 157, 99, 0.24);
  --shadow-after: 0 14px 36px rgba(31, 157, 99, 0.16);
}

/* ============================================================
     TEAL-GOLD only — same teal palette plus a gold "tertiary"
     accent. Applied only when data-theme="teal-gold"; the plain
     "teal" theme and all others are unaffected.
     ============================================================ */
[data-theme="teal-gold"] .hero-eyebrow .star {
  color: var(--tertiary);
}
[data-theme="teal-gold"] .proofcase-quote .hl {
  color: var(--tertiary);
}
[data-theme="teal-gold"] .pc-stat .pc-num {
  color: var(--tertiary);
}
[data-theme="teal-gold"] .flow-arrow {
  color: var(--tertiary);
}

[data-theme="teal-gold"] .hero h1 em {
  font-weight: 800;
  position: relative;
  white-space: nowrap;
}
[data-theme="teal-gold"] .hero h1 em::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0.04em;
  height: 0.38em;
  background: linear-gradient(
    180deg,
    transparent 58%,
    var(--tertiary-soft) 58%
  );
  z-index: -1;
  border-radius: 2px;
}
/* A longer accent phrase must wrap on phones, or it runs off the screen. */
@media (max-width: 680px) {
  [data-theme="teal-gold"] .hero h1 em { white-space: normal; }
  [data-theme="teal-gold"] .hero h1 em::after { display: none; }
}
[data-theme="teal-gold"] h2.sec-title em,
[data-theme="teal-gold"] .price-title em,
[data-theme="teal-gold"] .final-inner h2 em {
  font-weight: 800;
  position: relative;
}
[data-theme="teal-gold"] h2.sec-title em::after,
[data-theme="teal-gold"] .final-inner h2 em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.05em;
  height: 0.32em;
  background: linear-gradient(
    180deg,
    transparent 60%,
    var(--tertiary-soft) 60%
  );
  z-index: -1;
  border-radius: 2px;
}
[data-theme="teal-gold"] .price-title em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.05em;
  height: 0.3em;
  background: linear-gradient(
    180deg,
    transparent 60%,
    var(--tertiary-soft) 60%
  );
  z-index: -1;
  border-radius: 2px;
}

[data-theme="teal-gold"] .problem-punch .u {
  color: var(--ink);
  background: linear-gradient(
    180deg,
    transparent 62%,
    var(--tertiary-soft) 62%
  );
  box-shadow: inset 0 -2px 0 var(--tertiary);
  border-bottom: 0;
  padding: 0 2px 1px;
}

[data-theme="teal-gold"] .flow-node.end {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  box-shadow:
    0 0 0 4px var(--tertiary-soft),
    var(--shadow-card);
}

[data-theme="teal-gold"] .sec-tag,
[data-theme="teal-gold"] .final-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}
[data-theme="teal-gold"] .sec-tag::before,
[data-theme="teal-gold"] .final-tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tertiary);
}
[data-theme="teal-gold"] .sec-lead {
  margin-top: 16px;
}
[data-theme="teal-gold"] .step-plan .sp-num {
  background: linear-gradient(150deg, var(--accent-soft), #fff);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(var(--ink-rgb), 0.07);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}

/* slim, theme-tinted scrollbars (Firefox + WebKit). Track is transparent;
     thumb is inset via a transparent border so it reads as a thin pill. */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--ink-rgb), 0.28) transparent;
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(var(--ink-rgb), 0.22);
  border-radius: 999px;
  border: 4px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--ink-rgb), 0.4);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

::selection {
  background: var(--accent-soft);
  color: var(--accent-dark);
}
a {
  color: inherit;
  text-decoration: none;
}

/* readability: secondary text gets a touch more weight on white */
p,
li,
.sec-lead,
.hero-sub,
.pcol-sub,
.tier-for,
.sol-card p,
.faq-a p,
.step-plan p,
.cost-card ul li,
.gain-card ul li,
.footer-brand p,
.footer-col a {
  font-weight: 500;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}
.wrap-narrow {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- NAV ---------- */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  transition:
    background 0.35s ease,
    border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}
nav.scrolled {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  font-family: var(--display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.3;
}
.logo .mark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.logo .mark::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2.5px solid #fff;
}
.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
}
.nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.2s ease;
}
.nav-links a:hover {
  color: var(--ink);
}

/* Nav dropdown (AI Teammates) */
.nav-drop {
  position: relative;
}
.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 0;
  color: var(--ink-soft);
  font-family: var(--display);
  font-weight: 500;
  font-size: 15px;
  transition: color 0.15s ease;
}
.nav-drop-btn:hover {
  color: var(--ink);
}
.nav-drop-arrow {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}
.nav-drop[data-open="true"] .nav-drop-arrow,
.nav-drop:hover .nav-drop-arrow {
  transform: rotate(180deg);
}
.nav-drop-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  z-index: 50;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop[data-open="true"] .nav-drop-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-drop-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ink) !important;
  font-size: 14px;
  transition: background 0.15s ease;
}
.nav-drop-menu a:hover {
  background: var(--bg-warm);
}
.nd-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent);
  min-width: 22px;
}
.nd-name {
  font-weight: 600;
}
/* invisible hover bridge so the dropdown stays open moving cursor down */
.nav-drop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}
/* Smooth scroll for anchor links to teammate sections */
html {
  scroll-behavior: smooth;
}
.nav-outline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid var(--ink);
  color: var(--ink) !important;
  padding: 9px 18px;
  border-radius: 100px;
  font-weight: 600 !important;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.nav-outline-ico {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.nav-outline:hover {
  background: var(--ink);
  color: #fff !important;
}
.nav-cta {
  background: var(--accent);
  color: #fff !important;
  padding: 11px 22px;
  border-radius: 100px;
  font-weight: 600 !important;
  transition:
    background 0.2s ease,
    transform 0.18s ease;
}
.nav-cta:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
}
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.burger span {
  width: 24px;
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
}

/* ---------- BUTTONS ---------- */
.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  font-family: var(--body);
  font-weight: 600;
  font-size: 16px;
  padding: 16px 34px;
  border-radius: 100px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.18s ease,
    box-shadow 0.2s ease;
  display: inline-block;
}
.btn-primary:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-hover);
}
.btn-primary.lg {
  font-size: 17px;
  padding: 18px 40px;
}
.text-link {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--line);
  padding-bottom: 2px;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.text-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  margin-top: -73px;
  padding: 104px 0 80px;
  overflow: hidden;
  background:
    radial-gradient(
      900px 520px at 16% -8%,
      var(--accent-soft) 0%,
      transparent 60%
    ),
    radial-gradient(820px 560px at 90% 4%, var(--sage) 0%, transparent 58%),
    radial-gradient(720px 620px at 60% 108%, var(--lilac) 0%, transparent 62%),
    linear-gradient(
      180deg,
      var(--bg-warm) 0%,
      var(--hero-white) 66%,
      var(--bg) 100%
    );
}
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  background: linear-gradient(180deg, transparent, var(--bg));
  pointer-events: none;
}
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.orb-1 {
  width: 360px;
  height: 360px;
  background: var(--orb-1);
  top: -60px;
  left: -50px;
}
.orb-2 {
  width: 420px;
  height: 420px;
  background: var(--orb-2);
  bottom: -130px;
  right: -90px;
}
.orb-3 {
  width: 240px;
  height: 240px;
  background: var(--orb-3);
  top: 90px;
  right: 150px;
}

.hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
}
.hero-copy {
  max-width: 1050px;
  margin: 0 auto;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 10px rgba(var(--ink-rgb), 0.04);
  padding: 7px 16px;
  border-radius: 100px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.hero-eyebrow .star {
  color: var(--accent);
}
.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.1rem, 3.4vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 auto;
}
.hero h1 em {
  font-style: normal;
  color: var(--accent);
}
.hero .hero-sub {
  margin: 14px auto 0;
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  color: var(--ink-soft);
  max-width: 60ch;
}
.hero-cta-wrap {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.hero-reassure {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-faint);
  margin: 0;
}
/* secondary link under the hero - quiet, doesn't compete with the primary CTA */
.hero-cta-secondary {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  padding: 4px 2px;
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}
.hero-cta-secondary:hover {
  color: var(--ink);
  text-decoration-color: var(--ink-faint);
}

/* hero flow visual - full-width row of realistic UI mockups */
.hero-flow {
  margin-top: 34px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  padding: 30px 32px 34px;
}
.hero-flow .hf-head {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 22px;
  text-align: center;
}
.hf-track {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.hf-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* the mock "screen" */
.hf-screen {
  flex: 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 188px;
}
/* per-app screen themes - deliberately OFF the Talitu palette */
.hf-screen.s-ig {
  background: #fafafa;
  border-color: #e4e4e8;
} /* social app */
.hf-screen.s-ai {
  background: #f4f5f7;
  border-color: #e3e5ea;
} /* messaging */
.hf-screen.s-crm {
  background: #f3f6fb;
  border-color: #dbe3ee;
} /* CRM software */
.hf-screen.s-cal {
  background: #f1f8f4;
  border-color: #d4e8da;
} /* calendar app */
.hf-screen-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.hf-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}
.hf-av-ig {
  background: linear-gradient(135deg, #c13584, #e1306c, #fd1d1d, #f77737);
}
.hf-av-ai {
  background: var(--accent);
}
.hf-av-crm {
  background: #3b6fb5;
}
.hf-av-clinic {
  background: #2f8f5b;
}
.hf-screen-top .hf-who {
  font-size: 13px;
  font-weight: 700;
  color: #1f2430;
}
.hf-screen-top .hf-meta {
  font-size: 12px;
  color: #8b8f99;
}
.hf-screen-top .hf-tag-live {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: #2f8f5b;
  display: flex;
  align-items: center;
  gap: 4px;
}
.hf-screen-top .hf-tag-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2f8f5b;
}
/* chat bubbles */
.hf-bubble {
  font-size: 13px;
  line-height: 1.4;
  padding: 8px 11px;
  border-radius: 13px;
  max-width: 86%;
}
.hf-bubble.them {
  background: #fff;
  border: 1px solid #e4e4e8;
  color: #1f2430;
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}
/* IG-style outgoing bubble = social-app blue/purple */
.hf-bubble.us {
  background: #3797f0;
  color: #fff;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}
/* the AI's reply on screen 2 keeps Talitu's accent - it IS Talitu working */
.hf-bubble.us-ai {
  background: var(--accent);
}
.hf-typing {
  align-self: flex-start;
  display: flex;
  gap: 3px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid #e4e4e8;
  border-radius: 13px;
  border-bottom-left-radius: 4px;
}
.hf-typing span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b6b9c2;
}
/* qualification rows - CRM software look */
.hf-qrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #4a5061;
  font-weight: 500;
}
.hf-qrow .hf-qcheck {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3b6fb5;
  color: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
}
.hf-qlabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8b8f99;
  margin-top: 1px;
}
/* calendar mock - calendar-app green */
.hf-cal-month {
  font-size: 12px;
  font-weight: 700;
  color: #1f2430;
  text-align: center;
}
.hf-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.hf-cal-grid span {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #8b8f99;
  border-radius: 5px;
}
.hf-cal-grid span.on {
  background: #2f8f5b;
  color: #fff;
  font-weight: 800;
}
.hf-cal-slot {
  margin-top: auto;
  background: #e6f4ec;
  border: 1px solid #2f8f5b;
  border-radius: 9px;
  padding: 7px 9px;
  font-size: 12px;
  font-weight: 700;
  color: #1f6b42;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* confirmation */
.hf-confirm {
  margin: auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hf-confirm .hf-tick {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sage-deep);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
}
.hf-confirm strong {
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
}
.hf-confirm span {
  font-size: 12px;
  color: var(--ink-soft);
}
/* per-step caption under each screen */
.hf-cap {
  text-align: center;
}
.hf-cap strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.hf-cap span {
  font-size: 12px;
  color: var(--ink-faint);
}
.hf-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 20px;
  font-weight: 700;
  padding: 0 8px;
  flex-shrink: 0;
}

/* ---------- TRUST BAR ---------- */
.trust-bar {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-warm);
  padding: 28px 0;
}
.trust-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px 34px;
  flex-wrap: wrap;
}
.trust-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.trust-item .ti {
  font-size: 17px;
}
.trust-item.check::before {
  content: "✓";
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}
.trust-types {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.trust-types .tt-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: 4px;
}
.tt-chip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  box-shadow: var(--shadow-card);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}
.tt-chip:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

/* ---------- SECTION SHELL ---------- */
section {
  padding: 86px 0;
}
.sec-center {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 46px;
}
.sec-tag {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
h2.sec-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.3vw, 2.7rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
}
h2.sec-title em {
  font-style: normal;
  color: var(--accent);
}
.sec-lead {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 1.06rem;
}
.wash-v {
  background: linear-gradient(
    180deg,
    var(--bg) 0%,
    var(--section-white) 50%,
    var(--bg) 100%
  );
}
.wash-radial {
  background:
    radial-gradient(
      620px 380px at 85% 10%,
      var(--accent-soft) 0%,
      transparent 62%
    ),
    var(--bg);
}

/* ---------- HERO DEMO (interactive AI teammate) ----------
     The widget is injected via widget.js (the same script clients use on their
     sites). We define this layout container - max-width, min-height, margin -
     and widget.js injects <div class="talitu-teammate"><iframe></iframe></div>
     inside #talitu-widget. Layout is OUR decision here on talitu.com; on a
     client site, the client makes their own layout decisions around the
     placement marker. The widget owns its own visual chrome inside the iframe. */
.hero-demo {
  max-width: 1080px;
  width: 100%;
  min-height: 480px;
  margin: 36px auto 0;
}
.demo-stage {
  position: relative;
  display: grid;
  grid-template-columns: 5fr 9fr;
  gap: 0;
  min-height: 460px;
  padding: 8px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 2px solid var(--line);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
/* LEFT: copy panel */
.demo-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 32px;
  gap: 32px;
  text-align: left; /* override hero-inner's center alignment */
}
.demo-heading {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
  max-width: 16ch;
}
.demo-copy-bottom {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
}
.demo-blurb {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 38ch;
}
/* the CTA, with a small green pulse dot inside it to signal "live" */
.demo-start {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 999px;
  cursor: pointer;
  border: none;
}
.demo-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
.demo-start:hover .demo-arrow {
  transform: translateX(3px);
}
.demo-pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2ec27e;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(46, 194, 126, 0.55);
  animation: demoPulse 2s ease-out infinite;
}
@keyframes demoPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(46, 194, 126, 0.55);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(46, 194, 126, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(46, 194, 126, 0);
  }
}
/* RIGHT: media panel - video idle, iframe live */
.demo-media {
  position: relative;
  background: var(--ink);
  min-height: 460px;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer; /* idle media is clickable to start the demo */
}
.demo-media:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}
.demo-stage[data-state="live"] .demo-media {
  cursor: default;
}
.demo-idle,
.demo-live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.demo-live {
  display: none;
}
.demo-stage[data-state="live"] .demo-idle {
  display: none;
}
.demo-stage[data-state="live"] .demo-live {
  display: block;
}
/* On live state, the iframe takes over the full card so the user has
     the most room for the conversation. */
.demo-stage[data-state="live"] {
  grid-template-columns: 1fr;
}
.demo-stage[data-state="live"] .demo-copy {
  display: none;
}
.demo-stage[data-state="live"] .demo-media {
  min-height: 600px;
}
.video-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.demo-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--ink);
}
/* End-demo button - top-right of the live iframe */
.demo-exit {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px 9px 12px;
  border: none;
  border-radius: 999px;
  background: rgba(var(--ink-rgb), 0.78);
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 5;
  transition: background 0.2s ease;
}
.demo-exit:hover {
  background: rgba(var(--ink-rgb), 0.92);
}
.demo-exit svg {
  width: 14px;
  height: 14px;
}

.demo-watermark {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 4;
  padding: 6px 9px;
  background: transparent;
  border-radius: 8px;
  line-height: 0;
  opacity: 0.92;
  pointer-events: none;
}
.demo-watermark img {
  display: block;
}

/* MOBILE: stack vertically, video on top */
@media (max-width: 760px) {
  .demo-stage {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .demo-media {
    min-height: 0;
    aspect-ratio: 1 / 1.06;
    order: 1;
  }
  .demo-copy {
    order: 2;
    padding: 28px 24px;
    gap: 22px;
    text-align: center;
    align-items: center;
  }
  .demo-heading {
    max-width: 100%;
    font-size: 1.6rem;
  }
  .demo-blurb {
    max-width: 100%;
    text-align: center;
  }
  .demo-copy-bottom {
    align-items: stretch;
  }
  .demo-start {
    width: 100%;
    justify-content: center;
  }
  .demo-stage[data-state="live"] .demo-media {
    min-height: 70vh;
    aspect-ratio: auto;
  }
}

/* ---------- LEGACY VIDEO (kept for backwards-compat / dead CSS) ---------- */
.hero-video {
  position: relative;
  max-width: 920px;
  margin: 56px auto 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  background: var(--bg-warm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
.video-sec {
  padding: 96px 0;
}
.video-frame {
  position: relative;
  max-width: 920px;
  margin: 40px auto 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  background: var(--bg-warm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.video-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ink);
}
/* Unmute button overlay - bottom-right, subtle, swaps icon + label when active */
.video-unmute {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: none;
  border-radius: 999px;
  background: rgba(var(--ink-rgb), 0.72);
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.video-unmute:hover {
  background: rgba(var(--ink-rgb), 0.88);
  transform: translateY(-1px);
}
.video-unmute .vu-ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.video-unmute .vu-on {
  display: none;
}
.video-unmute.is-on .vu-muted {
  display: none;
}
.video-unmute.is-on .vu-on {
  display: block;
}
.video-unmute.is-on .vu-label {
  display: none;
}
.video-unmute.is-on {
  padding: 10px;
}
/* Reduced-motion: pause autoplay video for users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .video-el {
    animation: none;
  }
}

/* ---------- CONTRAST (Without / With Talitu) ---------- */
.contrast {
  padding: 96px 0;
  background: var(--bg-warm);
}
.contrast-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 920px;
  margin: 40px auto 0;
}
.contrast-col {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px 30px;
}
.contrast-col.after {
  border-color: var(--accent);
  box-shadow: var(--shadow-after);
}
.cc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.cc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex-shrink: 0;
}
.cc-dot.on {
  background: var(--accent);
}
.contrast-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.contrast-col li {
  position: relative;
  padding: 9px 0 9px 26px;
  font-size: 15px;
  color: var(--ink-soft);
  border-top: 1px solid var(--line-soft);
}
.contrast-col li:first-child {
  border-top: none;
}
.contrast-col.before li::before {
  content: "×";
  position: absolute;
  left: 0;
  top: 7px;
  color: var(--ink-faint);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.contrast-col.after li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 9px;
  color: var(--accent);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

/* ---------- PROBLEM ---------- */
.problem {
  background: linear-gradient(180deg, var(--section-white) 0%, var(--bg) 55%);
}
.problem-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.pcol {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 36px 34px;
  box-shadow: var(--shadow-lift);
}
.pcol h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.pcol .pcol-sub {
  font-size: 15px;
  color: var(--ink-faint);
  margin-bottom: 20px;
}
.pcol ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pcol ul li {
  display: flex;
  gap: 12px;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.45;
}
.pcol.doing ul li::before {
  content: "\2713";
  color: var(--sage-deep);
  font-weight: 800;
  flex-shrink: 0;
}
.pcol.losing ul li::before {
  content: "✕";
  color: var(--accent);
  font-weight: 800;
  flex-shrink: 0;
}
.problem-punch {
  margin-top: 34px;
  margin-left: auto;
  margin-right: auto;
  max-width: 45ch;
  text-align: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.5vw, 1.95rem);
  letter-spacing: -0.025em;
  line-height: 1.28;
}
.problem-punch .u {
  color: var(--accent);
  border-bottom: 4px solid var(--accent-soft);
  padding-bottom: 2px;
}

/* closing beat under the four teammate cards - broadens the four roles into
     the wider AI Workforce vision. Calmer than .problem-punch by design. */
.sol-broaden {
  margin: 94px auto 0;
  max-width: 60ch;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: var(--ink);
}
.sol-broaden .lead-in {
  color: var(--accent);
}
@media (max-width: 680px) {
  .sol-broaden {
    margin-top: 68px;
  }
}

/* ---------- GROWTH MATH ---------- */
.growth-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 10px;
}
.growth-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 26px 24px;
  box-shadow: var(--shadow-card);
}
.growth-card .gc-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  margin-bottom: 14px;
}
.growth-card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
}
.growth-card p {
  margin-top: 7px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ---------- THE PLAN ---------- */
.plan-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  position: relative;
}
.step-plan {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  box-shadow: var(--shadow-lift);
  position: relative;
}
.step-plan .sp-num {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  margin-bottom: 18px;
}
.step-plan h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.step-plan p {
  font-size: 15px;
  color: var(--ink-soft);
}
.plan-cta {
  text-align: center;
  margin-top: 40px;
}

/* ---------- SOLUTION (row-based, alternating) ---------- */
.sol-rows {
  display: flex;
  flex-direction: column;
  gap: 100px;
  margin-top: 56px;
}
@media (max-width: 680px) {
  .sol-rows {
    margin-top: 46px;
  }
}
.sol-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  scroll-margin-top: 100px; /* so the anchor lands below sticky nav if any */
}
.sol-row.reverse .sol-art {
  order: 2;
}
.sol-row.reverse .sol-body {
  order: 1;
}
.sol-art {
  position: relative;
  min-height: 320px;
}
.sol-body {
  max-width: 520px;
}
.sol-num {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 12px;
}
.sol-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--ink);
}
.sol-tag {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent);
  margin: 0 0 16px;
}
.sol-desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.sol-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sol-points li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.sol-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-soft);
}
.sol-points li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 18px;
  height: 18px;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='m3 6 2 2 4-4' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='m3 6 2 2 4-4' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* Per-row tinted illustration background panel */
.sol-row:nth-child(1) .sol-art::before {
  background: var(--accent-soft);
}
.sol-row:nth-child(2) .sol-art::before {
  background: var(--sage);
}
.sol-row:nth-child(3) .sol-art::before {
  background: var(--lilac);
}
.sol-row:nth-child(4) .sol-art::before {
  background: var(--sky);
}
.sol-row:nth-child(5) .sol-art::before {
  background: var(--cream);
}
.sol-art::before {
  content: "";
  position: absolute;
  inset: -20px -20px -20px -20px;
  border-radius: var(--radius-md);
  z-index: 0;
}
.sol-row.reverse .sol-art::before {
  inset: -20px -20px -20px -20px;
}

/* ---------- SOLUTION illustration cards ---------- */
.art-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  padding: 18px 18px 20px;
  max-width: 440px;
  margin: 0 auto;
  font-family: var(--display);
}
/* shared inner pieces */
.art-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.art-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.art-av-ig {
  background: linear-gradient(135deg, #f09433 0%, #dc2743 50%, #bc1888 100%);
}
.art-who {
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
}
.art-meta {
  font-size: 12px;
  color: var(--ink-faint);
}
.art-tag-live {
  margin-left: auto;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.art-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  margin-bottom: 8px;
  font-size: 13.5px;
  line-height: 1.4;
  max-width: 88%;
}
.art-bubble.them {
  background: var(--line-soft);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.art-bubble.us {
  background: var(--accent);
  color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}
.art-typing {
  display: inline-flex;
  gap: 4px;
  padding: 10px 14px;
  background: var(--line-soft);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
}
.art-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  animation: artTyping 1.4s infinite ease-in-out;
}
.art-typing span:nth-child(2) {
  animation-delay: 0.2s;
}
.art-typing span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes artTyping {
  0%,
  60%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* follow-up step list */
.art-fu-head {
  font-weight: 800;
  font-size: 13px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.art-fu-step {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
  align-items: flex-start;
}
.art-fu-step:first-of-type {
  border-top: 0;
}
.fu-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
  margin-top: 6px;
  flex-shrink: 0;
  position: relative;
}
.art-fu-step.done .fu-dot {
  background: var(--sage-deep);
}
.art-fu-step.active .fu-dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.fu-when {
  font-size: 11px;
  color: var(--ink-faint);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.fu-msg {
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.4;
}
.art-fu-step:not(.done):not(.active) .fu-msg {
  color: var(--ink-faint);
}

/* retention rows */
.art-ret-row {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}
.art-ret-row:first-of-type {
  border-top: 0;
  padding-top: 4px;
}
.art-ret-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--lilac);
  color: #5b4d8a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  flex-shrink: 0;
}
.art-ret-name {
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--ink);
}
.art-ret-name span {
  font-weight: 500;
  color: var(--ink-faint);
}
.art-ret-bubble {
  background: var(--line-soft);
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
}

/* calendar */
.art-cal-head {
  font-weight: 800;
  font-size: 13px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.art-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-faint);
  margin-bottom: 16px;
}
.art-cal-grid span {
  padding: 6px 0;
  border-radius: 8px;
}
.art-cal-grid span.on {
  background: var(--accent);
  color: #fff;
  font-weight: 800;
}
.art-cal-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  margin-bottom: 6px;
  background: var(--line-soft);
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink);
}
.cal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex-shrink: 0;
}
.cal-dot.on {
  background: var(--sage-deep);
}
.art-cal-slot.confirmed {
  background: var(--sage);
  color: var(--sage-deep);
  font-weight: 700;
}

/* support */
.art-sup-q,
.art-sup-a {
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 10px;
  font-size: 13.5px;
  line-height: 1.4;
}
.art-sup-q {
  background: var(--line-soft);
  color: var(--ink);
}
.art-sup-a {
  background: var(--accent-soft);
  color: var(--ink);
}
.sup-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.art-sup-a .sup-label {
  color: var(--accent);
}
.art-sup-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.sup-chip {
  background: var(--sage);
  color: var(--sage-deep);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

/* ---------- SOCIAL PROOF ---------- */
.proofcase {
  background:
    radial-gradient(
      620px 380px at 85% 12%,
      var(--accent-soft) 0%,
      transparent 62%
    ),
    var(--bg);
}
.proofcase-card {
  max-width: 920px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 46px 48px;
}
.proofcase-quote {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.proofcase-quote .hl {
  color: var(--accent);
}
.proofcase-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 30px 0;
  padding: 26px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 600px) {
  /* Stack the stats vertically on narrow screens so the transformation
       numbers (e.g. "4 hrs -> 45 sec") aren't squeezed or cut off. */
  .proofcase-stats {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 0;
    margin: 24px 0;
  }
  .proofcase-card {
    padding: 28px 24px;
  }
  .proofcase-quote {
    font-size: 1.15rem;
    line-height: 1.4;
  }
}
.pc-stat .pc-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1.1;
  white-space: nowrap;
}
.proofcase-context {
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-faint);
  letter-spacing: 0.01em;
}
.pc-stat .pc-label {
  margin-top: 7px;
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 500;
}
.proofcase-attr {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pc-attr-text {
  flex: 1; /* takes available space so the logo gets pushed to the far right */
  min-width: 0;
}
.pc-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--line-soft); /* shows through if image fails to load */
  display: block;
}
.pc-attr-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.pc-attr-role {
  font-size: 14px;
  color: var(--ink-faint);
}
.pc-logo {
  flex-shrink: 0;
  height: 38px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  object-position: right center;
  opacity: 0.9;
}
@media (max-width: 600px) {
  /* on narrow screens, stack the logo below the name/role instead of squeezing
       it next to a wrapping text block */
  .proofcase-attr {
    flex-wrap: wrap;
  }
  .pc-logo {
    margin-left: auto;
  }
}

/* ---------- DIFFERENTIATOR ---------- */
.diff {
  position: relative;
  overflow: hidden;
}
.diff-flow {
  margin: 0 auto 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.flow-node {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 100px;
  padding: 13px 24px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  box-shadow: var(--shadow-lift);
}
.flow-node.end {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.flow-arrow {
  color: var(--accent);
  font-size: 20px;
  font-weight: 700;
}
.diff-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto;
}
.diff-col {
  border-radius: var(--radius-md);
  padding: 30px 30px;
}
.diff-col.old {
  background: var(--bg-warm);
  border: 1px solid var(--line);
}
.diff-col.new {
  background: #fff;
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-card);
}
.diff-col h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}
.diff-col.old h3 {
  color: var(--ink-faint);
}
.diff-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.diff-col ul li {
  font-size: 15px;
  display: flex;
  gap: 9px;
}
.diff-col.old ul li {
  color: var(--ink-faint);
}
.diff-col.old ul li::before {
  content: "•";
  color: var(--ink-faint);
}
.diff-col.new ul li {
  color: var(--ink);
  font-weight: 500;
}
.diff-col.new ul li::before {
  content: "✓";
  color: var(--accent);
  font-weight: 800;
}

/* ---------- PRICING (GATED) ---------- */
.pricing {
  background: linear-gradient(
    180deg,
    var(--bg) 0%,
    var(--section-white) 55%,
    var(--bg) 100%
  );
}
.price-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  max-width: 820px;
  margin: 0 auto;
  padding: 46px 48px;
  text-align: center;
}
.price-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  letter-spacing: -0.03em;
  line-height: 1.14;
}
.price-title em {
  font-style: normal;
  color: var(--accent);
}
.price-intro {
  margin: 12px auto 0;
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 54ch;
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line-soft);
}
.price-look {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 20px;
}
.price-factors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 560px;
  margin: 0 auto 24px;
}
.pfactor {
  background: var(--bg-warm);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.pfactor::before {
  content: "✓";
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}
.price-then {
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 auto 22px;
}
.price-roi {
  max-width: 52ch;
  margin: 0 auto 24px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.price-roi strong {
  color: var(--accent-dark);
  font-weight: 700;
}
.price-roi .roi-ico {
  display: inline-flex;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}

/* ---------- FAQ ---------- */
.faq-list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-q {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 22px 26px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-q .faq-ico {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  transition: transform 0.25s ease;
}
.faq-item.open .faq-ico {
  transform: rotate(45deg);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-a p {
  padding: 0 26px 22px;
  font-size: 15px;
  color: var(--ink-soft);
}

/* ---------- FINAL CTA ---------- */
.final {
  position: relative;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(
      700px 420px at 18% 0%,
      var(--accent-soft) 0%,
      transparent 62%
    ),
    radial-gradient(640px 440px at 88% 100%, var(--sage) 0%, transparent 60%),
    var(--bg-warm);
}
.final-inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
}
.final-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 7px 16px;
  border-radius: 100px;
  margin-bottom: 16px;
}
.final-inner h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.final-inner h2 em {
  font-style: normal;
  color: var(--accent);
}
.final-inner > p {
  margin: 16px auto 28px;
  color: var(--ink-soft);
  font-size: 1.06rem;
}
.audit-card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px 34px;
  text-align: left;
  margin-bottom: 28px;
}
.audit-head {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.audit-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}
.audit-points span {
  display: flex;
  gap: 10px;
  font-size: 15px;
  color: var(--ink-soft);
  font-weight: 500;
}
.audit-points span::before {
  content: "✓";
  color: var(--accent);
  font-weight: 800;
  flex-shrink: 0;
}
.final-urgency {
  margin-top: 16px;
  font-size: 15px;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.final-urgency::before {
  content: "●";
  color: var(--accent);
  font-size: 10px;
}

/* ---------- FOOTER ---------- */
footer {
  padding: 58px 0 34px;
  border-top: 1px solid var(--line-soft);
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 80px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line-soft);
}
.footer-brand .logo {
  margin-bottom: 14px;
}
.footer-brand p {
  color: var(--ink-soft);
  font-size: 15px;
  max-width: 34ch;
}
.footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 14px;
}
.footer-col a {
  display: block;
  color: var(--ink-soft);
  font-size: 15px;
  margin-bottom: 9px;
  transition: color 0.2s ease;
}
.footer-col a:hover {
  color: var(--accent);
}
.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 15px;
  color: var(--ink-faint);
}

/* ---------- FOOTER BOTTOM BAR: HIDDEN FOR LAUNCH ----------
     The markup stays in place on every page. Delete this one block to bring the
     bar back and nothing else needs changing. The .footer-top override undoes
     the divider rule and padding that only made sense with the bar below it. */
.footer-bottom {
  display: none;
}
.footer-top {
  padding-bottom: 0;
  border-bottom: none;
}

/* ---------- REVEAL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- RESPONSIVE ---------- */
/* desktop only: pull the hero slightly further under the nav */
@media (min-width: 1001px) {
  .hero {
    margin-top: -79px;
  }
  /* Large desktop: brand fills the left, link columns hug the right edge
       (avoids the link text floating mid-cell in oversized 1fr columns). */
  .footer-top {
    grid-template-columns: 1fr auto auto;
  }
}
@media (max-width: 1000px) {
  .sol-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .sol-row.reverse .sol-art {
    order: 1;
  }
  .sol-row.reverse .sol-body {
    order: 2;
  }
  .sol-rows {
    gap: 64px;
  }
  .sol-name {
    font-size: 1.7rem;
  }
  .plan-steps {
    grid-template-columns: 1fr 1fr;
  }
  .price-factors {
    grid-template-columns: 1fr;
  }
  .growth-grid {
    grid-template-columns: 1fr 1fr;
  }
  .problem-split,
  .diff-cols,
  .contrast-grid {
    grid-template-columns: 1fr;
  }
  .audit-points {
    grid-template-columns: 1fr;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 760px) {
  /* hero flow stacks vertically with downward arrows */
  .hf-track {
    flex-direction: column;
  }
  .hf-step {
    flex-direction: column;
  }
  .hf-screen {
    min-height: 0;
  }
  .hf-arrow {
    transform: rotate(90deg);
    padding: 6px 0;
  }
}
@media (max-width: 680px) {
  .sol-rows {
    gap: 64px;
  }
  .sol-name {
    font-size: 1.45rem;
  }
  .plan-steps {
    grid-template-columns: 1fr;
  }
  .wrap,
  .wrap-narrow {
    padding: 0 18px;
  }
  .nav-links {
    display: none;
  }
  .burger {
    display: flex;
  }
  .nav-links.open {
    display: flex;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    padding: 22px 28px;
    gap: 16px;
    border-bottom: 1px solid var(--line);
  }
  .hero {
    padding: 124px 0 88px;
  }
  section {
    padding: 60px 0;
  }
  .pcol,
  .price-panel {
    padding: 28px 24px;
  }
  .growth-grid {
    grid-template-columns: 1fr;
  }
  .footer-top {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .diff-flow {
    gap: 6px;
  }
  .flow-node {
    padding: 10px 16px;
    font-size: 0.92rem;
  }
}

/* ============================================================
     CONSULTANCY REPOSITION — components added for the rebuilt
     homepage. Everything else on the new page reuses existing
     components (hero, trust bar, problem split, growth grid,
     diff cols, price panel, FAQ, final CTA).

     New here:
       .wf-grid / .wf-card  — the six-workflow "find yourself" grid
       .growth-card ul      — checklists inside the Identify/Build/
                              Prove/Run process cards
     ============================================================ */

/* ---------- WORKFLOW GRID (six expensive jobs) ---------- */
.wf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.wf-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px 26px;
  box-shadow: var(--shadow-card);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}
.wf-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-line);
}
.wf-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
}
.wf-card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 8px;
}
.wf-card p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ---------- CHECKLISTS INSIDE PROCESS CARDS ---------- */
.growth-card ul {
  list-style: none;
  padding: 14px 0 0;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--line-soft);
}
.growth-card ul li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
  font-weight: 500;
}
.growth-card ul li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 800;
  font-size: 13px;
}

/* Process step pill reads as a label ("Week 1"), not a big number,
     so soften it to match the .sp-num treatment in teal-gold. */
[data-theme="teal-gold"] .growth-card .gc-plus {
  background: linear-gradient(150deg, var(--accent-soft), #fff);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(var(--ink-rgb), 0.07);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* CTA inside the "who builds it" panel */
.price-panel .btn-primary {
  margin-top: 6px;
}

@media (max-width: 1000px) {
  .wf-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 680px) {
  .wf-grid {
    grid-template-columns: 1fr;
  }
  .wf-card {
    padding: 24px 22px;
  }
}

/* ---------- EXPERIENCE PANEL (logos + credibility) ---------- */
/* Scoped to #experience so other pages using .price-panel are untouched. */
#experience .price-panel {
  max-width: 960px;
}
.price-panel .sec-tag {
  display: inline-block;
  margin-bottom: 18px;
}
/* More air under the tag and above the intro: the panel is denser than the
     open sections, so it needs the extra breathing room. */
#experience .price-intro {
  margin-top: 18px;
}
/* Narrow measure so the heading breaks before the emphasised phrase rather
     than running as one long line across the panel. */
#experience .price-title {
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

/* No rules here: .price-intro already carries a border-bottom directly
     above, and the site separates bands with space rather than stacked lines. */
.experience-clients {
  margin: 2px 0 40px;
}
.experience-label {
  margin-bottom: 20px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.experience-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 26px 40px;
}
/* Logos are optically balanced, not uniformly sized: the wordmarks range
     from 2.9:1 (BAT) to 12.8:1 (Kurt Geiger), so one shared height would make
     Kurt Geiger ~400px wide. Each gets a tuned --logo-h; --logo-scale shrinks
     the whole row at once on small screens.
     A definite height is required: these SVGs carry only a viewBox, so
     width:auto + height:auto would collapse them to zero. */
.experience-logos {
  --logo-scale: 1;
}
.experience-logos img {
  display: block;
  height: calc(var(--logo-h) * var(--logo-scale));
  width: auto;
  opacity: 0.68;
  transition: opacity 0.2s ease;
}
.experience-logos .lg-bat {
  --logo-h: 32px;
}
.experience-logos .lg-kg {
  --logo-h: 15px;
}
.experience-logos .lg-wpp {
  --logo-h: 30px;
}
.experience-logos .lg-adobe {
  --logo-h: 23px;
}
.experience-logos .lg-akzo {
  --logo-h: 18px;
}
.experience-logos img:hover {
  opacity: 1;
}

@media (max-width: 760px) {
  .experience-clients {
    margin: 0 0 32px;
  }
  .experience-logos {
    gap: 20px 26px;
    --logo-scale: 0.8;
  }
}

/* ---------- FOOTER CONTACT + SOCIAL ---------- */
.footer-contact {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.footer-contact a {
  color: var(--ink-soft);
  font-size: 15px;
  width: fit-content;
  transition: color 0.2s ease;
}
.footer-contact a:hover {
  color: var(--accent);
}

.footer-social {
  margin-top: 18px;
  display: flex;
  gap: 10px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-faint);
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}
.footer-social a:hover {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.footer-social svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* Single quiet line: copyright and the statutory trading disclosure merged. */
.footer-legal {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-faint);
}

/* ============================================================
     LANDING-PAGE THEME PASS (September 2026)
     Kept at the end of the file on purpose: it overrides earlier rules.
     1. Content arrives at once: no scroll fade-in.
     2. Tighter rhythm, and alternating sections on a flat tint so each
        section has a clear edge.
     3. Dark hero (.hero-dark): the video and the gold button carry the
        first screen. The nav turns light-on-dark over it.
     4. Numbered steps so the four-step path reads as a sequence.
     5. Dark bands for Our Promises and every .final CTA. The promises sit
        on light cards so they read like certificates.
     6. Gold (--cta) is the action colour on dark surfaces and nowhere else
        as a fill, so on those surfaces the button is the brightest thing.
     7. A booking button stays visible in the mobile nav.
     #guarantees, #process and #proof exist only on the homepage; .final
     is shared, so every page's closing CTA gets the dark band.
     ============================================================ */

/* 1. No fade-in: a serious buying decision should not wait on animation */
.reveal,
.reveal.in {
  opacity: 1;
  transform: none;
  transition: none;
}

/* 2. Rhythm */
section {
  padding: 72px 0;
}
.sec-center {
  margin-bottom: 38px;
}
.problem-punch {
  margin-top: 44px;
}
.wash-v {
  background: var(--bg-warm);
}

/* Primary buttons carry a forward arrow; it nudges on hover */
.btn-primary::after {
  content: "\2192";
  display: inline-block;
  margin-left: 10px;
  transition: transform 0.18s ease;
}
.btn-primary:hover::after {
  transform: translateX(3px);
}
.btn-primary.lg {
  box-shadow: var(--shadow-after);
}

/* Shared dark surface */
.hero.hero-dark,
#guarantees,
[data-theme="teal-gold"] .final {
  color: #fff;
  background:
    radial-gradient(780px 440px at 50% 0%, var(--deep-glow), transparent 72%),
    linear-gradient(145deg, var(--deep) 0%, var(--deep-2) 58%, var(--deep) 100%);
}
/* the gold CTA on every dark surface */
.hero-dark .btn-primary,
[data-theme="teal-gold"] .final .btn-primary {
  background: var(--cta);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}
.hero-dark .btn-primary:hover,
[data-theme="teal-gold"] .final .btn-primary:hover {
  background: var(--cta-hover);
}

/* 3. Dark hero */
.hero.hero-dark {
  padding-bottom: 56px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(780px 440px at 50% 0%, var(--deep-glow), transparent 72%),
    linear-gradient(145deg, var(--deep) 0%, var(--deep-2) 58%, var(--deep) 100%);
  background-size:
    34px 34px,
    34px 34px,
    auto,
    auto;
}
.hero-dark::after {
  height: 90px;
  background: linear-gradient(180deg, transparent, var(--deep));
}
.hero-dark .hero-orb {
  display: none;
}
.hero-dark .hero-eyebrow {
  color: var(--on-deep);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}
[data-theme="teal-gold"] .hero-dark .hero-eyebrow .star {
  color: var(--gold-light);
}
.hero-dark h1 {
  color: #fff;
}
[data-theme="teal-gold"] .hero-dark h1 em {
  color: var(--gold-light);
}
[data-theme="teal-gold"] .hero-dark h1 em::after {
  display: none;
}
.hero-dark .hero-sub {
  color: var(--on-deep);
}
.hero-dark .hero-reassure {
  color: var(--on-deep);
}
.hero-dark .hero-eyebrow {
  margin-bottom: 14px;
}
.hero-dark .hero-vsl {
  margin-top: 24px;
}
.hero-dark .hero-cta-wrap {
  margin-top: 24px;
}
.hero-dark .vsl {
  border: 1px solid rgba(225, 189, 114, 0.55);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.4);
}
/* the play button is the first action on the page: gold, like the CTA */
.hero-dark .vsl-play {
  background: var(--cta);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.hero-dark .vsl-play svg {
  fill: var(--ink);
}
.hero-dark .vsl-hit:hover .vsl-play,
.hero-dark .vsl-hit:focus-visible .vsl-play {
  background: var(--cta-hover);
}
.hero-dark .vsl-progress span {
  background: var(--cta);
}
.hero-dark + .trust-bar {
  background: var(--deep);
  border-color: rgba(255, 255, 255, 0.12);
}
.hero-dark + .trust-bar .trust-item {
  color: #fff;
}
.hero-dark + .trust-bar .trust-item.check::before {
  background: var(--cta);
  color: var(--ink);
}

/* nav over the dark hero, until the page scrolls */
body:has(.hero-dark) nav:not(.scrolled) .logo,
body:has(.hero-dark) nav:not(.scrolled) .nav-link {
  color: #fff;
}
body:has(.hero-dark) nav:not(.scrolled) .nav-cta {
  background: var(--cta);
  color: var(--ink) !important;
}
body:has(.hero-dark) nav:not(.scrolled) .burger span {
  background: #fff;
}
/* fade the colours with the nav background, so nothing flashes dark on dark */
body:has(.hero-dark) nav :is(.logo, .nav-link, .nav-cta, .burger span) {
  transition:
    color 0.35s ease,
    background 0.35s ease;
}

/* 4. Numbered steps */
#process .growth-grid {
  counter-reset: step;
}
#process .growth-card {
  position: relative;
  counter-increment: step;
  padding-top: 30px;
}
#process .growth-card::before {
  content: counter(step);
  /* top left: the step number is the first thing read in each card */
  position: absolute;
  top: 30px;
  left: 24px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
}
/* the time chip sits on the same row as the number, at the right */
#process .growth-card .gc-plus {
  display: flex;
  width: fit-content;
  margin-left: auto;
  font-size: 0.95rem;
  height: 34px;
  border-radius: 100px;
  padding: 0 14px;
}

/* 5. Dark bands */
#guarantees {
  position: relative;
}
#guarantees h2.sec-title,
[data-theme="teal-gold"] .final-inner h2 {
  color: #fff;
}
[data-theme="teal-gold"] #guarantees h2.sec-title em,
[data-theme="teal-gold"] .final-inner h2 em {
  color: var(--gold-light);
}
[data-theme="teal-gold"] #guarantees h2.sec-title em::after,
[data-theme="teal-gold"] .final-inner h2 em::after {
  display: none;
}
#guarantees .sec-lead,
[data-theme="teal-gold"] .final-inner > p {
  color: var(--on-deep);
}
/* section labels on dark bands: the same outline, in gold */
#guarantees .sec-tag,
html[data-theme="teal-gold"] .final .final-tag {
  background: transparent;
  color: var(--gold-light);
  border-color: rgba(225, 189, 114, 0.6);
}

/* promises on light cards with a gold top edge */
#guarantees .wf-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 4px solid var(--cta);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}
#guarantees .wf-card:hover {
  border-color: var(--line);
  border-top-color: var(--cta);
}
#guarantees .wf-label {
  background: var(--accent-soft);
  color: var(--accent);
}
#guarantees .wf-card h3 {
  color: var(--ink);
  font-size: 1.2rem;
}
#guarantees .wf-card p {
  color: var(--ink-soft);
}

#guarantees .included-panel {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
#guarantees .price-look {
  color: #fff;
}
/* wider grid so each extra fits on one line */
#guarantees .included-panel .price-factors {
  max-width: none;
  gap: 10px;
}
/* a gold rule on the left makes the extras read as a list of items;
     tighter corners so the thick edge stays straight */
#guarantees .pfactor {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  border-left: 3px solid var(--cta);
  border-radius: 6px;
  color: #fff;
}
#guarantees .pfactor::before {
  background: var(--cta);
  color: var(--ink);
}

[data-theme="teal-gold"] .final .audit-card {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
/* the final band has no paragraph under its heading, so the card sits off the h2 */
.final-inner h2 + .audit-card {
  margin-top: 28px;
}
[data-theme="teal-gold"] .final .audit-head {
  color: #fff;
}
[data-theme="teal-gold"] .final .audit-points span {
  color: var(--on-deep);
}
[data-theme="teal-gold"] .final .audit-points span::before {
  color: var(--gold-light);
}
[data-theme="teal-gold"] .final-urgency {
  color: var(--on-deep);
}
[data-theme="teal-gold"] .final-urgency::before {
  color: var(--gold-light);
}

/* Our option in the comparison: a filled teal column, so the eye lands on it */
.diff-col.new {
  background: var(--accent);
  border-color: var(--accent);
}
.diff-col.new h3,
.diff-col.new ul li {
  color: #fff;
}
.diff-col.new ul li::before {
  color: var(--gold-light);
}

/* Dark hero edges.
     The hero is pulled up under the nav by a fixed margin, but the nav is a
     little taller at some widths (up to 6px at 681 to 1000px), which left a
     white line above it. A 24px transparent top border, painted with the
     hero's own background, extends the band upward; the matching extra
     negative margin keeps the content where it was.
     The canvas (scrollbar lane, pull-past-the-top area) is dark on these
     pages. Set on html, not body, so body and every light section stay white. */
.hero.hero-dark {
  margin-top: -97px;
  border-top: 24px solid transparent;
  background-origin: border-box;
}
@media (min-width: 1001px) {
  .hero.hero-dark {
    margin-top: -103px;
  }
}
/* The scrollbar lane shows the canvas, so it is dark too: give it a visible
     thumb so it reads as a styled scrollbar, not a gap. Phones use overlay
     scrollbars and never show the lane. */
html:has(.hero-dark) {
  background: var(--deep);
  scrollbar-color: rgba(255, 255, 255, 0.4) var(--deep);
}
html {
  overflow-x: clip;
}

/* Geometry: buttons and labels were pills; they now match the tighter
     corners above. Prefixed so it beats page-level pill rules. Chat bubbles,
     video controls and circles keep their shapes. */
html[data-theme="teal-gold"]
  :is(
    .btn-primary,
    .btn-secondary,
    .btn-ghost,
    .cta-btn,
    .news-btn,
    .news-form input,
    .nav-cta,
    .nav-outline
  ) {
  border-radius: 10px;
}
/* Two label shapes, on purpose. Section labels (which open a section) are
     squared outlines, so the headline under them leads. Chips inside a card
     (what a job saves, how long a step takes) stay pills: the round chip
     against the square card marks them as tags, not containers. The ownership
     flow nodes stay pills too: they are steps in a chain, and a filled 10px
     box would read as a button. */
html[data-theme="teal-gold"] :is(.sec-tag, .final-tag) {
  background: transparent;
  border: 1px solid var(--accent-line);
  color: var(--accent);
  padding: 5px 10px;
  letter-spacing: 0.1em;
}
html[data-theme="teal-gold"] :is(.sec-tag, .final-tag)::before {
  display: none;
}
html[data-theme="teal-gold"]
  :is(.sec-tag, .final-tag, .hero-eyebrow, .eyebrow) {
  border-radius: 6px;
}

/* A coloured top edge gives each card set its own marker: teal and gold for
     the two sides of the fit check, teal for the jobs, gold for the steps. */
.pcol.doing {
  border-top: 4px solid var(--accent);
}
.pcol.losing {
  border-top: 4px solid var(--tertiary);
}
.wf-card {
  border-top: 3px solid var(--accent);
}
.wf-card:hover {
  border-top-color: var(--accent);
}
.growth-card {
  border-top: 3px solid var(--tertiary);
}

/* 7. Mobile: keep a booking button in the nav bar */
.nav-cta-m {
  display: none;
}
@media (max-width: 680px) {
  section {
    padding: 52px 0;
  }
  .hero.hero-dark {
    padding-bottom: 44px;
    background-size:
      26px 26px,
      26px 26px,
      auto,
      auto;
  }
  .nav-inner {
    gap: 12px;
  }
  .nav-cta-m {
    display: inline-block;
    margin-left: auto;
    padding: 9px 16px;
    font-size: 14px;
  }
  /* only where the bar button exists, so other pages keep their menu CTA */
  .nav-inner:has(.nav-cta-m) .nav-links .nav-cta {
    display: none;
  }
  /* the open menu panel is white, so its links go back to ink */
  body:has(.hero-dark) nav:not(.scrolled) .nav-links .nav-link {
    color: var(--ink);
  }
}

/* 8. Mobile: keep "Book a 20-Minute AI Workflow Call" on one line down to a
     360px phone. Narrower side padding, a slightly smaller label and a shorter
     arrow gap; buttons inside the price panels get one step smaller again,
     because the panel's own padding leaves less room. */
@media (max-width: 600px) {
  .btn-primary,
  .btn-primary.lg {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 16px;
  }
  .btn-primary::after {
    margin-left: 6px;
  }
  .price-panel {
    padding-left: 16px;
    padding-right: 16px;
  }
  .price-panel .btn-primary {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 15px;
  }
}