/*
 * TellMyCRM — the standalone product's own brand.
 *
 * DELIBERATELY NOT SMART Hub's brand.css. TellMyCRM is a separate product on a
 * separate domain sold to people who have never heard of SMART Hub, so it owns
 * its palette, type and spacing outright. Nothing here is shared with, or may
 * be imported by, a SMART Hub page.
 *
 * No external fonts, no CDNs, no images: the page must render identically with
 * the network blocked and must never leak a visitor to a third party.
 */

:root,
[data-theme="light"] {
  /* Accent: a warm signal green. Not SMART Hub navy/gold, on purpose. */
  --tmc-accent:      #10855F;
  --tmc-accent-deep: #0B6247;
  --tmc-accent-soft: #E7F5EF;
  /* Text that sits ON the accent (buttons, the rep's own chat bubbles). It has
     to flip in dark mode, where the accent lightens — see below. */
  --tmc-on-accent:   #FFFFFF;
  --tmc-ink:         #0F1B17;
  /* Text that sits ON ink (the pressed pricing toggle, the "insert draft"
     button, the diary alert card). Ink is near-white in dark mode, so this
     has to flip with it: hard-coded #fff went white-on-white (Bob, 15 Sep). */
  --tmc-on-ink:        #FFFFFF;
  --tmc-on-ink-soft:   #A9BAB4;
  --tmc-on-ink-accent: #9FE6C6;
  --tmc-body-text:   #4A5A55;
  --tmc-faint:       #7C8B86;
  --tmc-bg:          #FBFCFB;
  --tmc-panel:       #FFFFFF;
  --tmc-line:        #E4EAE7;
  --tmc-border-glass: rgba(15, 27, 23, 0.08);
  --tmc-border-highlight: rgba(255, 255, 255, 0.85);
  --tmc-shadow:      0 20px 60px rgba(15, 27, 23, .07);
  --tmc-shadow-card: 0 1px 0 var(--tmc-border-highlight) inset, 0 14px 34px -10px rgba(15, 27, 23, 0.07);
  --tmc-shadow-card-hover: 0 1px 0 var(--tmc-border-highlight) inset, 0 22px 48px -10px rgba(15, 27, 23, 0.12);
  --tmc-radius:      20px;
  --tmc-max:         1920px;
  --tmc-font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tmc-accent:      #34C592;
    --tmc-accent-deep: #6BE0B4;
    --tmc-accent-soft: #102C23;
    /* The dark-mode accent is a light mint, so white on it would be washed out. */
    --tmc-on-accent:   #062A20;
    --tmc-ink:         #F2F7F5;
    --tmc-on-ink:        #0B1411;
    --tmc-on-ink-soft:   #4A5A55;
    --tmc-on-ink-accent: #0B6247;
    --tmc-body-text:   #A9BAB4;
    --tmc-faint:       #7D908A;
    --tmc-bg:          #0B1411;
    --tmc-panel:       #111D19;
    --tmc-line:        #1E2E28;
    --tmc-border-glass: rgba(255, 255, 255, 0.1);
    --tmc-border-highlight: rgba(255, 255, 255, 0.08);
    --tmc-shadow:      0 20px 60px rgba(0, 0, 0, .45);
    --tmc-shadow-card: 0 1px 0 var(--tmc-border-highlight) inset, 0 16px 40px -10px rgba(0, 0, 0, 0.6);
    --tmc-shadow-card-hover: 0 1px 0 var(--tmc-border-highlight) inset, 0 24px 52px -10px rgba(0, 0, 0, 0.75);
  }
}

[data-theme="dark"] {
  --tmc-accent:      #34C592;
  --tmc-accent-deep: #6BE0B4;
  --tmc-accent-soft: #102C23;
  --tmc-on-accent:   #062A20;
  --tmc-ink:         #F2F7F5;
  --tmc-on-ink:        #0B1411;
  --tmc-on-ink-soft:   #4A5A55;
  --tmc-on-ink-accent: #0B6247;
  --tmc-body-text:   #A9BAB4;
  --tmc-faint:       #7D908A;
  --tmc-bg:          #0B1411;
  --tmc-panel:       #111D19;
  --tmc-line:        #1E2E28;
  --tmc-border-glass: rgba(255, 255, 255, 0.1);
  --tmc-border-highlight: rgba(255, 255, 255, 0.08);
  --tmc-shadow:      0 20px 60px rgba(0, 0, 0, .45);
  --tmc-shadow-card: 0 1px 0 var(--tmc-border-highlight) inset, 0 16px 40px -10px rgba(0, 0, 0, 0.6);
  --tmc-shadow-card-hover: 0 1px 0 var(--tmc-border-highlight) inset, 0 24px 52px -10px rgba(0, 0, 0, 0.75);
}

* { box-sizing: border-box; }

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

h1, h2, h3 { color: var(--tmc-ink); line-height: 1.12; letter-spacing: -0.03em; margin: 0; }
p { margin: 0; }
a { color: inherit; }

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

/* ── Top bar (Floating Island Pill) ────────────────────────────────────── */
.topbar {
  position: sticky; top: 16px; z-index: 40;
  background: transparent;
  padding: 0 16px;
  pointer-events: none;
}
.topbar .wrap {
  pointer-events: auto;
  display: flex; align-items: center; gap: 20px;
  height: 68px;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 20px 0 16px;
  background: color-mix(in srgb, var(--tmc-panel) 84%, transparent);
  backdrop-filter: saturate(190%) blur(18px);
  -webkit-backdrop-filter: saturate(190%) blur(18px);
  border: 1px solid var(--tmc-border-glass);
  border-radius: 9999px;
  box-shadow: 0 1px 0 var(--tmc-border-highlight) inset, 0 12px 36px -8px rgba(15, 27, 23, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wordmark {
  font-weight: 800; font-size: 23px; letter-spacing: -0.035em;
  color: var(--tmc-ink); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 11px;
}
.wordmark .accent { color: var(--tmc-accent); }
/* The wordmark logo (2026-09-11): the dark tile carries the two-colour mark, so
   it sits beside the text rather than replacing it. */
.wordmark-logo { width: 44px; height: 44px; border-radius: 11px; display: block; }
/* One word. The flex gap is between the mark and the word, never inside it. */
.wordmark-text { white-space: nowrap; }
@media (max-width: 560px) {
  .topbar { top: 10px; padding: 0 12px; }
  .topbar .wrap { height: 60px; padding: 0 16px 0 12px; }
  .wordmark { font-size: 20px; gap: 8px; }
  .wordmark-logo { width: 36px; height: 36px; border-radius: 9px; }
}
.avatar img, .flow-hub .fmark img, .fm-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
/* On the dark diagram the dark tile needs a ring, or it vanishes into the hub. */
.flow-hub .fmark, .fm-mark { background: #0B1210; border: 1.5px solid #34C592; box-shadow: 0 0 0 4px rgba(52,197,146,.14); }
.flow-hub .fmark { width: 56px; height: 56px; }
.fm-mark { width: 48px; height: 48px; }
.topnav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.topnav a { color: var(--tmc-body-text); text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; transition: color .15s ease; }
.topnav a:hover { color: var(--tmc-ink); }
/* The button in the bar is still a button — the link colour above must not win. */
.topnav a.btn-primary, .topnav a.btn-primary:hover { color: var(--tmc-on-accent); }

/* ── Theme toggle (glass pill) ─────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: color-mix(in srgb, var(--tmc-panel) 75%, transparent);
  border: 1px solid var(--tmc-border-glass);
  color: var(--tmc-body-text);
  cursor: pointer;
  padding: 0;
  flex: none;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  box-shadow: 0 1px 0 var(--tmc-border-highlight) inset;
}
.theme-toggle:hover {
  transform: scale(1.08);
  color: var(--tmc-ink);
  background: var(--tmc-panel);
  border-color: color-mix(in srgb, var(--tmc-accent) 40%, var(--tmc-border-glass));
}
.theme-toggle svg { width: 17px; height: 17px; display: block; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.theme-toggle:hover svg { transform: rotate(15deg); }

/* Sun vs Moon icon visibility */
.theme-icon-sun { display: none; }
.theme-icon-moon { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-icon-moon { display: none; }
}
[data-theme="dark"] .theme-icon-sun { display: block !important; }
[data-theme="dark"] .theme-icon-moon { display: none !important; }
[data-theme="light"] .theme-icon-sun { display: none !important; }
[data-theme="light"] .theme-icon-moon { display: block !important; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px; border: 1px solid transparent;
  font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer;
  letter-spacing: -0.015em;
  transition: transform .18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .18s cubic-bezier(0.16, 1, 0.3, 1), background .18s ease;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(180deg, var(--tmc-accent) 0%, var(--tmc-accent-deep) 100%);
  color: var(--tmc-on-accent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 10px 24px -4px color-mix(in srgb, var(--tmc-accent) 45%, transparent);
  border: 1px solid color-mix(in srgb, var(--tmc-accent-deep) 70%, transparent);
}
.btn-primary:hover {
  background: var(--tmc-accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.36) inset, 0 14px 28px -4px color-mix(in srgb, var(--tmc-accent) 55%, transparent);
}
.btn-ghost {
  background: color-mix(in srgb, var(--tmc-panel) 80%, transparent);
  color: var(--tmc-ink);
  border: 1px solid var(--tmc-border-glass);
  box-shadow: 0 1px 0 var(--tmc-border-highlight) inset, 0 4px 12px rgba(15, 27, 23, 0.04);
}
.btn-ghost:hover {
  border-color: color-mix(in srgb, var(--tmc-accent) 40%, transparent);
  color: var(--tmc-accent);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 var(--tmc-border-highlight) inset, 0 8px 18px rgba(15, 27, 23, 0.07);
}
.btn-sm { padding: 9px 18px; font-size: 13.5px; }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 68px 0 64px;
  /* The glow below is 900px wide and centred, so on a 400px phone it hangs
     250px past each edge and the page scrolls sideways to reach nothing
     (reporting measured 650 wide on 21 September 2026). clip, not hidden:
     hidden would turn the hero into a scroll container; clip just stops the
     glow counting. Vertical stays visible so the -120px top is untouched. */
  overflow-x: clip;
}
.hero::before {
  content: "";
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--tmc-accent) 16%, transparent) 0%, color-mix(in srgb, var(--tmc-accent) 4%, transparent) 45%, transparent 70%);
  pointer-events: none;
  z-index: -1;
  filter: blur(50px);
}
.hero .wrap { display: grid; grid-template-columns: 1.04fr .96fr; gap: 64px; align-items: center; position: relative; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  background: color-mix(in srgb, var(--tmc-panel) 85%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--tmc-border-glass);
  box-shadow: 0 1px 0 var(--tmc-border-highlight) inset, 0 4px 12px rgba(15, 27, 23, 0.04);
  color: var(--tmc-accent-deep);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 9999px; margin-bottom: 24px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.eyebrow:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--tmc-accent) 40%, transparent); }
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--tmc-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tmc-accent) 25%, transparent);
}
.hero h1 {
  font-size: clamp(38px, 5.2vw, 62px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
}
.hero .sub {
  font-size: clamp(17px, 1.6vw, 19.5px);
  margin-top: 20px;
  max-width: 34ch;
  line-height: 1.6;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; align-items: center; }
.hero-note { margin-top: 18px; font-size: 13.5px; color: var(--tmc-faint); letter-spacing: -0.01em; }

/* ── Chat mock (the hero visual, pure CSS) ─────────────────────────────── */
.phone {
  background: var(--tmc-panel);
  border: 1px solid var(--tmc-border-glass);
  border-radius: 28px;
  box-shadow: var(--tmc-shadow-card);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.phone:hover {
  transform: translateY(-4px);
  box-shadow: var(--tmc-shadow-card-hover);
}
.phone-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--tmc-line);
  background: color-mix(in srgb, var(--tmc-accent-soft) 40%, var(--tmc-panel));
}
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--tmc-accent); color: var(--tmc-on-accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; letter-spacing: -.02em;
}
.phone-head .who { font-weight: 700; color: var(--tmc-ink); font-size: 15px; line-height: 1.2; }
.phone-head .where { font-size: 12.5px; color: var(--tmc-faint); }
.thread { padding: 22px 18px 26px; display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 84%; padding: 12px 15px; border-radius: 16px; font-size: 14.6px; line-height: 1.5; }
.msg.them { align-self: flex-start; background: color-mix(in srgb, var(--tmc-line) 40%, var(--tmc-panel)); color: var(--tmc-ink); border-bottom-left-radius: 5px; }
.msg.me { align-self: flex-end; background: var(--tmc-accent); color: var(--tmc-on-accent); border-bottom-right-radius: 5px; }
.msg.me strong { font-weight: 800; }
.msg .line { display: block; }
.msg .line + .line { margin-top: 6px; }
.msg .meta { display: block; margin-top: 7px; font-size: 11.5px; opacity: .72; }

