@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --paper: #fbfaf6;
  --paper-bright: #ffffff;
  --paper-deep: #f4f1ea;
  --ink: #0b0d0f;
  --navy: #08121c;
  --navy-raised: #0d1b29;
  --ink-soft: #252a28;
  --muted: #5b6260;
  --rule: #d9d7d0;
  --rule-dark: rgba(11, 13, 15, .2);

  /* Kirk Web Design's verified live teal. Interaction and system state. */
  --teal: #17bfa9;
  --teal-hover: #2fd8c1;
  --teal-pressed: #10a08e;
  --teal-soft: rgba(23, 191, 169, .12);
  --teal-line: rgba(23, 191, 169, .42);
  --teal-text: #0c7568;
  --on-teal: #05211d;

  /* Gold sampled from the current Kirk Web Design crown mark. Identity only. */
  --gold: #bf954e;
  --gold-soft: rgba(191, 149, 78, .13);
  --gold-line: rgba(191, 149, 78, .42);
  --gold-text: #78581e;
  --on-gold: #11130f;

  /* Compatibility aliases for the original Midwest Precision components. */
  --signal: var(--teal);
  --signal-dark: var(--teal-pressed);
  --signal-text: var(--teal-text);
  --success: #277553;
  --error: #a63227;
  --font-sans: "Archivo", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;
  --page-max: 90rem;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --gap: clamp(1rem, 1.8vw, 1.5rem);
  --section-space: clamp(5.5rem, 9vw, 9rem);
  --header-h: 4.75rem;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);

  /* Seated-block hover, shared with the CRM app (portal/css/crm-ui.css).
     A block that is hovered comes up out of its slot: it clears the lip
     of the well, and a hard gold slab shows behind it where the light no
     longer reaches. --slot-raise-sm is for blocks that carry their own
     button, where a full 0.7rem of travel would move the target out from
     under a cursor already reaching for it. */
  --slot-raise: translate3d(0, -.7rem, 0) scale(1.015);
  --slot-raise-sm: translate3d(0, -.4rem, 0);
  --slot-shadow: .75rem .75rem 0 var(--gold-soft), 0 1.4rem 2.8rem rgba(8, 18, 28, .17);
  --slot-shadow-sm: .45rem .45rem 0 var(--gold-soft), 0 .9rem 1.8rem rgba(8, 18, 28, .16);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ---- The page itself never scrolls sideways --------------------------- */
/* Anything genuinely wider than a phone screen -- tables, the pipeline
   board, the tab strip -- scrolls inside its own overflow-x:auto container,
   so the content stays reachable. This stops anything that escapes one of
   those containers from dragging the whole layout sideways instead.

   `clip` rather than `hidden`: hidden turns the element into a scroll
   container, which silently breaks position:sticky (the table headers and
   the CRM rail both rely on it). The `hidden` line before it is the
   fallback for browsers that do not support `clip`. */
html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(1rem, .96rem + .16vw, 1.125rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, dl, figure { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd, dt, h1, h2, h3 { overflow-wrap: break-word; }
::selection { background: var(--signal); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: .5rem;
  left: .5rem;
  transform: translateY(-150%);
  background: var(--ink);
  color: var(--paper-bright);
  padding: .7rem 1rem;
  text-decoration: none;
}
.skip-link:focus { transform: none; }

.shell {
  width: min(calc(100% - 2 * var(--gutter)), var(--page-max));
  margin-inline: auto;
}
.mono-label {
  font-family: var(--font-mono);
  font-size: clamp(.67rem, .64rem + .1vw, .76rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--header-h);
  border-bottom: 1px solid var(--rule-dark);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(12px);
}
.header-grid {
  min-height: var(--header-h);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  align-items: center;
}
.wordmark {
  grid-column: 1 / 4;
  display: inline-flex;
  align-items: center;
  width: clamp(9rem, 12vw, 11.25rem);
  text-decoration: none;
}
.wordmark img { width: 100%; height: auto; }
.desktop-nav {
  grid-column: 5 / 9;
  display: flex;
  justify-content: center;
  gap: clamp(1.25rem, 2.5vw, 2.7rem);
}
.desktop-nav a, .utility-link {
  position: relative;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
}
.desktop-nav a::after, .utility-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -.38rem;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s var(--ease-out);
}
.desktop-nav a:hover::after, .utility-link:hover::after { transform: scaleX(1); transform-origin: left; }
.header-actions {
  grid-column: 9 / 13;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(.75rem, 1.5vw, 1.5rem);
}
.utility-link { color: var(--muted); white-space: nowrap; }
.nav-action, .action {
  min-height: 3.25rem;
  display: inline-grid;
  grid-template-columns: 1fr 3.25rem;
  align-items: stretch;
  border: 1px solid currentColor;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 650;
}
.nav-action { min-height: 2.8rem; grid-template-columns: 1fr 2.8rem; background: var(--teal); color: var(--on-teal); }
.nav-action > span:first-child, .action > span:first-child { display: flex; align-items: center; padding: 0 1rem; }
.nav-action__arrow, .action__arrow {
  display: grid;
  place-items: center;
  border-left: 1px solid currentColor;
  font-size: 1.05rem;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-action:hover .nav-action__arrow, .action:hover .action__arrow { background: var(--navy); color: var(--paper-bright); }
.menu-toggle { display: none; }
.mobile-menu { background: var(--navy); color: var(--paper-bright); border-bottom: 1px solid rgba(255,255,255,.16); }
.mobile-menu nav { display: grid; }
.mobile-menu a {
  min-height: 4rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.13);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
}
.mobile-menu a span { color: var(--signal); font-family: var(--font-mono); font-size: .7rem; }

/* Shared actions */
.action-row { display: flex; align-items: center; flex-wrap: wrap; gap: 1.4rem; margin-top: 2rem; }
.action--dark { background: var(--navy); color: var(--paper-bright); }
.action--signal { background: var(--teal); color: var(--on-teal); }
.action--signal:hover .action__arrow { background: var(--paper-bright); color: var(--ink); }
.text-action {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  width: max-content;
  padding-block: .35rem;
  border-bottom: 1px solid var(--rule-dark);
  font-size: .86rem;
  font-weight: 650;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.text-action:hover { color: var(--signal-text); border-color: var(--signal); }
.text-action--light { color: var(--ink); border-color: var(--rule-dark); }
.text-action--light:hover { color: var(--teal-text); border-color: var(--teal); }

/* Hero */
.hero {
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 7.5vw, 7rem);
  border-bottom: 1px solid var(--rule-dark);
}
.hero-kicker {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule-dark);
  color: var(--muted);
}
.hero-kicker span:first-child { color: var(--gold-text); }
.hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  align-items: center;
  padding-top: clamp(2.5rem, 5vw, 5.5rem);
}
.hero-copy { grid-column: 1 / 6; align-self: center; }
.hero-copy h1 {
  margin-bottom: clamp(1.6rem, 3vw, 2.5rem);
  font-size: clamp(4rem, 7.5vw, 7rem);
  font-weight: 590;
  line-height: .88;
  letter-spacing: -.066em;
}
.hero-copy > p {
  max-width: 32rem;
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(1.15rem, 1rem + .6vw, 1.55rem);
  line-height: 1.35;
}

/* Hero system map */
.system-map {
  grid-column: 6 / 13;
  min-width: 0;
  min-height: 38rem;
  display: grid;
  grid-template-rows: 3rem 1fr 2.75rem;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  background: var(--navy);
  color: var(--paper-bright);
  border: 1px solid var(--navy);
}
.system-map__bar, .system-map__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: 1rem;
  color: rgba(255,255,255,.66);
  background: var(--navy-raised);
}
.system-map__bar { border-bottom: 1px solid rgba(255,255,255,.13); }
.system-map__foot { border-top: 1px solid rgba(255,255,255,.13); }
.system-map__status { display: flex; align-items: center; gap: .55rem; color: var(--paper-bright); }
.system-map__status i, .status-copy i {
  width: .34rem;
  height: .34rem;
  border-radius: 50%;
  background: var(--signal);
}
.system-map__body { min-height: 0; display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); }
.system-map__rail { display: grid; grid-template-rows: repeat(5, 1fr); border-right: 1px solid rgba(255,255,255,.13); }
.system-map__rail button {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  padding: .8rem .9rem;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: transparent;
  color: rgba(255,255,255,.55);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .055em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.system-map__rail button:last-child { border-bottom: 0; }
.system-map__rail button span { color: rgba(255,255,255,.28); font-size: .6rem; }
.system-map__rail button[aria-selected="true"] { background: var(--teal); color: var(--on-teal); }
.system-map__rail button[aria-selected="true"] span { color: rgba(17,19,15,.55); }
.system-map__viewport {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 5.2rem clamp(1.1rem, 2.5vw, 2.2rem) 1.5rem;
  background-color: var(--navy);
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
}
.route-line { position: absolute; z-index: 0; top: 1rem; right: 1.5rem; left: 1.5rem; width: calc(100% - 3rem); height: 4rem; overflow: visible; }
.route-line path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.route-line__base { stroke: rgba(255,255,255,.15); }
.route-line__active { stroke: var(--signal); stroke-dasharray: 100; stroke-dashoffset: var(--route-offset, 80); transition: stroke-dashoffset .6s var(--ease-out); }
.route-line circle { fill: var(--navy); stroke: rgba(255,255,255,.3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.system-panel { position: relative; z-index: 1; min-height: 100%; animation: panel-in .28s var(--ease-out) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.system-panel__head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; color: rgba(255,255,255,.55); }
.site-sample { position: relative; height: clamp(20rem, 28vw, 27rem); overflow: hidden; border: 1px solid rgba(255,255,255,.18); background: var(--paper); color: var(--ink); }
.site-sample::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 4rem; background: linear-gradient(180deg, transparent, rgba(8,18,28,.92)); pointer-events: none; }
.synthetic-site { min-height: 100%; padding: 1rem; background: linear-gradient(135deg, var(--paper-bright), var(--paper-deep)); }
.synthetic-site__top { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--rule-dark); color: var(--muted); font-family: var(--font-mono); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; }
.synthetic-site__mark { color: var(--gold-text); font-weight: 600; }
.synthetic-site__body { display: grid; grid-template-columns: 1.25fr .75fr; gap: 1rem; align-items: center; min-height: calc(100% - 2rem); padding-block: 2rem 4.5rem; }
.synthetic-site__body > div:first-child { display: flex; flex-direction: column; align-items: flex-start; }
.synthetic-site__eyebrow { margin-bottom: .75rem; color: var(--teal-text); font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.synthetic-site strong { font-size: clamp(1.8rem, 3.3vw, 3.1rem); line-height: .92; letter-spacing: -.055em; }
.synthetic-site i { margin-top: 1.25rem; padding: .65rem .8rem; background: var(--navy); color: #fff; font-family: var(--font-mono); font-size: .58rem; font-style: normal; text-transform: uppercase; }
.synthetic-site__visual { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--rule-dark); background: var(--gold-soft); }
.synthetic-site__visual span { position: absolute; display: block; }
.synthetic-site__visual span:first-child { inset: 12% 16% 34%; background: var(--navy); }
.synthetic-site__visual span:nth-child(2) { right: 10%; bottom: 16%; width: 66%; height: 34%; background: var(--gold); }
.synthetic-site__visual span:last-child { right: 8%; top: 8%; width: 1.1rem; height: 1.1rem; background: var(--teal); }
.site-sample__caption { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem; }
.site-sample__caption span { color: rgba(255,255,255,.65); font-size: .78rem; }
.site-sample__caption strong { color: var(--paper-bright); font-size: .83rem; }
.sample-title { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: -.035em; }
.intake-sample, .record-sample, .follow-sample, .close-sample { min-height: 22rem; padding: clamp(1.2rem, 2.5vw, 2rem); border: 1px solid rgba(255,255,255,.18); background: rgba(17,19,15,.82); }
.intake-sample dl { display: grid; gap: .75rem; margin: 1.5rem 0; }
.intake-sample dl div, .record-grid div { display: grid; grid-template-columns: minmax(7rem, .75fr) 1fr; gap: 1rem; padding: .75rem 0; border-top: 1px solid rgba(255,255,255,.14); }
.intake-sample dt, .record-grid span { color: rgba(255,255,255,.48); font-family: var(--font-mono); font-size: .67rem; letter-spacing: .06em; text-transform: uppercase; }
.intake-sample dd { margin: 0; font-weight: 550; }
.sample-state { display: inline-flex; align-items: center; width: max-content; padding: .42rem .62rem; background: var(--success); color: #fff; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }
.sample-state--orange { background: var(--signal); color: var(--ink); }
.record-sample__top { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.record-id { color: rgba(255,255,255,.5); font-family: var(--font-mono); font-size: .67rem; letter-spacing: .08em; }
.record-sample h3, .follow-sample h3, .close-sample h3 { margin: 1.8rem 0; font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 580; letter-spacing: -.04em; }
.record-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
.record-grid div { grid-template-columns: 1fr; gap: .2rem; }
.timeline-node { display: flex; align-items: center; gap: .7rem; color: rgba(255,255,255,.55); font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; }
.timeline-node i { width: .65rem; height: .65rem; border: 1px solid var(--teal); background: var(--teal-soft); transform: rotate(45deg); }
.follow-sample > p, .close-sample > p:last-child { max-width: 31rem; color: rgba(255,255,255,.58); }
.follow-sample__footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .78rem; }
.follow-sample__footer span { color: rgba(255,255,255,.45); }
.close-sample { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.close-sample__mark { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: 1.2rem; background: var(--signal); color: var(--ink); font-size: 1.5rem; }
.close-sample .mono-label { color: rgba(255,255,255,.5); }
.close-sample h3 { margin: .6rem 0 1rem; }

/* Shared section headings */
.section-intro { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gap); align-items: end; margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.section-intro > div:first-child { grid-column: 1 / 9; }
.section-intro__aside { grid-column: 9 / 13; }
.section-intro .mono-label { margin-bottom: 1.4rem; color: var(--gold-text); }
.section-intro h2, .founder-copy h2, .page-hero h1 {
  max-width: 13ch;
  margin-bottom: 0;
  font-size: clamp(3rem, 5.8vw, 5.5rem);
  font-weight: 580;
  line-height: .93;
  letter-spacing: -.058em;
}
.section-intro__aside > p:not(.mono-label) { margin-bottom: 1.3rem; color: var(--muted); }

/* CRM */
.crm-section { padding-block: var(--section-space); border-bottom: 1px solid var(--rule-dark); background: var(--paper-bright); color: var(--ink); }
.section-intro--dark .mono-label { color: var(--gold-text); }
.section-intro--dark .section-intro__aside > p:not(.mono-label) { color: var(--muted); }
.status-copy { display: flex; align-items: center; gap: .65rem; color: var(--teal-text) !important; }
.crm-schematic { overflow: hidden; border: 1px solid var(--navy); background: var(--navy); color: var(--paper-bright); }
.crm-schematic__bar { min-height: 3.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-inline: 1rem; border-bottom: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.56); }
.crm-schematic__body { display: grid; grid-template-columns: 13rem minmax(0, 1fr); min-width: 0; }
.crm-mock-sidebar { padding: 1.15rem .8rem; border-right: 1px solid rgba(255,255,255,.14); background: var(--navy-raised); }
.crm-mock-sidebar__brand { margin: 0 0 1.2rem; padding: .7rem .8rem; border-top: 3px solid var(--gold); background: #fff; }
.crm-mock-sidebar__brand img { width: 100%; height: auto; margin: 0; }
.crm-mock-sidebar__label { display: block; margin: 0 .6rem .6rem; color: rgba(255,255,255,.34); }
.crm-mock-sidebar__section { margin: 1.25rem .7rem .55rem; color: rgba(255,255,255,.34); }
.crm-tabs { display: grid; gap: .3rem; }
.crm-tabs span { position: relative; min-height: 2.75rem; display: grid; grid-template-columns: 1.7rem 1fr; align-items: center; padding: .65rem .7rem; border-left: 3px solid transparent; color: rgba(255,255,255,.54); font-size: .7rem; font-weight: 620; white-space: nowrap; }
.crm-tabs span b { color: rgba(255,255,255,.26); font-family: var(--font-mono); font-size: .55rem; font-weight: 500; }
.crm-tabs span.is-current { border-left-color: var(--teal); background: var(--teal-soft); color: #fff; }
.crm-tabs span.is-current b { color: var(--teal); }
.pipeline-workspace { min-width: 0; padding: clamp(1rem, 2.4vw, 2rem); background: #102131; }
.pipeline-workspace__meta { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; color: rgba(255,255,255,.48); }
.pipeline-board-shell { overflow-x: auto; padding-bottom: .45rem; scrollbar-color: var(--teal) rgba(255,255,255,.08); }
.pipeline-board { min-width: 67rem; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .7rem; }
.pipeline-column { min-height: 15rem; padding: .75rem; border: 1px solid rgba(255,255,255,.13); background: #0b1825; }
.pipeline-column__head { display: flex; justify-content: space-between; gap: .65rem; align-items: center; margin-bottom: .75rem; padding-bottom: .65rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.pipeline-column__head h3 { margin: 0; color: rgba(255,255,255,.82); font-size: .72rem; font-weight: 650; line-height: 1.25; }
.pipeline-column__head span { color: var(--teal); font-family: var(--font-mono); font-size: .6rem; }
.pipeline-card { min-height: 8.5rem; padding: .85rem; border-top: 2px solid var(--gold); background: var(--paper-bright); color: var(--ink); }
.pipeline-card__label { display: block; margin-bottom: .65rem; color: var(--teal-text); font-family: var(--font-mono); font-size: .58rem; letter-spacing: .075em; text-transform: uppercase; }
.pipeline-card strong { display: block; margin-bottom: .8rem; font-size: .78rem; line-height: 1.35; }
.pipeline-card small { display: block; color: var(--muted); font-size: .66rem; line-height: 1.4; }
.crm-schematic__foot { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.14); }
.crm-schematic__foot span { min-height: 4rem; display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border-right: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.65); font-size: .74rem; }
.crm-schematic__foot span:last-child { border-right: 0; }
.crm-schematic__foot b { color: var(--teal); font-family: var(--font-mono); font-size: .66rem; }
/* The capability cards now sit between the demo and this button, so the
   gap the demo's own bottom margin used to open up in front of it has to
   come from here instead. */
.product-start-cta { margin-top: clamp(2.5rem, 4vw, 3.5rem); padding: clamp(.6rem, 1.2vw, 1rem); border: 1px solid var(--navy); background: var(--navy); box-shadow: .9rem .9rem 0 var(--gold-soft); }
.product-start-cta__button { width: 100%; min-height: clamp(11rem, 24vw, 18rem); grid-template-columns: minmax(0,1fr) clamp(5.5rem, 10vw, 9rem); border-color: var(--teal); font-size: clamp(2.15rem, 5.4vw, 5.75rem); font-weight: 590; line-height: .9; letter-spacing: -.06em; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.product-start-cta__button > span:first-child { align-items: flex-end; padding: clamp(1.4rem, 4vw, 3.5rem); }
.product-start-cta__button .action__arrow { font-size: clamp(2rem, 4vw, 4.5rem); }
.product-start-cta__button:hover { transform: translate3d(0,-.35rem,0); box-shadow: 0 .9rem 2.5rem rgba(8,18,28,.24); }
.crm-capabilities { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 3rem; border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark); }
.crm-capabilities article { position: relative; z-index: 0; padding: 1.5rem clamp(1rem, 2vw, 1.8rem) 1.5rem 0; border-right: 1px solid var(--rule-dark); background: var(--paper-bright); transform: translateZ(0); transform-origin: center; transition: transform .34s var(--ease-out), box-shadow .34s var(--ease-out), background-color .34s ease; will-change: transform; }
.crm-capabilities article:not(:first-child) { padding-left: clamp(1rem, 2vw, 1.8rem); }
.crm-capabilities article:last-child { border-right: 0; }
.crm-capabilities .mono-label { color: var(--gold-text); }
.crm-capabilities p { margin: 1.5rem 0 0; color: var(--muted); font-size: .9rem; }
.crm-section--steps .section-intro { margin-bottom: clamp(3.5rem, 7vw, 6.5rem); }
/* Full-bleed intro: the heading runs the width of the section instead of
   sharing the row with an aside column. */
.section-intro--wide { align-items: start; }
.section-intro--wide > div:first-child { grid-column: 1 / 13; }
.section-intro--wide h2 { max-width: none; font-size: clamp(3.5rem, 7.5vw, 7.25rem); line-height: .86; letter-spacing: -.068em; }
.section-intro__line { max-width: 46rem; margin: 1.6rem 0 0; color: var(--muted); font-size: clamp(1rem, .9rem + .35vw, 1.2rem); line-height: 1.45; }
.crm-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin: 0; padding: 0; border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark); list-style: none; }
.crm-steps li { position: relative; z-index: 0; min-height: clamp(15rem, 22vw, 20rem); display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.5rem, 3vw, 2.5rem); border-right: 1px solid var(--rule-dark); background: var(--paper-bright); transform: translateZ(0); transform-origin: center; transition: transform .34s var(--ease-out), box-shadow .34s var(--ease-out), background-color .34s ease; will-change: transform; }
.crm-steps li:first-child { padding-left: 0; }
.crm-steps li:last-child { border-right: 0; }
.crm-step__number { color: var(--gold); font-family: var(--font-mono); font-size: clamp(3.6rem, 6vw, 6rem); font-weight: 500; line-height: .8; letter-spacing: -.08em; }
.crm-steps h3 { max-width: 9ch; margin: 3rem 0 0; font-size: clamp(2rem, 3.5vw, 3.5rem); font-weight: 580; line-height: .93; letter-spacing: -.055em; }
.action-row--light { margin-top: 2.5rem; }

/* Local proof */
.local-proof { position: relative; padding-block: var(--section-space); border-bottom: 1px solid var(--rule-dark); background: var(--paper-bright); }
.local-proof::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--gold); }
.local-proof__grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gap); align-items: end; }
.local-proof__grid > .mono-label { grid-column: 1 / 3; align-self: start; color: var(--gold-text); }
.local-proof h2 { grid-column: 3 / 10; margin: 0; font-size: clamp(3rem, 6.2vw, 6rem); font-weight: 580; line-height: .92; letter-spacing: -.06em; }
.local-proof h2 span { color: var(--gold-text); }
.local-proof h2::after { content: ""; display: inline-block; width: .22em; height: .22em; margin-left: .18em; background: var(--teal); vertical-align: .14em; }
.local-proof .text-action { grid-column: 10 / 13; justify-self: end; }

