/* ═══════════════════════════════════════════════════════
   PortfolioAI — Template 2
   Restrained editorial layout for a private-wealth audience.
   Quiet motion, generous whitespace, one accent.
   Light default; [data-theme="dark"] swaps tokens.
   ═══════════════════════════════════════════════════════ */

:root {
  --page:    #fcfcfb;
  --panel:   #f4f5f3;
  --card:    #ffffff;

  --text:    #17211c;
  --muted:   #5b6660;
  --faint:   #66706a;   /* 5.00:1 on --page (was #8d968f, 2.97:1) */

  --green:      #00703c;   /* sampled from the brand logo */
  --green-2:    #005c31;   /* hover, 8.15:1 with white */
  --green-tint: rgba(0, 112, 60, .07);
  --green-ring: rgba(0, 112, 60, .14);
  --green-line: rgba(0, 112, 60, .28);
  --on-green:   #ffffff;

  /* the single dark block on the page — the conversion section */
  --deep:       #003d21;
  --on-deep:    #ffffff;   /* 12.43:1 */
  --on-deep-dim:#cfe3d7;   /*  9.25:1 */
  --on-deep-acc:#7fe0ac;   /*  7.79:1 */

  --line:   rgba(23, 33, 28, .1);
  --line-2: rgba(23, 33, 28, .18);

  --shadow: 0 18px 44px -30px rgba(23, 33, 28, .3);

  --danger:      #a3392f;
  --danger-line: rgba(163, 57, 47, .34);
  --danger-bg:   rgba(163, 57, 47, .05);

  --r:    12px;
  --r-lg: 20px;
  --ease: cubic-bezier(.25, .8, .35, 1);
}

[data-theme="dark"] {
  --page:    #0e1310;
  --panel:   #151b17;
  --card:    #151b17;

  --text:    #e9efea;
  --muted:   #9aa8a0;
  --faint:   #8a978f;   /* 6.17:1 on --page (was #6d7a73, 4.18:1) */

  --green:      #4fd39a;   /* brand green lifted for dark, 9.93:1 */
  --green-2:    #6fe0ac;
  --green-tint: rgba(79, 211, 154, .1);
  --green-ring: rgba(79, 211, 154, .17);
  --green-line: rgba(79, 211, 154, .32);
  --on-green:   #06150e;

  --deep:       #04261a;
  --on-deep:    #ffffff;
  --on-deep-dim:#b9cfc3;
  --on-deep-acc:#7fe0ac;

  --line:   rgba(255, 255, 255, .1);
  --line-2: rgba(255, 255, 255, .18);

  --shadow: 0 18px 44px -30px rgba(0, 0, 0, .8);

  --danger:      #e08a80;
  --danger-line: rgba(224, 138, 128, .34);
  --danger-bg:   rgba(224, 138, 128, .07);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  background: var(--page);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 1.6; letter-spacing: -.008em;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
  transition: background-color .5s ease, color .5s ease;
}

h1, h2, h3 {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  font-weight: 500; letter-spacing: -.032em; line-height: 1.15;
}

a { color: inherit; text-decoration: none; }
svg { display: block; }
::selection { background: var(--green-tint); color: var(--text); }

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

.wrap { width: min(1140px, 100% - 3rem); margin-inline: auto; }
.wrap--narrow { width: min(760px, 100% - 2.5rem); margin-inline: auto; }

/* ── logo lockup ────────────────────────────────────── */
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand__img {
  display: block; width: auto; height: 38px;
  /* the artwork is transparent, so the dark variant swaps in below */
  transition: opacity .3s ease;
}
[data-theme="dark"] .brand__img { content: url('/assets/logo-green-dark.png'); }
.brand:hover .brand__img { opacity: .82; }
.brand--sm .brand__img { height: 30px; }

/* ── nav ────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 1.6rem;
  width: min(1140px, 100% - 3rem); margin-inline: auto;
  padding: 1.15rem 0;
}
.nav::before {
  /* full-bleed backdrop that stays inside the viewport — `inset: 0 -50vw`
     reaches past both edges and inflates the document's scroll width. */
  content: ''; position: absolute; top: 0; bottom: 0;
  left: 50%; width: 100vw; transform: translateX(-50%);
  background: color-mix(in srgb, var(--page) 86%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease, border-color .4s ease;
}
.nav.is-stuck::before { opacity: 1; border-bottom-color: var(--line); }
.nav > * { position: relative; }

.nav__links { display: flex; gap: 1.6rem; margin-left: auto; font-size: .88rem; color: var(--muted); }
.nav__links a {
  display: inline-flex; align-items: center; min-height: 44px;
  transition: color .3s ease;
}
.nav__links a:hover { color: var(--text); }

.themetoggle {
  position: relative; flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: none; color: var(--muted);
  cursor: pointer; overflow: hidden;
  transition: color .3s ease, border-color .3s ease;
}
.themetoggle:hover { color: var(--text); border-color: var(--line-2); }
.themetoggle:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.themetoggle svg { position: absolute; transition: opacity .35s ease, transform .45s var(--ease); }
.themetoggle .i-sun  { opacity: 0; transform: rotate(-60deg) scale(.5); }
.themetoggle .i-moon { opacity: 1; }
[data-theme="dark"] .themetoggle .i-sun  { opacity: 1; transform: none; }
[data-theme="dark"] .themetoggle .i-moon { opacity: 0; transform: rotate(60deg) scale(.5); }

/* ── buttons ────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .92rem 1.7rem;
  border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-size: .93rem; font-weight: 500; letter-spacing: -.012em;
  cursor: pointer; white-space: nowrap;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.btn--sm { padding: .56rem 1.15rem; font-size: .85rem; min-height: 44px; }  /* WCAG target size */
.btn--lg { padding: 1.02rem 2rem; }

.btn--solid { background: var(--green); color: var(--on-green); }
.btn--solid:hover { background: var(--green-2); }

.btn--outline { border-color: var(--line-2); color: var(--text); }
.btn--outline:hover { border-color: var(--green); color: var(--green); }

.btn__arrow { transition: transform .35s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* ── hero ───────────────────────────────────────────── */
.hero { padding: clamp(2.4rem, 6vw, 4.6rem) 0 clamp(2.2rem, 5vw, 4rem); }
.hero__grid > * { min-width: 0; }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 3.6vw, 3.2rem); align-items: center;
}

.eyebrow {
  font-size: .74rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.rule { width: 40px; height: 2px; margin: 1.4rem 0 1.8rem; background: var(--green); }

.hero__title {
  font-size: clamp(2.3rem, 4.4vw, 3.9rem);
  font-weight: 500; letter-spacing: -.038em; line-height: 1.1;
}
.hero__title b { font-weight: 500; color: var(--green); }
.hero__body { margin-top: 1.5rem; max-width: 44ch; color: var(--muted); font-size: 1.03rem; }
.hero__cta { display: flex; align-items: center; gap: .8rem; margin-top: 2.2rem; flex-wrap: wrap; }
.hero__note { margin-top: 1rem; font-size: .85rem; color: var(--faint); }

/* ── hero signup — the shortest path in ────────────── */
.quickjoin { margin-top: 2rem; max-width: 30rem; }
.quickjoin__label {
  display: block; margin-bottom: .55rem;
  font-size: .82rem; font-weight: 600; letter-spacing: -.01em; color: var(--text);
}
.quickjoin__row { display: flex; gap: .5rem; }
.quickjoin input {
  flex: 1; min-width: 0; min-height: 52px;
  padding: .9rem 1rem;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--card); color: var(--text);
  font: inherit; font-size: 1rem;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.quickjoin input::placeholder { color: var(--faint); }
.quickjoin input:hover { border-color: var(--text); }
.quickjoin input:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-ring);
}
.quickjoin .btn { flex: none; min-height: 52px; }
.quickjoin__hint { margin-top: .7rem; font-size: .84rem; color: var(--faint); }
.quickjoin__hint a { color: var(--green); border-bottom: 1px solid var(--green-line); }
.quickjoin__err:empty { display: none; }
.quickjoin__err { margin-top: .5rem; font-size: .82rem; color: var(--danger); }
.quickjoin.has-error input { border-color: var(--danger); }

.nav__cta { flex: none; }

/* the spinner lives in flow.css; the homepage needs it too */
.btn__spin {
  display: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: currentColor; border-right-color: currentColor;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn.is-loading .btn__spin { display: block; }
.btn.is-loading .btn__label { opacity: .7; }

/* ── the offer, above the fold ──────────────────────── */
.pillars {
  display: grid; gap: 1px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--line); overflow: hidden;
}
.pillar {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 1.1rem;
  padding: 1.4rem 1.5rem;
  background: var(--card);
  transition: background-color .4s ease;
}
.pillar:hover { background: var(--panel); }

.pillar b {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem; font-weight: 600; letter-spacing: -.025em;
}
.pillar b i {
  font-style: normal; font-size: .7rem; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--faint);
}
.pillar p { margin-top: .3rem; font-size: .89rem; line-height: 1.6; color: var(--muted); }

/* one restrained accent per pillar */
.pillar--ai    { --acc: #0d5c3c; --acc-bg: rgba(13, 92, 60, .08); }
.pillar--auto  { --acc: #2b6684; --acc-bg: rgba(43, 102, 132, .09); }
.pillar--build { --acc: #8a6224; --acc-bg: rgba(138, 98, 36, .1);  }
[data-theme="dark"] .pillar--ai    { --acc: #5fbf90; --acc-bg: rgba(95, 191, 144, .12); }
[data-theme="dark"] .pillar--auto  { --acc: #74b6d6; --acc-bg: rgba(116, 182, 214, .13); }
[data-theme="dark"] .pillar--build { --acc: #d3a662; --acc-bg: rgba(211, 166, 98, .13); }

/* ── the little working illustrations ───────────────── */
.ico {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--acc-bg); color: var(--acc);
  transition: background-color .4s ease;
}
.ico svg {
  width: 30px; height: 30px;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* 01 — signals arriving at a chip */
.ico .chip { opacity: .95; }
.ico .core { fill: currentColor; stroke: none; animation: corePulse 2.6s ease-in-out infinite; }
.ico .lead { opacity: .35; }
.ico .spark { fill: currentColor; stroke: none; opacity: 0; }
.ico .s1 { animation: sparkDown 2.6s ease-in-out infinite; }
.ico .s2 { animation: sparkLeft 2.6s ease-in-out infinite .65s; }
.ico .s3 { animation: sparkUp   2.6s ease-in-out infinite 1.3s; }
.ico .s4 { animation: sparkRight 2.6s ease-in-out infinite 1.95s; }
@keyframes corePulse { 50% { opacity: .45; } }
@keyframes sparkDown  { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: 1; } 55%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes sparkUp    { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: 1; } 55%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes sparkLeft  { 0% { opacity: 0; transform: translateX(0); } 25% { opacity: 1; } 55%, 100% { opacity: 0; transform: translateX(-8px); } }
@keyframes sparkRight { 0% { opacity: 0; transform: translateX(0); } 25% { opacity: 1; } 55%, 100% { opacity: 0; transform: translateX(8px); } }

/* 02 — gears turning against each other */
.ico .gear--a { transform-origin: 15px 16px; animation: spin 7s linear infinite; }
.ico .gear--b { transform-origin: 28px 28px; animation: spin 7s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 03 — a piece dropping into place */
.ico .blk { opacity: .9; }
.ico .b3 { animation: drop 3.4s var(--ease) infinite; }
.ico .spanner { opacity: 0; animation: joint 3.4s var(--ease) infinite; }
@keyframes drop {
  0%, 12%  { transform: translateY(-7px); opacity: 0; }
  32%, 80% { transform: translateY(0);    opacity: .9; }
  100%     { transform: translateY(-7px); opacity: 0; }
}
@keyframes joint { 0%, 30% { opacity: 0; } 45%, 80% { opacity: .5; } 100% { opacity: 0; } }

/* hovering a row leans into its colour */
.pillar:hover .ico { background: color-mix(in srgb, var(--acc) 16%, transparent); }

/* where that work lands */
.systemstrip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem 2rem; flex-wrap: wrap;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.systemstrip__label {
  font-size: .72rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}
.systemstrip__list {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  font-size: .92rem; color: var(--text);
}
.systemstrip__list i { font-style: normal; color: var(--green); opacity: .55; }

/* ── sections ───────────────────────────────────────── */
.section { padding: clamp(2.6rem, 5.5vw, 4.2rem) 0; }
.section + .section { padding-top: 0; }
/* a tinted band needs its own full padding, or the colour change looks like a bug */
.section--alt, .section--alt + .section, .signup + .section { padding-top: clamp(2.6rem, 5.5vw, 4.2rem); }
.divider { height: 1px; background: var(--line); }

.tag {
  display: block; font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--green);
}
.h2 { margin-top: .9rem; font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.lede { margin-top: .9rem; max-width: 52ch; color: var(--muted); }

/* service rows */
.rows { margin-top: 2.8rem; border-top: 1px solid var(--line); }
.row-item {
  display: grid; grid-template-columns: 3rem minmax(0, 15rem) minmax(0, 1fr);
  gap: 1.6rem; align-items: baseline;
  padding: 1.7rem .2rem; border-bottom: 1px solid var(--line);
}
.row-item__n { font-size: .78rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.row-item h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; }
.row-item p { font-size: .93rem; color: var(--muted); }

/* scope */
.scope {
  margin-top: 2.4rem; padding: 1.4rem 1.6rem;
  border-left: 2px solid var(--green-line);
  background: var(--green-tint);
  border-radius: 0 var(--r) var(--r) 0;
}
.scope p { font-size: .89rem; color: var(--muted); }
.scope b { color: var(--text); font-weight: 600; }

/* ── book ───────────────────────────────────────────── */
/*
 * Exactly one dark section on the page. Everything else alternates quietly
 * between page and panel, so the eye lands here first.
 */
.signup {
  background: var(--deep); color: var(--on-deep);
  padding: clamp(3rem, 6.5vw, 5rem) 0;
}
.signup .tag { color: var(--on-deep-acc); }
.signup .h2 { color: var(--on-deep); }
.signup .lede { color: var(--on-deep-dim); }
.signup .bookpick { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .16); }
.signup .bookpick__alt { color: var(--on-deep-dim); }
.signup .bookpick__alt a { color: var(--on-deep-acc); border-bottom-color: rgba(127, 224, 172, .4); }

/* quiet alternation for the rest */
.section--alt { background: var(--panel); }

.bookpick {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 1px;
  margin-top: 2.2rem;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--line); overflow: hidden;
}
.bookpick__opt {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: var(--card);
}
.bookpick__opt--lead { background: var(--card); }
.signup .bookpick__opt--lead { box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .5); }
.bookpick__len {
  font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--green);
}
.bookpick__opt b {
  margin-top: .5rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.2rem; font-weight: 600; letter-spacing: -.03em;
}
.bookpick__opt p { margin: .5rem 0 1.4rem; font-size: .92rem; color: var(--muted); }
.bookpick__opt .btn { margin-top: auto; }
.bookpick__alt { margin-top: 1.1rem; text-align: center; font-size: .85rem; color: var(--faint); }
.bookpick__alt a { color: var(--green); border-bottom: 1px solid var(--green-line); }

/* ── footer ─────────────────────────────────────────── */
.foot { padding: 2.4rem 0; border-top: 1px solid var(--line); }
.foot__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; }
.foot p { font-size: .82rem; color: var(--faint); }

/* fine print under a section lede */
.lede--fine { margin-top: .7rem; font-size: .88rem; color: var(--faint); }

/* ══ long-form legal pages ══════════════════════════════ */
.legalhead {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.8rem, 3vw, 2.6rem);
  border-bottom: 1px solid var(--line);
}
.legalhead h1 {
  margin-top: .8rem;
  font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 500; letter-spacing: -.038em;
}
.legalhead__meta {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-top: 1.2rem; font-size: .86rem; color: var(--faint);
}
.pill {
  padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: .78rem; color: var(--muted);
}

.legal { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }
.legal__grid {
  display: grid; grid-template-columns: 190px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}

/* contents rail */
.toc { position: sticky; top: 5.5rem; }
.toc__label {
  font-size: .7rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); margin-bottom: .9rem;
}
.toc nav { display: grid; gap: .1rem; }
.toc a {
  display: flex; gap: .6rem; padding: .4rem .6rem;
  border-radius: 7px; font-size: .84rem; color: var(--muted);
  transition: color .25s ease, background-color .25s ease;
}
.toc a i {
  font-style: normal; font-variant-numeric: tabular-nums;
  color: var(--faint); font-size: .78rem; transition: color .25s ease;
}
.toc a:hover { color: var(--text); background: var(--panel); }
.toc a.is-current { color: var(--green); background: var(--green-tint); }
.toc a.is-current i { color: var(--green); }