/* THE CITATION BEHIND A LINE.
   "(meeting, 5 Aug)" is the argument, not an aside: every line of a deal story
   carries the conversation it came from. As plain text it disappeared into the
   sentence. It reads as one thing now, and a reader sees the audit trail
   before they have read a word of it. Deliberately quiet: a tag, not a
   highlight, because there are several per message. */
.msg .cite {
  /* inline, not inline-block: as a box the trailing full stop sat visibly
     adrift of the tag. Inline keeps the padding and lets the punctuation sit
     against it the way it would after any other word. */
  display: inline;
  padding: 1px 5px;
  border: 1px solid color-mix(in srgb, var(--tmc-accent) 26%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--tmc-accent) 9%, transparent);
  color: color-mix(in srgb, var(--tmc-accent) 82%, var(--tmc-ink));
  font-size: 12.4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1.5;
}
.msg.me .cite {
  border-color: color-mix(in srgb, var(--tmc-on-accent) 40%, transparent);
  background: color-mix(in srgb, var(--tmc-on-accent) 14%, transparent);
  color: var(--tmc-on-accent);
}
button.voice {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button.voice:focus-visible {
  outline: 2px solid var(--tmc-on-accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.voice { display: flex; align-items: center; gap: 11px; }
.voice .play {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, currentColor 22%, transparent); display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease;
}
.voice:hover .play { transform: scale(1.08); }
.voice .play::after { content: ""; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent currentColor; margin-left: 2px; }
.voice .play.playing::after {
  border-style: double;
  border-width: 0 0 0 8px;
  border-color: currentColor;
  width: 3px;
  height: 10px;
  margin-left: 0;
}
.wave { display: flex; align-items: center; gap: 3px; height: 20px; }
.wave i { display: block; width: 3px; border-radius: 2px; background: currentColor; opacity: .72; }
.wave i:nth-child(1){height:6px}  .wave i:nth-child(2){height:12px} .wave i:nth-child(3){height:18px}
.wave i:nth-child(4){height:9px}  .wave i:nth-child(5){height:15px} .wave i:nth-child(6){height:20px}
.wave i:nth-child(7){height:8px}  .wave i:nth-child(8){height:14px} .wave i:nth-child(9){height:5px}
.wave i:nth-child(10){height:11px}
@keyframes wavePulse {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.5); }
}
.voice.is-playing .wave i:nth-child(odd) {
  animation: wavePulse 0.5s ease-in-out infinite;
}
.voice.is-playing .wave i:nth-child(even) {
  animation: wavePulse 0.5s ease-in-out infinite 0.25s;
}
.card-quote {
  /* A <span> inside a chat bubble: force block so the background and border
     paint as one box rather than per line fragment. */
  display: block;
  margin-top: 9px; padding: 11px 13px; border-radius: 11px;
  background: color-mix(in srgb, var(--tmc-accent-soft) 70%, var(--tmc-panel));
  border: 1px solid color-mix(in srgb, var(--tmc-accent) 22%, transparent);
  font-size: 13.6px; color: var(--tmc-ink);
}
.card-quote .row { display: flex; justify-content: space-between; gap: 14px; }
.card-quote .row + .row { margin-top: 4px; }
.card-quote .k { color: var(--tmc-faint); }
.card-quote .v { font-weight: 700; }
.tick { color: var(--tmc-accent); font-weight: 800; }

/* ── Sections ──────────────────────────────────────────────────────────────
   The vertical rhythm was retuned down on 2026-09-06. At 78px top AND bottom
   plus a 44px section-head gap, two adjacent sections put ~200px of nothing
   between one idea and the next, so the middle of the page read as a series of
   unrelated pages rather than one argument. These numbers are the smallest that
   still let each section breathe; do not go lower without looking at 1440px. */
section { padding: 62px 0; }
.section-head { max-width: 54ch; margin-bottom: 32px; }
.section-head h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; text-wrap: balance; }
.section-head p { margin-top: 14px; font-size: 17.5px; }
/* Pricing is the one centred head. It needs more room than 54ch or the headline
   breaks after "All channels" and drops "included." onto a line of its own.
   Was an inline style; a class keeps every rule in the stylesheet. */
.section-head-centred { margin-left: auto; margin-right: auto; text-align: center; max-width: 640px; }
.section-head-centred p { max-width: 48ch; margin-left: auto; margin-right: auto; }
.band { background: var(--tmc-panel); border-top: 1px solid var(--tmc-line); border-bottom: 1px solid var(--tmc-line); }

/* A hidden section must stay hidden even though `section` above sets padding:
   without this, any future display rule on `section` would un-hide the customer
   proof block and ship its placeholders to a visitor. */
[hidden] { display: none !important; }

/* Three steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.step {
  background: var(--tmc-panel); border: 1px solid var(--tmc-border-glass);
  border-radius: var(--tmc-radius); padding: 32px 28px 30px;
  box-shadow: var(--tmc-shadow-card);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}
.step:hover {
  transform: translateY(-3px);
  box-shadow: var(--tmc-shadow-card-hover);
  border-color: color-mix(in srgb, var(--tmc-accent) 25%, var(--tmc-border-glass));
}
.step .n {
  width: 36px; height: 36px; border-radius: 12px; margin-bottom: 20px;
  background: var(--tmc-accent-soft); color: var(--tmc-accent-deep);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px;
  border: 1px solid color-mix(in srgb, var(--tmc-accent) 20%, transparent);
}
.step h3 { font-size: 19px; font-weight: 750; margin-bottom: 9px; letter-spacing: -0.02em; }
.step p { font-size: 15.4px; line-height: 1.58; }
.steps-note { margin-top: 22px; font-size: 15.5px; color: var(--tmc-faint); }

/* Features — two ranks, not six equal boxes (see the comment in index.html). */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 34px; }
.feature { padding-top: 22px; border-top: 2px solid var(--tmc-accent); transition: transform .2s ease; }
.feature:hover { transform: translateY(-2px); }
.feature h3 { font-size: 18px; font-weight: 750; margin-bottom: 8px; letter-spacing: -0.02em; }
.feature p { font-size: 15.4px; line-height: 1.58; }
/* The second rank: same grid, quieter rule, smaller type. It reads as support
   for the three above it rather than three more competing headlines. */