/* Founder */
.founder-section { padding-block: var(--section-space); border-top: 1px solid var(--rule-dark); background: var(--paper-deep); }
.founder-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gap); align-items: center; }
.founder-portrait { position: relative; grid-column: 1 / 6; margin-bottom: 0; }
.founder-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 24%; filter: saturate(.75) contrast(1.04); }
.founder-portrait::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(17,19,15,.2); pointer-events: none; }
.location-stamp { position: absolute; z-index: 1; right: -2.5rem; bottom: 2rem; padding: 1rem 1.15rem; background: var(--gold); color: var(--on-gold); line-height: 1.75; }
.founder-copy { grid-column: 7 / 13; }
.founder-copy > .mono-label { margin-bottom: 1.4rem; color: var(--gold-text); }
.founder-copy h2 { margin-bottom: 2rem; }
.founder-copy__lede { max-width: 36rem; margin-bottom: 2.5rem; color: var(--muted); font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); }
.facts-list { margin-bottom: 2rem; border-top: 1px solid var(--rule-dark); }
.facts-list div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: .82rem 0; border-bottom: 1px solid var(--rule-dark); }
.facts-list dt { color: var(--muted); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.facts-list dd { margin: 0; font-size: .86rem; font-weight: 600; }

/* CTA */
.dual-cta { min-height: 27rem; display: grid; grid-template-columns: 1fr 1fr; overflow-x: clip; background: var(--paper-bright); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.dual-cta > a { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(2rem, 5vw, 5rem) var(--gutter); background: var(--paper-bright); text-decoration: none; }
.dual-cta > a:first-child { border-right: 1px solid var(--ink); }
.dual-cta > a:first-child { box-shadow: inset 0 3px 0 var(--gold); }
.dual-cta > a:last-child { background: var(--paper-deep); box-shadow: inset 0 3px 0 var(--teal); }
.dual-cta .mono-label { color: var(--muted); }
.dual-cta strong { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; font-size: clamp(2.3rem, 4.6vw, 5rem); font-weight: 570; line-height: .95; letter-spacing: -.055em; }
.dual-cta i { font-style: normal; transition: transform .25s var(--ease-out); }
.dual-cta a:hover i { transform: translate(.3rem, -.3rem); }
.dual-cta a:last-child:hover i { transform: translateX(.4rem); }

/* Footer */
.site-footer { padding-block: 4rem 1.5rem; background: var(--navy); color: var(--paper-bright); }
.footer-top { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gap); align-items: start; padding-bottom: 4rem; }
.footer-top > * { min-width: 0; }
.wordmark--footer { grid-column: 1 / 4; width: min(100%, 13.5rem); color: var(--paper-bright); }
.footer-top > p { grid-column: 5 / 8; max-width: 17rem; color: rgba(255,255,255,.5); font-size: .84rem; }
.footer-top nav { grid-column: 9 / 13; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .65rem 1.5rem; }
.footer-top nav a { color: rgba(255,255,255,.72); font-size: .78rem; text-decoration: none; }
.footer-top nav a:hover { color: var(--signal); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.58); }
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { color: var(--signal); }

/* Internal pages */
.page-hero { padding-block: clamp(5rem, 9vw, 8.5rem); border-bottom: 1px solid var(--rule-dark); }
.page-hero__meta { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: clamp(2.5rem, 5vw, 5rem); padding-bottom: 1rem; border-bottom: 1px solid var(--rule-dark); color: var(--muted); }
.page-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gap); align-items: end; }
.page-hero__grid h1 { grid-column: 1 / 9; max-width: 11ch; }
.page-hero__copy { grid-column: 9 / 13; }
.page-hero__copy p { margin-bottom: 1.5rem; color: var(--muted); font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); }
.content-section { padding-block: var(--section-space); border-bottom: 1px solid var(--rule-dark); }
.content-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gap); }
.content-grid__title { grid-column: 1 / 5; }
.content-grid__body { grid-column: 6 / 13; }
.content-grid__title .mono-label { color: var(--gold-text); }
.content-grid__title h2 { margin: 1.4rem 0 0; font-size: clamp(2rem, 3.8vw, 3.7rem); font-weight: 580; line-height: .98; letter-spacing: -.045em; }
.content-grid__body > p { max-width: 44rem; color: var(--muted); }
.ruled-list { margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--rule-dark); list-style: none; }
/* One column: the numbered gutter these lists used to reserve is gone, and
   with it the 3rem first column that a single-child <li> was being placed
   into -- which squeezed the whole row into 48px on the company and 404
   pages. Nothing here was ever numbered in the markup. */
.ruled-list li { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--rule-dark); }
.ruled-list h3 { margin: 0 0 .4rem; font-size: 1.2rem; }
.ruled-list p { margin-bottom: 0; color: var(--muted); font-size: .9rem; }
.page-dark { background: var(--paper-deep); color: var(--ink); }
.page-dark .content-grid__body > p, .page-dark .ruled-list p { color: var(--muted); }
.page-dark .ruled-list { border-color: var(--rule-dark); }
.page-dark .ruled-list li { border-color: var(--rule-dark); }
.page-dark .content-grid__title .mono-label { color: var(--gold-text); }

/* Forms */
.inquiry-layout { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gap); }
.inquiry-copy { grid-column: 1 / 5; }
.inquiry-form { grid-column: 6 / 11; }
.direct-details { grid-column: 11 / 13; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 1.25rem; }
.field label { display: block; margin-bottom: .45rem; font-family: var(--font-mono); font-size: .67rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 3.2rem;
  padding: .75rem .85rem;
  border: 1px solid var(--rule-dark);
  border-radius: 0;
  background: var(--paper-bright);
  color: var(--ink);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--signal); outline-offset: 1px; }