/* body copy */
.prose { max-width: 68ch; }
.prose__s { scroll-margin-top: 6rem; }
.prose__s + .prose__s { margin-top: 2.8rem; padding-top: 2.8rem; border-top: 1px solid var(--line); }
.prose h2 {
  display: flex; align-items: baseline; gap: .8rem;
  margin-bottom: 1rem;
  font-size: 1.18rem; font-weight: 600; letter-spacing: -.025em;
}
.prose h2 i {
  font-style: normal; font-size: .78rem; font-variant-numeric: tabular-nums;
  color: var(--green); letter-spacing: 0;
}
.prose p { color: var(--muted); font-size: .96rem; line-height: 1.78; }
.prose p + p { margin-top: .9rem; }
.prose b { color: var(--text); font-weight: 600; }
.prose a { color: var(--green); border-bottom: 1px solid var(--green-line); }
.prose a:hover { border-bottom-color: var(--green); }
.prose code {
  padding: .12rem .4rem; border: 1px solid var(--line); border-radius: 5px;
  background: var(--panel); font-size: .86em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* the short version */
.keybox {
  margin-bottom: 2.8rem; padding: 1.4rem 1.6rem;
  border: 1px solid var(--green-line); border-radius: var(--r-lg);
  background: var(--green-tint);
}
.keybox__title {
  font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--green); margin-bottom: .8rem;
}
.keybox ul { list-style: none; display: grid; gap: .5rem; }
.keybox li {
  position: relative; padding-left: 1.4rem;
  font-size: .92rem; line-height: 1.6; color: var(--text);
}
.keybox li::before {
  content: ''; position: absolute; left: .1rem; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--green);
}

/* term / description pairs */
.deflist { display: grid; gap: 0; margin: 1.3rem 0 0; }
.deflist > div {
  display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1.4rem;
  padding: 1rem 0; border-top: 1px solid var(--line);
}
.deflist > div:last-child { border-bottom: 1px solid var(--line); }
.deflist dt { font-size: .92rem; font-weight: 600; color: var(--text); }
.deflist dd { font-size: .93rem; line-height: 1.7; color: var(--muted); }

.callout {
  margin-top: 1.4rem; padding: .9rem 1.1rem;
  border-left: 2px solid var(--line-2); border-radius: 0 var(--r) var(--r) 0;
  background: var(--panel); font-size: .9rem;
}
.callout--warn { border-left-color: var(--green); }

.contactcard {
  display: grid; gap: .3rem; margin-top: 1.2rem; padding: 1.3rem 1.5rem;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel); font-style: normal; font-size: .93rem;
}
.contactcard b { font-weight: 600; }
.contactcard span { color: var(--muted); }
.contactcard a { color: var(--green); justify-self: start; border-bottom: 1px solid var(--green-line); }

.prose__note { margin-top: 1.4rem; font-size: .85rem; color: var(--faint); }
.prose__back { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }

.foot a { color: var(--green); }

/* ── testimonials (hidden until real ones exist) ────── */
.quotes { padding-top: 0; }
.quotes__grid { display: grid; gap: 1.1rem; margin-top: 1.6rem; }
.quote {
  margin: 0; padding: 1.6rem 1.8rem;
  border: 1px solid var(--line); border-left: 2px solid var(--green);
  border-radius: 0 var(--r-lg) var(--r-lg) 0; background: var(--card);
}
.quote blockquote {
  margin: 0; font-size: 1rem; line-height: 1.7; color: var(--text);
}
.quote blockquote::before { content: 'C'; }
.quote blockquote::after  { content: 'D'; }
.quote figcaption { margin-top: .9rem; font-size: .85rem; color: var(--faint); }

/* ── what the call covers ───────────────────────────── */
.expect { padding-top: 0; }
.expect__list { list-style: none; counter-reset: e; margin-top: 2rem; }
.expect__list li {
  counter-increment: e; position: relative;
  padding: 1.2rem 0 1.2rem 2.6rem;
  border-top: 1px solid var(--line);
}
.expect__list li:last-child { border-bottom: 1px solid var(--line); }
.expect__list li::before {
  content: counter(e, decimal-leading-zero);
  position: absolute; left: 0; top: 1.35rem;
  font-size: .76rem; color: var(--green); font-variant-numeric: tabular-nums;
}
.expect__list b {
  display: block; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .98rem; font-weight: 600; letter-spacing: -.02em;
}
.expect__list p { margin-top: .3rem; font-size: .91rem; color: var(--muted); }

/* ── pain → fix, one table instead of two lists ─────── */
.fixes { margin-top: 2.2rem; border-top: 1px solid var(--line-2); }
.fixes__head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
  padding: .8rem .2rem .5rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}
.fixes__head span:last-child { color: var(--green); }
.fix {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
  padding: 1.3rem .2rem; border-top: 1px solid var(--line);
}
.fix__pain b {
  display: block; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem; font-weight: 600; letter-spacing: -.025em;
}
.fix__pain p { margin-top: .3rem; font-size: .9rem; line-height: 1.6; color: var(--muted); }
.fix__fix {
  position: relative; padding-left: 1.5rem;
  display: flex; align-items: center;
}
.fix__fix::before {
  content: ''; position: absolute; left: 0; top: .45rem;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
}
.fix__fix p { font-size: .92rem; line-height: 1.6; color: var(--text); }

/* ── before → after ─────────────────────────────────── */
.ba {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1rem, 3vw, 2rem);
  align-items: stretch; margin-top: 2.2rem;
}
.ba__col {
  padding: clamp(1.4rem, 3vw, 1.9rem);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card);
}
.ba__col--after { border-color: var(--green-line); background: var(--green-tint); }
.ba__label {
  font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 1rem;
}
.ba__col--after .ba__label { color: var(--green); }
.ba__col ul { list-style: none; display: grid; gap: .65rem; }
.ba__col li {
  position: relative; padding-left: 1.4rem;
  font-size: .93rem; line-height: 1.5; color: var(--muted);
}
.ba__col--before li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 10px; height: 1.5px; background: var(--faint);
}
.ba__col--after li { color: var(--text); }
.ba__col--after li::before {
  content: ''; position: absolute; left: 1px; top: .38em;
  width: 9px; height: 5px;
  border-left: 1.7px solid var(--green); border-bottom: 1.7px solid var(--green);
  transform: rotate(-45deg);
}
.ba__arrow { display: grid; place-items: center; color: var(--green); }

/* ── why us ─────────────────────────────────────────── */
.whygrid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  margin-top: 2.2rem;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--line); overflow: hidden;
}
.why { padding: 1.5rem 1.6rem; background: var(--card); }
.why b {
  display: block; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.02rem; font-weight: 600; letter-spacing: -.025em; color: var(--green);
}
.why p { margin-top: .45rem; font-size: .92rem; line-height: 1.65; color: var(--muted); }

/* ── the 5-step CRM flow ────────────────────────────── */
.flow {
  list-style: none; display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; margin-top: 2.2rem;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--line); overflow: hidden;
}
.flow__step { padding: 1.4rem 1.2rem; background: var(--card); }
.flow__n {
  display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--green-tint); color: var(--green);
  font-size: .82rem; font-weight: 700; margin-bottom: .8rem;
}
.flow__step b {
  display: block; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .98rem; font-weight: 600; letter-spacing: -.02em;
}
.flow__step p { margin-top: .35rem; font-size: .86rem; line-height: 1.55; color: var(--muted); }

/* ── the assessment tick list ───────────────────────── */
.stack__intro {
  padding: 1.1rem 1.4rem .3rem;
  font-size: .9rem; font-weight: 600; color: var(--text);
}
.stack__list--ticks li { border-bottom: 0; padding: .4rem 1.4rem; }
.stack__list--ticks li:last-child { padding-bottom: 1.3rem; }
.stack__list--ticks span {
  position: relative; padding-left: 1.6rem; display: block;
  margin-top: 0; font-size: .95rem; color: var(--text);
}
.stack__list--ticks span::before {
  content: ''; position: absolute; left: 0; top: .34em;
  width: 10px; height: 6px;
  border-left: 1.9px solid var(--green); border-bottom: 1.9px solid var(--green);
  transform: rotate(-45deg);
}

/* ── security ───────────────────────────────────────── */
.seclist { margin-top: 2rem; border-top: 1px solid var(--line); }
.seclist > div {
  display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1.6rem;
  padding: 1.05rem .2rem; border-bottom: 1px solid var(--line);
}
.seclist dt { font-size: .94rem; font-weight: 600; color: var(--text); }
.seclist dd { font-size: .92rem; line-height: 1.65; color: var(--muted); }
.secnote {
  margin-top: 1.4rem; padding: 1rem 1.2rem;
  border-left: 2px solid var(--line-2); border-radius: 0 var(--r) var(--r) 0;
  background: var(--card);
  font-size: .88rem; line-height: 1.65; color: var(--muted);
}

/* ── accuracy guards ────────────────────────────────── */
.guards {
  display: grid; gap: 1px; margin-top: 2rem;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--line); overflow: hidden;
}
.guard { padding: 1.4rem 1.5rem; background: var(--card); }
.guard b {
  display: block; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem; font-weight: 600; letter-spacing: -.025em;
}
.guard p { margin-top: .4rem; font-size: .92rem; line-height: 1.65; color: var(--muted); }

/* ── value stack (the free audit) ───────────────────── */
.stack {
  margin-top: 2rem;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--card); overflow: hidden;
}
.stack__list { list-style: none; }
.stack__list li {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.05rem 1.4rem; border-bottom: 1px solid var(--line);
}
.stack__list b { display: block; font-size: .95rem; font-weight: 600; letter-spacing: -.02em; }
.stack__list span { display: block; margin-top: .18rem; font-size: .86rem; color: var(--muted); }
.stack__list em {
  flex: none; font-style: normal; font-size: .88rem; color: var(--faint);
  font-variant-numeric: tabular-nums; padding-top: .1rem;
}
.stack__total {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.15rem 1.4rem; background: var(--green-tint);
}
.stack__total span { font-size: .88rem; color: var(--muted); }
.stack__total b {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.1rem; font-weight: 700; color: var(--green); white-space: nowrap;
}
.stack__total s { color: var(--faint); font-weight: 500; margin-right: .3rem; }

/* the guarantee */
.promise {
  display: flex; gap: .9rem; align-items: flex-start;
  margin-top: 1.1rem; padding: 1.1rem 1.3rem;
  border: 1px solid rgba(127, 224, 172, .3); border-radius: var(--r);
  background: rgba(255, 255, 255, .06);
}
.promise svg { flex: none; color: var(--on-deep-acc); margin-top: .1rem; }
.promise p { font-size: .92rem; line-height: 1.6; color: var(--on-deep-dim); }
.promise b { color: var(--on-deep); font-weight: 600; }

/* ── who we are / who it is not for ─────────────────── */
.whois { padding-top: 0; }
.whois__grid {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.8rem, 4vw, 2.6rem);
  border: 1px solid var(--line); border-left: 2px solid var(--green);
  border-radius: 0 var(--r-lg) var(--r-lg) 0; background: var(--card);
}
.whois .h2 { margin-top: .7rem; font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
.whois p { margin-top: .9rem; color: var(--muted); font-size: .96rem; }
.whois__link { margin-top: 1.2rem; font-size: .92rem; }
.whois__link a {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--green); border-bottom: 1px solid var(--green-line);
}
.whois__link svg { transition: transform .35s var(--ease); }
.whois__link a:hover svg { transform: translateX(3px); }