.features-secondary { margin-top: 34px; gap: 24px 34px; }
.features-secondary .feature { padding-top: 16px; border-top-width: 1px; border-top-color: var(--tmc-line); }
.features-secondary .feature h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.015em; }
/* Body copy stays --tmc-body-text, NOT --tmc-faint: faint is ~3.7:1 on the page
   background, which is fine for a one-line note but fails AA for a paragraph.
   The rank is carried by the heading size and the lighter rule instead. */
.features-secondary .feature p { font-size: 14.6px; line-height: 1.55; }

/* Trust and control: a compact two-column tick list, no card, no chrome. The
   claims are deliberately narrow (what the product actually does on every
   write). Never add a generic security line here. */
.control-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 34px;
}
.control-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.8px; color: var(--tmc-ink); }
.control-list .tick { flex: none; }

/* Customer proof — styled now, rendered only when there is a real customer to
   name (the section carries `hidden` in index.html; see the note there). */
.proof-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.proof-stat {
  background: var(--tmc-panel); border: 1px solid var(--tmc-border-glass);
  border-radius: var(--tmc-radius); padding: 26px;
  box-shadow: var(--tmc-shadow-card);
}
.proof-fig { display: block; font-size: 42px; font-weight: 800; color: var(--tmc-ink); letter-spacing: -.03em; line-height: 1.05; }
.proof-label { display: block; margin-top: 8px; font-size: 15px; color: var(--tmc-faint); }
.proof-quote { margin: 26px 0 0; padding-left: 22px; border-left: 3px solid var(--tmc-accent); max-width: 62ch; }
.proof-quote p { font-size: 19px; color: var(--tmc-ink); }
.proof-attrib { margin-top: 12px; font-size: 15px; color: var(--tmc-faint); }

/* Pricing — Core £19 & Pro £39 */
.pricing-wrap { text-align: center; }
.pricing-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px; max-width: 980px; margin: 32px auto 0;
  align-items: stretch;
}
.price-card {
  text-align: left;
  background: var(--tmc-panel); border: 1px solid var(--tmc-border-glass);
  border-radius: 28px; padding: 40px 36px 36px;
  box-shadow: var(--tmc-shadow-card);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}
.price-card::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 320px; height: 160px;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--tmc-accent) 14%, transparent), transparent 70%);
  pointer-events: none;
}
.price-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--tmc-shadow-card-hover);
}
/* ── Animated Gradient Border Shimmer ───────────────────────────────────── */
@property --shimmer-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes shimmerBorderRotate {
  to { --shimmer-angle: 360deg; }
}

.hero .phone,
.price-card.price-featured {
  background:
    linear-gradient(var(--tmc-panel), var(--tmc-panel)) padding-box,
    conic-gradient(from var(--shimmer-angle, 0deg),
      transparent 0deg,
      color-mix(in srgb, var(--tmc-accent) 20%, transparent) 40deg,
      var(--tmc-accent) 90deg,
      #6BE0B4 130deg,
      color-mix(in srgb, var(--tmc-accent) 20%, transparent) 180deg,
      transparent 220deg,
      color-mix(in srgb, var(--tmc-accent) 25%, transparent) 270deg,
      var(--tmc-accent) 310deg,
      transparent 360deg) border-box;
  border: 1.5px solid transparent;
  animation: shimmerBorderRotate 9s linear infinite;
}

.hero .phone:hover,
.price-card.price-featured:hover {
  animation-duration: 4s;
  box-shadow: 0 1px 0 var(--tmc-border-highlight) inset, 0 24px 60px -8px color-mix(in srgb, var(--tmc-accent) 30%, rgba(15, 27, 23, 0.16));
}

.price-card.price-featured::before {
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--tmc-accent) 26%, transparent), transparent 70%);
}
.price-badge {
  position: absolute; top: 20px; right: 20px;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--tmc-accent-soft); color: var(--tmc-accent-deep);
  border: 1px solid color-mix(in srgb, var(--tmc-accent) 28%, transparent);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 9999px;
}
.price-badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--tmc-accent);
}
.price-plan {
  font-size: 26px; font-weight: 800; color: var(--tmc-ink); letter-spacing: -0.03em;
  margin-bottom: 6px;
}
.price-plan-desc {
  font-size: 14.6px; color: var(--tmc-faint); line-height: 1.48;
  margin-bottom: 20px; min-height: 44px;
}
.price-amount { display: flex; align-items: baseline; justify-content: flex-start; gap: 8px; margin: 6px 0 4px; }
.price-amount .fig { font-size: 54px; font-weight: 800; color: var(--tmc-ink); letter-spacing: -.04em; line-height: 1; }
.price-amount .per { font-size: 15px; color: var(--tmc-faint); font-weight: 600; }
.price-sub { margin: 0 0 4px; font-size: 13.8px; color: var(--tmc-faint); }
.price-list { list-style: none; margin: 24px 0 28px; padding: 0; text-align: left; display: grid; gap: 11px; flex: 1; }
.price-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.8px; line-height: 1.48; }
.price-list li.price-lead { font-size: 15px; color: var(--tmc-ink); padding-bottom: 6px; border-bottom: 1px dashed var(--tmc-line); }
.price-list .tick { flex: none; color: var(--tmc-accent); font-weight: 800; }
.price-card .btn { margin-top: auto; width: 100%; }
.price-fine { margin-top: 14px; font-size: 13px; color: var(--tmc-faint); text-align: center; }

.price-toggle { display: inline-flex; border: 1px solid var(--tmc-border-glass); border-radius: 999px; padding: 3px; margin: 0 auto 16px; background: var(--tmc-panel); box-shadow: 0 2px 8px rgba(15, 27, 23, 0.04); }
.price-toggle-btn { border: 0; background: transparent; border-radius: 999px; padding: 8px 18px; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--tmc-faint); cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.price-toggle-btn[aria-pressed="true"] { background: var(--tmc-ink); color: var(--tmc-on-ink); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.price-toggle-save { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--tmc-accent); }
.price-toggle-btn[aria-pressed="true"] .price-toggle-save { color: var(--tmc-on-ink-accent); }

@media (max-width: 820px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; }
  .price-plan-desc { min-height: 0; }
}

/* Footer */
footer { border-top: 1px solid var(--tmc-line); padding: 40px 0 56px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
footer .built { font-size: 14.5px; color: var(--tmc-faint); }
footer nav { display: flex; gap: 22px; margin-left: auto; }
footer nav a { font-size: 14.5px; color: var(--tmc-faint); text-decoration: none; }
footer nav a:hover { color: var(--tmc-ink); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 940px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .hero .sub { max-width: none; }
  .steps, .features { grid-template-columns: 1fr; }
  .topnav a.hide-sm { display: none; }
  /* One column stacks a lot of rows, so the two-rank feature list needs its own
     gap back or the two ranks run into each other with no rule between them. */
  .features-secondary { margin-top: 26px; }
  .control-list, .proof-stats { grid-template-columns: 1fr; }
}

/* Tablet tier. The hero has to stack by 940px, but dropping the three-across
   grids to ONE column at the same time leaves ~780px-wide cards holding two
   lines of text, which is the dead space this pass exists to remove. Two
   columns from 641px up; the odd third item takes the whole row rather than
   sitting beside a hole. */
@media (min-width: 641px) and (max-width: 940px) {
  .steps, .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps > :last-child,
  .features-primary > :last-child,
  .features-secondary > :last-child { grid-column: 1 / -1; }
  .control-list, .proof-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Trim the CRM chips just enough for all five to sit on one honest row.
     Scoped through .crm-strip on purpose: the base .crm rules are further down
     the file and would otherwise win on source order and keep the 138px floor
     that pushes Dynamics 365 onto a lonely second line. */
  .crm-strip .crm { padding: 16px; min-width: 0; }
}
/* At 400px the header row is wordmark 146 + toggle 38 + "Start free" 110 +
   Menu 57 with 24px gaps, inside a 376px wrap. It does not fit, nothing
   shrinks, and the Menu is pushed off the right edge of the screen (measured
   21 September 2026: every marketing page 445px wide on a 400px phone). The
   hero has a full-width "Start free for 14 days" 200px below, so the header
   copy is the one to lose. */
@media (max-width: 480px) {
  .topnav .btn { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 18.5px; }
  .hero { padding: 48px 0 40px; }
  section { padding: 48px 0; }
  .wrap { padding: 0 18px; }
  .btn { width: 100%; }
  .topnav .btn { width: auto; }
}

/* ── Outlook Add-In Showcase (SMART Reply port) ────────────────────────── */
.outlook-showcase {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 44px;
  align-items: center; margin-top: 36px;
}
@media (max-width: 900px) {
  .outlook-showcase { grid-template-columns: 1fr; gap: 32px; }
}

.outlook-card {
  background: var(--tmc-panel); border: 1px solid var(--tmc-border-glass);
  border-radius: 26px; box-shadow: var(--tmc-shadow-card);
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.outlook-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--tmc-shadow-card-hover);
}