.field .hint, .form-note, .form-status { margin-top: .35rem; color: var(--muted); font-size: .75rem; }
.form-status[data-state="ok"] { color: var(--success); }
.form-status[data-state="error"] { color: var(--error); }
.hidden-honey { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.direct-details { border-top: 1px solid var(--rule-dark); }
.direct-details div { padding: 1rem 0; border-bottom: 1px solid var(--rule-dark); }
.direct-details dt { margin-bottom: .3rem; color: var(--muted); font-family: var(--font-mono); font-size: .63rem; letter-spacing: .08em; text-transform: uppercase; }
.direct-details dd { margin: 0; font-size: .8rem; }
.direct-details a { text-decoration: none; }

/* Legal + 404 */
.prose { max-width: 48rem; }
.prose h2 { margin: 3rem 0 1rem; font-size: 1.8rem; letter-spacing: -.025em; }
.prose h3 { margin: 2rem 0 .7rem; font-size: 1.2rem; }
.prose p, .prose li { color: var(--muted); }
.prose a { text-decoration-color: var(--signal); text-underline-offset: .18em; }
.error-code { color: var(--signal); font-family: var(--font-mono); }

@media (max-width: 1120px) {
  .desktop-nav { grid-column: 4 / 8; }
  .header-actions { grid-column: 8 / 13; }
  .hero-grid { align-items: start; }
  .hero-copy { grid-column: 1 / 7; }
  .system-map { grid-column: 7 / 13; min-height: 34rem; }
  .system-map__body { grid-template-columns: 7.9rem minmax(0,1fr); }
  .site-sample { height: 21rem; }
}

@media (max-width: 900px) {
  :root { --header-h: 4rem; }
  .desktop-nav, .header-actions { display: none; }
  .wordmark { grid-column: 1 / 7; }
  .menu-toggle {
    grid-column: 10 / 13;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 5.5rem;
    min-height: 2.75rem;
    padding: 0 .8rem;
    border: 1px solid var(--rule-dark);
    background: transparent;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: .67rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .menu-toggle__icon { display: grid; gap: .3rem; width: 1rem; }
  .menu-toggle__icon i { display: block; width: 100%; height: 1px; background: currentColor; transition: transform .2s ease; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon i:first-child { transform: translateY(.2rem) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon i:last-child { transform: translateY(-.2rem) rotate(-45deg); }
  .hero { min-height: auto; }
  .hero-copy { grid-column: 1 / 13; max-width: 50rem; margin-bottom: 3rem; }
  .system-map { grid-column: 1 / 13; min-height: 36rem; }
  .section-intro > div:first-child, .section-intro__aside { grid-column: 1 / 13; }
  .section-intro__aside { max-width: 39rem; margin-top: 1.5rem; }
  .local-proof__grid > .mono-label { grid-column: 1 / 4; }
  .local-proof h2 { grid-column: 4 / 13; }
  .local-proof .text-action { grid-column: 4 / 13; justify-self: start; margin-top: 1.5rem; }
  .founder-portrait { grid-column: 1 / 6; }
  .founder-copy { grid-column: 7 / 13; }
  .location-stamp { right: -1rem; }
  .page-hero__grid h1 { grid-column: 1 / 9; }
  .page-hero__copy { grid-column: 9 / 13; }
  .content-grid__title { grid-column: 1 / 5; }
  .content-grid__body { grid-column: 5 / 13; }
  .inquiry-copy { grid-column: 1 / 5; }
  .inquiry-form { grid-column: 5 / 10; }
  .direct-details { grid-column: 10 / 13; }
}

@media (max-width: 720px) {
  :root { --gutter: 1.25rem; --section-space: 5rem; }
  .hero { padding-block: 3rem 4rem; }
  .hero-kicker { align-items: flex-start; }
  .hero-copy h1 { font-size: clamp(3.25rem, 16vw, 5.3rem); }
  .system-map { min-height: 31rem; grid-template-rows: 3rem 1fr 3.5rem; }
  .system-map__body { display: flex; flex-direction: column; }
  .system-map__body, .system-map__rail, .system-map__viewport { width: 100%; max-width: 100%; min-width: 0; }
  .system-map__rail { grid-template-columns: repeat(5, minmax(7rem,1fr)); grid-template-rows: none; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.13); scrollbar-width: thin; }
  .system-map__rail button { min-height: 3.6rem; border-right: 1px solid rgba(255,255,255,.1); border-bottom: 0; }
  .system-map__viewport { min-height: 22rem; padding: 4.7rem 1rem 1rem; }
  .route-line { top: .65rem; }
  .site-sample, .intake-sample, .record-sample, .follow-sample, .close-sample { height: 17rem; min-height: 17rem; }
  .site-sample__caption { align-items: flex-end; }
  .record-sample h3, .follow-sample h3, .close-sample h3 { margin: 1rem 0; font-size: 1.55rem; }
  .intake-sample dl { margin-block: .8rem; }
  .intake-sample dl div { padding: .45rem 0; }
  .system-map__foot { align-items: flex-start; padding-block: .55rem; }
  .crm-schematic__body { grid-template-columns: 1fr; }
  .crm-mock-sidebar { padding: .75rem; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .crm-mock-sidebar img, .crm-mock-sidebar__label { display: none; }
  .crm-tabs { grid-template-columns: repeat(5, minmax(7.5rem, 1fr)); gap: 0; overflow-x: auto; }
  .crm-tabs span { border-left: 0; border-bottom: 3px solid transparent; }
  .crm-tabs span.is-current { border-left-color: transparent; border-bottom-color: var(--teal); }
  .pipeline-workspace__meta { align-items: flex-start; flex-direction: column; }
  .crm-schematic__foot { grid-template-columns: 1fr; }
  .crm-schematic__foot span { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .crm-schematic__foot span:last-child { border-bottom: 0; }
  .crm-capabilities { grid-template-columns: 1fr; }
  .crm-capabilities article, .crm-capabilities article:not(:first-child) { padding: 1.25rem 0; border-right: 0; border-bottom: 1px solid var(--rule-dark); }
  .crm-capabilities article:last-child { border-bottom: 0; }
  .crm-capabilities--slotted article,
  .crm-capabilities--slotted article:not(:first-child) { padding: 1.25rem; border-bottom: 0; }
  .section-intro--wide h2 { font-size: clamp(3.5rem, 15vw, 4.8rem); }
  .crm-steps { grid-template-columns: 1fr; }
  .crm-steps li, .crm-steps li:first-child { min-height: 12rem; padding: 1.5rem 0; border-right: 0; border-bottom: 1px solid var(--rule-dark); }
  .crm-steps li:last-child { border-bottom: 0; }
  .crm-step__number { font-size: 3.5rem; }
  .crm-steps h3 { max-width: 12ch; margin-top: 2.5rem; font-size: clamp(2.25rem, 10vw, 3rem); }
  .local-proof__grid > .mono-label, .local-proof h2, .local-proof .text-action { grid-column: 1 / 13; }
  .local-proof h2 { margin-top: 2rem; }
  .local-proof .text-action { margin-top: 2rem; }
  .founder-portrait, .founder-copy { grid-column: 1 / 13; }
  .founder-portrait { margin-bottom: 3rem; }
  .location-stamp { right: 0; bottom: -1rem; }
  .dual-cta { min-height: 36rem; grid-template-columns: 1fr; }
  .dual-cta > a:first-child { border-right: 0; border-bottom: 1px solid var(--ink); }
  .footer-top {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 2.5rem;
  }
  .wordmark--footer, .footer-top > p, .footer-top nav { grid-column: 1; }
  .footer-top nav { grid-template-columns: 1fr 1fr; }
  .page-hero__meta { flex-direction: column; }
  .page-hero__grid h1, .page-hero__copy, .content-grid__title, .content-grid__body, .inquiry-copy, .inquiry-form, .direct-details { grid-column: 1 / 13; }
  .page-hero__copy, .content-grid__body, .inquiry-form, .direct-details { margin-top: 2rem; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 460px) {
  .hero-kicker span:last-child { display: none; }
  .action-row { align-items: stretch; flex-direction: column; }
  .action { width: 100%; }
  .text-action { width: max-content; }
  .section-intro h2, .founder-copy h2, .page-hero h1, .local-proof h2 { font-size: clamp(2.7rem, 14vw, 4rem); }
  .system-map__bar span:first-child, .crm-schematic__bar span:last-child { max-width: 15rem; }
  .system-map__bar, .crm-schematic__bar { align-items: flex-start; padding-block: .65rem; }
  .system-map { grid-template-rows: auto 1fr auto; }
  .record-grid { grid-template-columns: 1fr; }
  .record-grid div { padding: .45rem 0; }
  .facts-list div { grid-template-columns: 7rem 1fr; }
  .footer-bottom { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Conversion homepage */
.conversion-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(5rem, 8vw, 8rem);
  border-bottom: 1px solid var(--rule-dark);
  background:
    radial-gradient(circle at 88% 18%, var(--gold-soft), transparent 26rem),
    linear-gradient(180deg, var(--paper-bright), var(--paper));
}
.conversion-hero::after {
  content: "";
  position: absolute;
  right: -9rem;
  bottom: -12rem;
  width: 26rem;
  height: 26rem;
  border: 1px solid var(--gold-line);
  transform: rotate(45deg);
  pointer-events: none;
}
.conversion-hero__meta { display: flex; justify-content: space-between; gap: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule-dark); color: var(--muted); }
.conversion-hero__meta span:first-child, .conversion-hero__eyebrow { color: var(--gold-text); }
/* Both columns are pulled up towards the meta rule: at desktop widths
   the old clamp left the best part of a header's worth of empty paper
   between the rule and the headline, and the demo sat that far down
   with it. The grid centres its two columns against each other, so the
   one value moves the copy and the demo stage together. */
.conversion-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: var(--gap); align-items: center; padding-top: clamp(1.5rem, 3.4vw, 3.25rem); }
.conversion-hero__copy { grid-column: 1 / 6; }
.conversion-hero__copy h1 { max-width: 8ch; margin: .8rem 0 1.8rem; font-size: clamp(4rem, 7.8vw, 7.6rem); font-weight: 590; line-height: .86; letter-spacing: -.068em; }
.conversion-hero__lede { max-width: 35rem; margin: 0; color: var(--muted); font-size: clamp(1.12rem, 1rem + .5vw, 1.5rem); line-height: 1.4; }
.conversion-checks { display: flex; flex-wrap: wrap; gap: .65rem 1.3rem; margin: 2rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--rule-dark); color: var(--muted); font-family: var(--font-mono); font-size: .65rem; letter-spacing: .045em; list-style: none; text-transform: uppercase; }
.conversion-checks li::before { content: "✓"; margin-right: .45rem; color: var(--teal-text); font-weight: 700; }

.hero-crm {
  --demo-bg: #f7f5ef;
  --demo-surface: #fff;
  --demo-sunken: #f1eee7;
  --demo-text: #0b0d0f;
  --demo-muted: #5b6260;
  --demo-border: rgba(11,13,15,.13);
  --demo-border-strong: rgba(11,13,15,.46);
  --demo-navy: #08121c;
  --demo-navy-raised: #0d1b29;
  --demo-gold: #bf954e;
  --demo-gold-text: #78581e;
  --demo-teal: #17bfa9;
  --demo-teal-text: #08766a;
  position: relative;
  isolation: isolate;
  min-width: 0;
  height: 39rem;
  display: grid;
  grid-template-columns: 10rem minmax(0,1fr);
  overflow: hidden;
  border: 1px solid var(--demo-border-strong);
  border-radius: .75rem;
  background: var(--demo-bg);
  box-shadow: 1.4rem 1.4rem 0 var(--gold-soft), 0 1.5rem 4rem rgba(8,18,28,.12);
  color: var(--demo-text);
  font-family: var(--font-sans);
  font-size: .75rem;
  line-height: 1.45;
  transform-origin: center;
  transition: transform .36s var(--ease-out), box-shadow .36s var(--ease-out);
  will-change: transform;
}
/* ---- Live-demo stage: the cue that points at the demo -------------
   The heading slides in from the left, the arrow drops in under it a
   beat later, and the demo itself pulses once when its build finishes.
   All three are entrance-only, and all three are off under reduced
   motion -- the demo has to read as live without anything looping. */
.hero-demo-stage { grid-column: 6 / 13; min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
.demo-cue { display: flex; flex-direction: column; align-items: center; gap: .1rem; margin-bottom: .55rem; }
.demo-cue__text { margin: 0; color: var(--gold-text); font-family: var(--font-mono); font-size: clamp(.82rem, .55rem + .55vw, 1.05rem); font-weight: 600; letter-spacing: .04em; }
.demo-cue__arrow { width: .95rem; height: 1.85rem; fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
html.assembly-ready [data-assemble] .demo-cue__text { opacity: 0; transform: translate3d(-2.2rem,0,0); transition: opacity .5s var(--ease-out) .25s, transform .5s var(--ease-out) .25s; }
html.assembly-ready [data-assemble] .demo-cue__arrow { opacity: 0; transform: translate3d(0,-1.1rem,0); transition: opacity .42s var(--ease-out) .72s, transform .42s var(--ease-out) .72s; }
html.assembly-ready [data-assemble].is-assembled .demo-cue__text,
html.assembly-ready [data-assemble].is-assembled .demo-cue__arrow { opacity: 1; transform: none; }
/* One pulse, once, when the demo has finished assembling itself. */
.hero-crm.is-demo-settled { animation: demo-settle-pulse 720ms var(--ease-out) 1; }
@keyframes demo-settle-pulse {
  0%, 100% { transform: none; }
  42% { transform: scale(1.014); }
}
.hero-crm button, .hero-crm input, .hero-crm select { font: inherit; }
.hero-crm button { -webkit-tap-highlight-color: transparent; }
.hero-crm__sidebar {
  position: relative;
  z-index: 5;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: .9rem .7rem .75rem;
  border-right: 1px solid rgba(255,255,255,.1);
  background: var(--demo-navy);
  color: #fff;
}
.hero-crm__brand > div { padding: .48rem .55rem; border-top: 3px solid var(--demo-gold); background: #fff; }
.hero-crm__brand img { width: 100%; height: auto; }
.hero-crm__brand > span { display: block; margin: .65rem .55rem 0; color: rgba(255,255,255,.66); font-family: var(--font-mono); font-size: .54rem; letter-spacing: .12em; text-transform: uppercase; }
.hero-crm__brand > button { display: none; }
.hero-crm__nav-label { margin: 1.15rem .55rem .35rem; color: rgba(255,255,255,.62); font-family: var(--font-mono); font-size: .52rem; letter-spacing: .1em; text-transform: uppercase; }
.hero-crm__nav { display: grid; gap: .15rem; }
/* Flex, not a reserved ordinal column: the app removed the leading number
   from every nav that used to carry one, and the demo follows it. */
.hero-crm__nav button {
  position: relative;
  min-width: 0;
  min-height: 2.55rem;
  display: flex;
  gap: .6rem;
  align-items: center;
  padding: .5rem .7rem;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0 .35rem .35rem 0;
  background: transparent;
  color: rgba(255,255,255,.62);
  font-size: .62rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.hero-crm__nav button:hover { background: rgba(255,255,255,.06); color: #fff; }
.hero-crm__nav button[aria-selected="true"] { border-left-color: var(--demo-teal); background: rgba(23,191,169,.14); color: #fff; }
.hero-crm__nav button:focus-visible { outline: 2px solid var(--demo-teal); outline-offset: -2px; }
.hero-crm__sidebar-note { margin: auto .35rem 0; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.11); }
.hero-crm__sidebar-note > span { display: block; color: rgba(255,255,255,.4); font-family: var(--font-mono); font-size: .46rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.hero-crm__sidebar-note > strong { display: block; margin: .2rem 0 .4rem; overflow: hidden; color: #fff; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.hero-crm__sidebar-note > em { display: block; color: rgba(255,255,255,.5); font-family: var(--font-mono); font-size: .44rem; font-style: normal; letter-spacing: .07em; line-height: 1.6; text-transform: uppercase; }
.hero-crm__workspace { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--demo-bg); }
.hero-crm.is-demo-building .hero-crm__brand,
.hero-crm.is-demo-building .hero-crm__nav-label,
.hero-crm.is-demo-building .hero-crm__nav,
.hero-crm.is-demo-building .hero-crm__sidebar-note,
.hero-crm.is-demo-building .hero-crm__topbar,
.hero-crm.is-demo-building [data-crm-demo-panel="overview"] .hero-crm__view-head,
.hero-crm.is-demo-building [data-crm-demo-panel="overview"] .hero-crm__stat,
.hero-crm.is-demo-building [data-crm-demo-panel="overview"] .hero-crm__report-card,
.hero-crm.is-demo-building [data-crm-demo-panel="overview"] .hero-crm__report-grid { opacity: 0; }
.hero-crm__topbar {
  min-height: 4.2rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem 1.15rem;
  border-bottom: 1px solid var(--demo-border);
  background: rgba(255,255,255,.94);
  box-shadow: 0 .25rem 1.2rem rgba(8,18,28,.035);
  backdrop-filter: blur(10px);
}
.hero-crm__identity { min-width: 0; }
.hero-crm__identity strong, .hero-crm__identity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-crm__identity span { color: var(--demo-gold-text); font-family: var(--font-mono); font-size: .52rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.hero-crm__identity strong { margin-top: .05rem; color: var(--demo-text); font-size: .8rem; letter-spacing: -.01em; }
.hero-crm__status { display: flex; align-items: center; gap: .4rem; margin: 0 0 0 auto; color: var(--demo-muted); font-family: var(--font-mono); font-size: .47rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.hero-crm__status i { width: .3rem; height: .3rem; border-radius: 50%; background: var(--demo-teal); }
.hero-crm__menu { display: none; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; padding: .55rem; border: 1px solid var(--demo-border-strong); border-radius: .4rem; background: var(--demo-surface); cursor: pointer; }
.hero-crm__menu span { display: block; width: 1rem; height: 1px; background: var(--demo-navy); }
.hero-crm__main { min-width: 0; min-height: 0; flex: 1; overflow-x: hidden; overflow-y: auto; padding: 1.2rem 1.15rem 2.45rem; scrollbar-color: rgba(8,18,28,.3) transparent; scrollbar-width: thin; }
.hero-crm__view { min-width: 0; }
.hero-crm__view:focus-visible { outline: 2px solid var(--demo-teal-text); outline-offset: .25rem; }
.hero-crm.is-interactive .hero-crm__view:not([hidden]) { animation: hero-crm-view-in 220ms cubic-bezier(.22,1,.36,1); }
.hero-crm.is-demo-building.is-interactive .hero-crm__view:not([hidden]),
.hero-crm.is-interactive .hero-crm__view.is-demo-intro-overview:not([hidden]) { animation: none; }
@keyframes hero-crm-view-in { from { opacity: 0; transform: translateY(.35rem); } to { opacity: 1; transform: none; } }
.hero-crm__view-head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--demo-border); }
.hero-crm__view-head::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 4rem; height: 3px; background: var(--demo-gold); }
/* Overview stacks a second head under the report card, the way the app
   stacks Reports and Collections in one panel. */
.hero-crm__view-head--stacked { margin-top: 1.5rem; }
.hero-crm__view-head > div { min-width: 0; }
.hero-crm__view-head p, .hero-crm__drawer-head p { margin: 0 0 .18rem; color: var(--demo-gold-text); font-family: var(--font-mono); font-size: .51rem; letter-spacing: .09em; text-transform: uppercase; }
.hero-crm__view-head h2, .hero-crm__drawer-head h2 { margin: 0; color: var(--demo-navy); font-size: 1.28rem; font-weight: 680; letter-spacing: -.025em; line-height: 1.12; }
.hero-crm__view-head > div > span { display: block; max-width: 36rem; margin-top: .28rem; color: var(--demo-muted); font-size: .59rem; }
.hero-crm__button { min-height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; padding: .48rem .72rem; border: 1px solid var(--demo-border-strong); border-radius: .4rem; background: var(--demo-surface); color: var(--demo-navy); font-size: .59rem; font-weight: 650; white-space: nowrap; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease; }
.hero-crm__button:hover { border-color: var(--demo-teal-text); background: rgba(23,191,169,.06); }
.hero-crm__button:focus-visible, .hero-crm__menu:focus-visible { outline: 2px solid var(--demo-teal-text); outline-offset: 2px; }
.hero-crm__button:active { transform: translateY(1px); }
.hero-crm__button--primary { border-color: var(--demo-navy); background: var(--demo-navy); box-shadow: inset 3px 0 0 var(--demo-gold); color: #fff; }
.hero-crm__button--primary:hover { border-color: var(--demo-navy); background: var(--demo-navy-raised); color: #fff; }
.hero-crm__button--small { min-height: 1.7rem; padding: .3rem .5rem; font-family: var(--font-mono); font-size: .49rem; }
.hero-crm__stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .45rem; margin: 0; padding: .45rem; border-radius: .75rem; background: var(--demo-sunken); box-shadow: inset 0 1px 3px rgba(11,13,15,.07); }
.hero-crm__stat { position: relative; z-index: 0; min-width: 0; min-height: 5.35rem; overflow: hidden; padding: .8rem; border: 1px solid var(--demo-border); border-radius: .55rem; background: var(--demo-surface); box-shadow: 0 .3rem .9rem rgba(8,18,28,.035); transform-origin: center; transition: transform .34s var(--ease-out), box-shadow .34s var(--ease-out); }
.hero-crm__stat::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--demo-gold); }
.hero-crm__stat dt { margin-top: .1rem; color: var(--demo-muted); font-family: var(--font-mono); font-size: .52rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.hero-crm__stat dd { margin: .42rem 0 0; color: var(--demo-navy); font-size: 1.25rem; font-weight: 750; letter-spacing: -.04em; line-height: 1; }
.hero-crm__stat dd small { display: block; margin-top: .38rem; color: var(--demo-muted); font-family: var(--font-sans); font-size: .49rem; font-weight: 500; letter-spacing: 0; }
.hero-crm__stat--hero { grid-column: span 2; background: var(--demo-navy); }
.hero-crm__stat--hero::before { background: var(--demo-gold); }
.hero-crm__stat--hero dt { color: rgba(255,255,255,.66); }
.hero-crm__stat--hero dd { color: #fff; font-size: 1.55rem; }
.hero-crm__stat--hero dd small { color: rgba(255,255,255,.68); font-family: var(--font-mono); }
.hero-crm__report-card, .hero-crm__activity-card { margin-top: .7rem; overflow: hidden; border: 1px solid var(--demo-border); border-radius: .7rem; background: var(--demo-surface); box-shadow: 0 .3rem .9rem rgba(8,18,28,.035); }
.hero-crm__sortbar { min-height: 2.7rem; display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .75rem; padding: .6rem .7rem .25rem; color: var(--demo-muted); font-family: var(--font-mono); font-size: .49rem; letter-spacing: .04em; }
.hero-crm__sortbar label { display: flex; align-items: center; gap: .45rem; }
.hero-crm__sortbar select { min-height: 1.85rem; padding: .25rem 1.5rem .25rem .45rem; border: 1px solid var(--demo-border-strong); border-radius: .35rem; background: var(--demo-sunken); color: var(--demo-text); font-family: var(--font-mono); font-size: .49rem; }
.hero-crm__sortbar select:focus-visible { outline-color: var(--demo-teal-text); }
.hero-crm__report-grid { display: grid; grid-template-columns: minmax(8.5rem,.8fr) 1.2fr; align-items: start; gap: 1.1rem; padding: .8rem 1rem; }
.hero-crm__report-side { min-width: 0; }
.hero-crm__report-label { margin: .9rem 0 .45rem; color: var(--demo-gold-text); font-family: var(--font-mono); font-size: .47rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
/* Stage-by-stage pipeline bars, as the app draws them under the legend. */
.hero-crm__funnel { display: grid; gap: .32rem; }
.hero-crm__funnel-row { display: grid; grid-template-columns: 4.2rem minmax(0,1fr) 2.6rem; gap: .45rem; align-items: center; font-size: .5rem; }
.hero-crm__funnel-name { overflow: hidden; color: var(--demo-muted); text-overflow: ellipsis; white-space: nowrap; }
.hero-crm__funnel-track { height: .34rem; overflow: hidden; border-radius: 99px; background: var(--demo-sunken); }
.hero-crm__funnel-track i { display: block; height: 100%; border-radius: 99px; background: var(--demo-teal); }
.hero-crm__funnel-val { color: var(--demo-navy); font-family: var(--font-mono); font-size: .47rem; font-weight: 600; text-align: right; }
.hero-crm__pie-wrap { display: flex; justify-content: center; }
.hero-crm__pie { width: 7.3rem; height: auto; overflow: visible; filter: drop-shadow(0 .25rem .45rem rgba(8,18,28,.08)); }
.hero-crm__pie path { stroke: #fff; stroke-width: 1.5; transition: opacity 160ms ease; }
.hero-crm__pie path:hover { opacity: .82; }
.hero-crm__pie path.is-gold { fill: var(--demo-gold); }
.hero-crm__pie path.is-teal { fill: var(--demo-teal); }
.hero-crm__pie path.is-navy { fill: var(--demo-navy); }
.hero-crm__legend { margin: 0; padding: 0; list-style: none; }
.hero-crm__legend li { display: grid; grid-template-columns: .55rem minmax(0,1fr) auto auto; align-items: center; gap: .5rem; padding: .46rem 0; border-bottom: 1px solid var(--demo-border); font-size: .57rem; }
.hero-crm__legend li:last-child { border-bottom: 0; }
.hero-crm__legend i { width: .48rem; height: .48rem; border-radius: .13rem; }
.hero-crm__legend i.is-gold { background: var(--demo-gold); }
.hero-crm__legend i.is-teal { background: var(--demo-teal); }
.hero-crm__legend i.is-navy { background: var(--demo-navy); }
.hero-crm__legend em, .hero-crm__legend b { font-family: var(--font-mono); font-size: .5rem; font-style: normal; font-weight: 600; }
.hero-crm__legend em { color: var(--demo-navy); }
.hero-crm__legend b { color: var(--demo-muted); }
.hero-crm__table-wrap { max-width: 100%; overflow: auto; border: 1px solid var(--demo-border); border-radius: .65rem; background: var(--demo-surface); scrollbar-color: rgba(8,18,28,.3) transparent; scrollbar-width: thin; }
.hero-crm__table-wrap:focus-visible, .hero-crm__board:focus-visible { outline: 2px solid var(--demo-teal-text); outline-offset: .2rem; }
.hero-crm table { width: 100%; min-width: 64rem; border-collapse: collapse; font-size: .57rem; }
.hero-crm th, .hero-crm td { padding: .7rem .65rem; border-right: 1px solid var(--demo-border); border-bottom: 1px solid var(--demo-border); text-align: left; white-space: nowrap; }
.hero-crm th:last-child, .hero-crm td:last-child { border-right: 0; }
.hero-crm tbody tr:last-child td { border-bottom: 0; }
.hero-crm th { position: sticky; z-index: 1; top: 0; background: var(--demo-sunken); color: var(--demo-muted); font-family: var(--font-mono); font-size: .47rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hero-crm tbody tr { transition: background 160ms ease; }
.hero-crm tbody tr:hover { background: rgba(23,191,169,.055); }
.hero-crm td.is-num { color: var(--demo-navy); font-family: var(--font-mono); font-weight: 600; text-align: right; }
.hero-crm__pill { display: inline-flex; align-items: center; min-height: 1.5rem; padding: .2rem .45rem; border: 1px solid rgba(23,191,169,.38); border-radius: .2rem; background: rgba(23,191,169,.09); color: var(--demo-teal-text); font-family: var(--font-mono); font-size: .45rem; font-weight: 600; letter-spacing: .035em; text-transform: uppercase; }
.hero-crm__pill--off { border-color: rgba(163,58,48,.42); background: rgba(163,58,48,.12); color: #8f2f27; }
.hero-crm__access-button { margin-left: .35rem; }
.hero-crm__pill--lead { border-color: rgba(23,191,169,.38); background: rgba(23,191,169,.09); color: var(--demo-teal-text); }
.hero-crm__pill--client { border-color: rgba(191,149,78,.45); background: rgba(191,149,78,.14); color: var(--demo-gold-text); }
.hero-crm__pill--paid { border-color: rgba(47,125,85,.35); background: rgba(47,125,85,.13); color: #2f7d55; }
.hero-crm__pill--partial { border-color: rgba(138,93,0,.35); background: rgba(138,93,0,.13); color: #8a5d00; }
.hero-crm__pill--unpaid { border-color: rgba(163,58,48,.35); background: rgba(163,58,48,.13); color: #a33a30; }
.hero-crm__who { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
/* The wide tables keep the app's 64rem floor and scroll, the way they do
   in the app. Contacts and Payments carry the columns that fit instead:
   their pills are the point of the view, and a pill parked off the right
   edge of a demo is a pill nobody sees. */
.hero-crm__table-wrap--fit table { min-width: 0; }
.hero-crm__table-wrap--fit td, .hero-crm__table-wrap--fit th { padding: .6rem .5rem; }
/* The Stripe connection card the Payments tab leads with: nothing below
   it means anything until a processor is attached. */
.hero-crm__conn { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; padding: .7rem .8rem; border: 1px solid var(--demo-border); border-radius: .7rem; background: var(--demo-surface); box-shadow: 0 .3rem .9rem rgba(8,18,28,.035); }
.hero-crm__conn > div { min-width: 0; }
.hero-crm__conn strong { display: block; color: var(--demo-navy); font-size: .66rem; }
.hero-crm__conn span { display: block; color: var(--demo-muted); font-size: .5rem; }
.hero-crm__conn > b { margin-left: auto; color: var(--demo-gold-text); font-family: var(--font-mono); font-size: .53rem; font-weight: 600; white-space: nowrap; }
.hero-crm__board { min-height: 27rem; display: grid; grid-auto-flow: column; grid-auto-columns: 12.5rem; gap: .65rem; overflow-x: auto; padding: 0 0 .65rem; scroll-snap-type: x proximity; scrollbar-color: rgba(8,18,28,.3) transparent; scrollbar-width: thin; }
.hero-crm__column { min-height: 24.5rem; padding: .6rem; border: 1px solid var(--demo-border); border-radius: .65rem; background: var(--demo-sunken); scroll-snap-align: start; transition: border-color 160ms ease, background 160ms ease; }
.hero-crm__column.is-over { border-color: var(--demo-teal-text); background: rgba(23,191,169,.08); box-shadow: inset 0 0 0 2px rgba(191,149,78,.55); }
.hero-crm__column-head { min-height: 2.5rem; display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: 0 .15rem .55rem; border-bottom: 1px solid var(--demo-border); }
.hero-crm__column-head strong { color: var(--demo-navy); font-size: .62rem; }
.hero-crm__column-head .hero-crm__column-meta { min-width: 0; display: flex; align-items: baseline; justify-content: flex-end; gap: .3rem; color: var(--demo-muted); font-family: var(--font-mono); font-size: .43rem; font-variant-numeric: tabular-nums; }
.hero-crm__column-meta [data-crm-demo-count] { color: var(--demo-muted); }
.hero-crm__column-meta [data-crm-demo-value] { color: var(--demo-gold-text); font-weight: 600; }
.hero-crm__deals { min-height: 20.5rem; padding-top: .55rem; }
.hero-crm__deal { position: relative; margin-bottom: .48rem; padding: .68rem; border: 1px solid var(--demo-border); border-left: 3px solid var(--demo-gold); border-radius: .45rem; background: var(--demo-surface); box-shadow: 0 .18rem .5rem rgba(8,18,28,.045); cursor: grab; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, opacity 160ms ease; }
.hero-crm__deal:hover, .hero-crm__deal:focus-visible { border-color: var(--demo-teal-text); box-shadow: 0 .3rem .8rem rgba(8,18,28,.09); transform: translateY(-1px); }
.hero-crm__deal:focus-visible { outline: 2px solid var(--demo-teal-text); outline-offset: 1px; }
.hero-crm__deal.is-dragging { opacity: .46; cursor: grabbing; transform: rotate(1deg) scale(.98); }
.hero-crm__deal-head { display: flex; align-items: center; gap: .45rem; }
.hero-crm__avatar { width: 1.55rem; height: 1.55rem; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(191,149,78,.45); border-radius: 50%; background: rgba(191,149,78,.12); color: var(--demo-gold-text); font-family: var(--font-mono); font-size: .43rem; font-weight: 600; }
.hero-crm__avatar[data-kind="client"] { border-color: rgba(191,149,78,.45); background: rgba(191,149,78,.2); }
.hero-crm__avatar[data-kind="lead"] { border-color: rgba(23,191,169,.4); background: rgba(23,191,169,.16); }
.hero-crm__deal-name { min-width: 0; }
.hero-crm__deal-name strong, .hero-crm__deal-name span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-crm__deal-name strong { color: var(--demo-navy); font-size: .61rem; }
.hero-crm__deal-name span { margin-top: .08rem; color: var(--demo-muted); font-size: .51rem; }
.hero-crm__deal-services { margin: .48rem 0 0; color: var(--demo-navy); font-size: .49rem; line-height: 1.4; }
.hero-crm__deal-contact { display: grid; gap: .08rem; margin: .42rem 0 0; color: var(--demo-muted); font-size: .46rem; line-height: 1.35; }
.hero-crm__deal-contact span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-crm__deal-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .52rem; color: var(--demo-muted); font-family: var(--font-mono); font-size: .45rem; font-variant-numeric: tabular-nums; }
.hero-crm__deal-meta b { color: var(--demo-gold-text); font-weight: 600; }
.hero-crm__deal-meta .is-stale { color: #8f2f27; font-weight: 600; }
.hero-crm__deal-move { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: .35rem; margin-top: .55rem; padding-top: .5rem; border-top: 1px solid var(--demo-border); color: var(--demo-muted); font-family: var(--font-mono); font-size: .43rem; text-transform: uppercase; cursor: default; }
.hero-crm__deal-move > span { display: block; }
.hero-crm__deal-move select { min-width: 0; min-height: 1.6rem; padding: .15rem .3rem; border: 1px solid var(--demo-border-strong); border-radius: .28rem; background: var(--demo-sunken); color: var(--demo-text); font-family: var(--font-sans); font-size: .49rem; text-transform: none; cursor: pointer; }
.hero-crm__deal-move select:focus-visible { outline: 2px solid var(--demo-teal-text); outline-offset: 1px; }
.hero-crm__deal-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: .35rem; margin-top: .55rem; padding-top: .5rem; border-top: 1px solid var(--demo-border); }
.hero-crm__deal-actions .hero-crm__deal-move { margin: 0; padding: 0; border: 0; }
.hero-crm__deal-edit { min-height: 1.6rem; padding: .2rem .42rem; }
.hero-crm__dropzone { min-height: 4rem; display: grid; place-items: center; margin: 0; padding: .7rem; border: 1px dashed var(--demo-border-strong); border-radius: .4rem; color: var(--demo-muted); font-size: .51rem; text-align: center; }
.hero-crm__feed { margin: 0; padding: 0; list-style: none; }
.hero-crm__feed li { position: relative; display: grid; grid-template-columns: 7rem minmax(0,1fr); gap: .9rem; padding: .85rem 1rem .85rem 1.65rem; border-bottom: 1px solid var(--demo-border); }
.hero-crm__feed li:last-child { border-bottom: 0; }
.hero-crm__feed li::before { content: ""; position: absolute; top: 1.12rem; left: .78rem; width: .3rem; height: .3rem; border-radius: 50%; background: var(--demo-teal); }
.hero-crm__feed time { color: var(--demo-muted); font-family: var(--font-mono); font-size: .48rem; }
.hero-crm__feed p { margin: 0; color: var(--demo-muted); font-size: .58rem; }
.hero-crm__feed strong, .hero-crm__feed b { color: var(--demo-navy); }
.hero-crm__feed p span { display: inline-flex; margin-left: .35rem; padding: .12rem .35rem; border-radius: 999px; background: var(--demo-sunken); color: var(--demo-gold-text); font-family: var(--font-mono); font-size: .43rem; text-transform: uppercase; }
.hero-crm__drawer-backdrop, .hero-crm__menu-backdrop { position: absolute; inset: 0; z-index: 7; border: 0; background: rgba(8,18,28,.48); opacity: 0; cursor: default; transition: opacity 180ms ease; }
.hero-crm__drawer-backdrop.is-open, .hero-crm__menu-backdrop.is-open { opacity: 1; }
.hero-crm__drawer { position: absolute; z-index: 8; top: 0; right: 0; bottom: 0; width: min(22rem,82%); overflow: auto; padding: 1.2rem; border-left: 1px solid var(--demo-border-strong); background: var(--demo-surface); box-shadow: -1rem 0 2.5rem rgba(8,18,28,.16); transform: translateX(100%); transition: transform 200ms cubic-bezier(.22,1,.36,1); }
.hero-crm__drawer.is-open { transform: none; }
.hero-crm__drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--demo-border); }
.hero-crm__drawer-head > button { width: 2rem; height: 2rem; display: grid; place-items: center; padding: 0; border: 1px solid var(--demo-border); border-radius: .35rem; background: var(--demo-surface); color: var(--demo-muted); font-size: 1.2rem; cursor: pointer; }
.hero-crm__drawer [data-crm-demo-lead-form] { display: grid; gap: .8rem; padding-top: 1rem; }
.hero-crm__drawer label { display: grid; gap: .28rem; color: var(--demo-navy); font-size: .57rem; font-weight: 650; }
.hero-crm__drawer input, .hero-crm__drawer select { width: 100%; min-height: 2.45rem; padding: .55rem .65rem; border: 1px solid rgba(11,13,15,.46); border-radius: .4rem; background: var(--demo-bg); color: var(--demo-text); font-size: .62rem; }
.hero-crm__drawer input:focus, .hero-crm__drawer select:focus { border-color: var(--demo-teal-text); outline: 2px solid var(--demo-teal-text); outline-offset: 1px; }
.hero-crm__drawer [data-crm-demo-lead-form] > p { margin: .15rem 0; padding: .65rem; border: 1px solid rgba(191,149,78,.28); border-radius: .4rem; background: rgba(191,149,78,.08); color: var(--demo-muted); font-size: .52rem; }
.hero-crm__drawer [data-crm-demo-lead-form] > div { display: flex; justify-content: flex-end; gap: .5rem; }
.hero-crm__toast { position: absolute; z-index: 12; right: 1rem; bottom: 2rem; max-width: min(22rem,calc(100% - 2rem)); padding: .65rem .8rem; border: 1px solid rgba(255,255,255,.13); border-left: 3px solid var(--demo-teal); border-radius: .4rem; background: var(--demo-navy); box-shadow: 0 .6rem 1.8rem rgba(8,18,28,.22); color: #fff; font-size: .56rem; opacity: 1; transform: none; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; }
.hero-crm__toast:empty { opacity: 0; transform: translateY(.35rem); }
@keyframes hero-crm-toast-in { from { opacity: 0; transform: translateY(.35rem); } to { opacity: 1; transform: none; } }
.hero-crm__caption { display: none; position: absolute; z-index: 4; right: .8rem; bottom: .55rem; margin: 0; padding: .2rem .35rem; border-radius: .2rem; background: rgba(247,245,239,.9); color: var(--demo-muted); font-family: var(--font-mono); font-size: .46rem; letter-spacing: .07em; text-transform: uppercase; pointer-events: none; }

.proof-strip { padding-block: 1.4rem; border-bottom: 1px solid var(--rule-dark); background: var(--paper-deep); }
.proof-strip__inner { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: var(--gap); align-items: center; }
.proof-strip p { margin: 0; color: var(--gold-text); }
.proof-strip strong { font-size: clamp(1.05rem,1rem + .45vw,1.4rem); text-align: center; }
.proof-strip span { color: var(--muted); font-size: .75rem; font-weight: 600; text-align: right; }

.outcome-section, .flow-section, .faq-section { padding-block: var(--section-space); border-bottom: 1px solid var(--rule-dark); }
.outcome-section { background: var(--paper-deep); }
.outcome-section .section-intro .mono-label, .flow-section .section-intro .mono-label, .faq-grid > div .mono-label { color: var(--gold-text); }
.outcome-grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: clamp(3rem,6vw,5rem); border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark); }
.outcome-grid article { position: relative; padding: 2rem clamp(1rem,2.5vw,2.5rem) 2.2rem 0; border-right: 1px solid var(--rule-dark); }
.outcome-grid article:not(:first-child) { padding-left: clamp(1rem,2.5vw,2.5rem); }
.outcome-grid article:last-child { border-right: 0; }
.outcome-grid__number { color: var(--teal-text); font-family: var(--font-mono); font-size: .68rem; }
.outcome-grid h3 { margin: 3.5rem 0 1rem; font-size: clamp(1.6rem,2.5vw,2.5rem); font-weight: 580; line-height: 1; letter-spacing: -.045em; }
.outcome-grid p { margin: 0; color: var(--muted); font-size: .9rem; }

.flow-section { background: var(--paper-bright); }
.signup-flow { display: grid; grid-template-columns: repeat(3,1fr); margin-top: clamp(3rem,6vw,5rem); padding: 0; border: 1px solid var(--navy); list-style: none; }
.signup-flow li { min-height: 20rem; padding: clamp(1.5rem,3vw,3rem); border-right: 1px solid var(--navy); }
.signup-flow li:last-child { border-right: 0; }
.signup-flow .mono-label { color: var(--teal-text); }
.signup-flow strong { display: block; margin: 5rem 0 1.2rem; font-size: clamp(1.45rem,2.4vw,2.35rem); line-height: 1.03; letter-spacing: -.04em; }
.signup-flow p { margin: 0; color: var(--muted); font-size: .88rem; }
.flow-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 2rem; padding: 1.4rem 1.5rem; background: var(--paper-deep); }
.flow-cta p { margin: .3rem 0 0; color: var(--muted); font-size: .86rem; }
.flow-cta .mono-label { color: var(--gold-text); }

.faq-section { background: var(--paper-deep); }
.faq-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: var(--gap); }
.faq-grid > div:first-child { grid-column: 1 / 5; }
.faq-grid h2 { margin-top: 1.2rem; font-size: clamp(2.8rem,5vw,5rem); font-weight: 580; line-height: .92; letter-spacing: -.055em; }
.faq-list { grid-column: 6 / 13; border-top: 1px solid var(--rule-dark); }
.faq-list details { border-bottom: 1px solid var(--rule-dark); }
.faq-list summary { min-height: 5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; font-weight: 650; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--teal-text); font-size: 1.4rem; font-weight: 400; transition: transform .2s ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 43rem; margin: -.3rem 3rem 1.5rem 0; color: var(--muted); font-size: .9rem; }
.faq-list details a { text-decoration-color: var(--teal); text-underline-offset: .18em; }

.conversion-cta { padding-block: clamp(5rem,8vw,8rem); background: var(--navy); color: var(--paper-bright); }
.conversion-cta__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; }
.conversion-cta .mono-label { color: var(--gold); }
.conversion-cta h2 { max-width: 13ch; margin: 1rem 0 0; font-size: clamp(3rem,6vw,6rem); font-weight: 580; line-height: .9; letter-spacing: -.06em; }

/* Account and payment funnel */
.checkout-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); }
.checkout-header { border-bottom: 1px solid var(--rule-dark); background: var(--paper-bright); }
.checkout-header__inner { min-height: 5.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.checkout-header .wordmark { width: clamp(9rem,12vw,11.25rem); }
.checkout-header__inner > div { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .78rem; }
.checkout-header__inner > div a { color: var(--ink); font-weight: 650; text-decoration-color: var(--teal); text-underline-offset: .2em; }
.account-funnel { flex: 1; padding-block: clamp(2rem,5vw,4.5rem) clamp(5rem,8vw,7rem); }
.funnel-steps { display: grid; grid-template-columns: repeat(3,1fr); margin: 0 0 clamp(3rem,5vw,5rem); padding: 0; border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark); list-style: none; }
.funnel-steps li { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 3.7rem; padding: .7rem 1rem; border-right: 1px solid var(--rule-dark); color: var(--muted); font-size: .75rem; }
.funnel-steps li:last-child { border-right: 0; }
.funnel-steps li::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; transform: scaleX(0); background: var(--teal); }
.funnel-steps li[aria-current="step"] { color: var(--ink); }
.funnel-steps li[aria-current="step"]::after, .funnel-steps li.is-complete::after { transform: scaleX(1); }
.funnel-steps li.is-complete::after { background: var(--gold); }
.funnel-steps span { color: var(--gold-text); font-family: var(--font-mono); font-size: .65rem; }
.funnel-heading { max-width: 54rem; margin-bottom: clamp(2.5rem,5vw,4.5rem); }
.funnel-heading .mono-label { color: var(--gold-text); }
.funnel-heading h1 { margin: 1rem 0 1.4rem; font-size: clamp(3rem,6vw,6rem); font-weight: 590; line-height: .9; letter-spacing: -.06em; }
.funnel-heading > p:last-child { max-width: 44rem; margin-bottom: 0; color: var(--muted); font-size: clamp(1rem,.94rem + .3vw,1.2rem); }
.funnel-layout { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: var(--gap); align-items: start; }
.account-form { grid-column: 1 / 8; padding: clamp(1.25rem,3vw,2.5rem); border: 1px solid var(--rule-dark); background: var(--paper-bright); }
.account-form fieldset { margin: 0 0 2.2rem; padding: 0; border: 0; }
.account-form legend { width: 100%; margin-bottom: 1.5rem; padding: 0 0 .8rem; border-bottom: 1px solid var(--rule-dark); font-size: 1.1rem; font-weight: 650; }
.account-form legend span { margin-right: .7rem; color: var(--gold-text); font-family: var(--font-mono); font-size: .65rem; }
.consent-field { display: flex; align-items: flex-start; gap: .7rem; margin: .5rem 0 1.5rem; color: var(--muted); font-size: .78rem; }
.consent-field input { width: 1.05rem; height: 1.05rem; margin-top: .15rem; accent-color: var(--teal); }
.consent-field a { color: var(--ink); text-underline-offset: .15em; }
.account-form__submit { width: 100%; cursor: pointer; }
.action button, button.action { padding: 0; border-radius: 0; cursor: pointer; }
button.action:disabled { border-color: var(--rule-dark); background: var(--paper-deep); color: var(--muted); cursor: not-allowed; }
button.action:disabled .action__arrow { border-color: var(--rule-dark); }
.secure-note { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 1rem 0 0; color: var(--muted); font-size: .7rem; text-align: center; }
.secure-note span { color: var(--teal-text); }
.funnel-summary { grid-column: 9 / 13; position: sticky; top: 2rem; padding: clamp(1.5rem,3vw,2.5rem); border-top: 3px solid var(--gold); background: var(--navy); color: var(--paper-bright); }
.funnel-summary > .mono-label { color: var(--gold); }
.funnel-summary h2 { margin: 1rem 0; font-size: clamp(2rem,3vw,3rem); }
.funnel-summary > p { color: rgba(255,255,255,.58); font-size: .86rem; }
.funnel-summary ul { margin: 2rem 0; padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,.13); border-bottom: 1px solid rgba(255,255,255,.13); list-style: none; }
.funnel-summary li { position: relative; margin-bottom: .8rem; padding-left: 1.25rem; color: rgba(255,255,255,.78); font-size: .8rem; }
.funnel-summary li:last-child { margin-bottom: 0; }
.funnel-summary li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); }
.funnel-summary__price { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-end; }
.funnel-summary__price span { color: rgba(255,255,255,.5); font-size: .72rem; }
.funnel-summary__price strong { max-width: 13rem; color: var(--gold); font-size: .9rem; text-align: right; }
.funnel-summary__note { margin: 1.25rem 0 0 !important; font-size: .7rem !important; }
.checkout-footer { margin-top: auto; padding-block: 1.2rem; border-top: 1px solid var(--rule-dark); color: var(--muted); font-family: var(--font-mono); font-size: .65rem; }
.checkout-footer > div { display: flex; justify-content: space-between; gap: 1rem; }
.checkout-footer a { text-decoration: none; }

.review-layout { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: var(--gap); align-items: start; }
.review-card { grid-column: 1 / 8; padding: clamp(1.25rem,3vw,2.5rem); border: 1px solid var(--rule-dark); background: var(--paper-bright); }
.review-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule-dark); }
.review-card__head .mono-label { margin-bottom: .6rem; color: var(--gold-text); }
.review-card__head h2 { margin: 0; font-size: clamp(1.8rem,3vw,2.8rem); }
.review-card__head a { font-size: .76rem; font-weight: 650; text-underline-offset: .2em; }
.review-details { margin: 0; }
.review-details div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--rule-dark); }
.review-details dt { color: var(--muted); font-family: var(--font-mono); font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; }
.review-details dd { margin: 0; font-size: .88rem; font-weight: 620; }
.review-empty { padding-top: 2rem; }
.review-empty p { color: var(--error); }
.payment-card { grid-column: 9 / 13; position: sticky; top: 2rem; padding: clamp(1.5rem,3vw,2.5rem); border-top: 3px solid var(--gold); background: var(--navy); color: var(--paper-bright); }
.payment-card > .mono-label { color: var(--gold); }
.payment-card h2 { margin: 1rem 0 2rem; font-size: clamp(1.8rem,3vw,2.7rem); }
.payment-line, .payment-total { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1rem 0; border-top: 1px solid rgba(255,255,255,.13); font-size: .77rem; }
.payment-line span, .payment-total span { color: rgba(255,255,255,.55); }
.payment-line strong, .payment-total strong { max-width: 11rem; text-align: right; }
.payment-total { margin-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.13); }
.payment-total strong { color: var(--gold); }
.payment-card .action { width: 100%; }
.checkout-status { margin: 1rem 0 0; padding: .8rem; border: 1px solid var(--gold-line); background: var(--gold-soft); color: #f0d9af; font-size: .72rem; }
.payment-assurances { margin: 1.5rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid rgba(255,255,255,.13); list-style: none; }
.payment-assurances li { position: relative; margin-bottom: .65rem; padding-left: 1rem; color: rgba(255,255,255,.52); font-size: .68rem; }
.payment-assurances li::before { content: "·"; position: absolute; left: 0; color: var(--teal); }

@media (max-width: 1200px) {
  .conversion-hero__copy, .hero-demo-stage { grid-column: 1 / 13; }
  .conversion-hero__copy { max-width: 47rem; margin-bottom: 3.5rem; }
  .hero-crm { grid-template-columns: 10rem minmax(0,1fr); height: 41rem; }
}

@media (max-width: 1000px) {
  .funnel-layout, .review-layout { column-gap: 2rem; }
  .account-form, .review-card { grid-column: 1 / 9; }
  .funnel-summary, .payment-card { grid-column: 9 / 13; }
}

@media (max-width: 980px) {
  .hero-crm { grid-template-columns: 1fr; height: 42rem; }
  .hero-crm__caption { display: block; }
  .hero-crm__sidebar { position: absolute; inset: 0 auto 0 0; z-index: 9; width: min(17rem,88%); visibility: hidden; pointer-events: none; transform: translateX(-105%); box-shadow: .8rem 0 1.8rem rgba(8,18,28,.18); transition: transform 200ms cubic-bezier(.22,1,.36,1), visibility 0s linear 200ms; }
  .hero-crm.is-menu-open .hero-crm__sidebar { visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
  .hero-crm.is-interactive .hero-crm__menu { display: inline-flex; }
  .hero-crm__brand { position: relative; }
  .hero-crm__brand > div { margin-right: 3.15rem; }
  .hero-crm__brand > button { position: absolute; top: .25rem; right: .25rem; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.58); border-radius: .4rem; background: var(--demo-navy-raised); color: #fff; font-size: 1.2rem; cursor: pointer; }
  .hero-crm__brand > button:focus-visible { outline: 2px solid var(--demo-teal); outline-offset: 2px; }
  .hero-crm__nav button { min-height: 2.75rem; font-size: .7rem; }
  .hero-crm__menu-backdrop { backdrop-filter: blur(2px); }
  .hero-crm__main { padding-inline: 1.15rem; }
  .hero-crm__view-head { align-items: flex-start; }
  .hero-crm__stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 800px) {
  .hero-crm__report-grid { grid-template-columns: 1fr; gap: .8rem; }
  .hero-crm__pie { width: 7rem; }
  .proof-strip__inner { grid-template-columns: 1fr; text-align: left; }
  .proof-strip strong, .proof-strip span { text-align: left; }
  .outcome-grid, .signup-flow { grid-template-columns: 1fr; }
  .outcome-grid article, .outcome-grid article:not(:first-child) { padding: 1.6rem 0; border-right: 0; border-bottom: 1px solid var(--rule-dark); }
  .outcome-grid article:last-child { border-bottom: 0; }
  .outcome-grid h3 { margin-top: 2rem; }
  .signup-flow li { min-height: auto; border-right: 0; border-bottom: 1px solid var(--navy); }
  .signup-flow li:last-child { border-bottom: 0; }
  .signup-flow strong { margin-top: 3rem; }
  .flow-cta, .conversion-cta__inner { align-items: flex-start; flex-direction: column; }
  .faq-grid > div:first-child, .faq-list { grid-column: 1 / 13; }
  .faq-list { margin-top: 2rem; }
  .account-form, .funnel-summary, .review-card, .payment-card { grid-column: 1 / 13; }
  .funnel-summary, .payment-card { position: static; margin-top: 1rem; }
}

@media (max-width: 560px) {
  .conversion-hero__meta span:last-child { display: none; }
  .conversion-hero__copy h1 { font-size: clamp(3.5rem,17vw,5.4rem); }
  .hero-crm { height: 42rem; border-radius: .6rem; box-shadow: .7rem .7rem 0 var(--gold-soft), 0 1rem 2.5rem rgba(8,18,28,.1); }
  .hero-crm__sidebar { width: min(15rem,88%); }
  .hero-crm__topbar { min-height: 4rem; padding-inline: .75rem; }
  .hero-crm__main { padding: 1rem .75rem 2.4rem; }
  .hero-crm__view-head > div > span { max-width: 25rem; }
  .hero-crm__board { grid-auto-columns: 11.5rem; }
  .hero-crm__feed li { grid-template-columns: 1fr; gap: .25rem; }
  .hero-crm__drawer { z-index: 11; width: 100%; }
  .hero-crm__drawer-backdrop { z-index: 10; }
  .hero-crm__drawer input, .hero-crm__drawer select { min-height: 2.75rem; font-size: 1rem; }
  .hero-crm__deal-move select, .hero-crm__sortbar select { min-height: 2.75rem; font-size: 1rem; }
  .hero-crm__button { min-height: 2.75rem; font-size: .68rem; }
  .hero-crm table, .hero-crm__deal strong, .hero-crm__deal span, .hero-crm__deal small,
  .hero-crm__feed p, .hero-crm__feed time, .hero-crm__legend li { font-size: .625rem; }
  .hero-crm__deal-move, .hero-crm th { font-size: .625rem; }
  .hero-crm__caption { right: .55rem; bottom: .42rem; }
  .conversion-checks { display: grid; }
  .funnel-steps strong { display: none; }
  .funnel-steps li { justify-content: center; }
  .checkout-header__inner > div span { display: none; }
  .checkout-header .wordmark { width: 8.5rem; }
  .funnel-heading h1 { font-size: clamp(3rem,15vw,4.6rem); }
  .account-form, .review-card, .funnel-summary, .payment-card { padding: 1.2rem; }
  .review-details div { grid-template-columns: 1fr; gap: .35rem; }
  .checkout-footer > div { flex-direction: column; }
}

@media (max-width: 460px) {
  .hero-crm__stats { grid-template-columns: 1fr; }
  .hero-crm__stat--hero { grid-column: auto; }
}

/* Pricing-first conversion blocks */
.conversion-hero__copy h1 { max-width: 10.5ch; font-size: clamp(3.7rem, 6.8vw, 6.9rem); }

.plan-snapshot { position: relative; padding-block: var(--section-space); overflow: hidden; border-bottom: 1px solid var(--rule-dark); background: var(--paper-bright); }
.plan-snapshot::before { content: ""; position: absolute; top: 0; right: 8vw; width: 10rem; height: 10rem; border: 1px solid var(--teal-line); transform: translateY(-52%) rotate(45deg); pointer-events: none; }
.plan-snapshot__head { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: var(--gap); align-items: end; }
.plan-snapshot__head > div:first-child { grid-column: 1 / 8; }
.plan-snapshot__head > div:last-child { grid-column: 9 / 13; }
.plan-snapshot__head .mono-label { color: var(--gold-text); }
.plan-snapshot__head h2 { max-width: 13ch; margin: 1rem 0 0; font-size: clamp(3rem,5.5vw,5.7rem); font-weight: 580; line-height: .9; letter-spacing: -.06em; }
.plan-snapshot__head > div:last-child p { margin: 0 0 1.2rem; color: var(--muted); font-size: .95rem; line-height: 1.65; }
.plan-snapshot__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-top: clamp(3rem,6vw,5rem); }
.plan-snapshot__card { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2rem; min-height: 18rem; padding: clamp(1.5rem,3vw,3rem); overflow: hidden; border: 1px solid var(--navy); background: var(--paper); }
.plan-snapshot__card::before { content: ""; position: absolute; top: 0; right: 0; width: 5rem; height: 5rem; border-bottom: 1px solid var(--rule-dark); border-left: 1px solid var(--rule-dark); background: var(--paper-deep); }
.plan-snapshot__card--premium { border-color: var(--navy); background: var(--navy); color: var(--paper-bright); }
.plan-snapshot__card--premium::before { border-color: rgba(255,255,255,.15); background: rgba(23,191,169,.1); }
.plan-snapshot__card > div { align-self: start; }
.plan-snapshot__card .mono-label { display: block; margin-bottom: 1.4rem; color: var(--gold-text); }
.plan-snapshot__card--premium .mono-label { color: var(--gold); }
.plan-snapshot__card strong { display: block; color: var(--navy); font-size: clamp(2.8rem,5vw,5rem); line-height: .8; letter-spacing: -.06em; }
.plan-snapshot__card--premium strong { color: #fff; }
.plan-snapshot__card strong small { color: var(--muted); font-size: .76rem; font-weight: 500; letter-spacing: 0; }
.plan-snapshot__card--premium strong small { color: rgba(255,255,255,.48); }
.plan-snapshot__card p { grid-column: 1; align-self: end; max-width: 24rem; margin: 0; color: var(--muted); font-size: .88rem; }
.plan-snapshot__card--premium p { color: rgba(255,255,255,.6); }
.plan-snapshot__card .action { grid-column: 2; grid-row: 1 / 3; align-self: end; min-width: 12rem; }

/* Full pricing page */
.pricing-hero { position: relative; padding-block: clamp(5rem,9vw,9rem); overflow: hidden; border-bottom: 1px solid var(--rule-dark); background: linear-gradient(135deg,var(--paper-bright),var(--paper)); }
.pricing-hero::after { content: ""; position: absolute; right: -5rem; bottom: -8rem; width: 22rem; height: 22rem; border: 1px solid var(--gold-line); transform: rotate(45deg); }
.pricing-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: var(--gap); align-items: end; }
.pricing-hero__copy { grid-column: 1 / 9; }
.pricing-hero__copy .mono-label { color: var(--gold-text); }
.pricing-hero h1 { max-width: 10ch; margin: 1rem 0 0; font-size: clamp(3.8rem,7.5vw,7.5rem); font-weight: 580; line-height: .86; letter-spacing: -.07em; }
.pricing-hero__aside { grid-column: 9 / 13; }
.pricing-hero__aside p { color: var(--muted); font-size: clamp(1rem,.94rem + .3vw,1.2rem); line-height: 1.65; }
.pricing-billing-strip { padding-block: 1.2rem; border-bottom: 1px solid var(--rule-dark); background: var(--navy); color: #fff; }
.pricing-billing-strip .shell { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,.15); }
.pricing-billing-strip span { display: flex; align-items: center; gap: .7rem; min-height: 3.8rem; padding: .8rem 1rem; background: var(--navy); color: rgba(255,255,255,.72); font-size: .75rem; }
.pricing-section { padding-block: var(--section-space); border-bottom: 1px solid var(--rule-dark); }
.pricing-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-bottom: clamp(3rem,6vw,5rem); }
.pricing-card { position: relative; display: grid; min-height: 23rem; padding: clamp(1.5rem,3vw,3rem); border: 1px solid var(--navy); background: var(--paper-bright); }
.pricing-card--premium { background: var(--navy); color: #fff; }
.pricing-card__label { color: var(--gold-text); font-family: var(--font-mono); font-size: .67rem; letter-spacing: .1em; text-transform: uppercase; }
.pricing-card--premium .pricing-card__label { color: var(--gold); }
.pricing-card h2 { margin: 1rem 0 .6rem; font-size: clamp(2rem,4vw,3.8rem); letter-spacing: -.05em; }
.pricing-card__price { margin: 0; color: var(--teal-text); font-size: clamp(3rem,6vw,5.8rem); font-weight: 700; line-height: .85; letter-spacing: -.07em; }
.pricing-card--premium .pricing-card__price { color: var(--teal); }
.pricing-card__price small { color: var(--muted); font-size: .78rem; font-weight: 500; letter-spacing: 0; }
.pricing-card--premium .pricing-card__price small, .pricing-card--premium .pricing-card__copy { color: rgba(255,255,255,.55); }
.pricing-card__copy { max-width: 30rem; margin: 1.2rem 0 2rem; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.pricing-card__copy { margin-bottom: 1.4rem; }
/* The Starter/Premium delta, stated on both cards rather than left to
   the comparison table further down the page. */
.pricing-card__delta-label { margin: 0 0 .6rem; color: var(--gold-text); font-family: var(--font-mono); font-size: .6rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.pricing-card--premium .pricing-card__delta-label { color: var(--gold); }
.pricing-card__delta { margin: 0 0 2rem; padding: 0; list-style: none; }
.pricing-card__delta li { position: relative; padding: .3rem 0 .3rem 1.5rem; font-size: .84rem; line-height: 1.4; }
.pricing-card__delta li::before { position: absolute; left: 0; font-family: var(--font-mono); font-size: .8rem; }
.pricing-card__delta--in li::before { content: "+"; color: var(--teal); font-weight: 700; }
.pricing-card__delta--out li { color: var(--muted); }
.pricing-card__delta--out li::before { content: "–"; color: rgba(8,18,28,.34); }
.pricing-card__delta--in li a { color: var(--teal); text-decoration: none; border-bottom: 1px solid rgba(23,191,169,.4); }
.pricing-card__delta--in li a:hover { border-bottom-color: var(--teal); }
.pricing-card__flag { position: absolute; top: 0; right: clamp(1.5rem,3vw,3rem); padding: .4rem .7rem; background: var(--gold); color: var(--navy); font-family: var(--font-mono); font-size: .6rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
.pricing-card .action { align-self: end; justify-self: start; }
.comparison-head { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: var(--gap); align-items: end; margin-bottom: 2rem; }
.comparison-head > div:first-child { grid-column: 1 / 8; }
.comparison-head > div:last-child { grid-column: 9 / 13; color: var(--muted); font-size: .84rem; line-height: 1.6; }
.comparison-head .mono-label { color: var(--gold-text); }
.comparison-head h2 { margin: .9rem 0 0; font-size: clamp(2.8rem,5vw,5rem); line-height: .9; letter-spacing: -.055em; }
.comparison-scroll { overflow-x: auto; border: 1px solid var(--rule-dark); background: var(--paper-bright); }
.comparison-scroll:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.comparison-scroll-hint { margin: 0 0 .8rem; color: var(--muted); font-family: var(--font-mono); font-size: .67rem; }
.comparison-table { width: 100%; min-width: 46rem; border-collapse: collapse; }
.comparison-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.comparison-table th, .comparison-table td { padding: 1rem 1.2rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.comparison-table tr:last-child th, .comparison-table tr:last-child td { border-bottom: 0; }
.comparison-table th:last-child, .comparison-table td:last-child { border-right: 0; }
.comparison-table thead th { background: var(--navy); color: #fff; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.comparison-table thead th:first-child { color: rgba(255,255,255,.55); text-align: left; }
.comparison-table tbody th { width: 56%; color: var(--ink); font-size: .84rem; font-weight: 600; text-align: left; }
.comparison-table .comparison-group th { width: auto; padding-block: .7rem; background: var(--paper-deep); color: var(--gold-text); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.comparison-table td { width: 22%; text-align: center; }
.feature-state { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-mono); font-size: .67rem; font-weight: 600; }
.feature-state--yes { color: var(--success); }
.feature-state--no { color: var(--error); }
.feature-state i { display: inline-grid; width: 1.45rem; height: 1.45rem; place-items: center; border-radius: 50%; color: #fff; font-style: normal; }
.feature-state--yes i { background: var(--success); }
.feature-state--no i { background: var(--error); }
.pricing-note { margin: 1rem 0 0; color: var(--muted); font-size: .7rem; line-height: 1.55; }

/* Panels snap together as they enter the viewport. Content stays visible
   unless JavaScript has explicitly enabled the assembly system. */
html.assembly-ready [data-assemble] [data-block] {
  opacity: 0;
  transform: translate3d(0,24px,0) scale(.985);
  transition: opacity .62s var(--ease-out), transform .62s var(--ease-out);
  transition-delay: var(--build-delay, 0ms);
}
html.assembly-ready [data-assemble] [data-block="left"] { transform: translate3d(-26px,10px,0) scale(.985); }
html.assembly-ready [data-assemble] [data-block="right"] { transform: translate3d(26px,10px,0) scale(.985); }
html.assembly-ready [data-assemble] [data-block="scale"] { transform: translate3d(0,16px,0) scale(.96); }
html.assembly-ready [data-assemble].is-assembled [data-block] { opacity: 1; transform: none; }
html.assembly-ready [data-assemble] [data-build-piece] { opacity: 0; transform: translate3d(18px,0,0); transition: opacity .55s var(--ease-out) .34s, transform .55s var(--ease-out) .34s; }
html.assembly-ready [data-assemble].is-assembled [data-build-piece] { opacity: 1; transform: none; }
html.assembly-ready [data-assemble].is-assembled [data-build-piece]:nth-child(2) { transition-delay: .46s; }
html.assembly-ready [data-assemble].is-assembled .hero-crm { transition: transform .36s var(--ease-out), box-shadow .36s var(--ease-out); transition-delay: 0ms; }

@media (hover: hover) and (pointer: fine) {
  .crm-steps li:hover { z-index: 2; background: #fff; transform: translate3d(0,-.7rem,0) scale(1.018); box-shadow: .8rem .8rem 0 var(--gold-soft), 0 1.5rem 3rem rgba(8,18,28,.16); }
  .crm-capabilities article:hover { z-index: 2; background: #fff; transform: translate3d(0,-.7rem,0) scale(1.018); box-shadow: .8rem .8rem 0 var(--gold-soft), 0 1.5rem 3rem rgba(8,18,28,.16); }
  .hero-crm:not(.is-demo-building):hover, .hero-crm:not(.is-demo-building):focus-within,
  html.assembly-ready [data-assemble].is-assembled .hero-crm:not(.is-demo-building):hover,
  html.assembly-ready [data-assemble].is-assembled .hero-crm:not(.is-demo-building):focus-within { transform: translate3d(0,-.7rem,0) scale(1.008); box-shadow: 1.9rem 1.9rem 0 var(--gold-soft), 0 2.1rem 5rem rgba(8,18,28,.2); }
}

@media (max-width: 900px) {
  .plan-snapshot__head > div:first-child, .plan-snapshot__head > div:last-child, .pricing-hero__copy, .pricing-hero__aside, .comparison-head > div:first-child, .comparison-head > div:last-child { grid-column: 1 / 13; }
  .plan-snapshot__head > div:last-child, .pricing-hero__aside, .comparison-head > div:last-child { margin-top: 1.5rem; }
  .plan-snapshot__card { grid-template-columns: 1fr; }
  .plan-snapshot__card .action { grid-column: 1; grid-row: auto; justify-self: start; }
  .pricing-billing-strip .shell { grid-template-columns: 1fr; }
  html.assembly-ready [data-assemble] [data-block="left"], html.assembly-ready [data-assemble] [data-block="right"] { transform: translate3d(0,16px,0) scale(.99); }
}

@media (max-width: 680px) {
  .plan-snapshot__grid, .pricing-cards { grid-template-columns: 1fr; }
  .plan-snapshot__card { min-height: 17rem; }
  .pricing-card { min-height: 20rem; }
}

@media (max-width: 560px) {
  .conversion-hero__copy h1 { max-width: 14ch; font-size: clamp(2.7rem,13vw,3.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  html.assembly-ready [data-assemble] [data-block],
  html.assembly-ready [data-assemble] [data-build-piece],
  html.assembly-ready [data-assemble] .demo-cue__text,
  html.assembly-ready [data-assemble] .demo-cue__arrow { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-crm__view, .hero-crm__toast, .hero-crm.is-demo-settled { animation: none !important; }
  .hero-crm__sidebar, .hero-crm__drawer, .hero-crm__drawer-backdrop,
  .hero-crm__menu-backdrop, .hero-crm__deal, .hero-crm__column,
  .hero-crm__nav button { transition: none !important; }
  .crm-steps li:hover,
  .crm-capabilities article:hover,
  .crm-capabilities--slotted article:hover,
  .hero-crm:hover, .hero-crm:focus-within,
  html.assembly-ready [data-assemble].is-assembled .hero-crm:hover,
  html.assembly-ready [data-assemble].is-assembled .hero-crm:focus-within { transform: none !important; }
}

/* ---- Hero trial CTA transfer ---------------------------------------
   On desktop a visual copy rises from a small slot below the header,
   flies to the header action, and hands the interaction back to the
   real link. The real links remain in the document for focus and layout. */
[data-header-trial-cta] { white-space: nowrap; transform-origin: center; transition: opacity .16s ease, transform .24s var(--ease-out), box-shadow .24s ease; }
[data-header-trial-cta].is-trial-receiving { opacity: 0; pointer-events: none; transform: scale(.96); }
[data-header-trial-cta].is-trial-settled { box-shadow: 0 .45rem 1.15rem rgba(8,118,106,.2); animation: trial-header-settle .42s cubic-bezier(.22,1,.36,1); }
@keyframes trial-header-settle {
  0% { transform: scale(.92); box-shadow: 0 0 0 rgba(8,118,106,0); }
  62% { transform: scale(1.045); }
  100% { transform: none; box-shadow: 0 .45rem 1.15rem rgba(8,118,106,.2); }
}
.trial-flight { position: fixed !important; z-index: 130; margin: 0 !important; pointer-events: none; transform-origin: top left; will-change: transform, opacity, clip-path; box-shadow: 0 1rem 2.4rem rgba(8,18,28,.22); }
.trial-flight > span:first-child { white-space: nowrap; }
.trial-flight-slot { position: fixed; z-index: 129; height: .62rem; border: 1px solid var(--navy); border-top: 0; border-radius: 0 0 .25rem .25rem; background: linear-gradient(180deg, rgba(8,18,28,.5), var(--navy)); box-shadow: inset 0 .18rem .28rem rgba(0,0,0,.34), 0 .25rem .65rem rgba(8,18,28,.16); pointer-events: none; transform-origin: center; }

/* Compact fallback while the desktop header action is hidden. */
.trial-rail { display: none; }
body.menu-open .trial-rail { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-115%); }

@media (max-width: 900px) {
  .trial-rail {
    position: fixed;
    inset: var(--header-h) 0 auto;
    z-index: 95;
    display: block;
    border-bottom: 1px solid var(--rule-dark);
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-115%);
    backdrop-filter: blur(12px);
    transition: transform .3s cubic-bezier(.22,.72,.30,1), opacity .24s ease, visibility 0s linear .3s;
  }
  .trial-rail.is-visible { opacity: 1; visibility: visible; transform: none; transition: transform .3s cubic-bezier(.22,.72,.30,1), opacity .24s ease, visibility 0s; }
  .trial-rail__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .6rem; }
  .trial-rail__copy { min-width: 0; display: flex; align-items: baseline; gap: .6rem; margin: 0; font-size: .9rem; }
  .trial-rail__copy strong { font-weight: 700; }
  .trial-rail__copy span { overflow: hidden; color: var(--ink-soft); font-family: var(--font-mono); font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
  .trial-rail__cta { flex: none; padding-block: .5rem; font-size: .8rem; }
}

@media (max-width: 640px) {
  .trial-rail__copy span { display: none; }
  .trial-rail__inner { padding-block: .5rem; }
}
@media (max-width: 480px) {
  .product-start-cta { padding: .45rem; box-shadow: .55rem .55rem 0 var(--gold-soft); }
  .product-start-cta__button { min-height: 9rem; grid-template-columns: minmax(0,1fr) 4.5rem; font-size: clamp(1.85rem, 10vw, 2.75rem); }
  .product-start-cta__button > span:first-child { padding: 1.15rem; }
}
@media (max-width: 420px) {
  .trial-rail__copy { display: none; }
  .trial-rail__inner { justify-content: stretch; }
  .trial-rail__cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  [data-header-trial-cta].is-trial-settled { animation: none; }
  .product-start-cta__button:hover { transform: none; }
  .trial-rail { transition: opacity .01ms, visibility 0s; transform: none; }
  .trial-rail.is-visible { transition: opacity .01ms, visibility 0s; }
}

/* --- Founder quote ----------------------------------------------- */
/* One centred pull-quote standing alone in its section on the company
   page, in place of the four principles that used to be listed there.
   Gold and italic, at a size between the body copy and a heading: it has
   to read as a voice rather than as another block of page copy. */
.founder-quote {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
.founder-quote p {
  margin: 0;
  color: var(--gold-text);
  font-size: clamp(1.3rem, 1rem + 1.2vw, 2.1rem);
  font-style: italic;
  font-weight: 460;
  line-height: 1.32;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.founder-quote footer {
  margin-top: clamp(1.4rem, 3vw, 2rem);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* --- Ruled rows that are links ----------------------------------- */
/* Used by the tools list on the product page, where every row opens the
   knowledgebase guide for that tool. The row itself is the hit area
   rather than the heading alone, so the blurb is clickable too.
   The arrow is the only affordance that moves: animating the row's own
   padding shifted the text and reflowed the list under the cursor. */
.ruled-list--linked li { padding: 0; }
.ruled-list--linked a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.75rem;
  align-items: baseline;
  gap: 1rem;
  padding: 1.2rem clamp(.5rem, 1vw, 1rem);
  margin-inline: calc(-1 * clamp(.5rem, 1vw, 1rem));
  color: inherit;
  text-decoration: none;
  transition: background-color .28s ease;
}
.ruled-list--linked h3 { transition: color .2s ease; }
.ruled-list--linked p { max-width: 40rem; }
.ruled-list__arrow {
  justify-self: end;
  color: var(--gold-text);
  font-size: 1.05rem;
  transition: transform .28s var(--ease-out), color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .ruled-list--linked a:hover { background: var(--paper-deep); }
  .ruled-list--linked a:hover h3 { color: var(--teal-text); }
  .ruled-list--linked a:hover .ruled-list__arrow { color: var(--teal-text); transform: translateX(.35rem); }
}
.ruled-list--linked a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
  background: var(--paper-deep);
}
@media (prefers-reduced-motion: reduce) {
  .ruled-list--linked a:hover .ruled-list__arrow { transform: none; }
}

/* A title block whose heading carries the section on its own, with no
   mono-label above it to space away from. */
.content-grid__title > h2:first-child { margin-top: 0; }

/* A content grid whose heading crowns the section instead of sharing the
   row with the body. The body then runs down the middle of the page as a
   narrower column, with its own text still ranged left, so the list keeps
   its indentation rather than turning into centred prose. */
.content-grid--centered { row-gap: clamp(2.5rem, 5vw, 4rem); }
.content-grid--centered .content-grid__title { grid-column: 1 / 13; text-align: center; }
.content-grid--centered .content-grid__body { grid-column: 3 / 11; }
.content-grid--centered .content-grid__body > p { max-width: none; }

@media (max-width: 900px) {
  .content-grid--centered .content-grid__body { grid-column: 2 / 12; }
}

@media (max-width: 720px) {
  .content-grid--centered .content-grid__body { grid-column: 1 / 13; margin-top: 0; }
}

/* =================================================================
   Slotted blocks, full-width actions, knowledgebase
   Added 2026-09-09.

   The step cards read as stickers laid on the page: a flat white face
   that lifted away on hover with a hard offset shadow. These rules give
   them a recess to sit in instead. The list itself becomes the well --
   a darker floor with a groove around and between the cards -- and each
   card is a block seated in it, casting a short shadow down into the
   floor rather than out across the page.

   The assemble animation follows from that: a block arrives held just
   above its slot and drops in, its shadow tightening as it seats. It
   uses the same [data-assemble]/.is-assembled hook as the rest of the
   page, so the timing matches everything around it.
   ================================================================= */

/* --- The well ---------------------------------------------------- */
/* The floor is inset and darker than the blocks, and there is enough of
   it around and between them to read as a groove rather than a hairline.
   Without the padding the cards met edge to edge and the whole row went
   back to looking like one flat panel. */
.crm-steps--slotted,
.signup-flow--slotted,
.crm-capabilities--slotted {
  gap: .55rem;
  padding: .55rem;
  border: 0;
  background: var(--paper-deep);
  box-shadow: inset 0 3px 7px -3px rgba(8, 18, 28, .3),
              inset 0 1px 0 rgba(8, 18, 28, .1),
              inset 0 -1px 0 rgba(255, 255, 255, .75);
}

/* The gutter is now the floor showing between blocks, so the per-card
   dividing borders that used to draw it are redundant. */
.crm-steps--slotted li,
.signup-flow--slotted li,
.crm-capabilities--slotted article {
  border-right: 0;
  border-bottom: 0;
}
/* The base rule zeroes the first card's left padding to align it with the
   grid; inside a well it needs the same inset as its neighbours. */
.crm-steps--slotted li:first-child { padding-left: clamp(1.5rem, 3vw, 2.5rem); }

/* --- The blocks -------------------------------------------------- */
.crm-steps--slotted li,
.signup-flow--slotted li,
.crm-capabilities--slotted article {
  position: relative;
  z-index: 0;
  background: var(--paper-bright);
  /* Cast down into the floor, plus a hairline top highlight so the face
     of the block catches light the way a raised surface does. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9),
              0 0 0 1px rgba(8, 18, 28, .07),
              0 .6rem 1rem -.5rem rgba(8, 18, 28, .34);
  transition: transform .34s var(--ease-out),
              box-shadow .34s var(--ease-out),
              background-color .34s ease;
  will-change: transform;
}

.signup-flow--slotted { border: 1px solid var(--rule-dark); }
.signup-flow--slotted li {
  min-height: 22rem;
  display: flex;
  flex-direction: column;
}
.signup-flow--slotted .crm-step__number {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: clamp(3rem, 5vw, 4.6rem);
  font-weight: 500;
  line-height: .8;
  letter-spacing: -.08em;
}
/* Heading a fixed distance below the numeral and the body text pushed to
   the foot of the block, so three cards with very different amounts of
   copy still line their headings up with each other. */
.signup-flow--slotted strong { margin: 3rem 0 1.2rem; }
.signup-flow--slotted p { margin-top: auto; }

/* --- Seating the block ------------------------------------------- */
/* Held above the slot, then dropped in. The shadow starts long -- the
   block is off its seat -- and tightens as it lands. */
html.assembly-ready [data-assemble] .crm-steps--slotted li,
html.assembly-ready [data-assemble] .signup-flow--slotted li,
html.assembly-ready [data-assemble] .crm-capabilities--slotted article {
  opacity: 0;
  transform: translate3d(0, -1.15rem, 0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9),
              0 1.5rem 2rem -.8rem rgba(8, 18, 28, .34);
  transition: opacity .46s var(--ease-out),
              transform .52s var(--ease-out),
              box-shadow .52s var(--ease-out);
}
html.assembly-ready [data-assemble].is-assembled .crm-steps--slotted li,
html.assembly-ready [data-assemble].is-assembled .signup-flow--slotted li,
html.assembly-ready [data-assemble].is-assembled .crm-capabilities--slotted article {
  opacity: 1;
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9),
              0 0 0 1px rgba(8, 18, 28, .07),
              0 .6rem 1rem -.5rem rgba(8, 18, 28, .34);
}
/* Left to right, so the row seats like three blocks dropped in order. */
html.assembly-ready [data-assemble].is-assembled .crm-steps--slotted li:nth-child(2),
html.assembly-ready [data-assemble].is-assembled .signup-flow--slotted li:nth-child(2),
html.assembly-ready [data-assemble].is-assembled .crm-capabilities--slotted article:nth-child(2) { transition-delay: .09s; }
html.assembly-ready [data-assemble].is-assembled .crm-steps--slotted li:nth-child(3),
html.assembly-ready [data-assemble].is-assembled .signup-flow--slotted li:nth-child(3),
html.assembly-ready [data-assemble].is-assembled .crm-capabilities--slotted article:nth-child(3) { transition-delay: .18s; }

/* --- Hover: the block rises up out of its slot -------------------- */
/* The tray stays where it is and the block comes up out of it, clearing
   the lip, with the gold slab behind it standing in for the light the
   raised face now blocks. The well it left behind darkens for as long as
   it is empty, which is what makes the movement read as a block leaving
   a slot rather than a card floating off a page.

   The .is-assembled selectors are repeated here deliberately. The rule
   that settles a block at the end of its entrance animation is
   `html.assembly-ready [data-assemble].is-assembled ... li`, which is
   more specific than a bare `li:hover` -- so with only the short
   selectors it pins transform: none straight over the hover and nothing
   moves at all. That is what had happened to these cards. The demo
   further up the file already doubles its selectors for this reason. */
@media (hover: hover) and (pointer: fine) {
  .crm-steps--slotted li:hover,
  .signup-flow--slotted li:hover,
  .crm-capabilities--slotted article:hover,
  html.assembly-ready [data-assemble].is-assembled .crm-steps--slotted li:hover,
  html.assembly-ready [data-assemble].is-assembled .signup-flow--slotted li:hover,
  html.assembly-ready [data-assemble].is-assembled .crm-capabilities--slotted article:hover {
    z-index: 2;
    background: #fff;
    transform: var(--slot-raise);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95),
                var(--slot-shadow);
  }
  /* The empty well, one shade deeper while the block is out of it. */
  .crm-steps--slotted:has(li:hover),
  .signup-flow--slotted:has(li:hover),
  .crm-capabilities--slotted:has(article:hover) {
    box-shadow: inset 0 5px 10px -4px rgba(8, 18, 28, .38),
                inset 0 1px 0 rgba(8, 18, 28, .13),
                inset 0 -1px 0 rgba(255, 255, 255, .75);
  }
}

/* --- The capability strip: same well, same blocks ----------------- */
/* The three columns used to be one flat panel divided by hairlines. The
   well replaces those rules, so the top and bottom borders and the
   per-card right border all come off, and each card gets the even inset
   its neighbours have -- the base rule zeroes the first card's left
   padding to line it up with the grid, which inside a tray reads as a
   block sitting crooked in its slot. */
.crm-capabilities--slotted {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 0;
  border-bottom: 0;
}
/* Copy keeps the base rule's top alignment under its label. The step
   cards push theirs to the foot of the block instead, but these three
   blurbs run two and three lines, so bottom-aligning them started every
   paragraph at a different height under labels that stayed level. */
.crm-capabilities--slotted article,
.crm-capabilities--slotted article:not(:first-child) {
  padding: clamp(1.35rem, 2.4vw, 1.9rem) clamp(1.1rem, 2vw, 1.8rem);
}

/* --- Plan cards: same vocabulary --------------------------------- */
/* The decorative square in each card's top-right corner is removed. */
.plan-snapshot__card--slotted::before { content: none; }

.plan-snapshot__card--slotted {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55),
              0 0 0 1px rgba(8, 18, 28, .07),
              0 .6rem 1rem -.5rem rgba(8, 18, 28, .34);
  transition: transform .34s var(--ease-out),
              box-shadow .34s var(--ease-out);
  will-change: transform;
}
html.assembly-ready [data-assemble] .plan-snapshot__card--slotted {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55),
              0 1.5rem 2rem -.8rem rgba(8, 18, 28, .34);
}
html.assembly-ready [data-assemble].is-assembled .plan-snapshot__card--slotted {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55),
              0 0 0 1px rgba(8, 18, 28, .07),
              0 .6rem 1rem -.5rem rgba(8, 18, 28, .34);
}
/* Each plan card carries its own Choose button, so it takes the shorter
   lift: enough to read as coming out of the slot, not so much that the
   button walks away from the cursor already heading for it. Selectors
   doubled against .is-assembled for the reason given above the steps. */
@media (hover: hover) and (pointer: fine) {
  .plan-snapshot__card--slotted { z-index: 0; }
  .plan-snapshot__card--slotted:hover,
  html.assembly-ready [data-assemble].is-assembled .plan-snapshot__card--slotted:hover {
    z-index: 2;
    transform: var(--slot-raise-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55),
                var(--slot-shadow-sm);
  }
  /* On navy the white inset hairline is the wrong light; the slab and the
     teal edge carry it instead. */
  .plan-snapshot__card--slotted.plan-snapshot__card--premium:hover,
  html.assembly-ready [data-assemble].is-assembled .plan-snapshot__card--slotted.plan-snapshot__card--premium:hover {
    box-shadow: inset 0 0 0 1px var(--teal-line),
                var(--slot-shadow-sm);
  }
  .plan-snapshot__card--slotted:hover .action__arrow { transform: translateX(.15rem); }
}

/* --- Full-width stacked actions ---------------------------------- */
.action-stack {
  display: grid;
  gap: .75rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.action--block {
  display: grid;
  width: 100%;
  min-height: 4rem;
  grid-template-columns: 1fr 4rem;
  font-size: .92rem;
}
.action--block > span:first-child { padding-inline: clamp(1.25rem, 3vw, 2rem); }

/* The secondary action is a block in a slot of its own: it sits on the
   recessed floor rather than being an underlined text link, so the two
   buttons read as one stack of the same material. */
.action--slot {
  border-color: var(--rule-dark);
  background: var(--paper-deep);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9),
              0 .5rem .9rem -.55rem rgba(8, 18, 28, .22);
  transition: transform .3s var(--ease-out),
              box-shadow .3s var(--ease-out),
              background-color .3s ease;
}
html.assembly-ready [data-assemble] .action--slot {
  opacity: 0;
  transform: translate3d(0, -.8rem, 0);
  transition: opacity .44s var(--ease-out) .26s,
              transform .5s var(--ease-out) .26s,
              box-shadow .5s var(--ease-out) .26s;
}
html.assembly-ready [data-assemble].is-assembled .action--slot {
  opacity: 1;
  transform: none;
}
@media (hover: hover) and (pointer: fine) {
  .action--slot:hover,
  html.assembly-ready [data-assemble].is-assembled .action--slot:hover {
    background: var(--paper-bright);
    transform: var(--slot-raise-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9),
                var(--slot-shadow-sm);
  }
}

/* --- Knowledgebase section --------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.kb-section {
  padding-block: var(--section-space);
  border-bottom: 1px solid var(--rule-dark);
  background: var(--paper-deep);
}
.kb-intro { max-width: 46rem; }
.kb-intro .mono-label { color: var(--gold-text); }
.kb-intro h2 {
  max-width: 14ch;
  margin: 1rem 0 0;
  font-size: clamp(3rem, 5.5vw, 5.7rem);
  font-weight: 580;
  line-height: .9;
  letter-spacing: -.06em;
}
.kb-lede {
  margin: 1.4rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, .9rem + .35vw, 1.2rem);
  line-height: 1.5;
}

.kb-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .75rem;
  margin-top: 2rem;
}
.kb-search input {
  min-height: 4rem;
  padding-inline: 1.25rem;
  border: 1px solid var(--rule-dark);
  background: var(--paper-bright);
  box-shadow: inset 0 2px 4px -2px rgba(8, 18, 28, .18);
  font-family: inherit;
  font-size: .95rem;
  color: var(--ink);
}
.kb-search input::placeholder { color: var(--muted); }
.kb-search input:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.kb-search .action { min-height: 4rem; grid-template-columns: 1fr 4rem; cursor: pointer; }

.kb-rule {
  height: 0;
  margin: clamp(3.5rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3rem);
  border: 0;
  border-top: 1px solid var(--rule-dark);
}
.kb-popular-label { color: var(--gold-text); }
.kb-popular {
  display: grid;
  gap: 1px;
  margin: 1.5rem 0 0;
  padding: 0;
  background: var(--rule-dark);
  border: 1px solid var(--rule-dark);
  list-style: none;
}
.kb-popular a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .35rem 2rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--paper-bright);
  text-decoration: none;
  color: inherit;
  transition: background-color .24s ease, box-shadow .24s var(--ease-out);
}
.kb-popular strong {
  grid-column: 1;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 650;
  letter-spacing: -.02em;
}
.kb-popular a > span:not(.kb-popular__arrow) {
  grid-column: 1;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5;
}
.kb-popular__arrow {
  grid-column: 2;
  grid-row: 1 / 3;
  color: var(--teal-text);
  font-size: 1.2rem;
  transition: transform .24s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .kb-popular a:hover { background: var(--paper); box-shadow: inset 0 0 0 1px var(--teal-line); }
  .kb-popular a:hover .kb-popular__arrow { transform: translateX(.35rem); }
}

@media (max-width: 860px) {
  .kb-search { grid-template-columns: 1fr; }
  .kb-search .action { width: 100%; }
}

@media (max-width: 720px) {
  .signup-flow--slotted li { min-height: auto; }
  .signup-flow--slotted strong { margin-top: 2rem; }
}

/* Motion off: everything lands seated, nothing moves. */
@media (prefers-reduced-motion: reduce) {
  html.assembly-ready [data-assemble] .crm-steps--slotted li,
  html.assembly-ready [data-assemble] .signup-flow--slotted li,
  html.assembly-ready [data-assemble] .action--slot {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .crm-steps--slotted li:hover,
  .signup-flow--slotted li:hover,
  .plan-snapshot__card--slotted:hover,
  .action--slot:hover { transform: none !important; }
  .hero-crm__stat:hover { transform: none !important; }
}

/* =================================================================
   Demo: the stat tiles lift out of their tray
   Same gesture as the app, scaled down with the rest of the demo.
   ================================================================= */
@media (hover: hover) and (pointer: fine) {
  .hero-crm__stat:hover {
    z-index: 2;
    transform: translate3d(0, -.35rem, 0) scale(1.02);
    box-shadow: .35rem .35rem 0 var(--gold-soft), 0 .7rem 1.4rem rgba(8, 18, 28, .16);
  }
}

/* =================================================================
   Product page: the same demo, sized to the screen looking at it
   -----------------------------------------------------------------
   The demo is laid out at the size the homepage gives it and then
   scaled, so it keeps the homepage demo's shape exactly instead of
   stretching into a new one.

   It is scaled to fit the *screen*, not just the column. Two limits
   apply and the smaller wins:

     - width:  the button's width rather than the column's, so the two
               edges line up. .product-start-cta insets its button by
               its own padding and border, and --demo-inset mirrors it.
     - height: one screen less the sticky header and a margin of
               breathing room -- but never less than the size the demo
               was drawn at. A short window shrinking it below that
               bought a demo that fit the screen and could not be read:
               the body text is .75rem before scaling. Past that floor
               the demo keeps its natural size and the page scrolls.

   Height used not to be a limit at all, and on a wide screen the demo
   grew past 1100px tall -- taller than the viewport, so the workspace
   it is showing off could never be seen at once. Now a wide short
   window shrinks it to fit and it sits centred in the column, which is
   why --demo-shift exists: the frame is scaled from its top-left
   corner, so the leftover width has to be halved and pushed back by
   hand rather than left to `margin: auto`.

   The height budget is carried on max-height rather than a custom
   property so that the script can read it back as a real number of
   pixels -- getComputedStyle resolves max-height's calc, and returns an
   unregistered custom property as the literal text `calc(...)`. It also
   earns its keep as a guard: if the script never runs, the box is still
   capped instead of running off the screen.

   Both --demo-scale and --demo-shift are set by the small script beside
   the markup. Without them the demo sits at its natural size in the
   top-left of a correctly proportioned box: untidy, but never broken.

   Below 900px the sidebar goes off-canvas and the demo reflows to its
   own taller shape, so the scaling is dropped there and it simply runs
   at the width it is given, exactly as it does on the homepage.
   ================================================================= */
.product-demo {
  --demo-inset: calc(clamp(.6rem, 1.2vw, 1rem) + 1px);
  width: calc(100% - 2 * var(--demo-inset));
  margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
}
@media (min-width: 901px) {
  .product-demo {
    --demo-design-w: 732px;
    --demo-design-h: 599px;
    position: relative;
    /* One screen, less the sticky header the demo would otherwise sit
       under, less a little room so it does not meet both edges -- and
       never under its own design height, which is the floor the script
       reads back off this property. */
    max-height: max(var(--demo-design-h), calc(100vh - var(--header-h) - clamp(2rem, 6vh, 4.5rem)));
    height: calc(var(--demo-design-h) * var(--demo-scale, 1));
  }
  .product-demo__frame {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--demo-design-w);
    height: var(--demo-design-h);
    transform: translateX(var(--demo-shift, 0px)) scale(var(--demo-scale, 1));
    transform-origin: top left;
  }
  /* The gold slab is divided back out of the scale, so the raised edge
     reads the same size here as it does on the homepage. */
  .product-demo .hero-crm {
    width: 100%;
    height: 100%;
    box-shadow: .78rem .78rem 0 var(--gold-soft), 0 .85rem 2.2rem rgba(8, 18, 28, .12);
  }
}
@supports (height: 100svh) {
  @media (min-width: 901px) {
    .product-demo { max-height: max(var(--demo-design-h), calc(100svh - var(--header-h) - clamp(2rem, 6vh, 4.5rem))); }
  }
}
@media (max-width: 480px) {
  .product-demo { --demo-inset: calc(.45rem + 1px); }
}

/* =================================================================
   Kirk One product lockup.

   Kirk & Co. is the company and keeps the header logo; Kirk One is
   the product. Its lockup is the parent's crown (assets/kirk-one-mark.png,
   cut from the company logo, not a new symbol) beside the product name
   set in the site's own Archivo, with an optional mono line underneath.
   The same vocabulary is in portal/css/portal.css as
   .product-wordmark--k1, so the site and the app sign the product the
   same way. Sized in em so one font-size on the lockup scales the lot.
   ================================================================= */
.product-lockup { display: inline-flex; align-items: center; gap: .72em; margin: 0; color: var(--ink); text-decoration: none; }
.product-lockup__mark { flex: none; width: auto; height: 1.9em; }
.product-lockup__text { display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.product-lockup__name { font-size: 1.32em; font-weight: 650; line-height: 1; letter-spacing: -.035em; white-space: nowrap; }
.product-lockup__sub { color: var(--gold-text); font-family: var(--font-mono); font-size: .66em; font-weight: 500; line-height: 1.2; letter-spacing: .11em; text-transform: uppercase; }
.conversion-hero__lockup { font-size: clamp(.95rem, .9rem + .2vw, 1.08rem); }

/* Product page hero: the product name is the h1, the positioning line
   sits directly under it, and the crown rides at cap height. */
.product-hero__title { grid-column: 1 / 9; min-width: 0; }
.page-hero .product-hero__name { display: flex; align-items: center; gap: .2em; max-width: none; }
.product-hero__mark { flex: none; width: auto; height: .66em; transform: translateY(-.03em); }
.product-hero__tagline { max-width: 32ch; margin: clamp(1rem, 2vw, 1.5rem) 0 0; color: var(--ink-soft); font-size: clamp(1.55rem, 1.05rem + 1.7vw, 2.7rem); font-weight: 560; line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; }
@media (max-width: 720px) {
  .product-hero__title { grid-column: 1 / 13; }
}

/* Capability category above each tool in a linked ruled list. */
.ruled-list__label { display: block; margin-bottom: .45rem; color: var(--gold-text); }

/* --- Beta promotion (BETA50) -------------------------------------
   A page quoting promo pricing sets data-promo-ends on <html>, and a
   short inline script in its <head> adds .promo-over once that moment
   has passed. The discounted figures and the offer copy (.promo-only)
   then drop out and the plain price (.promo-off) shows instead, so the
   pages stop advertising the code the moment Stripe stops accepting it. */
.promo-off { display: none; }
.promo-over .promo-only { display: none; }
.promo-over .promo-off { display: inline; }

/* The regular price, struck through beside the promo price. Sized from
   the figure it sits in, so one rule serves the display prices and the
   running copy. */
.price-was {
  margin-right: .16em;
  color: var(--muted);
  font-size: .46em;
  font-weight: 500;
  letter-spacing: -.02em;
  text-decoration: line-through;
  text-decoration-thickness: .08em;
  vertical-align: .55em;
}
.plan-snapshot__card--premium .price-was,
.pricing-card--premium .price-was { color: rgba(255,255,255,.55); }

.promo-note {
  margin: 0 0 1rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--gold-line);
  border-left: 3px solid var(--gold);
  background: var(--gold-soft);
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.55;
}
.promo-note strong { font-weight: 650; }
.promo-note code { padding: .05rem .35rem; border: 1px dashed var(--gold); background: var(--paper-bright); font-family: var(--font-mono); font-size: .85em; letter-spacing: .06em; }
.plan-snapshot .promo-note { margin: clamp(2rem,4vw,3rem) 0 0; }
html:not(.promo-over) .plan-snapshot .promo-note + .plan-snapshot__grid { margin-top: 1rem; }

/* The annual price, under the monthly one. */
.pricing-card__annual,
.plan-snapshot__annual { margin: .9rem 0 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }
/* <b>, not <strong>: every <strong> in a plan-snapshot card is the display price. */
.pricing-card__annual b,
.plan-snapshot__annual b { color: var(--ink); font-weight: 650; }
.plan-snapshot__card .plan-snapshot__annual { display: block; letter-spacing: 0; }
.pricing-card--premium .pricing-card__annual,
.plan-snapshot__card--premium .plan-snapshot__annual { color: rgba(255,255,255,.62); }
.pricing-card--premium .pricing-card__annual b,
.plan-snapshot__card--premium .plan-snapshot__annual b { color: #fff; }