.notfor { padding: 1.2rem 1.4rem; border-radius: var(--r); background: var(--panel); }
.notfor__label {
  font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); margin-bottom: .8rem;
}
.notfor ul { list-style: none; display: grid; gap: .6rem; }
.notfor li {
  position: relative; padding-left: 1.3rem;
  font-size: .89rem; line-height: 1.55; color: var(--muted);
}
.notfor li::before {
  content: ''; position: absolute; left: 0; top: .58em;
  width: 9px; height: 1.5px; background: var(--faint);
}

/* ── FAQ ────────────────────────────────────────────── */
.faq { margin-top: 2rem; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.15rem .2rem; cursor: pointer; list-style: none;
  font-size: 1rem; font-weight: 600; letter-spacing: -.02em; color: var(--text);
  transition: color .25s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ''; flex: none; width: 9px; height: 9px;
  border-right: 1.6px solid var(--faint); border-bottom: 1.6px solid var(--faint);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .3s var(--ease), border-color .25s ease;
}
.faq__item summary:hover { color: var(--green); }
.faq__item summary:hover::after { border-color: var(--green); }
.faq__item[open] summary { color: var(--green); }
.faq__item[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq__item p {
  padding: 0 2.5rem 1.3rem .2rem;
  font-size: .93rem; line-height: 1.7; color: var(--muted);
}

/* ── closing CTA ────────────────────────────────────── */
.closer { padding-top: 0; background: var(--panel); }
.closer__inner {
  padding: clamp(2.2rem, 5vw, 3.4rem);
  border-radius: var(--r-lg); background: var(--card);
  border: 1px solid var(--line); text-align: center;
}
.closer h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 500; letter-spacing: -.035em;
}
.closer p { margin-top: .8rem; color: var(--muted); }
.closer__cta { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }
.closer__fine { margin-top: 1.6rem; font-size: .82rem; color: var(--faint); }


/* ── /team page ─────────────────────────────────────── */
.members { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.member {
  display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 1.3rem;
  padding: 1.8rem 1.7rem; background: var(--card);
  transition: background-color .4s ease;
}
.member:hover { background: var(--panel); }
.member__av {
  display: grid; place-items: center; width: 54px; height: 54px;
  border-radius: 50%; background: var(--green-tint); color: var(--green);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem; font-weight: 600; letter-spacing: -.02em;
}
.member b {
  display: block; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem; font-weight: 600; letter-spacing: -.025em;
}
.member__role { display: block; margin-top: .1rem; font-size: .88rem; color: var(--green); }
.member__focus { margin-top: .6rem; font-size: .88rem; color: var(--text); }
.member p { font-size: .92rem; line-height: 1.7; color: var(--muted); }
.member__focus + p { margin-top: .5rem; }
/* until a name is filled in, the avatar carries a position number */
.member--unnamed .member__av {
  background: var(--panel); color: var(--faint);
  font-size: .82rem; font-variant-numeric: tabular-nums;
}
.member--unnamed b { color: var(--text); }
.member--unnamed .member__focus { color: var(--green); }

.member__link {
  display: inline-block; margin-top: .8rem; font-size: .85rem;
  color: var(--green); border-bottom: 1px solid var(--green-line);
}

.members__empty {
  padding: 2rem 1.8rem; border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  color: var(--muted); font-size: .95rem; text-align: center;
}

.teamcta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.4rem; flex-wrap: wrap;
  margin-top: 2.2rem; padding: 1.6rem 1.8rem;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel);
}
.teamcta b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.02rem; font-weight: 600; }
.teamcta p { margin-top: .25rem; font-size: .9rem; color: var(--muted); }
.teamcta__actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ── reveal — a short fade, nothing more ────────────── */
.reveal { opacity: 0; }
.reveal.is-in {
  opacity: 1;
  transition: opacity .7s ease;
  transition-delay: var(--rd, 0ms);
}

/* ── responsive ─────────────────────────────────────── */
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .systemstrip { justify-content: flex-start; }
  .legal__grid { grid-template-columns: 1fr; gap: 2rem; }
  .toc { position: static; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
  .toc nav { display: flex; flex-wrap: wrap; gap: .3rem; }
  .toc a { border: 1px solid var(--line); border-radius: 999px; padding: .35rem .8rem; }
  .whois__grid { grid-template-columns: 1fr; }
  .ba { grid-template-columns: 1fr; }
  .ba__arrow svg { transform: none; }
  .whygrid { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr 1fr; }
  .seclist > div { grid-template-columns: 1fr; gap: .3rem; }
  .fixes__head { display: none; }
  .fix { grid-template-columns: 1fr; gap: .7rem; }
  .fix__fix { padding-left: 1.3rem; }
  .row-item { grid-template-columns: 2.2rem minmax(0, 1fr); gap: 1rem; }
  .row-item p { grid-column: 2; }
  .deflist > div { grid-template-columns: 1fr; gap: .35rem; }
}
@media (max-width: 720px) {
  .wrap, .nav { width: min(1140px, 100% - 2rem); }
  .nav__links { display: none; }
  .brand__img { height: 32px; }
  .quickjoin__row { flex-direction: column; }
  .quickjoin .btn { width: 100%; }
  .flow { grid-template-columns: 1fr; }
  .hero__cta .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.35; }
  .closer__cta .btn { white-space: normal; }
  .bookpick { grid-template-columns: 1fr; }
  .bookpick__opt .btn { width: 100%; }
  .closer__cta .btn { width: 100%; }
  .stack__list li { flex-direction: column; gap: .35rem; }
  .stack__total { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .foot__inner { flex-direction: column; text-align: center; }
  .member { grid-template-columns: 1fr; gap: .9rem; }
  .members__empty {
  padding: 2rem 1.8rem; border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  color: var(--muted); font-size: .95rem; text-align: center;
}

.teamcta { flex-direction: column; align-items: flex-start; }
  .teamcta__actions { width: 100%; }
  .teamcta__actions .btn { flex: 1; }
}

/* ── reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; }
  .ico .spark, .ico .b3, .ico .spanner { opacity: .9; }
  .ico .gear--a, .ico .gear--b { animation: none; }
}

.teardown__out {
  margin-top: 26px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 14px;
  background: var(--card);
}
.teardown__label {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.teardown__list { margin: 0; padding-left: 20px; }
.teardown__list li { margin-bottom: 7px; line-height: 1.55; }
.teardown__note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--muted);
}

/* ── implementation price band ─────────────────────────────────────
   Stated plainly and early. Hiding the number costs more calls than
   the number does. */
.priceband__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 34px;
  align-items: center;
  padding: 30px 32px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
}
.priceband__fig {
  margin: 10px 0 0;
  font-size: 17px;
  color: var(--muted);
}
.priceband__fig b {
  display: block;
  font-size: clamp(34px, 5vw, 46px);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--text);
}
.priceband__terms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.priceband__terms li {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  white-space: nowrap;
}
.priceband__note {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--muted);
}

/* ── AI-native CRM product block ───────────────────────────────────
   Deliberately below the audit: it is one product, not the identity. */
.prod__offer {
  margin-top: 26px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
}
.prod__label {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
}
.prod__line { margin: 0 0 18px; font-size: 17px; line-height: 1.6; }
.prod__cta { margin: 0; }
.prod__fine { margin: 16px 0 0; font-size: 14px; color: var(--muted); }

/* ── homepage discipline cards ─────────────────────────────────────
   Same source as /team, so the two can't drift apart. */
.discs {
  margin: 24px 0 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.disc {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.disc__av {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}
.disc b { display: block; font-size: 15px; line-height: 1.3; }
.disc span:not(.disc__av) {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

@media (max-width: 860px) {
  .priceband__inner { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .discs { grid-template-columns: 1fr; }
  .teardown__out, .priceband__inner, .prod__offer { padding: 20px 18px; }
}

/* ── hero credibility strip ────────────────────────────────────────
   Absorbed the old four-card "Why PortfolioAI" section. Same four claims,
   one line each, no extra scroll. */
.creds {
  list-style: none;
  margin: 22px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 22px;
}
.creds li {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}
.creds b { color: var(--text); font-weight: 600; }

/* ── the named stack, as proof by specificity ──────────────────────── */
.stackline {
  margin-top: 22px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}
.stackline b { color: var(--text); font-weight: 600; }

/* the delivery flow heading, inside the merged teardown section */
#teardown .h3 {
  margin: 40px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.025em;
}
#teardown .fixes { margin-top: 40px; }
#teardown .lede--fine { margin-top: 1.4rem; }

/* ── value-stack rows carrying a price ─────────────────────────────
   The tick list and the priced list are the same list now, so the bold
   component name has to sit inline with its description. */
.stack__list--ticks li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2rem;
}
.stack__list--ticks span b {
  display: inline;
  font-size: inherit;
}
.stack__list--ticks em { padding-top: .16rem; }
.signup .stack__list--ticks span { color: var(--on-deep); }
.signup .stack__list--ticks span b { color: var(--on-deep); }
.signup .stack__intro { color: var(--on-deep-dim); }
.signup .stack { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .07); }
.signup .stack__list li { border-bottom-color: rgba(255, 255, 255, .12); }
.signup .stack__list em { color: var(--on-deep-dim); }
.signup .stack__list--ticks span::before {
  border-left-color: var(--on-deep-acc);
  border-bottom-color: var(--on-deep-acc);
}
.signup .stack__total { background: rgba(127, 224, 172, .12); }
.signup .stack__total span { color: var(--on-deep-dim); }
.signup .stack__total b { color: var(--on-deep-acc); }
.signup .stack__total s { color: var(--on-deep-dim); }

/* ── single booking action ─────────────────────────────────────────
   Replaced the two-option picker. One decision, one button. */
.bookone { margin-top: 1.6rem; text-align: center; }
.bookone .btn { min-width: min(100%, 22rem); justify-content: center; }
.bookone__fine {
  margin-top: .8rem;
  font-size: .88rem;
  color: var(--on-deep-dim);
}
.bookone__alt {
  margin-top: .5rem;
  font-size: .85rem;
  color: var(--on-deep-dim);
}
.bookone__alt a {
  color: var(--on-deep-acc);
  border-bottom: 1px solid rgba(127, 224, 172, .4);
}

/* ── the security detail, folded away until asked for ──────────────── */
.secmore {
  margin-top: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
}
.secmore > summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.2rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
}
.secmore > summary::-webkit-details-marker { display: none; }
.secmore > summary::before {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.8px solid var(--green);
  border-bottom: 1.8px solid var(--green);
  transform: rotate(-45deg);
  transition: transform .2s ease;
}
.secmore[open] > summary::before { transform: rotate(45deg); }
.secmore .seclist { margin: 0 1.2rem 1rem; border-top: 1px solid var(--line); }
.secmore .seclist > div:last-child { border-bottom: 0; }

@media (max-width: 720px) {
  .creds { grid-template-columns: 1fr; }
  .stack__list--ticks li { flex-wrap: wrap; gap: .3rem; }
  .stack__list--ticks em { padding-left: 1.6rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   Fixes and motion — appended last so these win on equal specificity.
   Everything here is CSS-only (the CSP forbids inline script) and every
   moving part is switched off under prefers-reduced-motion at the end.
   ═══════════════════════════════════════════════════════════════════ */

/* ── FIX · discipline cards ────────────────────────────────────────
   .disc is a flex row; the name and the focus line needed their own
   column wrapper or they sat side by side and squeezed to nothing. */
.disc { align-items: center; }
.disc__txt { min-width: 0; }
.disc__txt b {
  display: block;
  font-size: 14.5px;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.disc__txt span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

/* ── FIX · who-we-are, so the two columns end together ─────────── */
.whois__grid { align-items: start; }
.notfor { position: sticky; top: 6rem; }

/* ── FIX · hero credibility strip, full width under the grid ───── */
.creds {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 28px;
  margin: 0 0 18px;
  padding: 18px 0 0;
}
.creds li { font-size: 13px; }

/* ── FIX · before/after arrow points the way the layout reads ──── */
.ba__arrow-v { display: none; }
.ba__col--before li em { font-style: normal; font-weight: 600; color: var(--text); }

/* ── the compact CRM product strip ─────────────────────────────── */
.prodstrip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.6rem 2.4rem;
  align-items: center;
  padding: 1.9rem 2.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
}
.prodstrip .tag { margin-bottom: .5rem; display: inline-block; }
.prodstrip .h3 {
  margin: 0 0 .55rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -.025em;
}
.prodstrip p { margin: 0; font-size: .93rem; line-height: 1.65; color: var(--muted); }
.prodstrip .btn { white-space: nowrap; }

/* ═══ MOTION ═══════════════════════════════════════════════════════ */

/* reveal now rises as it fades, which reads as intent rather than lag */
.reveal { transform: translateY(16px); }
.reveal.is-in {
  transform: none;
  transition: opacity .65s cubic-bezier(.22, .61, .36, 1),
              transform .65s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--rd, 0ms);
}

/* hero headline lifts a beat ahead of everything else */
.hero__title { animation: riseIn .9s cubic-bezier(.22, .61, .36, 1) both; }
.hero__title b { animation: riseIn 1s cubic-bezier(.22, .61, .36, 1) .12s both; display: inline-block; }
.hero .eyebrow { animation: riseIn .7s cubic-bezier(.22, .61, .36, 1) both; }
.hero .rule { animation: drawRule .8s cubic-bezier(.22, .61, .36, 1) .2s both; }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes drawRule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.hero .rule { transform-origin: left center; }

/* buttons: lift, deepen, and slide the arrow out */
.btn {
  transition: transform .22s cubic-bezier(.22, .61, .36, 1),
              box-shadow .22s ease, background-color .22s ease, border-color .22s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--solid:hover { box-shadow: 0 14px 30px -14px rgba(0, 112, 60, .65); }
.btn:active { transform: translateY(0); transition-duration: .08s; }
.btn__arrow { transition: transform .25s cubic-bezier(.22, .61, .36, 1); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* cards lift on hover — one shared behaviour across every card type */
.why, .guard, .disc, .flow__step, .pillar, .prodstrip {
  transition: transform .28s cubic-bezier(.22, .61, .36, 1),
              border-color .28s ease, box-shadow .28s ease;
}
.disc:hover, .prodstrip:hover {
  transform: translateY(-3px);
  border-color: var(--green-line);
  box-shadow: var(--shadow);
}
.guard:hover, .flow__step:hover, .pillar:hover { background: var(--green-tint); }



/* the numbered step badges pop as their row arrives */
.flow__n { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease; }
.flow__step:hover .flow__n { transform: scale(1.12); }

/* the before/after arrow drifts, so the eye follows the direction */
.ba__arrow svg { animation: nudgeX 2.6s ease-in-out infinite; }
@keyframes nudgeX {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}

/* the dark band gets a very slow aurora so it doesn't read as flat */
.signup { position: relative; overflow: hidden; isolation: isolate; }
.signup::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -40%;
  background:
    radial-gradient(38% 44% at 22% 28%, rgba(127, 224, 172, .16), transparent 70%),
    radial-gradient(34% 40% at 78% 72%, rgba(127, 224, 172, .10), transparent 70%);
  animation: aurora 22s ease-in-out infinite alternate;
}
@keyframes aurora {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.12); }
}