.outlook-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--tmc-line) 40%, var(--tmc-panel));
  border-bottom: 1px solid var(--tmc-line);
}
.outlook-win-controls { display: flex; gap: 6px; }
.outlook-win-controls i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.outlook-win-controls i:nth-child(1) { background: #FF5F56; }
.outlook-win-controls i:nth-child(2) { background: #FFBD2E; }
.outlook-win-controls i:nth-child(3) { background: #27C93F; }

.outlook-win-title {
  font-size: 12.5px; font-weight: 700; color: var(--tmc-faint);
  letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.outlook-body {
  padding: 22px; display: flex; flex-direction: column; gap: 16px;
}

.outlook-email-meta {
  padding-bottom: 14px; border-bottom: 1px solid var(--tmc-line);
}
.o-meta-top {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.o-badge {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 6px;
}
.o-badge.prospect {
  background: #FEF3C7; color: #92400E;
}
.o-crm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--tmc-accent-deep);
  background: var(--tmc-accent-soft); padding: 3px 10px; border-radius: 999px;
}
.o-crm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tmc-accent); }
.o-sender { display: flex; align-items: center; gap: 12px; }
.o-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: #0284C7; color: #FFF; font-weight: 800; font-size: 13.5px;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.o-sender strong { font-size: 14.5px; color: var(--tmc-ink); }
.o-subj { display: block; font-size: 13px; color: var(--tmc-faint); margin-top: 2px; }

.outlook-opp-banner {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--tmc-accent-soft) 60%, var(--tmc-panel));
  border: 1px solid color-mix(in srgb, var(--tmc-accent) 25%, transparent);
}
.opp-icon { font-size: 18px; color: var(--tmc-accent); flex: none; }
.opp-text { font-size: 13px; line-height: 1.35; flex: 1; }
.opp-text strong { display: block; color: var(--tmc-ink); font-weight: 750; }
.opp-text span { color: var(--tmc-faint); }
.btn-opp-add {
  flex: none; background: var(--tmc-accent); color: var(--tmc-on-accent);
  border: 0; border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 800;
  cursor: pointer; white-space: nowrap; transition: background .15s ease;
}
.btn-opp-add:hover { background: var(--tmc-accent-deep); }

.outlook-draft-box {
  background: color-mix(in srgb, var(--tmc-panel) 90%, transparent);
  border: 1px solid var(--tmc-line); border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(15, 27, 23, 0.03);
}
.draft-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.draft-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--tmc-ink);
}
.draft-badge {
  font-size: 10.5px; font-weight: 800; color: var(--tmc-accent); text-transform: uppercase; letter-spacing: .06em;
}
.draft-text {
  font-size: 13.5px; line-height: 1.55; color: var(--tmc-body-text); font-style: italic; margin-bottom: 12px;
}
.draft-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-draft-use {
  background: var(--tmc-ink); color: var(--tmc-on-ink); border: 0; border-radius: 999px;
  padding: 7px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.btn-draft-log {
  background: transparent; color: var(--tmc-accent-deep);
  border: 1px solid color-mix(in srgb, var(--tmc-accent) 40%, transparent);
  border-radius: 999px; padding: 7px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
}

.outlook-features { display: flex; flex-direction: column; gap: 24px; }
.ofeat { display: flex; gap: 16px; align-items: flex-start; }
.ofeat-icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--tmc-accent-soft); color: var(--tmc-accent-deep);
  border: 1px solid color-mix(in srgb, var(--tmc-accent) 20%, transparent);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.ofeat-icon svg { width: 20px; height: 20px; }
.ofeat h3 { font-size: 18px; font-weight: 750; margin-bottom: 6px; letter-spacing: -0.02em; }
.ofeat p { font-size: 15px; line-height: 1.55; }

/* CRM strip. Official logos for HubSpot, Pipedrive and Zoho (Bob, 25 Sep 2026),
   used unaltered except the dark lettering turned white on the dark theme, which
   is each brand's own reversed version. Salesforce and Dynamics 365 stay as
   plain names: Salesforce restricts its logo to AppExchange partners and
   Microsoft needs written permission. Swap them in when those listings exist. */
.crm-strip { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 0 0 26px; }
.crm { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 18px 26px;
  border: 1px solid var(--tmc-border-glass); border-radius: 16px; background: var(--tmc-panel); min-width: 138px;
  box-shadow: var(--tmc-shadow-card);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease; }
.crm:hover {
  transform: translateY(-2px);
  box-shadow: var(--tmc-shadow-card-hover);
  border-color: color-mix(in srgb, var(--tmc-accent) 25%, var(--tmc-border-glass));
}
.crm-name { font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.crm-logo { display: flex; align-items: center; justify-content: center; height: 42px; }
.crm-logo img { display: block; height: 26px; width: auto; }
.crm-logo-pipedrive img { height: 42px; }
.crm-logo-zoho img { height: 36px; }
.crm-logo .on-light { display: none; }
[data-theme="light"] .crm-logo .on-light { display: block; }
[data-theme="light"] .crm-logo .on-dark { display: none; }
.crm-name { line-height: 42px; }
.crm.live .crm-name { color: var(--tmc-ink); }
.crm.soon .crm-name { color: var(--tmc-faint); }
.crm-tag { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tmc-faint); }
.crm-tag.live-tag { color: var(--tmc-accent); font-weight: 700; }
.waitlist { max-width: 640px; margin: 0 auto; text-align: center; }
.waitlist-lead { color: var(--tmc-mut, var(--tmc-faint)); font-size: 15px; margin-bottom: 14px; }
.waitlist-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.waitlist select, .waitlist input[type="email"] {
  padding: 12px 14px; border: 1px solid var(--tmc-line); border-radius: 10px;
  background: var(--tmc-panel); color: var(--tmc-ink); font-size: 15px; min-width: 170px; }
.waitlist input[type="email"] { flex: 1 1 220px; }
.waitlist-done { color: var(--tmc-accent); font-weight: 700; font-size: 15.5px; }

/* ── The flow section (index.html #channels) ────────────────────────────────
   Four channels in, one YES, one write out. Deliberately DARK in both themes:
   it is the product's control-room moment, and the palette below is this
   file's own dark-mode set, written out because the section does not follow
   the visitor's theme. */