/* value-stack rows arrive in sequence */
.stack.is-in .stack__list li { animation: rowIn .5s cubic-bezier(.22, .61, .36, 1) both; }
.stack.is-in .stack__list li:nth-child(1) { animation-delay: .06s; }
.stack.is-in .stack__list li:nth-child(2) { animation-delay: .14s; }
.stack.is-in .stack__list li:nth-child(3) { animation-delay: .22s; }
.stack.is-in .stack__list li:nth-child(4) { animation-delay: .30s; }
.stack.is-in .stack__list li:nth-child(5) { animation-delay: .38s; }
.stack.is-in .stack__total { animation: rowIn .5s cubic-bezier(.22, .61, .36, 1) .48s both; }

@keyframes rowIn {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

/* FAQ rows: the marker turns, the row tints on hover */
.faq__item { transition: background-color .2s ease, border-color .2s ease; }
.faq__item:hover { border-color: var(--green-line); }
.faq__item > summary { transition: color .2s ease; }
.faq__item[open] > summary { color: var(--green); }
.faq__item[open] > p { animation: rowIn .35s cubic-bezier(.22, .61, .36, 1) both; }
.secmore[open] .seclist { animation: rowIn .35s cubic-bezier(.22, .61, .36, 1) both; }

/* links draw their underline rather than switching it on */
.whois__link a svg { transition: transform .25s cubic-bezier(.22, .61, .36, 1); }
.whois__link a:hover svg { transform: translateX(4px); }

/* nav settles when the page scrolls */
.nav { transition: box-shadow .25s ease, backdrop-filter .25s ease; }

/* a hairline progress bar across the top — app.js already drives it */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 60;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--green), var(--on-deep-acc));
}

@media (max-width: 900px) {
  .creds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notfor { position: static; }
  .prodstrip { grid-template-columns: 1fr; }
  .prodstrip .btn { justify-self: start; }
}

@media (max-width: 720px) {
  .creds { grid-template-columns: 1fr; }
  .ba__arrow-h { display: none; }
  .ba__arrow-v { display: block; }
}

/* Motion is decoration. Anyone who has asked for less gets none of it. */
@media (prefers-reduced-motion: reduce) {
  .stack.is-in .stack__list li, .stack.is-in .stack__total,
  .stack.is-in .stack__list li, .stack.is-in .stack__total,
  .faq__item[open] > p, .secmore[open] .seclist,
  .ba__arrow svg, .signup::before {
    animation: none !important;
  }
  .reveal { transform: none; }
  .btn:hover, .disc:hover, .prodstrip:hover { transform: none; }
}

/* the discipline cards now span the whole who-we-are grid */
.whois__grid > .discs {
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 8px 0 0;
}
@media (max-width: 900px) {
  .whois__grid > .discs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .whois__grid > .discs { grid-template-columns: 1fr; }
}

/* Four across leaves each card ~150px wide, so the avatar goes above the
   text rather than beside it — the label gets the full card width. */
.whois__grid > .discs .disc {
  display: block;
  padding: 16px 16px 18px;
}
.whois__grid > .discs .disc__av { margin-bottom: 12px; }
.whois__grid > .discs .disc__txt b { font-size: 15px; }
@media (max-width: 560px) {
  .whois__grid > .discs .disc { display: flex; align-items: center; }
  .whois__grid > .discs .disc__av { margin-bottom: 0; }
}

/* ── "what happens next", under the primary button ─────────────────
   Replaced a price line that sat exactly where hesitation peaks. Three
   steps, each one smaller than the reader expects. */
.nextup {
  list-style: none;
  counter-reset: nx;
  margin: 1.1rem auto 0;
  padding: 0;
  max-width: 30rem;
  display: grid;
  gap: .5rem;
  text-align: left;
}
.nextup li {
  counter-increment: nx;
  position: relative;
  padding-left: 2rem;
  font-size: .89rem;
  line-height: 1.55;
  color: var(--on-deep-dim);
}
.nextup li::before {
  content: counter(nx);
  position: absolute;
  left: 0;
  top: -.05em;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(127, 224, 172, .45);
  color: var(--on-deep-acc);
  font-size: .7rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.nextup b { color: var(--on-deep); font-weight: 600; }

/* the number this page is really about */
.hero__title b { color: var(--green); }

.creds--who { margin: 22px 0 4px; padding-top: 18px; }

/* The hero headline is the whole 5-second proposition, so it gets to hold
   "10+ hours a month" on one line rather than breaking mid-phrase. */
.hero__title { font-size: clamp(2.15rem, 3.9vw, 3.5rem); }

/* the strip below the hero is now vendor proof only */
.systemstrip { justify-content: center; }
.systemstrip__label { text-align: center; max-width: 62ch; }

/* Let the browser even out the headline rather than forcing a break that
   only happens to look right at one width. */
.hero__title { text-wrap: balance; }

/* the credibility claims moved into who-we-are; give them the whole grid
   so each one sits on a single line instead of stacking four words deep */
.whois__grid > .creds--who {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 32px;
  margin: 4px 0 0;
  order: 1;
}
.whois__grid > .discs { order: 2; }
@media (max-width: 700px) {
  .whois__grid > .creds--who { grid-template-columns: 1fr; }
}

/* ═══ hero polish ═══════════════════════════════════════════════════
   Three fixes: the headline was breaking into four ragged lines, the
   connector chevrons were landing on top of the card titles, and the
   vendor line read as a wall of capitals. */

/* 1 · headline — two even lines, break controlled rather than balanced */
.hero__title {
  font-size: clamp(2rem, 3.05vw, 2.95rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: pretty;
  max-width: 18ch;
}
.hero__title .brk { display: none; }
@media (min-width: 900px) {
  .hero__title { max-width: none; }
  .hero__title .brk { display: inline; }
}

/* 3 · vendor line — sentence case, names picked out, one calm row */
.systemstrip { justify-content: center; padding-top: 1.2rem; }
.systemstrip__label {
  font-size: .84rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--faint);
  text-align: center;
  max-width: none;
  line-height: 1.7;
}
.systemstrip__label b { font-weight: 500; color: var(--muted); }

/* The column stops growing once .wrap hits its max width, so the headline
   must stop growing too — otherwise it re-wraps to four lines on wide screens. */
.hero__title { font-size: clamp(2rem, 3.05vw, 2.6rem); }

/* ═══ hero sculpture ════════════════════════════════════════════════
   Soft dimensional forms behind the hero only. Inline SVG so the
   gradients can read these tokens and follow the theme; the CSP blocks
   remote images anyway. Purely decorative — it never sits over the
   headline column, and every value stays light enough that body text
   keeps its contrast ratio. */
:root {
  --sc-hi:     #ffffff;
  --sc-mid:    #eaeeeb;
  --sc-lo:     #ccd6cf;
  --sc-shadow: rgba(23, 33, 28, .13);
  --sc-glow:   rgba(0, 112, 60, .055);
  --sc-glow-0: rgba(0, 112, 60, 0);
  /* the glass sweep over the hero window */
  --ui-sweep: rgba(255, 255, 255, .55);
}
:root:not([data-theme="light"]) {
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sc-hi:     rgba(255, 255, 255, .10);
    --sc-mid:    rgba(255, 255, 255, .045);
    --sc-lo:     rgba(255, 255, 255, .014);
    --sc-shadow: rgba(0, 0, 0, .45);
    --sc-glow:   rgba(127, 224, 172, .07);
    --sc-glow-0: rgba(127, 224, 172, 0);
  }
}
:root[data-theme="dark"] {
  --sc-hi:     rgba(255, 255, 255, .10);
  --sc-mid:    rgba(255, 255, 255, .045);
  --sc-lo:     rgba(255, 255, 255, .014);
  --sc-shadow: rgba(0, 0, 0, .45);
  --sc-glow:   rgba(127, 224, 172, .07);
  --sc-glow-0: rgba(127, 224, 172, 0);
  --ui-sweep: rgba(255, 255, 255, .05);
}

.hero { position: relative; isolation: isolate; overflow: hidden; }