.flow { background: #0B1411; color: #F2F7F5; padding: 70px 0 66px; overflow: hidden; }
.flow-scene { position: relative; aspect-ratio: 1200 / 560; }
.flow-wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.flow-dash use { animation: flowDash 1.6s linear infinite; }
@keyframes flowDash { to { stroke-dashoffset: -17; } }

.flow-node {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 10px;
  background: #111D19; border: 1px solid #1E312A; border-radius: 999px;
  padding: 10px 18px 10px 12px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .02em; color: #A9BAB4;
  box-shadow: 0 12px 34px rgba(0,0,0,.45); white-space: nowrap;
}
.flow-node .fdot {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(52,197,146,.16); color: #6BE0B4;
  display: flex; align-items: center; justify-content: center;
}
.flow-node .fdot.big { width: 34px; height: 34px; }
.flow-node .fdot svg { width: 15px; height: 15px; display: block; }
.flow-node.flow-crm { flex-direction: row; padding: 14px 22px 14px 14px; font-size: 14.5px; color: #F2F7F5; border-color: rgba(52,197,146,.4); }
.flow-node.pulse { color: #F2F7F5; animation: flowNode 5s ease-in-out infinite; }
.flow-node.p1 { animation-delay: 0s; }
.flow-node.p2 { animation-delay: 1.0s; }
.flow-node.p3 { animation-delay: 2.0s; }
.flow-node.p4 { animation-delay: 3.0s; }
.flow-node.p5 { animation-delay: 4.0s; }
@keyframes flowNode {
  0%, 18%, 100% { box-shadow: 0 12px 34px rgba(0,0,0,.45); border-color: #1E312A; }
  6% { box-shadow: 0 0 0 5px rgba(52,197,146,.16), 0 12px 34px rgba(0,0,0,.45); border-color: rgba(52,197,146,.6); }
}

.flow-hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 148px; height: 148px; border-radius: 34px;
  background: linear-gradient(160deg, #14251F, #0E1B16);
  border: 1px solid rgba(52,197,146,.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  box-shadow: 0 0 90px rgba(52,197,146,.16), 0 26px 60px rgba(0,0,0,.5);
}
.flow-hub::after {
  content: ""; position: absolute; inset: -26px; border-radius: 48px;
  border: 1px dashed rgba(52,197,146,.22); animation: flowSpin 30s linear infinite;
}
@keyframes flowSpin { to { transform: rotate(360deg); } }
.flow-hub .fmark {
  width: 46px; height: 46px; border-radius: 14px; background: #34C592; color: #062A20;
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 21px;
}
.flow-hub .fname { font-size: 13px; font-weight: 800; letter-spacing: .12em; color: #F2F7F5; }
.flow-hub .fname em { font-style: normal; color: #6BE0B4; }

.flow-gate {
  position: absolute; transform: translate(-50%, -50%);
  background: #34C592; color: #062A20;
  font-size: 11.5px; font-weight: 900; letter-spacing: .1em;
  padding: 7px 13px; border-radius: 999px; text-align: center;
  animation: flowGate 5s ease-out infinite;
}
.flow-gate small { display: block; font-size: 8.5px; font-weight: 800; letter-spacing: .14em; opacity: .75; }
@keyframes flowGate {
  0%, 55%, 100% { box-shadow: 0 0 0 0 rgba(52,197,146,0); }
  62% { box-shadow: 0 0 0 12px rgba(52,197,146,.25); }
  70% { box-shadow: 0 0 0 0 rgba(52,197,146,0); }
}

.flow-caption { margin-top: 34px; max-width: 900px; }
.flow-caption h2 { font-size: clamp(24px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.02em; line-height: 1.14; color: #F2F7F5; }
.flow-caption p { margin-top: 10px; font-size: 16px; font-weight: 600; color: #6BE0B4; }
.flow-caption p span { color: #7D908A; font-weight: 500; }

/* Interactive channel selector & preview in flow section */
.flow-interactive-channels {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; margin-top: 24px;
}
.flow-chan-btn {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  color: #A9BAB4; font-size: 13.5px; font-weight: 700; padding: 7px 14px;
  border-radius: 9999px; cursor: pointer; transition: all 0.2s ease;
}
.flow-chan-btn:hover {
  background: rgba(52,197,146,0.14); color: #F2F7F5; border-color: rgba(52,197,146,0.4);
}
.flow-chan-btn.active {
  background: #34C592; color: #062A20; border-color: #34C592;
  box-shadow: 0 0 16px rgba(52,197,146,0.35);
}
.flow-chan-preview {
  margin-top: 14px; padding: 16px 20px; border-radius: 16px;
  background: rgba(17, 29, 25, 0.85); border: 1px solid rgba(52,197,146,0.25);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.fcp-story { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.fcp-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(52,197,146,0.18); color: #6BE0B4;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 6px; flex: none;
}
.fcp-story p { font-size: 14.5px; color: #E2ECE8; line-height: 1.5; margin: 0; }
.fcp-story p em { font-style: italic; color: #A9BAB4; }
.fcp-story p strong { color: #6BE0B4; font-weight: 800; }

/* Small screens: the diagram becomes a one-line story of chips. */
.flow-mobile { display: none; }
@media (max-width: 760px) {
  .flow-scene { display: none; }
  .flow-mobile { display: flex; flex-direction: column; align-items: center; }
  .fm-chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; max-width: 360px; }
  .flow-mobile .fchip {
    background: #111D19; border: 1px solid rgba(52,197,146,.45); border-radius: 999px;
    padding: 9px 16px; font-size: 13.5px; font-weight: 800; color: #F2F7F5;
    animation: fmChip 5s ease-in-out infinite;
  }
  .flow-mobile .fchip:nth-child(1) { animation-delay: 0s; }
  .flow-mobile .fchip:nth-child(2) { animation-delay: 1.0s; }
  .flow-mobile .fchip:nth-child(3) { animation-delay: 2.0s; }
  .flow-mobile .fchip:nth-child(4) { animation-delay: 3.0s; }
  .flow-mobile .fchip:nth-child(5) { animation-delay: 4.0s; }
  @keyframes fmChip {
    0%, 18%, 100% { box-shadow: none; border-color: #1E312A; }
    6% { box-shadow: 0 0 0 5px rgba(52,197,146,.16); border-color: rgba(52,197,146,.65); }
  }

  /* The wire: a dashed line that flows downward, with a message dot riding it. */
  .fm-wire {
    position: relative; width: 2px; height: 46px; margin: 2px 0; overflow: visible;
    background-image: repeating-linear-gradient(#34C592 0 5px, transparent 5px 14px);
    background-size: 2px 14px; opacity: .75;
    animation: fmFlow 1.1s linear infinite;
  }
  .fm-wire-short { height: 34px; }
  @keyframes fmFlow { to { background-position-y: 14px; } }
  .fm-dot {
    position: absolute; left: 50%; top: 0; width: 9px; height: 9px; border-radius: 50%;
    background: #6BE0B4; transform: translate(-50%, -4px);
    animation: fmDot 2.4s ease-in infinite;
  }
  .fm-dot-late { animation-delay: 1.2s; }
  @keyframes fmDot {
    0% { opacity: 0; transform: translate(-50%, -4px); }
    12% { opacity: 1; }
    55% { opacity: 1; }
    70%, 100% { opacity: 0; transform: translate(-50%, 42px); }
  }

  .fm-hub {
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(160deg, #14251F, #0E1B16);
    border: 1px solid rgba(52,197,146,.5); border-radius: 22px; padding: 16px 26px;
    box-shadow: 0 0 60px rgba(52,197,146,.2);
  }
  .fm-mark {
    width: 40px; height: 40px; border-radius: 12px; background: #34C592; color: #062A20;
    display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 22px;
  }
  .fm-name { font-size: 20px; font-weight: 800; color: #F2F7F5; }
  .fm-name em { font-style: normal; color: #6BE0B4; }

  .fm-gate {
    background: #34C592; color: #062A20; text-align: center;
    font-size: 12px; font-weight: 900; letter-spacing: .1em;
    padding: 8px 18px; border-radius: 999px; margin: 2px 0;
    animation: fmGate 4.8s ease-out infinite;
  }
  .fm-gate small { display: block; font-size: 8.5px; font-weight: 800; letter-spacing: .14em; opacity: .75; }
  @keyframes fmGate {
    0%, 55%, 100% { box-shadow: 0 0 0 0 rgba(52,197,146,0); }
    62% { box-shadow: 0 0 0 10px rgba(52,197,146,.25); }
    70% { box-shadow: 0 0 0 0 rgba(52,197,146,0); }
  }

  .fm-crm {
    background: #111D19; border: 1px solid rgba(52,197,146,.4); border-radius: 999px;
    padding: 12px 26px; font-size: 15px; font-weight: 800; color: #F2F7F5;
  }

  .flow-caption { margin-top: 30px; text-align: center; }
}

/* ── The film door and modal (index.html) ─────────────────────────────────── */
.btn-film { display: inline-flex; align-items: center; gap: 11px; }
.film-tri {
  width: 30px; height: 30px; border-radius: 50%; background: var(--tmc-accent);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.film-tri::after {
  content: ""; width: 0; height: 0; border-style: solid;
  border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #FFFFFF;
  margin-left: 2px;
}
.film-door {
  display: inline-flex; align-items: center; gap: 16px; margin-top: 26px;
  background: var(--tmc-panel); border: 1px solid var(--tmc-line); border-radius: 16px;
  padding: 10px 20px 10px 10px; cursor: pointer; font-family: inherit;
  transition: border-color .12s ease, transform .12s ease;
}
.film-door:hover { border-color: var(--tmc-accent); transform: translateY(-1px); }
.film-thumb { position: relative; width: 108px; height: 62px; border-radius: 10px; overflow: hidden; display: block; }
.film-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.film-play::after {
  content: ""; width: 0; height: 0; border-style: solid;
  border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #FFFFFF;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.5)); margin-left: 3px;
}
.film-label { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.film-label strong { font-size: 15.5px; font-weight: 750; color: var(--tmc-ink); }
.film-label span { font-size: 13px; color: var(--tmc-faint); }

.film-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; }
.film-backdrop { position: absolute; inset: 0; background: rgba(6, 15, 12, .82); }
.film-frame { position: relative; width: min(1100px, 94vw); }
.film-frame video { width: 100%; display: block; border-radius: 14px; background: #000; box-shadow: 0 40px 120px rgba(0,0,0,.5); }
.film-close {
  position: absolute; top: -46px; right: 0; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4); background: none; color: #FFFFFF;
  font-size: 22px; line-height: 1; cursor: pointer; font-family: inherit;
}
.film-close:hover { border-color: #FFFFFF; }

/* ── The Monday brief section (index.html #monday-brief) ─────────────────── */
.brief-phone { max-width: 560px; margin: 0 auto; }
.brief-lines { white-space: pre-line; }
.brief-note { text-align: center; color: var(--tmc-faint); font-size: 14px; margin-top: 18px; }

/* ── The team diary and coaching section (index.html #diary) ─────────────── */
.diary-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; align-items: start; }
.diary-card { background: var(--tmc-panel); border: 1px solid var(--tmc-line); border-radius: var(--tmc-radius); padding: 24px 26px; }
.diary-eyebrow { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tmc-faint); margin-bottom: 14px; }
.diary-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.diary-list li { display: flex; align-items: center; gap: 13px; padding: 11px 14px; border: 1px solid var(--tmc-line); border-radius: 12px; background: var(--tmc-bg); min-width: 0; }
.dtag { flex: none; min-width: 96px; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--tmc-faint); background: var(--tmc-line); border-radius: 999px; padding: 5px 10px; }
.dtag.in { color: var(--tmc-accent-deep); background: var(--tmc-accent-soft); }
.dwho { flex: 1; font-size: 15.5px; font-weight: 750; color: var(--tmc-ink); min-width: 0; overflow-wrap: anywhere; }
.dwhen { font-size: 13.5px; color: var(--tmc-faint); flex: none; }
.diary-foot { margin-top: 12px; font-size: 13.5px; color: var(--tmc-faint); }
.diary-side { display: grid; gap: 16px; }
.diary-alert { background: var(--tmc-ink); border-radius: var(--tmc-radius); padding: 22px 24px; }
.diary-alert strong { display: block; color: var(--tmc-on-ink); font-size: 17.5px; font-weight: 750; line-height: 1.45; }
.diary-alert span { display: block; margin-top: 7px; color: var(--tmc-on-ink-soft); font-size: 14.5px; }
.diary-note { border: 1px solid var(--tmc-line); border-radius: var(--tmc-radius); padding: 22px 24px; background: var(--tmc-panel); }
.diary-note strong { display: block; font-size: 15.5px; font-weight: 750; color: var(--tmc-ink); }
.diary-note span { display: block; margin-top: 7px; font-size: 14.5px; line-height: 1.6; color: var(--tmc-faint); }
.coach-head { margin-top: 44px; }
.coach-head h3 { font-size: 22px; font-weight: 780; color: var(--tmc-ink); }
.coach-head p { margin-top: 7px; font-size: 15.5px; color: var(--tmc-faint); max-width: 62ch; }
.coach-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; }
.coach { border: 1px solid var(--tmc-line); border-left: 3px solid var(--tmc-accent); border-radius: 12px; padding: 15px 18px; background: var(--tmc-panel); min-width: 0; }
.coach .k { display: block; font-size: 14.5px; color: var(--tmc-faint); }
.coach .v { display: block; margin-top: 5px; font-size: 16px; font-weight: 750; color: var(--tmc-ink); }
@media (max-width: 860px) {
  .diary-grid { grid-template-columns: 1fr; }
  .coach-grid { grid-template-columns: 1fr; }
  .diary-list li { flex-wrap: wrap; gap: 8px; }
  .dwhen { width: 100%; }
}

/* ── Interactive Pipeline Q&A Simulator ──────────────────────────────────── */
.pipeline-sim {
  margin: 38px auto 48px;
  max-width: 960px;
  background: var(--tmc-panel);
  border: 1px solid var(--tmc-border-glass);
  border-radius: 26px;
  box-shadow: var(--tmc-shadow-card);
  overflow: hidden;
  transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}
.pipeline-sim:hover {
  box-shadow: var(--tmc-shadow-card-hover);
  border-color: color-mix(in srgb, var(--tmc-accent) 30%, var(--tmc-border-glass));
}

.sim-top {
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--tmc-line);
  background: color-mix(in srgb, var(--tmc-panel) 90%, var(--tmc-bg));
  display: flex; flex-direction: column; gap: 14px;
}
.sim-meta-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.sim-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--tmc-accent-soft); color: var(--tmc-accent-deep);
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 9999px;
  border: 1px solid color-mix(in srgb, var(--tmc-accent) 25%, transparent);
}
.sim-badge .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--tmc-accent);
  box-shadow: 0 0 8px var(--tmc-accent);
}
.sim-source-tag {
  font-size: 13px; color: var(--tmc-faint); font-weight: 600; display: flex; align-items: center; gap: 6px;
}

.sim-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.sim-tab {
  background: color-mix(in srgb, var(--tmc-panel) 70%, transparent);
  color: var(--tmc-body-text);
  border: 1px solid var(--tmc-border-glass);
  padding: 8px 16px; border-radius: 9999px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  letter-spacing: -0.01em;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  font-family: inherit;
}
.sim-tab:hover {
  color: var(--tmc-ink);
  background: var(--tmc-panel);
  border-color: color-mix(in srgb, var(--tmc-accent) 35%, var(--tmc-border-glass));
  transform: translateY(-1px);
}
.sim-tab.active {
  background: var(--tmc-accent);
  color: var(--tmc-on-accent);
  border-color: var(--tmc-accent);
  font-weight: 700;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--tmc-accent) 38%, transparent);
}

.sim-body {
  padding: 24px 26px 28px;
  background: var(--tmc-panel);
  display: flex; flex-direction: column; gap: 16px;
  min-height: 270px;
}
.sim-q-row {
  display: flex; justify-content: flex-end;
}
.sim-q-bubble {
  background: var(--tmc-accent);
  color: var(--tmc-on-accent);
  padding: 10px 18px;
  border-radius: 18px 18px 4px 18px;
  font-size: 14.8px; font-weight: 600;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--tmc-accent) 22%, transparent);
}
.sim-a-row {
  display: flex; flex-direction: column; gap: 14px;
  animation: simFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes simFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.sim-a-head {
  font-size: 14.5px; font-weight: 650; color: var(--tmc-ink);
  display: flex; align-items: center; gap: 8px;
}
/* The answer, as the chat shows it: one bubble, the bot's own line breaks. */
.sim-a-bubble {
  align-self: flex-start;
  max-width: 640px;
  background: color-mix(in srgb, var(--tmc-panel) 94%, var(--tmc-bg));
  border: 1px solid var(--tmc-line);
  border-radius: 4px 18px 18px 18px;
  padding: 14px 18px;
  font-size: 14.2px; line-height: 1.55; color: var(--tmc-ink);
  white-space: pre-wrap;
  text-align: left;
}
.sim-a-buttons {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.sim-a-note {
  font-size: 12.5px; color: var(--tmc-faint); margin: 0;
}
.sim-turn { display: flex; flex-direction: column; gap: 16px; }
.sim-turn + .sim-turn { margin-top: 6px; }
/* Tapped buttons stay where they were, greyed, the way a chat leaves them. */
.sim-act-btn.is-spent {
  opacity: .45; cursor: default;
  background: var(--tmc-panel); color: var(--tmc-ink); border-color: var(--tmc-line);
}
/* What the OTHER person receives: labelled, set in from the thread. */
.sim-aside { display: flex; flex-direction: column; gap: 6px; margin-left: 24px; max-width: 640px; }
.sim-aside-label {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tmc-faint);
}
.sim-aside-bubble {
  border-style: dashed;
  background: color-mix(in srgb, var(--tmc-accent) 6%, var(--tmc-panel));
}
.sim-act-btn {
  font-size: 11.8px; font-weight: 700; padding: 5px 11px; border-radius: 8px;
  border: 1px solid var(--tmc-line);
  background: var(--tmc-panel); color: var(--tmc-ink); cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.sim-act-btn:hover {
  background: var(--tmc-accent); color: var(--tmc-on-accent); border-color: var(--tmc-accent);
}

@media (max-width: 680px) {
  .sim-top, .sim-body { padding: 18px 16px; }
}

/* ── Subtle Scroll-Triggered Reveal Animations ─────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Ambient Background & Light Shaft Animation (CattleGrid-Inspired) ──── */
.ambient-stage {
  position: relative;
  overflow: hidden;
}

.ambient-scanlines {
  background-image: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--tmc-line) 45%, transparent) 0px,
    color-mix(in srgb, var(--tmc-line) 45%, transparent) 1px,
    transparent 1px,
    transparent 22px
  );
}

.light-shaft-box {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.light-shaft-beam {
  position: absolute;
  top: 0;
  left: 0;
  width: 42%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent 0%,
    color-mix(in srgb, var(--tmc-accent) 18%, transparent) 50%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(to right, transparent 0%, white 25%, white 75%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, white 25%, white 75%, transparent 100%);
  animation: lightShaftDrift 13s linear infinite;
  will-change: transform, opacity;
}

.light-shaft-ribs {
  position: absolute;
  top: 0;
  left: 0;
  width: 42%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--tmc-accent-deep) 35%, transparent) 0px,
    color-mix(in srgb, var(--tmc-accent-deep) 12%, transparent) 1px,
    transparent 2px,
    transparent 22px
  );
  -webkit-mask-image: linear-gradient(to right, transparent 0%, white 25%, white 75%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, white 25%, white 75%, transparent 100%);
  animation: lightShaftDrift 13s linear infinite;
  will-change: transform, opacity;
}

@keyframes lightShaftDrift {
  0%   { transform: translateX(-140%) skewX(-38deg); opacity: 0; }
  12%  { transform: translateX(-100%) skewX(-38deg); opacity: 0.85; }
  85%  { transform: translateX(290%) skewX(-38deg); opacity: 0.85; }
  100% { transform: translateX(330%) skewX(-38deg); opacity: 0; }
}

/* ── Comparison Table for /pricing.html ────────────────────────────────── */
.table-wrap {
  width: 100%;
  max-width: 980px;
  margin: 48px auto 0;
  overflow-x: auto;
  border-radius: 20px;
  border: 1px solid var(--tmc-border-glass);
  background: var(--tmc-panel);
  box-shadow: var(--tmc-shadow-card);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 15px;
}
.compare-table th, .compare-table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--tmc-line);
}
.compare-table th {
  background: color-mix(in srgb, var(--tmc-panel) 90%, var(--tmc-bg));
  font-weight: 750;
  color: var(--tmc-ink);
}
.compare-table th:first-child { width: 50%; }
.compare-table th:not(:first-child), .compare-table td:not(:first-child) {
  text-align: center;
  width: 25%;
}
.compare-table td { color: var(--tmc-body-text); }
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table .feature-title { font-weight: 650; color: var(--tmc-ink); }
.compare-table .feature-desc { font-size: 13px; color: var(--tmc-faint); margin-top: 2px; }
.compare-table .pt-check { color: var(--tmc-accent); font-weight: 800; font-size: 18px; }
.compare-table .pt-dash { color: var(--tmc-faint); font-weight: 600; }

/* ── FAQ Section ──────────────────────────────────────────────────────── */
.faq-wrap { max-width: 820px; margin: 40px auto 0; }
.faq-item {
  border: 1px solid var(--tmc-border-glass);
  border-radius: 16px;
  background: var(--tmc-panel);
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--tmc-shadow-card);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item:hover {
  border-color: color-mix(in srgb, var(--tmc-accent) 30%, var(--tmc-border-glass));
}
.faq-q {
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--tmc-ink);
  user-select: none;
}
.faq-q svg {
  width: 20px;
  height: 20px;
  color: var(--tmc-faint);
  transition: transform 0.25s ease, color 0.2s ease;
}
.faq-item.open .faq-q svg {
  transform: rotate(180deg);
  color: var(--tmc-accent);
}
.faq-a {
  padding: 0 24px 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--tmc-body-text);
  display: none;
}
.faq-item.open .faq-a {
  display: block;
}

/* ── Enhanced Enterprise Footer ────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--tmc-line);
  background: var(--tmc-panel);
  padding: 64px 0 44px;
  color: var(--tmc-body-text);
  font-size: 14.5px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px 32px;
  margin-bottom: 48px;
}
.footer-brand .wordmark { margin-bottom: 14px; }
.footer-tagline { font-size: 14.5px; color: var(--tmc-faint); max-width: 32ch; line-height: 1.55; margin-bottom: 16px; }
.footer-meta { font-size: 13px; color: var(--tmc-faint); line-height: 1.6; }
.footer-col h4 {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tmc-ink);
  margin: 0 0 16px;
}
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-links a { color: var(--tmc-body-text); text-decoration: none; transition: color 0.15s ease; }
.footer-links a:hover { color: var(--tmc-ink); }
.footer-bottom {
  border-top: 1px solid var(--tmc-line);
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13.5px;
  color: var(--tmc-faint);
}
@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}



/* ── The seven-page site (2026-09-17) ───────────────────────────────────
   Home, How it works, Deal memory, For managers, Outlook & Teams,
   Integrations & trust, Pricing. Shared rules the new pages need and the
   one-page site never had: a Product menu in the bar, a menu for phones,
   single-column heroes, and the day-in-the-life rows. */
.nav-menu { position: relative; }
.nav-menu summary { list-style: none; cursor: pointer; color: var(--tmc-body-text); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 7px; transition: color .15s ease; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.nav-menu summary:hover, .nav-menu[open] summary { color: var(--tmc-ink); }
.nav-panel { position: absolute; top: calc(100% + 16px); left: -12px; min-width: 240px; padding: 8px; background: var(--tmc-panel); border: 1px solid var(--tmc-line); border-radius: 14px; box-shadow: var(--tmc-shadow); display: grid; gap: 2px; z-index: 50; }
.nav-panel a { display: block; padding: 9px 12px; border-radius: 9px; font-size: 14.5px; }
.nav-panel a:hover { background: var(--tmc-accent-soft); color: var(--tmc-ink); }
.nav-panel a small { display: block; font-weight: 500; color: var(--tmc-faint); font-size: 12.5px; }
.topnav a.is-here, .topnav .nav-menu.is-here summary { color: var(--tmc-accent); }
.nav-mobile { display: none; }
@media (max-width: 940px) {
  .topnav .nav-desktop { display: none; }
  .nav-mobile { display: block; position: relative; }
  .nav-mobile .nav-panel { right: 0; left: auto; min-width: 250px; }
}
.hero-single .wrap { display: block; max-width: 820px; }
.hero-single h1 { max-width: 20ch; }
.hero-single .sub { max-width: 58ch; }
.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.split2 > div { background: var(--tmc-panel); border: 1px solid var(--tmc-line); border-radius: var(--tmc-radius); padding: 24px 26px; }
.split2 h3, .control-split h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--tmc-accent); font-weight: 800; margin-bottom: 14px; }
.split2 .control-list, .control-split .control-list { grid-template-columns: 1fr; gap: 12px; }
.control-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.control-list-foot { margin-top: 26px; }
@media (max-width: 760px) { .split2, .control-split { grid-template-columns: 1fr; } }
.chat-note { text-align: center; color: var(--tmc-faint); font-size: 14px; margin: 16px auto 0; max-width: 62ch; }
.plan-line { margin-top: 30px; padding: 16px 20px; border-left: 3px solid var(--tmc-accent); background: var(--tmc-accent-soft); border-radius: 0 12px 12px 0; font-size: 15.5px; color: var(--tmc-ink); max-width: 72ch; }
.say-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.say-list li { background: var(--tmc-panel); border: 1px solid var(--tmc-line); border-left: 3px solid var(--tmc-accent); border-radius: 12px; padding: 12px 16px; font-size: 15.2px; line-height: 1.5; color: var(--tmc-ink); }
.say-list li .why { display: block; color: var(--tmc-faint); font-size: 13.5px; margin-top: 3px; }
.say-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 34px; }
.say-groups h3 { font-size: 17px; font-weight: 750; margin-bottom: 10px; }
@media (max-width: 760px) { .say-groups { grid-template-columns: 1fr; } }
.day { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 30px 0; border-top: 1px solid var(--tmc-line); }
.day .t { font-weight: 800; font-size: 20px; color: var(--tmc-accent); letter-spacing: -0.02em; }
.day h3 { font-size: 21px; font-weight: 780; margin-bottom: 8px; letter-spacing: -0.02em; }
.day p { font-size: 15.8px; max-width: 62ch; }
.day p + p { margin-top: 10px; }
.day .phone { max-width: 540px; margin: 18px 0 0; }
@media (max-width: 640px) { .day { grid-template-columns: 1fr; gap: 6px; } }
/* THE SITE'S ONE TWO-COLUMN SHAPE: the argument on the left, the thing itself
   on the right. Bob, 17 Sep, on seeing it applied to the Monday brief: "I
   prefer that and we need to do the same for the rest of the website, it gives
   the pages more structure and separation."
   The gap was 26px, which is a seam rather than a separation, and the mock was
   capped narrower than its own column so it floated. */
.pair {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 24px 60px;
  align-items: start;
}
.pair .section-head { margin-bottom: 0; max-width: 46ch; }
.pair .section-head + .section-head { margin-top: 20px; }
/* The mock fills the column it was given. */
.pair .phone { margin: 0; max-width: none; width: 100%; }
/* THE LONG THREAD PROBLEM, and the second answer to it.
   The first was a scrollbox on the thread, which cropped the last bubble and
   read as a broken page rather than as "there is more" (Bob, 17 Sep: "what is
   the green button bottom right, looks cropped off"). A nested scroll area
   also fights the page on a touch device, which is where he saw it.
   So the mock is shown WHOLE and the argument sticks beside it instead. The
   page scrolls once, nothing is cut, and the left column stays with you
   rather than stranding at the top of a tall section. */
.pair > .section-head { position: sticky; top: 104px; }
@media (prefers-reduced-motion: reduce) { .pair > .section-head { position: static; } }
/* The sentence that carries the point, under a hairline. Same device as the
   turn in "Why the CRM is empty". */
.pair .section-head .turn {
  padding-top: 18px;
  border-top: 1px solid var(--tmc-line);
  color: var(--tmc-ink);
}
.pair .section-head .chat-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--tmc-line);
  text-align: left;
  color: var(--tmc-faint);
}
@media (max-width: 860px) {
  .pair { grid-template-columns: 1fr; gap: 28px; }
  .pair .section-head { max-width: none; }
  /* One column: nothing to stick to. */
  .pair > .section-head { position: static; }
}
.cta-band { text-align: center; }
.cta-band .btn { margin: 6px; }
.brief-phone.wide { max-width: 640px; }
.phone.inline { margin: 0; }