.herobg {
  position: absolute;
  inset: -18% -10% -24% 0;
  z-index: -1;
  pointer-events: none;
  /* fade it out towards the headline so nothing ever sits behind text */
  -webkit-mask-image: linear-gradient(96deg, transparent 34%, rgba(0,0,0,.55) 44%, #000 58%, #000 100%);
          mask-image: linear-gradient(96deg, transparent 34%, rgba(0,0,0,.55) 44%, #000 58%, #000 100%);
  opacity: 0;
  animation: sculptIn 1.4s cubic-bezier(.22, .61, .36, 1) .15s forwards;
}
.herobg svg { width: 100%; height: 100%; display: block; }

@keyframes sculptIn {
  from { opacity: 0; transform: translate3d(2.5%, 1.5%, 0) scale(1.05); }
  to   { opacity: 1; transform: none; }
}

/* Below the two-column breakpoint the forms would sit under the text. */
@media (max-width: 900px) {
  .herobg { inset: -8% -10% auto -10%; height: 62%; opacity: .55; }
  .herobg { -webkit-mask-image: linear-gradient(#000 55%, transparent 100%);
                    mask-image: linear-gradient(#000 55%, transparent 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .herobg { animation: none; opacity: 1; }
}

/* ═══ the teardown: the trace ═══════════════════════════════════════
   The mechanism made visible — one record crossing four systems, with
   the named failure sitting in each gap. Replaces the service→outcome
   table, which repeated the Before→After section almost line for line. */
.trace {
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  align-items: stretch;
  gap: 0;
}

.trace__node {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .3rem;
  padding: 1.1rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  text-align: center;
  min-width: 6.5rem;
}
.trace__node span {
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.trace__node b {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: -.02em;
}

/* the gap is the point of the section, so it gets the emphasis */
.trace__gap {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .9rem 1.15rem;
  margin: .55rem .55rem;
  border-radius: var(--r);
  background: var(--danger-bg);
  border: 1px dashed var(--danger-line);
}
.trace__gap p { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--muted); }
.trace__where {
  margin-bottom: .3rem !important;
  font-size: .66rem !important;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--danger) !important;
}

.trace { position: relative; }

.tdnote {
  margin-top: 1.5rem;
  max-width: 62ch;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--muted);
}
.tdnote strong, .tdnote b { color: var(--text); }

#teardown .h3 { margin-top: 2.8rem; }

/* the section's own sculptural form, mirrored from the hero so the two
   read as one family rather than a repeated trick */
#teardown { position: relative; isolation: isolate; overflow: hidden; }
.tdbg {
  position: absolute;
  inset: -14% 46% -16% -10%;
  z-index: -1;
  pointer-events: none;
  opacity: 1;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 38%, rgba(0,0,0,.45) 62%, transparent 88%);
          mask-image: linear-gradient(90deg, #000 0%, #000 38%, rgba(0,0,0,.45) 62%, transparent 88%);
}
.tdbg svg { width: 100%; height: 100%; display: block; }

@media (max-width: 1080px) {
  .trace {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
  }
  .trace__gap { margin: 0; }
  .trace__node { text-align: left; align-items: flex-start; }
}
@media (max-width: 620px) {
  .trace { grid-template-columns: 1fr; }
  .tdbg { inset: -8% 0 auto -20%; height: 40%; opacity: .5; }
}

/* ═══ the audit: the ask moves above the detail ═════════════════════
   The button used to sit 771px into a 1074px section — below the stack
   and the guarantee. Anyone already convinced had to scroll past
   everything to act. */
.bookone--lead { margin-top: 1.8rem; margin-bottom: .4rem; }
.bookone--lead .bookone__alt { margin-top: .7rem; }

/* the stack no longer carries a price column, so the rows can breathe */
.stack__list--ticks li { justify-content: flex-start; }
.stack__total span {
  max-width: 42ch;
  line-height: 1.5;
}
.stack__total b { font-size: 1.15rem; }

.nextup { margin-top: 1.4rem; }

/* the comparison line is a sentence, not a label — give it room */
.stack__total { align-items: baseline; }
.stack__total span { max-width: none; padding-right: 1rem; }

/* ═══ the three steps, as one panel ═════════════════════════════════
   They were three centred lines stacked between the button and the
   value card — three separate small-text blocks reading as clutter.
   One bordered row reads as a single object instead. */
.nextup {
  counter-reset: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.nextup li {
  counter-increment: none;
  display: block;
  position: static;
  padding: 1.05rem 1.2rem;
  text-align: left;
  border-left: 1px solid rgba(255, 255, 255, .12);
}
.nextup li:first-child { border-left: 0; }
.nextup li::before { content: none; }

.nextup span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-bottom: .55rem;
  border-radius: 50%;
  border: 1px solid rgba(127, 224, 172, .45);
  color: var(--on-deep-acc);
  font-size: .68rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.nextup b {
  display: block;
  font-size: .93rem;
  font-weight: 600;
  color: var(--on-deep);
  letter-spacing: -.01em;
}
.nextup i {
  display: block;
  margin-top: .18rem;
  font-style: normal;
  font-size: .83rem;
  line-height: 1.45;
  color: var(--on-deep-dim);
}

/* the fallbacks now close the section instead of crowding the button */
.signup > .wrap--narrow > .bookone__alt {
  margin: 1.4rem 0 0;
  text-align: center;
}

@media (max-width: 620px) {
  .nextup { grid-template-columns: 1fr; }
  .nextup li { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
  .nextup li:first-child { border-top: 0; }
}

/* ═══ who we are: the third sculpture ═══════════════════════════════
   Rises out of the bottom-right corner — the hero enters from the right,
   the teardown from the left, so the family reads as varied rather than
   one effect repeated three times. */
#who { position: relative; isolation: isolate; overflow: hidden; }
.whobg {
  position: absolute;
  inset: -6% -8% -10% 34%;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(288deg, #000 0%, #000 46%, rgba(0,0,0,.4) 70%, transparent 92%);
          mask-image: linear-gradient(288deg, #000 0%, #000 46%, rgba(0,0,0,.4) 70%, transparent 92%);
}
.whobg svg { width: 100%; height: 100%; display: block; }

/* the card turns to glass so the forms read through it, the same
   treatment the hero's system cards use */
.whois__grid {
  background: color-mix(in srgb, var(--card) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.notfor { background: color-mix(in srgb, var(--panel) 82%, transparent); }
.whois__grid > .discs .disc {
  background: color-mix(in srgb, var(--card) 80%, transparent);
}

@media (max-width: 700px) {
  .whobg { inset: auto -14% -6% 20%; height: 46%; }
}

/* The left column runs shorter than the "not for" panel, leaving a dead
   band before the creds row. Let the panel span both rows and pull the
   creds up into the space it frees. */
@media (min-width: 861px) {
  .whois__grid > .notfor { grid-row: 1 / span 2; }
  .whois__grid > .creds--who {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: 1fr;
    gap: 7px;
    align-self: start;
    margin-top: 0;
    padding-top: 1.1rem;
  }
  .whois__grid > .discs { grid-row: 3; }
}

/* ═══ AI-native CRM: a shallow ribbon, not another corner form ══════
   This section is a short wide strip, so the composition runs across it
   rather than rising out of a corner like the other three. */
#crm-product { position: relative; isolation: isolate; overflow: hidden; }
.prodbg {
  position: absolute;
  inset: 0 -6% -30% -6%;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 4%, rgba(0,0,0,.55) 34%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 4%, rgba(0,0,0,.55) 34%, #000 100%);
}
.prodbg svg { width: 100%; height: 100%; display: block; }

/* glass, so the ribbon reads under the card */
.prodstrip {
  background: color-mix(in srgb, var(--card) 84%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* A tinted band following a plain section was losing its top padding:
   `.section + .section { padding-top: 0 }` outranks the bare `.section--alt`
   compensator, so the band started hard against the previous section. */
.section + .section--alt { padding-top: clamp(2.6rem, 5.5vw, 4.2rem); }

/* who-we-are now runs at full content width, so the columns rebalance and
   the claims read as a single row of four rather than a stacked list */
@media (min-width: 861px) {
  .whois__grid { grid-template-columns: 1.35fr .65fr; }
}
@media (min-width: 861px) {
  .whois__grid > .creds--who {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 28px;
  }
}
.creds--who li { font-size: 13.5px; color: var(--text); font-weight: 500; }

/* the sculpture sat under the old narrow card; give it the wider margin */
.whobg { inset: -6% -8% -10% 52%; }
@media (max-width: 700px) { .whobg { inset: auto -14% -6% 20%; height: 46%; } }

/* ═══ closing CTA: the fifth and only symmetric sculpture ═══════════
   Mirrored forms sweeping in from both edges to meet behind the card.
   The other four are asymmetric; this one is centred because the closing
   card is, and the symmetry reads as resolution at the end of the page. */
#start { position: relative; isolation: isolate; overflow: hidden; }
.closebg {
  position: absolute;
  inset: -14% -4% -18% -4%;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.5) 26%, transparent 42%, transparent 58%, rgba(0,0,0,.5) 74%, #000 100%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.5) 26%, transparent 42%, transparent 58%, rgba(0,0,0,.5) 74%, #000 100%);
}
.closebg svg { width: 100%; height: 100%; display: block; }

/* the card goes to glass, like the others */
.closer__inner {
  background: color-mix(in srgb, var(--card) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* The grey band was starting flush with the card: `.section + .section`
   (0,2,0) outranks a bare `.closer` (0,1,0), so the zeroed top padding
   stuck. Match the specificity to give the band real height for the forms. */
.section.closer { padding-top: clamp(2.6rem, 5.5vw, 4.2rem); }

/* the closing headline was orphaning its last word */
.closer h2 { text-wrap: balance; max-width: 22ch; margin-inline: auto; }

/* the wash of colour behind the hero */
.scl { position: absolute; inset: 0; }
.scl svg { width: 100%; height: 100%; display: block; }
.scdefs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ═══ hero facts ════════════════════════════════════════════════════
   The terms line under the buttons used to be a sentence. Three chips say
   the same thing in a glance, and they hold their shape when they wrap. */
.herofacts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  font-size: .82rem;
  color: var(--muted);
}
.herofacts li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .32rem .7rem .32rem .55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  white-space: nowrap;
}
.herofacts li::before {
  content: "";
  width: .82rem;
  height: .82rem;
  flex: none;
  border-radius: 50%;
  background: var(--green-tint) center / .5rem no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2300703c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.4 4.8 8.7 9.5 3.5'/%3E%3C/svg%3E");
}
[data-theme="dark"] .herofacts li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%234fd39a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.4 4.8 8.7 9.5 3.5'/%3E%3C/svg%3E");
}

/* the buttons and the proof line sit tighter to the chips above them */
.hero__copy .hero__cta { margin-top: 1.6rem; }

/* ═══ traction line ═════════════════════════════════════════════════
   Two facts under the hero CTA, and the same pair on the waiting-list page.
   The numbers are tokens, so they are changed in one place. */
/* Two pills rather than one sentence: the line is long enough to wrap on a
   narrow column, and a wrapped pill still looks deliberate. */
.proof {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.2rem;
  font-size: .82rem;
  color: var(--muted);
}
.proof--page { margin-top: 1.6rem; }
.proof__stat {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .34rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
}
.proof__stat b { font-weight: 600; color: var(--text); }
.proof__sep { display: none; }
/* the live dot only sits on the number that actually moves */
.proof__live {
  position: relative;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--green);
}
.proof__live::after {
  content: "";
  position: absolute;
  inset: -.28rem;
  border-radius: 50%;
  border: 1px solid var(--green);
  opacity: 0;
  animation: proofPing 2.6s ease-out infinite;
}
@keyframes proofPing {
  0%       { opacity: .6; transform: scale(.6); }
  60%, 100% { opacity: 0; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .proof__live::after { animation: none; }
}

/* ═══ hero: the CRM, running itself ═════════════════════════════════
   A miniature of the product as the hero visual — the numbers, the charts
   and the agent list all move on one shared 12s clock, and four named
   agents work across the whole hero on top of it (see .agents).

   Chart colours are the brand green stepped four ways, so the dashboard
   reads as our product rather than a stock analytics screenshot. Internal
   geometry is em-based off a 58em-wide design, so one value — the window
   font-size — scales the whole thing to its column. */
:root {
  --d1: #00703c;                    /* the brand green */
  --d2: #3f9e70;
  --d3: #6fbf99;
  --d4: #2f7fa8;
  --d-grid: rgba(23, 33, 28, .07);
}
[data-theme="dark"] {
  --d1: #4fd39a;
  --d2: #35a377;
  --d3: #237a58;
  --d4: #5aa9d6;
  --d-grid: rgba(255, 255, 255, .07);
}

/* The explicit width matters: an inline-size container sizes itself without
   looking at its contents, so a grid item with auto inline margins would
   resolve to a fit-content width of zero. */
.crmui { container-type: inline-size; width: 100%; }

.crmui__win {
  position: relative;
  width: 58em;
  max-width: 100%;
  margin-inline: auto;
  font-size: clamp(7.4px, 1.7241cqi, 11.4px);
  border-radius: 1.2em;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow), 0 2em 4em -2.4em rgba(23, 33, 28, .28);
  animation: winFloat 22s ease-in-out infinite alternate;
  will-change: transform;
}
@supports not (container-type: inline-size) {
  .crmui__win { font-size: clamp(7.4px, .95vw, 11.4px); }
}
[data-theme="dark"] .crmui__win { box-shadow: var(--shadow); }

@keyframes winFloat {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -.8em, 0); }
}

/* ── window chrome ──────────────────────────────── */
.crmui__bar {
  /* the filter menu drops out of the bar over the board below it, so the bar
     needs its own stacking context above the grid */
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .8em;
  height: 3.4em;
  padding: 0 1.3em;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.crmui__lights { display: flex; gap: .4em; }
.crmui__lights i {
  width: .55em; height: .55em;
  border-radius: 50%;
  background: var(--line-2);
}
.crmui__tab {
  font-size: 1.05em;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text);
  white-space: nowrap;
}
.crmui__chip {
  padding: .3em .7em;
  border: 1px solid var(--line);
  border-radius: .5em;
  font-size: .82em;
  color: var(--faint);
  white-space: nowrap;
}
.crmui__agent {
  display: flex;
  align-items: center;
  gap: .45em;
  margin-left: auto;
  padding: .32em .75em;
  border-radius: 999px;
  font-size: .82em;
  font-weight: 500;
  color: var(--green);
  background: var(--green-tint);
  white-space: nowrap;
}
.crmui__pulse {
  width: .5em; height: .5em;
  border-radius: 50%;
  background: currentColor;
  animation: agentPulse 1.5s ease-in-out infinite;
}
@keyframes agentPulse {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* ── the board ──────────────────────────────────── */
.crmui__grid {
  display: grid;
  grid-template-columns: 1fr 1fr .92fr;
  gap: 1.1em;
  padding: 1.3em;
  background: var(--page);
}

.dcard {
  padding: .95em 1.05em;
  border: 1px solid var(--line);
  border-radius: .85em;
  background: var(--card);
  min-width: 0;
}
.dcard__label {
  margin: 0;
  font-size: .85em;
  font-weight: 500;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dcard__head { display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.dcard__tag {
  padding: .18em .5em;
  border-radius: 999px;
  font-size: .68em;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-tint);
}

/* 1-2 · the two number tiles */
.dcard--kpi { position: relative; overflow: hidden; }
.dcard__value {
  margin: .25em 0 0;
  font-size: 1.9em;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--text);
  animation: valueTick 12s ease-out infinite;
}
.dcard__delta { margin: .15em 0 0; font-size: .76em; color: var(--faint); }
.dcard__up { color: var(--green); font-weight: 600; }
.spark {
  display: block;
  width: 100%;
  height: 3.1em;
  margin-top: .55em;
  overflow: visible;
}
.spark__line {
  fill: none;
  stroke: var(--d1);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 200;
  animation: draw 12s ease-out infinite;
}
.spark--b .spark__line { stroke: var(--d2); }
.spark__area { fill: var(--green-tint); opacity: 0; animation: fadeUp 12s ease-out infinite; }
.spark--b .spark__area { fill: color-mix(in srgb, var(--d2) 12%, transparent); }

@keyframes draw {
  0%       { stroke-dashoffset: 200; }
  28%, 92% { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: 0; }
}
@keyframes fadeUp {
  0%       { opacity: 0; }
  32%, 92% { opacity: 1; }
  100%     { opacity: 1; }
}

/* 3 · the donut */
.dcard--donut {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
}
.donut {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  margin: .6em 0;
}
.donut svg { width: 100%; max-width: 11.5em; height: auto; transform: rotate(-90deg); }
.donut__track {
  fill: none;
  stroke: var(--d-grid);
  stroke-width: 4.6;
}
.donut__seg {
  fill: none;
  stroke-width: 4.6;
  stroke-linecap: butt;
  /* r is 15.9155, so the circumference is 100 and every dash is a percent */
  stroke-dasharray: var(--len) 100;
  stroke-dashoffset: var(--start);
  animation: donutIn 12s cubic-bezier(.22, .61, .36, 1) infinite;
}
.donut__seg--1 { --len: 47; --start: 0;   stroke: var(--d1); }
.donut__seg--2 { --len: 31; --start: -47; stroke: var(--d2); }
.donut__seg--3 { --len: 19; --start: -78; stroke: var(--d4); }
@keyframes donutIn {
  0%       { stroke-dasharray: 0 100; }
  30%, 92% { stroke-dasharray: var(--len) 100; }
  100%     { stroke-dasharray: var(--len) 100; }
}
.donut__mid {
  position: absolute;
  display: grid;
  justify-items: center;
  font-size: .72em;
  color: var(--faint);
}
.donut__mid b {
  display: block;
  font-size: 2.5em;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--text);
}

.dlegend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .3em;
  font-size: .76em;
  color: var(--muted);
}
.dlegend--inline { display: flex; gap: .8em; }
.dlegend li { display: flex; align-items: center; gap: .4em; white-space: nowrap; }
.dot {
  width: .5em; height: .5em;
  border-radius: 50%;
  flex: none;
}
.dot--1 { background: var(--d1); }
.dot--2 { background: var(--d2); }
.dot--3 { background: var(--d3); }
.dot--4 { background: var(--d4); }

/* 4 · the bar chart */
.dcard--bars { grid-column: span 2; }
.bars {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: end;
  gap: .55em;
  height: 8.4em;
  margin-top: .7em;
  padding-top: .4em;
  border-bottom: 1px solid var(--line);
  /* three faint gridlines, the way a real chart marks its scale */
  background-image: repeating-linear-gradient(
    to top, transparent 0 calc(25% - 1px), var(--d-grid) calc(25% - 1px) 25%);
}
.bars__col {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .22em;
  height: 100%;
  position: relative;
}
.bars__col span {
  position: absolute;
  bottom: -1.5em;
  font-size: .68em;
  color: var(--faint);
}
.bar {
  width: .78em;
  height: var(--h);
  border-radius: .18em .18em 0 0;
  transform: scaleY(0);
  transform-origin: bottom center;
  animation: barGrow 12s cubic-bezier(.22, .61, .36, 1) infinite;
}
.bar--a { background: var(--d1); }
.bar--b { background: var(--d3); }
@keyframes barGrow {
  0%       { transform: scaleY(0); }
  26%, 92% { transform: scaleY(1); }
  100%     { transform: scaleY(1); }
}
.bars__col:nth-child(1) .bar { animation-delay: 0s; }
.bars__col:nth-child(2) .bar { animation-delay: .09s; }
.bars__col:nth-child(3) .bar { animation-delay: .18s; }
.bars__col:nth-child(4) .bar { animation-delay: .27s; }
.bars__col:nth-child(5) .bar { animation-delay: .36s; }
.bars__col:nth-child(6) .bar { animation-delay: .45s; }
.bars__col:nth-child(7) .bar { animation-delay: .54s; }
.bars__col:nth-child(8) .bar { animation-delay: .63s; }

/* ── toolbar: a search that types itself ────────── */
.crmui__search {
  display: flex;
  align-items: center;
  gap: .4em;
  width: 11em;
  padding: .35em .6em;
  border: 1px solid var(--line);
  border-radius: .5em;
  background: var(--card);
  color: var(--faint);
  font-size: .82em;
  animation: searchFocus 12s linear infinite;
}
.crmui__search svg { width: 1em; height: 1em; flex: none; }
/* the query is revealed a character at a time, the way typing looks */
.crmui__query {
  overflow: hidden;
  white-space: nowrap;
  font-weight: 500;
  color: var(--text);
  max-width: 0;
  animation: typeQuery 12s steps(9, end) infinite;
}
.crmui__caret {
  width: 1px;
  height: 1.1em;
  background: var(--green);
  opacity: 0;
  animation: caret 12s linear infinite;
}
@keyframes searchFocus {
  0%, 7.4%   { border-color: var(--line); box-shadow: 0 0 0 0 var(--green-ring); }
  8%, 21%    { border-color: var(--green-line); box-shadow: 0 0 0 .16em var(--green-ring); }
  24%, 100%  { border-color: var(--line); box-shadow: 0 0 0 0 var(--green-ring); }
}
@keyframes typeQuery {
  0%, 8%    { max-width: 0; }
  19%, 56%  { max-width: 6em; }
  58%, 100% { max-width: 0; }     /* cleared, ready for the next pass */
}
@keyframes caret {
  0%, 7%     { opacity: 0; }
  8%, 20%    { opacity: 1; }
  21%, 100%  { opacity: 0; }
}

/* the filter chip, and the menu it opens */
.crmui__chip--filter { position: relative; }
.crmui__menu {
  position: absolute;
  top: calc(100% + .5em);
  left: 0;
  display: grid;
  gap: .1em;
  width: 9.5em;
  padding: .35em;
  border: 1px solid var(--line);
  border-radius: .5em;
  background: var(--card);
  box-shadow: 0 1em 2em -.8em rgba(23, 33, 28, .4);
  opacity: 0;
  transform: translateY(-.3em) scale(.97);
  transform-origin: top left;
  animation: menuOpen 12s ease-out infinite;
}
.crmui__menu b {
  padding: .3em .45em;
  border-radius: .35em;
  font-weight: 400;
  color: var(--muted);
}
.crmui__menu .is-picked { animation: menuPick 12s linear infinite; }
@keyframes menuOpen {
  0%, 59.4%  { opacity: 0; transform: translateY(-.3em) scale(.97); }
  60.5%, 71% { opacity: 1; transform: none; }
  73%, 100%  { opacity: 0; transform: translateY(-.3em) scale(.97); }
}
@keyframes menuPick {
  0%, 64%   { background: transparent; color: var(--muted); }
  66%, 71%  { background: var(--green-tint); color: var(--green); }
  73%, 100% { background: transparent; color: var(--muted); }
}

/* who is in the workspace right now */
.crmui__who { display: flex; }
.crmui__who .who {
  width: 1.55em;
  height: 1.55em;
  margin-left: -.4em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: .12em solid var(--card);
  font-size: .62em;
  font-style: normal;
  font-weight: 700;
  color: #fff;
}
.who--1 { background: #00703c; }
.who--2 { background: #2f7fa8; }
.who--3 { background: #b0813a; }
.who--4 { background: #8a6bbf; }
/* each avatar lights when its agent clicks something */
.who--1 { animation: whoOn1 12s linear infinite; }
.who--2 { animation: whoOn2 12s linear infinite; }
.who--3 { animation: whoOn3 12s linear infinite; }
.who--4 { animation: whoOn4 12s linear infinite; }
@keyframes whoOn1 {
  0%, 7%    { box-shadow: none; }
  8%, 34%   { box-shadow: 0 0 0 .14em var(--green-ring); }
  36%, 71%  { box-shadow: none; }
  72%, 78%  { box-shadow: 0 0 0 .14em var(--green-ring); }
  80%, 100% { box-shadow: none; }
}
@keyframes whoOn2 {
  0%, 44%   { box-shadow: none; }
  45%, 54%  { box-shadow: 0 0 0 .14em rgba(47, 127, 168, .3); }
  56%, 77%  { box-shadow: none; }
  78%, 88%  { box-shadow: 0 0 0 .14em rgba(47, 127, 168, .3); }
  90%, 100% { box-shadow: none; }
}
@keyframes whoOn3 {
  0%, 16%   { box-shadow: none; }
  17%, 26%  { box-shadow: 0 0 0 .14em rgba(176, 129, 58, .3); }
  28%, 59%  { box-shadow: none; }
  60%, 72%  { box-shadow: 0 0 0 .14em rgba(176, 129, 58, .3); }
  74%, 100% { box-shadow: none; }
}
@keyframes whoOn4 {
  0%, 36%   { box-shadow: none; }
  37%, 46%  { box-shadow: 0 0 0 .14em rgba(138, 107, 191, .3); }
  48%, 87%  { box-shadow: none; }
  88%, 96%  { box-shadow: 0 0 0 .14em rgba(138, 107, 191, .3); }
  98%, 100% { box-shadow: none; }
}

/* ── the record table ───────────────────────────── */
.dcard--table { grid-column: span 2; display: flex; flex-direction: column; }
.tbl { margin-top: .5em; }
.tbl__head,
.tbl__row {
  display: grid;
  grid-template-columns: 1.35fr 1.25fr auto;
  align-items: center;
  gap: .6em;
}
.tbl__head {
  padding: 0 .5em .45em;
  border-bottom: 1px solid var(--line);
  font-size: .7em;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
}
.tbl__row {
  height: 2.2em;
  padding: 0 .5em;
  border-radius: .4em;
  font-size: .82em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.tbl__row:last-child { border-bottom: 0; }
.tbl__client {
  display: flex;
  align-items: center;
  gap: .5em;
  min-width: 0;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ava {
  width: 1.5em;
  height: 1.5em;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: .72em;
  font-style: normal;
  font-weight: 700;
  color: var(--green);
  background: var(--green-tint);
}
.ava--b { color: #2f7fa8; background: rgba(47, 127, 168, .12); }
.ava--c { color: #b0813a; background: rgba(176, 129, 58, .13); }
.ava--d { color: #8a6bbf; background: rgba(138, 107, 191, .13); }
.tbl__task {
  display: flex;
  align-items: center;
  gap: .4em;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tbl__badge {
  padding: .1em .35em;
  border-radius: .3em;
  font-size: .8em;
  font-weight: 600;
  color: var(--on-green);
  background: var(--green);
}
.tbl__status { position: relative; width: 4.6em; height: 1.5em; }
.st {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .12em;
  border-radius: 999px;
  font-size: .8em;
  font-weight: 600;
  letter-spacing: .02em;
}
.st--done   { color: var(--green); background: var(--green-tint); }
.st--queued { color: var(--faint); background: var(--panel); }
.st--working, .st--flip { opacity: 0; }
.st--working { color: #b0813a; background: rgba(176, 129, 58, .13); }
.st--flip    { color: var(--green); background: var(--green-tint); }
.st--working i {
  width: .18em; height: .18em;
  border-radius: 50%;
  background: currentColor;
  animation: dots 1.1s ease-in-out infinite;
}
.st--working i:nth-child(2) { animation-delay: .16s; }
.st--working i:nth-child(3) { animation-delay: .32s; }
@keyframes dots {
  0%, 100% { opacity: .25; transform: translateY(0); }
  40%      { opacity: 1;   transform: translateY(-.12em); }
}

/* Row B is picked up at 45%: queued → working → done, and the row holds the
   selection while the agent is on it. Row D repeats it at 78%. */
.tbl__row--b { animation: rowPick 12s linear infinite; }
.tbl__row--b .st--queued  { animation: stOut  12s linear infinite; }
.tbl__row--b .st--working { animation: stWork 12s linear infinite; }
.tbl__row--b .st--flip    { animation: stDone 12s linear infinite; }
@keyframes rowPick {
  0%, 44%   { background: transparent; }
  45%, 58%  { background: var(--green-tint); }
  61%, 100% { background: transparent; }
}
@keyframes stOut  { 0%, 44.5% { opacity: 1; } 45.5%, 100% { opacity: 0; } }
@keyframes stWork { 0%, 45% { opacity: 0; } 46%, 51% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes stDone { 0%, 51.5% { opacity: 0; } 53%, 96% { opacity: 1; } 98%, 100% { opacity: 0; } }

.tbl__row--d { animation: rowPickD 12s linear infinite; }
.tbl__row--d .st--queued  { animation: stOutD  12s linear infinite; }
.tbl__row--d .st--working { animation: stWorkD 12s linear infinite; }
.tbl__row--d .st--flip    { animation: stDoneD 12s linear infinite; }
@keyframes rowPickD {
  0%, 77%   { background: transparent; }
  78%, 92%  { background: var(--green-tint); }
  95%, 100% { background: transparent; }
}
@keyframes stOutD  { 0%, 77.5% { opacity: 1; } 78.5%, 97% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes stWorkD { 0%, 78% { opacity: 0; } 79%, 84% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes stDoneD { 0%, 84.5% { opacity: 0; } 86%, 96% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* the record that lands at the end of every pass */
.tbl__row--new { animation: rowArrive 12s ease-out infinite; }
.tbl__row--new .tbl__badge { animation: badgeIn 12s ease-out infinite; }
@keyframes rowArrive {
  0%       { background: var(--green-tint); transform: translateY(-.4em); opacity: 0; }
  4%       { background: var(--green-tint); transform: none; opacity: 1; }
  12%, 100% { background: transparent; transform: none; opacity: 1; }
}
@keyframes badgeIn {
  0%, 30%   { opacity: 1; transform: none; }
  34%, 100% { opacity: 0; transform: scale(.85); }
}

/* ── the toast an action leaves behind ──────────── */
.toast {
  position: absolute;
  right: 1.3em;
  bottom: 1.3em;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .55em .85em;
  border-radius: .6em;
  font-size: .8em;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--green-line);
  box-shadow: 0 1.2em 2.4em -1em rgba(23, 33, 28, .45);
  opacity: 0;
  transform: translateY(.6em);
  animation: toastIn 12s cubic-bezier(.22, .61, .36, 1) infinite;
}
.toast b { font-weight: 600; }
.toast__tick {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  border-radius: 50%;
  background: var(--green) center / .6em no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.4 4.8 8.7 9.5 3.5'/%3E%3C/svg%3E");
}
@keyframes toastIn {
  0%, 52%   { opacity: 0; transform: translateY(.6em); }
  54%, 66%  { opacity: 1; transform: none; }
  70%, 100% { opacity: 0; transform: translateY(.6em); }
}

/* 6 · the agents, ranked */
.rank {
  list-style: none;
  margin: .7em 0 0;
  padding: 0;
  display: grid;
  gap: .55em;
}
.rank__row {
  --d: 0s;
  display: grid;
  grid-template-columns: auto 4.6em 1fr auto;
  align-items: center;
  gap: .5em;
  padding: .3em .4em;
  border-radius: .45em;
  font-size: .82em;
  color: var(--muted);
}
.rank__row:nth-child(1) { --d: 0s; }
.rank__row:nth-child(2) { --d: 3s; }
.rank__row:nth-child(3) { --d: 6s; }
.rank__row:nth-child(4) { --d: 9s; }
.rank__dot { width: .5em; height: .5em; border-radius: 50%; }
.rank__dot--1 { background: var(--d1); }
.rank__dot--2 { background: var(--d2); }
.rank__dot--3 { background: var(--d3); }
.rank__dot--4 { background: var(--d4); }
.rank__name { white-space: nowrap; }
.rank__meter {
  height: .34em;
  border-radius: 999px;
  background: var(--d-grid);
  overflow: hidden;
}
.rank__meter i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: 999px;
  background: var(--d2);
  transform: scaleX(0);
  transform-origin: left center;
  animation: meterGrow 12s cubic-bezier(.22, .61, .36, 1) var(--d) infinite;
}
@keyframes meterGrow {
  0%       { transform: scaleX(0); }
  22%, 92% { transform: scaleX(1); }
  100%     { transform: scaleX(1); }
}
.rank__n {
  font-size: .95em;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* off screen the whole board stops compositing — see app.js */
.crmui.is-paused *,
.agents.is-paused * { animation-play-state: paused !important; }

/* ═══ the agents at work inside the board ═══════════════════════════
   Four cursors, all of them inside the window frame — the layer is clipped
   by the window's own overflow, so nothing ever wanders across the page.

   Coordinates are in em against the same 58em design as the board, so each
   agent dwells on a real element: Records on the first number tile, Notes on
   the bar chart, Billing on the donut, Review on the agent list.

   Every agent runs the same 12s clock, and the element under the cursor
   answers on that clock at exactly the moment the ring lands — the click
   percentages below are the contract between the two halves:

       Records  10%  and  55%      Notes   25%  and  70%
       Billing  17%  and  60%      Review  37%  and  82%   */
.agents {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.agent {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  gap: .3em;
  will-change: transform;
}
.agent__arrow {
  width: 1.55em;
  height: 1.75em;
  flex: none;
  color: var(--agent-c, var(--green));
  filter: drop-shadow(0 .15em .3em rgba(23, 33, 28, .35));
}
.agent__tag {
  margin-top: .75em;
  padding: .18em .5em;
  border-radius: 999px;
  font-size: .68em;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  color: #fff;
  background: var(--agent-c, var(--green));
  box-shadow: 0 .3em .8em -.4em rgba(23, 33, 28, .6);
}
.agent__ring {
  position: absolute;
  top: -.5em;
  left: -.5em;
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  border: .16em solid var(--agent-c, var(--green));
  opacity: 0;
}

/* One easing for every path: leaves slowly, arrives slowly, so the dwell on
   a target reads as the cursor settling rather than stopping dead. */
.agent--1, .agent--2, .agent--3, .agent--4 {
  animation-duration: 12s;
  animation-timing-function: cubic-bezier(.45, .05, .2, 1);
  animation-iteration-count: infinite;
}
/* The right-hand column has the frame edge and the figures on its right, so
   those two agents carry their label on the left instead — it keeps the tag
   off the numbers and stops it being clipped by the window. */
.agent--3, .agent--4 { flex-direction: row-reverse; }
.agent--3 .agent__tag, .agent--4 .agent__tag { margin-right: .1em; }

.agent--1 { --agent-c: #00703c; animation-name: agent1; }
.agent--2 { --agent-c: #2f7fa8; animation-name: agent2; }
.agent--3 { --agent-c: #b0813a; animation-name: agent3; }
.agent--4 { --agent-c: #8a6bbf; animation-name: agent4; }

.agent--1 .agent__ring { animation: ring1 12s linear infinite; }
.agent--2 .agent__ring { animation: ring2 12s linear infinite; }
.agent--3 .agent__ring { animation: ring3 12s linear infinite; }
.agent--4 .agent__ring { animation: ring4 12s linear infinite; }

/* Records — the first number tile */

/* Notes — the bar chart, dwelling on the tallest column */

/* Billing — the donut, then its legend */

/* Review — the agent list, one row then another */

/* the ring lands on the beat its agent clicks, twice a cycle */

/* ── what the board does when it is clicked ─────────
   Each element answers its own agent on the beat the ring lands:

       Records  search 8% · types to 19% · tile 1 at 32% · tile 2 at 72%
       Billing  donut 17% · filter menu 60%
       Notes    queue row B 45% · queue row D 78%
       Review   agent row 2 at 37% · agent row 4 at 88%            */
.dcard--kpi:first-child      { animation: pressRecords 12s linear infinite; }
.dcard--kpi:nth-child(2)     { animation: pressHours   12s linear infinite; }
.dcard--donut                { animation: pressBilling 12s linear infinite; }
.dcard--table                { animation: pressQueue   12s linear infinite; }
.dcard--rank                 { animation: pressReview  12s linear infinite; }

@keyframes pressRecords {
  0%, 31.4% { border-color: var(--line); box-shadow: 0 0 0 0 var(--green-ring); }
  32%       { border-color: var(--green-line); box-shadow: 0 0 0 .2em var(--green-ring); }
  39%, 100% { border-color: var(--line); box-shadow: 0 0 0 0 var(--green-ring); }
}
@keyframes pressHours {
  0%, 71.4% { border-color: var(--line); box-shadow: 0 0 0 0 var(--green-ring); }
  72%       { border-color: var(--green-line); box-shadow: 0 0 0 .2em var(--green-ring); }
  79%, 100% { border-color: var(--line); box-shadow: 0 0 0 0 var(--green-ring); }
}
@keyframes pressBilling {
  0%, 16.4% { border-color: var(--line); box-shadow: 0 0 0 0 var(--green-ring); }
  17%       { border-color: var(--green-line); box-shadow: 0 0 0 .2em var(--green-ring); }
  24%, 100% { border-color: var(--line); box-shadow: 0 0 0 0 var(--green-ring); }
}
@keyframes pressQueue {
  0%, 44.4%  { border-color: var(--line); box-shadow: 0 0 0 0 var(--green-ring); }
  45%        { border-color: var(--green-line); box-shadow: 0 0 0 .2em var(--green-ring); }
  52%, 77.4% { border-color: var(--line); box-shadow: 0 0 0 0 var(--green-ring); }
  78%        { border-color: var(--green-line); box-shadow: 0 0 0 .2em var(--green-ring); }
  85%, 100%  { border-color: var(--line); box-shadow: 0 0 0 0 var(--green-ring); }
}
@keyframes pressReview {
  0%, 36.4%  { border-color: var(--line); box-shadow: 0 0 0 0 var(--green-ring); }
  37%        { border-color: var(--green-line); box-shadow: 0 0 0 .2em var(--green-ring); }
  44%, 87.4% { border-color: var(--line); box-shadow: 0 0 0 0 var(--green-ring); }
  88%        { border-color: var(--green-line); box-shadow: 0 0 0 .2em var(--green-ring); }
  95%, 100%  { border-color: var(--line); box-shadow: 0 0 0 0 var(--green-ring); }
}

/* Billing selects the largest slice, so that slice thickens */
.donut__seg--1 { animation: donutIn 12s cubic-bezier(.22, .61, .36, 1) infinite, segLift 12s ease-out infinite; }
@keyframes segLift {
  0%, 16%   { stroke-width: 4.6; }
  17%, 26%  { stroke-width: 6; }
  29%, 100% { stroke-width: 4.6; }
}

/* the newest column takes fresh data mid-cycle */
.bars__col:nth-child(8) .bar--a {
  animation: barGrow 12s cubic-bezier(.22,.61,.36,1) .63s infinite, barFresh 12s ease-out infinite;
}
@keyframes barFresh {
  0%, 39%   { filter: none; }
  41%, 47%  { filter: brightness(1.2) saturate(1.25); }
  50%, 100% { filter: none; }
}

/* Review opens a row at a time */
.rank__row { animation: none; }
.rank__row:nth-child(2) { animation: rowOpenA 12s linear infinite; }
.rank__row:nth-child(4) { animation: rowOpenB 12s linear infinite; }
@keyframes rowOpenA {
  0%, 36%   { background: transparent; }
  37%, 47%  { background: var(--green-tint); }
  50%, 100% { background: transparent; }
}
@keyframes rowOpenB {
  0%, 87%   { background: transparent; }
  88%, 96%  { background: var(--green-tint); }
  98%, 100% { background: transparent; }
}

/* Both tiles re-count when their agent clicks: the old figure lifts out and
   the new one drops in, which is what a live number looks like. */
.dcard__value { position: relative; display: block; }
.dcard__value .v { display: block; }
.dcard__value .v--b { position: absolute; inset: 0; }
.dcard--kpi:first-child  .v--a { animation: numOut  12s cubic-bezier(.3,.7,.3,1) infinite; }
.dcard--kpi:first-child  .v--b { animation: numIn   12s cubic-bezier(.3,.7,.3,1) infinite; }
.dcard--kpi:nth-child(2) .v--a { animation: numOutB 12s cubic-bezier(.3,.7,.3,1) infinite; }
.dcard--kpi:nth-child(2) .v--b { animation: numInB  12s cubic-bezier(.3,.7,.3,1) infinite; }
@keyframes numOut {
  0%, 31.5% { opacity: 1; transform: none; }
  34%, 100% { opacity: 0; transform: translateY(-.5em); }
}
@keyframes numIn {
  0%, 31.5% { opacity: 0; transform: translateY(.5em); }
  34%, 100% { opacity: 1; transform: none; }
}
@keyframes numOutB {
  0%, 71.5% { opacity: 1; transform: none; }
  74%, 100% { opacity: 0; transform: translateY(-.5em); }
}
@keyframes numInB {
  0%, 71.5% { opacity: 0; transform: translateY(.5em); }
  74%, 100% { opacity: 1; transform: none; }
}

/* ── where each agent goes ──────────────────────── */

/* Records — the search field, then each number tile in turn */
@keyframes agent1 {
  0%   { transform: translate3d(15em, 6em, 0); }
  8%   { transform: translate3d(19em, 1.7em, 0); }
  20%  { transform: translate3d(19em, 1.7em, 0); }
  32%  { transform: translate3d(7em, 9.2em, 0); }
  40%  { transform: translate3d(7em, 9.2em, 0); }
  56%  { transform: translate3d(13em, 12.4em, 0); }
  72%  { transform: translate3d(27em, 9em, 0); }
  80%  { transform: translate3d(27em, 9em, 0); }
  92%  { transform: translate3d(20em, 12em, 0); }
  100% { transform: translate3d(15em, 6em, 0); }
}

/* Notes — the client queue: takes one row, then another */
@keyframes agent2 {
  0%   { transform: translate3d(26em, 33em, 0); }
  22%  { transform: translate3d(30em, 35.6em, 0); }
  45%  { transform: translate3d(34em, 37.8em, 0); }
  57%  { transform: translate3d(34em, 37.8em, 0); }
  66%  { transform: translate3d(29em, 40em, 0); }
  78%  { transform: translate3d(34em, 42em, 0); }
  90%  { transform: translate3d(34em, 42em, 0); }
  100% { transform: translate3d(26em, 33em, 0); }
}

/* Billing — the donut, then up to the filter menu and back */
@keyframes agent3 {
  0%   { transform: translate3d(44em, 20em, 0); }
  17%  { transform: translate3d(47em, 12.8em, 0); }
  27%  { transform: translate3d(47em, 12.8em, 0); }
  42%  { transform: translate3d(44.6em, 26.4em, 0); }
  60%  { transform: translate3d(27.6em, 1.9em, 0); }
  72%  { transform: translate3d(27.6em, 1.9em, 0); }
  88%  { transform: translate3d(46em, 17em, 0); }
  100% { transform: translate3d(44em, 20em, 0); }
}

/* Review — the agent list */
@keyframes agent4 {
  0%   { transform: translate3d(42em, 33em, 0); }
  24%  { transform: translate3d(44em, 35em, 0); }
  37%  { transform: translate3d(46em, 36.1em, 0); }
  47%  { transform: translate3d(46em, 36.1em, 0); }
  62%  { transform: translate3d(49em, 38.4em, 0); }
  78%  { transform: translate3d(46.5em, 39.4em, 0); }
  88%  { transform: translate3d(46em, 40.4em, 0); }
  96%  { transform: translate3d(46em, 40.4em, 0); }
  100% { transform: translate3d(42em, 33em, 0); }
}

/* the ring lands on the beat its agent clicks */
@keyframes ring1 {
  0%, 7.5%   { opacity: 0; transform: scale(.35); }
  8%         { opacity: .65; transform: scale(.35); }
  14%, 31.5% { opacity: 0; transform: scale(1.4); }
  31.6%      { opacity: 0; transform: scale(.35); }
  32%        { opacity: .65; transform: scale(.35); }
  38%, 71.5% { opacity: 0; transform: scale(1.4); }
  71.6%      { opacity: 0; transform: scale(.35); }
  72%        { opacity: .65; transform: scale(.35); }
  78%, 100%  { opacity: 0; transform: scale(1.4); }
}
@keyframes ring2 {
  0%, 44.5%  { opacity: 0; transform: scale(.35); }
  45%        { opacity: .65; transform: scale(.35); }
  51%, 77.5% { opacity: 0; transform: scale(1.4); }
  77.6%      { opacity: 0; transform: scale(.35); }
  78%        { opacity: .65; transform: scale(.35); }
  84%, 100%  { opacity: 0; transform: scale(1.4); }
}
@keyframes ring3 {
  0%, 16.5%  { opacity: 0; transform: scale(.35); }
  17%        { opacity: .65; transform: scale(.35); }
  23%, 59.5% { opacity: 0; transform: scale(1.4); }
  59.6%      { opacity: 0; transform: scale(.35); }
  60%        { opacity: .65; transform: scale(.35); }
  66%, 100%  { opacity: 0; transform: scale(1.4); }
}
@keyframes ring4 {
  0%, 36.5%  { opacity: 0; transform: scale(.35); }
  37%        { opacity: .65; transform: scale(.35); }
  43%, 87.5% { opacity: 0; transform: scale(1.4); }
  87.6%      { opacity: 0; transform: scale(.35); }
  88%        { opacity: .65; transform: scale(.35); }
  94%, 100%  { opacity: 0; transform: scale(1.4); }
}

/* Stacked under the copy the board has the full column. The agents scale with
   it, so they carry on working. */
@media (max-width: 900px) {
  .crmui { max-width: 40rem; margin-inline: auto; }
}
/* Below this the board reflows to two columns, and the agents' waypoints —
   which are coordinates in the three-column layout — would point at empty
   space. They stand down rather than gesture at nothing. */
@media (max-width: 560px) {
  .agents { display: none; }
  .crmui__grid { grid-template-columns: 1fr 1fr; }
  .dcard--donut { grid-row: auto; grid-column: span 2; }
  .dcard--bars,   .dcard--rank { grid-column: span 2; }
  .crmui__chip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .crmui, .crmui * { animation: none !important; will-change: auto; }
  .agents, .toast, .crmui__menu, .crmui__caret { display: none; }
  .bar { transform: scaleY(1); }
  .rank__meter i { transform: scaleX(1); }
  .spark__line,   .spark__area,   .dcard { box-shadow: none; }
  .rank__row:nth-child(2) { background: var(--green-tint); }
  .st--queued, .st--working { opacity: 0; }
  .st--flip { opacity: 1; }
  .crmui__query { max-width: 6em; }
  .dcard__value .v--a { opacity: 0; }
  .dcard__value .v--b { opacity: 1; }
}

/* ═══ section sculpture drift ═══════════════════════════════════════
   The section sculptures are single SVGs, so the whole container drifts
   as one composited layer rather than being split per form. */
.tdbg    { animation: drift3 34s ease-in-out infinite alternate; will-change: transform; }
.whobg   { animation: drift1 29s ease-in-out infinite alternate; will-change: transform; }
.prodbg  { animation: drift4 25s ease-in-out infinite alternate; will-change: transform; }
.closebg { animation: drift2 37s ease-in-out infinite alternate; will-change: transform; }

@keyframes drift1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-1.1%, 1.6%, 0) scale(1.03); }
}
@keyframes drift2 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(1.8%, -2.2%, 0) scale(1.05); }
}
@keyframes drift3 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(1%, 1.8%, 0) scale(.975); }
}
@keyframes drift4 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-1.6%, -1.2%, 0) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .tdbg, .whobg, .prodbg, .closebg { animation: none !important; will-change: auto; }
}

/* ═══ hero copy — UI upgrade ════════════════════════════════════════
   The left column carries the whole proposition, so it gets a clearer
   vertical rhythm: the eyebrow becomes a badge, the number in the
   headline sits on a drawn accent band, and the chips and proof pills
   share one height. Presentation only — no markup or copy changes. */

/* 1 · eyebrow → a badge, so the qualifier reads as a label not a stray line */
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .34rem .78rem .34rem .62rem;
  border: 1px solid var(--green-ring);
  border-radius: 999px;
  background: var(--green-tint);
  color: var(--green);
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .13em;
}
.hero .eyebrow::before {
  content: "";
  width: .42rem;
  height: .42rem;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 .18rem var(--green-tint);
}

/* 2 · rule → a tapered accent mark rather than a plain divider */
.hero .rule {
  width: 56px;
  height: 3px;
  margin: 1.15rem 0 1.35rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green) 0%, var(--green) 45%, var(--green-line) 100%);
}

/* 3 · headline — a touch larger, and the number rides a drawn band so the
       one figure the page is about is the first thing the eye lands on */
.hero__title {
  font-size: clamp(2.05rem, 3.35vw, 2.95rem);
  line-height: 1.06;
  letter-spacing: -.036em;
}
.hero__title b {
  position: relative;
  z-index: 0;
  padding: 0 .1em;
}
.hero__title b::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: .02em;
  height: .38em;
  border-radius: .12em;
  background: linear-gradient(90deg, var(--green-tint), var(--green-ring));
  transform: scaleX(0);
  transform-origin: left center;
  animation: heroBand .85s cubic-bezier(.22, .61, .36, 1) .5s forwards;
}
@keyframes heroBand {
  to { transform: scaleX(1); }
}

/* 4 · body copy — measured against the headline above it */
.hero__body {
  margin-top: 1.15rem;
  max-width: 46ch;
  font-size: 1.05rem;
  line-height: 1.65;
}

/* 5 · chips and proof pills — one shared height, and the chips answer to hover */
.hero__copy .herofacts { margin-top: 1.6rem; gap: .5rem; }
.hero__copy .herofacts li,
.hero__copy .proof__stat {
  min-height: 30px;
  padding-block: 0;
  align-items: center;
  box-shadow: 0 1px 2px -1px var(--sc-shadow);
  transition: border-color .25s var(--ease),
              transform .25s var(--ease),
              box-shadow .25s var(--ease);
}
.hero__copy .herofacts li:hover {
  border-color: var(--green-ring);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -12px var(--sc-shadow);
}

/* 6 · the primary action carries the only glow on the page */
.hero__cta .btn--solid {
  box-shadow: 0 10px 26px -14px var(--green-line);
  transition: transform .25s var(--ease),
              box-shadow .3s var(--ease),
              background-color .25s var(--ease);
}
.hero__cta .btn--solid:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px -14px var(--green-line);
}

/* 7 · the proof line sits a step further down than the chips */
.hero__copy .proof { margin-top: 1.35rem; }

@media (max-width: 640px) {
  .hero .eyebrow { font-size: .66rem; letter-spacing: .11em; }
  .hero__body { font-size: 1rem; }
  .hero__copy .herofacts li,
  .hero__copy .proof__stat { min-height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__title b::before { animation: none; transform: scaleX(1); }
  .hero__copy .herofacts li,
  .hero__cta .btn--solid { transition: none; }
}

/* ═══ hero copy — refinement pass ═══════════════════════════════════
   The block above turned the left column into badge → accent → headline →
   body → chips → button → proof. This pass tunes it: the headline gets the
   optical weight it deserves, the figure the page is named after reads as a
   marked phrase rather than a shaded box, and the chip row and the proof row
   become one family so the column ends on a single scale. Presentation only. */

/* 1 · badge — finer type, a real surface, and the dot pulses like the proof
       dot below it so the two live signals on the column agree */
.hero .eyebrow {
  padding: .36rem .8rem .36rem .64rem;
  background:
    linear-gradient(120deg, var(--green-tint), transparent 68%),
    var(--card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 2px -1px var(--sc-shadow);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.5;
}
[data-theme="dark"] .hero .eyebrow {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px -1px var(--sc-shadow);
}
.hero .eyebrow::before {
  width: .4rem;
  height: .4rem;
  box-shadow: 0 0 0 .16rem var(--green-tint), 0 0 .5rem var(--green-line);
}

/* 2 · accent mark — shorter and quieter; the badge already opens the column,
       so this only has to separate it from the headline */
.hero .rule {
  width: 44px;
  height: 2px;
  margin: 1.05rem 0 1.2rem;
  background: linear-gradient(90deg, var(--green), var(--green-line) 78%, transparent);
}

/* 3 · headline — the largest step on the page, set tight, with the ascender
       line pulled flush left so it aligns with the badge and the body copy */
.hero__title {
  font-size: clamp(2.15rem, 3.6vw, 3.15rem);
  line-height: 1.04;
  letter-spacing: -.042em;
  text-wrap: pretty;
  text-indent: -.02em;
}

/* the marked phrase: a soft tint sweep behind it and a drawn baseline under
   it, both growing from the left on one delay so it reads as one gesture */
.hero__title b {
  padding: 0 .12em;
  color: var(--green);
}
.hero__title b::before {
  bottom: .06em;
  height: .34em;
  border-radius: .1em .28em .28em .1em;
  background: linear-gradient(95deg, var(--green-ring), var(--green-tint) 85%, transparent);
}
.hero__title b::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: .04em;
  right: .04em;
  bottom: .02em;
  height: 2px;
  border-radius: 2px;
  background: var(--green-line);
  transform: scaleX(0);
  transform-origin: left center;
  animation: heroBand .9s cubic-bezier(.22, .61, .36, 1) .62s forwards;
}

/* 4 · body copy — one clear step down from the headline, measured so it ends
       above the chip row rather than running past it */
.hero__body {
  margin-top: 1.2rem;
  max-width: 44ch;
  font-size: 1.04rem;
  line-height: 1.62;
  letter-spacing: -.006em;
}

/* 5 · chips and proof pills — one family: same height, same radius, same
       lift on hover, so the bottom of the column reads as a single band */
.hero__copy .herofacts { margin-top: 1.5rem; gap: .45rem; }
.hero__copy .proof { margin-top: 1.1rem; gap: .45rem; }
.hero__copy .herofacts li,
.hero__copy .proof__stat {
  min-height: 31px;
  padding-inline: .72rem;
  font-size: .805rem;
  border-color: var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 2px -1px var(--sc-shadow);
}
[data-theme="dark"] .hero__copy .herofacts li,
[data-theme="dark"] .hero__copy .proof__stat {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 2px -1px var(--sc-shadow);
}
.hero__copy .proof__stat {
  transition: border-color .25s var(--ease),
              transform .25s var(--ease),
              box-shadow .25s var(--ease);
}
.hero__copy .herofacts li:hover,
.hero__copy .proof__stat:hover {
  border-color: var(--green-ring);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -14px var(--sc-shadow);
}

/* 6 · the one action — sits a clear step below the chips and keeps the only
       glow on the column */
.hero__copy .hero__cta { margin-top: 1.75rem; }

@media (max-width: 900px) {
  /* on one column the copy is the whole first screen, so it gets a little
     more air and a wider measure */
  .hero__body { max-width: 52ch; }
}

@media (max-width: 640px) {
  .hero .rule { margin: .9rem 0 1.05rem; }
  .hero__title { font-size: clamp(1.95rem, 8.4vw, 2.4rem); letter-spacing: -.036em; }
  .hero__copy .herofacts li,
  .hero__copy .proof__stat { min-height: 29px; font-size: .78rem; }
  .hero__copy .hero__cta { margin-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__title b::after { animation: none; transform: scaleX(1); }
  .hero__copy .proof__stat { transition: none; }
}

/* the marked phrase: no band, no underline — the green weight alone */
.hero__title b::before,
.hero__title b::after { content: none; display: none; animation: none; }
.hero__title b { padding: 0; }

/* ═══ CTA trim — layout follow-ups ══════════════════════════════════
   The page now carries three buttons: the nav, and the hero pair (waiting
   list + book a meeting). The two containers that used to hold a button need
   their spacing back, or they keep the hole the button left behind. */

/* the product strip was a two-column grid whose right track held the button;
   with the button gone the empty track still charged its 2.4rem column gap */
.prodstrip { grid-template-columns: minmax(0, 1fr); }

/* the closing section's fine print used to sit under the button, so it now
   needs the space the button block was providing */
.closer__fine { margin-top: 2rem; }

/* the hero pair — the outline button matches the solid one's height and only
   the primary keeps a glow, so the two read as one action and one alternative */
.hero__cta .btn--outline {
  border-color: var(--line-2);
  transition: border-color .25s var(--ease),
              transform .25s var(--ease),
              background-color .25s var(--ease);
}
.hero__cta .btn--outline:hover {
  border-color: var(--green-ring);
  background: var(--green-tint);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .hero__cta .btn--outline { transition: none; }
}

/* ═══ hero: one action ══════════════════════════════════════════════
   The hero carried a solid "waiting list" button and an outlined "book"
   button, which pointed the loudest element on the page at the action we do
   not want and split attention between the two. It is one button now, and the
   waiting list survives as a quiet text alternative underneath — available to
   anyone who wants it, competing with nothing. */

.hero__cta { align-items: baseline; gap: .9rem 1.1rem; }

.hero__alt {
  font-size: .84rem;
  color: var(--faint);
}
.hero__alt a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 1px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.hero__alt a:hover {
  color: var(--green);
  border-color: var(--green-ring);
}

/* the close carries the ask again, so the fine print goes back to sitting
   under a button rather than standing in for one */
.closer__fine { margin-top: 1.4rem; }

@media (max-width: 640px) {
  /* stacked, the alternative reads as its own line rather than a tail */
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__alt { text-align: center; }
}

/* ═══ the audit section's trust line ════════════════════════════════
   The answer to "you're new, why should I trust you?" used to sit in the FAQ,
   seven sections below the place where that question actually gets asked. It
   now runs directly under the guarantee and above the button, set quieter than
   body copy so it reads as an aside rather than another claim. */
.trustline {
  max-width: 58ch;
  margin: 1.5rem auto 0;
  font-size: .88rem;
  line-height: 1.65;
  color: var(--faint);
  text-align: center;
}

@media (max-width: 640px) {
  .trustline { font-size: .85rem; text-align: left; }
}

/* ═══ one ask ═══════════════════════════════════════════════════════
   The hero's waiting-list line is gone, so the CTA row holds a single button
   again and no longer needs baseline alignment or a stacked mobile case. */
.hero__cta { align-items: center; gap: .8rem; }
.hero__alt { display: none; }

@media (max-width: 640px) {
  .hero__cta { flex-direction: row; }
}


/* ═══ nav on small screens ══════════════════════════════════════════
   The right-hand group was pushed over by `margin-left: auto` on .nav__links,
   and those links are display:none below 720px — so the toggle and the button
   collapsed back against the logo and left the right half of the bar empty.
   The push moves onto the toggle instead, which is the first item of that
   group at every width. */
@media (max-width: 720px) {
  .nav {
    gap: .75rem;
    padding: .85rem 0;
  }
  /* whichever of these comes first takes over the push from .nav__links */
  .nav .themetoggle { margin-left: auto; }
  .nav__links + .themetoggle { margin-left: auto; }
  .nav__cta { margin-left: 0; }
}

/* Narrow phones: the bar is logo + toggle + one button, and the button is the
   only thing that may not shrink, so the logo gives up the room. Padding
   tightens but the 44px tap target stays. */
@media (max-width: 420px) {
  .nav { gap: .5rem; }
  .brand__img { height: 28px; }
  .nav__cta.btn--sm {
    padding-inline: .85rem;
    font-size: .8rem;
    letter-spacing: -.01em;
    white-space: nowrap;
  }
}

/* Very narrow: the logo keeps shrinking so the ask never wraps or clips. */
@media (max-width: 340px) {
  .brand__img { height: 24px; }
  .nav__cta.btn--sm { padding-inline: .7rem; font-size: .76rem; }
}

/* ═══ the nav actually sticks now ═══════════════════════════════════
   .nav has had `position: sticky` all along, and it was being cancelled by
   `overflow-x: hidden` on html and body: an ancestor with a clipping overflow
   becomes the scroll container a sticky child sticks to, so the header stuck
   to the page rather than to the viewport and scrolled straight off the top.

   `overflow-x: clip` clips exactly the same horizontal spill without creating
   a scroll container, so sticky keeps working. The @supports guard leaves the
   old `hidden` in place on browsers that don't know `clip` (Safari below 16),
   where the header simply scrolls as it did before. */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

/* Sticky also needs the header not to be inside a transformed or contained
   ancestor, and it needs a stacking context above the page's own layers. */
.nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 60;
}

/* ═══ nav glass ═════════════════════════════════════════════════════
   The bar read as a near-solid panel (86% of the page colour). On Apple
   hardware the expected treatment is vibrancy: let the page show through and
   do the work with blur and saturation instead of opacity. Saturating behind
   the blur is what keeps colour alive under translucency in AppKit and UIKit,
   and it is the part people register as "native" rather than "washed out". */
.nav::before {
  /* Fallback first, for engines without color-mix (Safari before 16.2): the
     same tint written literally, so those users get translucency too. */
  background: rgba(252, 252, 251, .62);
  background: color-mix(in srgb, var(--page) 62%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
}
[data-theme="dark"] .nav::before {
  background: rgba(14, 19, 16, .58);
  background: color-mix(in srgb, var(--page) 58%, transparent);
}

/* A hairline rather than a border: at this opacity a full-strength line is
   the heaviest thing on the bar. */
.nav.is-stuck::before {
  opacity: 1;
  border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent);
  box-shadow: 0 1px 12px -8px var(--sc-shadow);
}

/* Where the browser cannot blur, translucency alone would let text collide
   with whatever scrolls under it, so those users keep an opaque bar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav::before { background: var(--page); }
  [data-theme="dark"] .nav::before { background: var(--page); }
}