/* ── BIGGER TYPE, EVERYWHERE ──────────────────────────────────────────────
   Bob, 17 Sep, twice: "the text is too small", then "the text is still too
   small ffs". This is the second pass and it is a real step, not a nudge:
   body 20px, running copy 21px, the chat mocks 17.5px. The audience is a
   sales director reading on a laptop at arm's length, not a developer at
   14px. Where a size sits below 16px it is a label or a caption, never
   something anybody has to read a paragraph of. */
body { font-size: 20px; }
.hero .sub { font-size: clamp(20px, 1.9vw, 23px); max-width: 36ch; }
.hero-note { font-size: 16.5px; }
.msg { font-size: 17.5px; line-height: 1.55; max-width: 90%; }
.msg .meta { font-size: 13.5px; }
.msg .cite { font-size: 14.5px; }
.section-head p { font-size: 21px; line-height: 1.6; }
.step p, .feature p, .split2 p, .day p { font-size: 19px; line-height: 1.62; }
/* A beat can carry a second sentence of its own (the backfill, the customer's
   website). Without this they run together and read as one paragraph. */
.step p + p, .feature p + p, .split2 p + p { margin-top: 12px; }
.features-secondary .feature p { font-size: 18.5px; }
.step h3, .feature h3 { font-size: 22px; }
.features-secondary .feature h3 { font-size: 19.5px; }
.steps-note, .chat-note, .diary-foot, .diary-note span, .diary-alert span { font-size: 18px; }
.control-list li, .plan-line, .say-list li, .price-list li, .faq-a { font-size: 18.5px; line-height: 1.58; }
.say-list li .why { font-size: 16.5px; }
.coach .k { font-size: 17.5px; }
.coach .v { font-size: 19.5px; }
.diary-list li { font-size: 18px; }
.compare-table td, .compare-table th, .feature-desc { font-size: 17.5px; }
.feature-title { font-size: 18.5px; }
.draft-text { font-size: 17.5px; line-height: 1.58; }
.faq-q span { font-size: 19px; }
.topnav a, .nav-menu summary { font-size: 16.5px; }
.nav-panel a { font-size: 17px; }
.nav-panel a small { font-size: 14.5px; }
.btn { font-size: 17.5px; }
.btn-sm { font-size: 16px; }
.price-plan-desc { font-size: 18px; }
footer, footer a { font-size: 17px; }
.brief-phone.wide { max-width: 760px; }
.day .phone { max-width: 640px; }

/* Phones: the same step, one size down, and the mocks get the full width. */
@media (max-width: 720px) {
  body { font-size: 18.5px; }
  .section-head p { font-size: 19px; }
  .step p, .feature p, .split2 p, .day p { font-size: 18px; }
  .msg { font-size: 17px; max-width: 94%; }
  .control-list li, .plan-line, .say-list li, .price-list li, .faq-a { font-size: 17.5px; }
}

/* ── WHY THE CRM IS EMPTY ─────────────────────────────────────────────────
   Bob, 17 Sep: "I don't like the layout of this bit."
   It read as three bands of three different widths: prose in a 54ch column
   hugging the left with a dead half-page beside it, then three figures across
   the full width, then prose in the narrow column again.
   The argument and its evidence now sit side by side, which is what they are:
   a claim and the numbers behind it. The empty half is used rather than
   fought, and the section has one rhythm instead of three. */
.why-title {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 800;
  text-wrap: balance;
  margin: 0 0 28px;
  max-width: 18ch;
}
.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 20px 64px;
  align-items: start;
}
.why-argument p { margin: 0 0 20px; max-width: 54ch; }
.why-argument p:last-child { margin-bottom: 0; }
/* The one photograph on the site (AI-generated, Bob's, 25 Sep 2026): the
   product in a picture, a rep speaking the update on the way out. */
.why-photo { margin: 30px 0 0; max-width: 54ch; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--tmc-border-glass); box-shadow: var(--tmc-shadow-card); }
.why-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
/* The turn in the argument. The one place on this page where a sentence is
   allowed to look like the point, because it is. */
.why-turn {
  padding-top: 20px;
  border-top: 1px solid var(--tmc-line);
  color: var(--tmc-ink);
}
.why-evidence { display: grid; gap: 26px; }
.stat { display: grid; gap: 6px; padding-top: 16px; border-top: 2px solid var(--tmc-accent); }
.stat-n {
  font-size: clamp(30px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tmc-ink);
  font-variant-numeric: tabular-nums;
}
.stat p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--tmc-body-text); }
.stat-source { margin: 4px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--tmc-faint); }
.stat-source a { color: inherit; }

@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; gap: 36px; }
  .why-title { max-width: none; }
  .why-argument p { max-width: none; }
}

/* ── THE PAGER ────────────────────────────────────────────────────────────
   Previous and next at the foot of every page, both named, with your place in
   the sequence between them. The site is an argument in order and there was no
   way to walk it except the menu. */
.pager { border-top: 1px solid var(--tmc-line); }
.pager-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px 24px;
  padding-block: 30px;
}
.pager-link {
  display: grid;
  gap: 3px;
  text-decoration: none;
  color: var(--tmc-body-text);
  padding: 12px 16px;
  margin: -12px -16px;
  border-radius: 12px;
  transition: background .15s ease, color .15s ease;
}
.pager-next { text-align: right; justify-items: end; }
.pager-link:hover { background: color-mix(in srgb, var(--tmc-accent) 10%, transparent); }
.pager-link:hover .pager-name { color: var(--tmc-accent); }
.pager-dir {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tmc-faint);
}
.pager-name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tmc-ink);
  transition: color .15s ease;
}
.pager-where {
  font-size: 14.5px;
  color: var(--tmc-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 640px) {
  /* Where you are moves under the two links rather than squeezing between. */
  .pager-inner { grid-template-columns: 1fr 1fr; padding-block: 24px; }
  .pager-where { grid-column: 1 / -1; grid-row: 2; text-align: center; }
  .pager-name { font-size: 17px; }
}

/* ── THE PRODUCT ITSELF, ON SCREEN (24 Sep) ─────────────────────────────────
   The site showed coaching and reporting only as chat bubbles, and a sales
   director judges a product by its screens. These are the real portal pages,
   rendered by the live code from invented data (the demo cast), in a plain
   window frame. They stay light in the dark theme: the portal is light, and a
   screenshot recoloured would no longer be the product. */
.screen {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--tmc-line);
  background: #FBFCFB;
  box-shadow: var(--tmc-shadow);
}
.screen-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: #EEF2F0;
  border-bottom: 1px solid #E4EAE7;
}
.screen-bar i { width: 11px; height: 11px; border-radius: 50%; background: #CBD5D1; display: block; }
.screen-bar span { margin-left: 10px; font-size: 13.5px; color: #6B7A75; font-weight: 600; }
.screen img { display: block; width: 100%; height: auto; }
.screen figcaption {
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.5;
  color: #4A5A55;
  background: #FFFFFF;
  border-top: 1px solid #E4EAE7;
}
.screen + .screen { margin-top: 24px; }
.screen-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

/* THE MENU GREW (24 Sep): Coaching and Reporting moved up to the top bar, so a
   laptop-width bar wrapped "For managers" and "Sign in" onto two lines. Never
   wrap a menu item; below the width that fits them all, use the Menu. */
.topnav a, .nav-menu summary { white-space: nowrap; }
@media (max-width: 1240px) {
  .topnav a.hide-sm { display: none; }
  .topnav .nav-desktop { display: none; }
  .nav-mobile { display: block; position: relative; }
  .nav-mobile .nav-panel { right: 0; left: auto; min-width: 250px; }
}
.screen > a { display: block; cursor: zoom-in; }

/* ── VISUAL PASS (Bob, 25 Sep 2026) ─────────────────────────────────────────
   From an outside design review Bob approved in part. What it changes:
   1. Hierarchy: only the h1 is 800. Section headings drop to 700, card titles
      to 680, so a page has one loudest thing instead of every heading shouting.
   2. Dark-theme body text is brighter (was #A9BAB4, read washed out). The SIZE
      stays at 20px: Bob asked twice for bigger text (see BIGGER TYPE above),
      and the review's 17-18px is refused on purpose.
   3. Section rhythm: ~112px between sections (was ~124, and ~250 under the
      hero where the text column ends above the mock).
   4. The three figures in "Why the CRM is always behind" become cards: big
      mint number, the claim, the source under the cards.
   5. Two button styles only: solid mint pill (primary) and a dark outline pill
      (secondary). No gradient, no frosted glass.
   6. Green does two jobs, buttons and key data. Eyebrow and small section
      labels go neutral; the dot keeps the one spot of colour.
   Chat and pane mocks are product wording and are not restyled here. */

/* 1. Hierarchy */
.section-head h2, .why-title, .flow-caption h2, main h2 { font-weight: 700; letter-spacing: -0.025em; }
.hero h1 { font-weight: 800; }
.step h3, .feature h3, .day h3 { font-weight: 680; }

/* 2. Brighter body text on the dark theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --tmc-body-text: #C8D6D0; --tmc-faint: #8A9C96; }
}
[data-theme="dark"] { --tmc-body-text: #C8D6D0; --tmc-faint: #8A9C96; }

/* 3. Section rhythm */
section { padding: 56px 0; }
.hero { padding-bottom: 28px; }
@media (max-width: 720px) {
  section { padding: 44px 0; }
  .hero { padding-bottom: 20px; }
}

/* 4. The figures as cards */
.why-evidence { gap: 16px; }
.stat {
  padding: 22px 26px 24px;
  border: 1px solid var(--tmc-border-glass);
  border-top: 1px solid var(--tmc-border-glass);
  border-radius: 18px;
  background: var(--tmc-panel);
  box-shadow: var(--tmc-shadow-card);
  gap: 8px;
}
.stat-n {
  font-size: clamp(46px, 4.4vw, 60px);
  font-weight: 800;
  color: var(--tmc-accent);
  letter-spacing: -0.035em;
}
.stat-source { margin-top: 6px; font-size: 15px; }

/* 5. Two buttons */
.btn { font-weight: 650; }
.btn-primary {
  background: var(--tmc-accent);
  border: 1px solid var(--tmc-accent);
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--tmc-accent) 60%, transparent);
}
.btn-primary:hover {
  background: var(--tmc-accent-deep);
  border-color: var(--tmc-accent-deep);
  box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--tmc-accent) 70%, transparent);
}
.btn-ghost {
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--tmc-ink) 28%, transparent);
  box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.btn-ghost:hover {
  background: transparent;
  border-color: var(--tmc-accent);
  color: var(--tmc-ink);
  box-shadow: none;
}

/* 6. Green for buttons and data only */
.eyebrow { color: var(--tmc-body-text); }
.split2 h3, .control-split h3 { color: var(--tmc-faint); }
/* Single-column heroes (pricing lays its hero out as a flex column inline) were
   inheriting the two-column hero's 64px grid gap: 64px of nothing between the
   heading, the paragraph and the Monthly/Annual toggle. */
.hero-single .wrap { gap: 0; }
/* £19 and £39 on the same line: the plan description's floor was sized for the
   old 14.6px text (44px, two lines); at 18px Pro's three lines pushed £39 down. */
@media (min-width: 821px) { .price-plan-desc { min-height: calc(3 * 1.48em); } }

/* ── PHOTOGRAPHS (25 Sep 2026) ───────────────────────────────────────────────
   AI-generated, Bob's, one per page where the picture IS the moment the page
   describes: the one-to-one (coaching), Monday 8am (managers), the car park
   voice note (how it works), the rep drafting at a desk (outlook). A photo
   sits in a section's argument column (.section-photo) or runs full width
   above a section's cards (.section-banner). Never on top of a product mock. */
.section-photo { margin: 28px 0 0; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--tmc-border-glass); box-shadow: var(--tmc-shadow-card); }
.section-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.section-banner { margin: 0 0 40px; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--tmc-border-glass); box-shadow: var(--tmc-shadow-card); }
.section-banner img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 8; object-fit: cover; object-position: center 38%; }
@media (max-width: 720px) {
  .section-banner img { aspect-ratio: 3 / 2; }
}
.section-banner.banner-high img { object-position: center 12%; }

/* WIDE SCREENS (17 Oct 2026): independent cards side by side, two or more to a
   row; anything that is not a card, and any card holding a table, spans the
   row. Opt in with .page-grid; the coaching and account pages lay out their own. */
@media (min-width: 1200px) {
  .page-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); gap: 20px; align-items: start; }
  .page-grid > * { grid-column: 1 / -1; min-width: 0; }
  .page-grid > .card, .page-grid > .wiz-step { grid-column: auto; margin-top: 0 !important; margin-bottom: 0 !important; }
  .page-grid > .card.wide, .page-grid > .card:has(table), .page-grid > #teamCard { grid-column: 1 / -1; }
  .page-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Packed by page-grid.js: 4px rows, each card spanning its own height plus
     the 20px gap, so no card leaves a hole under it. Hidden cards take no space. */
  .page-grid.pg-packed { row-gap: 0; grid-auto-rows: 4px; }
  .page-grid > [hidden], .page-grid > .tokenField[hidden] { display: none !important; }
}