/* Marketing site stylesheet (docs/spec/11 ST-; design: docs/design/marketing-site/).
   Hand-authored from the D7-signed-off prototype: the palette, radii, shadows and
   type scale are the handoff's, transcribed to classes because site pages ship a
   strict CSP with no inline styles (ST-1.5). Derived colors carry hex fallbacks
   for browsers without color-mix (Safari 15); color-mix overrides them where
   supported so the derivations track the base palette exactly as designed. */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/figtree-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/poppins-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/poppins-500-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/poppins-600-latin.woff2") format("woff2");
}

:root {
  --fig: "Figtree", "Helvetica Neue", sans-serif;
  --pop: "Poppins", var(--fig);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --page: #ffffff;
  --ink: #17211e;
  --ts: #4e5f5a;
  /* Tertiary darkened from the handoff's #8a968f (3.1:1 on white) to meet
     WCAG AA at small sizes: 5.2:1 on white, 4.6:1 on the band. */
  --tt: #63706a;
  --card: #ffffff;
  --green: #1f6b58;
  --gold: #f5b939;
  --pink: #e8734a;
  /* Derived shades: fallback literals first, color-mix where supported. */
  --green-d: #1a5949;
  --green-t: #e5eeeb;
  --gold-d: #7e5e17; /* deepened for WCAG AA as pill/tag text on the gold tint */
  --gold-t: #fcf1d9;
  --gold-s: #c4922b;
  --pink-d: #9c4a2d;
  --pink-t: #fbe9e2;
  --band: #f2f3f3;
  --line: #e2e4e3;
  --e2: 0 2px 10px rgba(19, 42, 67, 0.08);
  --e3: 0 16px 40px rgba(19, 42, 67, 0.13);
  --edemo: 0 22px 48px rgba(23, 33, 30, 0.14);
}
@supports (color: color-mix(in oklab, red, white)) {
  :root {
    --green-d: color-mix(in oklab, var(--green), black 18%);
    --green-t: color-mix(in oklab, var(--green) 12%, white);
    /* 50%, not the handoff's 38%: as text on the gold tint the 38% mix sat
       at ~3.8:1, under WCAG AA (matches the darkened fallback above). */
    --gold-d: color-mix(in oklab, var(--gold), black 50%);
    --gold-t: color-mix(in oklab, var(--gold) 16%, white);
    --gold-s: color-mix(in oklab, var(--gold), black 22%);
    --pink-d: color-mix(in oklab, var(--pink), black 32%);
    --pink-t: color-mix(in oklab, var(--pink) 14%, white);
    --band: color-mix(in oklab, var(--ink) 5%, var(--page));
    --line: color-mix(in oklab, var(--ink) 11%, var(--page));
  }
}

/* ---------- base ---------- */

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--fig);
}
img {
  max-width: 100%;
}
a {
  color: inherit;
}
h1,
h2,
h3,
p {
  margin: 0;
}
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  z-index: 50;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* ---------- keyframes ---------- */

@keyframes fdUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fdIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fdDot {
  0%,
  60%,
  100% {
    opacity: 0.25;
  }
  30% {
    opacity: 1;
  }
}
@keyframes fdGrow {
  from {
    transform: scaleY(0.08);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes fdPing {
  0% {
    box-shadow: 0 0 0 0 rgba(31, 107, 88, 0.45);
  }
  100% {
    box-shadow: 0 0 0 9px transparent;
  }
}
@keyframes fdNudge {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(5px, 5px);
  }
}

/* Entrance animation system: no-JS pages stay fully visible and static; the
   nonce'd helper adds .js on <html> and .in-view per [data-anim] section as
   it scrolls in. Delay utilities (.d2 = 0.2s ...) replace the prototype's
   per-element inline delays. */
html.js [data-anim] .au,
html.js [data-anim] .ag {
  opacity: 0;
}
html.js [data-anim].in-view .au {
  animation: fdUp 0.5s ease both;
}
html.js [data-anim].in-view .ai {
  animation: fdIn 0.6s ease both;
}
html.js [data-anim] .ai {
  opacity: 0;
}
html.js [data-anim].in-view .ag {
  animation: fdGrow 0.6s ease both;
  opacity: 1;
  transform-origin: bottom;
}
.d1 { animation-delay: 0.1s !important; }
.d2 { animation-delay: 0.2s !important; }
.d3 { animation-delay: 0.3s !important; }
.d4 { animation-delay: 0.45s !important; }
.d5 { animation-delay: 0.55s !important; }
.d7 { animation-delay: 0.7s !important; }
.d8 { animation-delay: 0.8s !important; }
.d10 { animation-delay: 1s !important; }
.d11 { animation-delay: 1.1s !important; }
.d14 { animation-delay: 1.4s !important; }
.d15 { animation-delay: 1.5s !important; }
.d18 { animation-delay: 1.8s !important; }
.d19 { animation-delay: 1.9s !important; }
.d21 { animation-delay: 2.1s !important; }
.d23 { animation-delay: 2.3s !important; }
.d26 { animation-delay: 2.6s !important; }
.d27 { animation-delay: 2.7s !important; }
.d29 { animation-delay: 2.9s !important; }
.d31 { animation-delay: 3.1s !important; }
.d32 { animation-delay: 3.2s !important; }
.d35 { animation-delay: 3.5s !important; }
.d37 { animation-delay: 3.7s !important; }
.d39 { animation-delay: 3.9s !important; }
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 1ms !important;
  }
  /* !important: the .in-view entrance rule is more specific than this
     override, and a 1ms animation still hides a bubble for its full delay
     (fill-mode both holds the from-state). Reduced motion means the content
     is simply there. */
  html.js [data-anim] .au,
  html.js [data-anim] .ai,
  html.js [data-anim] .ag {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* ---------- layout chrome ---------- */

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}
.rule {
  border-bottom: 1px solid var(--line);
}
.band {
  background: var(--band);
}

.nav {
  border-bottom: 1px solid var(--line);
}
.nav-in {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
}
.nav-brand img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.nav-brand span {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav-links a {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.nav-links a.active {
  font-weight: 700;
  border-bottom: 3px solid var(--gold);
  padding-bottom: 2px;
}
.nav-links a.btn-green-sm {
  color: #fff; /* the generic .nav-links a ink otherwise out-specifies the button */
  font-weight: 700;
}
/* Mobile drawer machinery (ST-2.1): a checkbox, not JS — the chrome has no
   JS budget, and the checkbox stays keyboard-operable where a label alone
   would not be. Hidden but focusable (never display:none). */
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.nav-burger {
  display: none;
}

/* buttons: solid fill + hard bottom edge */
.btn {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  border-radius: 12px;
  text-align: center;
  border: 0;
  cursor: pointer;
  font-family: var(--fig);
}
.btn-green {
  font-size: 16px;
  color: #fff;
  background: var(--green);
  padding: 16px 30px;
  box-shadow: 0 3px 0 var(--green-d);
}
.btn-green:hover {
  background: var(--green-d);
}
.btn-green-sm {
  font-size: 15px;
  color: #fff;
  background: var(--green);
  padding: 12px 22px;
  box-shadow: 0 3px 0 var(--green-d);
}
.btn-green-sm:hover {
  background: var(--green-d);
}
.btn-gold {
  font-size: 16px;
  color: var(--ink);
  background: var(--gold);
  padding: 16px 32px;
  box-shadow: 0 3px 0 var(--gold-s);
}
.btn-gold:hover {
  background: #f8ca63;
}
.btn-outline {
  font-size: 15px;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--ink);
  padding: 12px 24px;
}
.btn-outline:hover {
  background: var(--band);
}
.btn-block {
  display: block;
  width: 100%;
}

/* gold squiggle under a headline word */
.squig {
  position: relative;
  white-space: nowrap;
}
.squig svg {
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 12px;
}
.squig path {
  stroke: var(--gold);
}

/* sticker badges */
.sticker {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 12px 20px;
  box-shadow: 5px 5px 0 var(--ink);
}
.sticker-gold {
  background: var(--gold);
}
.sticker-green {
  background: var(--green);
  color: #fff;
}
.rot-m2 { transform: rotate(-2deg); }
.rot-m1 { transform: rotate(-1deg); }
.rot-p15 { transform: rotate(1.5deg); }
.rot-p12 { transform: rotate(1.2deg); }
.rot-p2 { transform: rotate(2deg); }
.rot-p4 { transform: rotate(4deg); }

/* ---------- hero (home) ---------- */

.hero {
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.hero-in {
  padding-top: 88px;
  padding-bottom: 96px;
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: 76px;
  align-items: center;
}
.hero h1 {
  font-size: 66px;
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 800;
  text-wrap: balance;
}
.hero-sub {
  margin-top: 30px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ts);
  max-width: 520px;
  text-wrap: pretty;
}
.hero-ctas {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.try-me {
  display: flex;
  align-items: center;
  gap: 12px;
}
.try-me svg {
  color: var(--ink);
  flex: none;
  animation: fdNudge 1.6s ease-in-out infinite;
}
.try-me-label {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}
.try-me-label small {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ts);
}
.hero-badges {
  margin-top: 40px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
}

/* hero widget mock */
.hero-widget {
  position: relative;
  padding-bottom: 42px;
  min-width: 0;
}
.hero-time-badge {
  position: absolute;
  right: -8px;
  top: -16px;
  background: var(--gold);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 800;
  z-index: 2;
  box-shadow: var(--e2);
}
.chat-card {
  width: min(390px, 100%);
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--e3);
  overflow: hidden;
}
.chat-head {
  padding: 14px 18px;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.chat-head-name {
  font-size: 15px;
  font-weight: 700;
}
.chat-head-sub {
  font-size: 12px;
  opacity: 0.8;
}
.chat-msgs {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.msg-v {
  align-self: flex-end;
  max-width: 84%;
  background: var(--ink);
  color: #fff;
  border-radius: 14px 14px 4px 14px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.45;
}
.msg-a {
  align-self: flex-start;
  max-width: 84%;
  background: var(--green-t);
  border-radius: 14px 14px 14px 4px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.45;
}
.msg-captured {
  align-self: center;
  background: var(--green);
  color: #fff;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 700;
}
.chat-input {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 10px;
  align-items: center;
}
.chat-field {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--tt);
}
.chat-send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex: none;
}
.lead-card {
  position: absolute;
  left: -42px;
  bottom: 0;
  width: 315px;
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--e2);
  padding: 14px 16px;
  transform: rotate(-2deg);
}
.lead-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dot-pink {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink);
  flex: none;
}
.lead-card-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ts);
}
.lead-card-time {
  margin-left: auto;
  font-size: 12px;
  color: var(--tt);
}
.lead-card-name {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
}
.lead-card-desc {
  font-size: 13px;
  color: var(--ts);
  line-height: 1.5;
}

/* ---------- staff section ---------- */

.split {
  padding-top: 76px;
  padding-bottom: 84px;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 64px;
  align-items: center;
}
.split h2,
.h2 {
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 800;
}
.split-copy {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ts);
  max-width: 520px;
  text-wrap: pretty;
}
.checks {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
}
.checks > div {
  display: flex;
  gap: 10px;
}
.check {
  color: var(--green-d);
  font-weight: 800;
  flex: none;
  display: inline-flex;
  margin-top: 3px;
}
.check svg,
.cmp-yes svg,
.knowledge-row svg {
  display: inline-block;
  vertical-align: -2px;
}
.staff-card {
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--e3);
  padding: 26px 28px;
  transform: rotate(1.2deg);
}
.staff-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.staff-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.staff-card-title {
  font-size: 17px;
  font-weight: 800;
}
.staff-card-sub {
  font-size: 13px;
  color: var(--ts);
}
.staff-tiles {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tile {
  background: var(--band);
  border-radius: 10px;
  padding: 10px 12px;
}
.tile-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tt);
}
.tile-val {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 700;
}

/* ---------- dark stat strip ---------- */

.dark-strip {
  background: var(--ink);
  color: var(--page);
  border-bottom: 1px solid var(--line);
}
.dark-strip-in {
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 14px;
  font-weight: 600;
}
/* "Big numbers" stat strip (owner-picked variant B, 2026-08-13; replaces the
   flat text row). The <2s figure is measured: prod TTFT p95 on real client
   traffic was 1.4s at the time of writing. */
.stat-strip {
  padding-top: 30px;
  padding-bottom: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat b {
  display: block;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.stat:nth-child(odd) b {
  color: var(--gold);
}
.stat:nth-child(even) b {
  color: #7fc0ab;
}
.stat span {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 600;
  opacity: 0.75;
}

/* ---------- industry demos ---------- */

.demos {
  padding-top: 84px;
  padding-bottom: 92px;
}
.demos h2 {
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 800;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  text-wrap: balance;
}
.accent-green {
  color: var(--green);
}
.demos-sub {
  margin: 18px auto 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ts);
  max-width: 560px;
  text-align: center;
  text-wrap: pretty;
}
.demos-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 26px;
}
.demo-title {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.demo-sub {
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ts);
}
.demo-card {
  margin-top: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--edemo);
  overflow: hidden;
}
.demo-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
}
.demo-green .demo-head { border-bottom: 2px solid var(--green-d); }
.demo-gold .demo-head { border-bottom: 2px solid var(--gold-d); }
.demo-pink .demo-head { border-bottom: 2px solid var(--pink-d); }
.demo-avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.demo-green .demo-avatar,
.demo-green .demo-send { background: var(--green-d); }
.demo-gold .demo-avatar,
.demo-gold .demo-send { background: var(--gold-d); }
.demo-pink .demo-avatar,
.demo-pink .demo-send { background: var(--pink-d); }
.demo-head-name {
  flex: 1;
  min-width: 0;
}
.demo-head-name b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-head-name span {
  display: block;
  font-size: 11px;
  color: var(--ts);
}
.demo-close {
  flex: 0 0 auto;
  color: var(--tt);
}
.demo-msgs {
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.dmsg-v {
  align-self: flex-end;
  max-width: 88%;
  color: #fff;
  border-radius: 10px 10px 4px 10px;
  padding: 7px 11px;
  font-size: 12.5px;
  line-height: 1.45;
}
.demo-green .dmsg-v { background: var(--green-d); }
.demo-gold .dmsg-v { background: var(--gold-d); }
.demo-pink .dmsg-v { background: var(--pink-d); }
.dmsg-a {
  align-self: flex-start;
  max-width: 88%;
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 10px 10px 10px 4px;
  padding: 7px 11px;
  font-size: 12.5px;
  line-height: 1.45;
}
.typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 10px 10px 10px 4px;
  padding: 9px 11px;
}
.typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tt);
  animation: fdDot 1.2s infinite;
}
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
.demo-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}
.demo-field {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--tt);
}
.demo-send {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- portal band (home) + portal mocks ---------- */

.portal-band {
  padding-top: 84px;
  padding-bottom: 92px;
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 72px;
  align-items: center;
}
.pill-pink {
  display: inline-block;
  background: var(--pink);
  color: #fff;
  border-radius: 999px;
  padding: 6px 15px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  transform: rotate(-2deg);
}
.portal-band h2 {
  margin-top: 16px;
}
.portal-band .split-copy {
  font-size: 16px;
}
.portal-band .btn-outline {
  margin-top: 24px;
}

/* Poppins product-palette mock: fixed colors, never the marketing palette */
.pmock {
  background: #f7f7f4;
  border-radius: 18px;
  box-shadow: var(--e3);
  overflow: hidden;
  font-family: var(--pop);
  color: #1a1917;
  text-align: left;
}
.pmock-topbar {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid #eceae4;
}
.pmock-topbar b {
  font-size: 14px;
  font-weight: 500;
}
.pmock-topbar span {
  margin-left: auto;
  font-size: 13px;
  color: #6e6b64;
}
.pmock-body {
  padding: 18px 20px 20px;
}
.pmock-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pmock-title {
  font-size: 18px;
  font-weight: 600;
}
.pmock-muted {
  font-size: 13px;
  color: #9c988f;
}
.pmock-export {
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  color: #1a1917;
  background: #f7f7f4;
  border: 1px solid #dddad2;
  border-radius: 12px;
  padding: 7px 13px;
}
.pmock-stats {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.pmock-stat {
  background: #ffffff;
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 1px 6px rgba(26, 25, 23, 0.05);
}
.pmock-stat-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9c988f;
}
.pmock-stat-label.green {
  color: #12805c;
}
.pmock-stat-num {
  margin-top: 6px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.pmock-list {
  margin-top: 12px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 1px 6px rgba(26, 25, 23, 0.05);
  overflow: hidden;
}
.pmock-row {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pmock-row + .pmock-row {
  border-top: 1px solid #eceae4;
}
.pmock-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pmock-row-name {
  font-size: 15px;
  font-weight: 500;
  flex: 1;
}
.ppill-new {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
}
.ppill-muted {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eceae5;
  color: #6e6b64;
}
.ppill-qualified {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fbf2e5;
  color: #8a4b00;
}
.pmock-row-need {
  font-size: 14px;
  color: #6e6b64;
}
.pmock-row-meta {
  font-size: 12px;
  color: #9c988f;
}

/* full portal mock (client-portal hero) */
.pmock-frame {
  margin: 52px auto 0;
  max-width: 1020px;
}
.pmock-split {
  display: flex;
  min-height: 440px;
}
.pmock-side {
  width: 210px;
  flex: none;
  background: #ffffff;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pmock-side-brand {
  font-size: 15px;
  font-weight: 600;
  padding: 4px 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pmock-side-brand img {
  width: 16px;
  height: 17px;
  object-fit: contain;
}
.pmock-nav-active {
  font-size: 14px;
  font-weight: 500;
  padding: 9px 10px;
  border-radius: 12px;
  background: #f7f7f4;
  box-shadow: 0 1px 6px rgba(26, 25, 23, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pmock-nav-badge {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  background: var(--green);
  color: #fff;
  padding: 1px 7px;
  border-radius: 999px;
}
.pmock-nav-item {
  font-size: 14px;
  font-weight: 500;
  color: #6e6b64;
  padding: 9px 10px;
}
.pmock-nav-section {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9c988f;
  padding: 16px 10px 4px;
}
.pmock-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.pmock-main .pmock-topbar {
  padding: 0 24px;
  flex: none;
}
.pmock-main-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pmock-main-body .pmock-title {
  font-size: 20px;
}
.pmock-main-body .pmock-stats {
  margin-top: 0;
  gap: 16px;
}
.pmock-main-body .pmock-stat {
  padding: 16px 18px;
}
.pmock-main-body .pmock-stat-num {
  font-size: 28px;
}
.pmock-table {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 1px 6px rgba(26, 25, 23, 0.05);
  overflow: hidden;
}
.pmock-thead,
.pmock-trow {
  display: grid;
  grid-template-columns: 82px 1.1fr 1.6fr 1.1fr 70px;
  gap: 12px;
  padding: 13px 16px;
  align-items: center;
}
.pmock-thead {
  padding: 10px 16px;
  background: #f1f0eb;
  border-bottom: 1px solid #eceae4;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6e6b64;
}
.pmock-trow + .pmock-trow {
  border-top: 1px solid #eceae4;
}
.pmock-trow .ppill-new,
.pmock-trow .ppill-qualified {
  justify-self: start;
}
.pmock-cell-name {
  font-size: 14px;
  font-weight: 500;
}
.pmock-cell {
  font-size: 14px;
  color: #6e6b64;
}
.pmock-cell-when {
  font-size: 12px;
  color: #9c988f;
}

/* ---------- connections ---------- */

.connections {
  padding-top: 76px;
  padding-bottom: 84px;
}
.conn-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 56px;
  align-items: center;
}
.conn-head h2 {
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 800;
}
.conn-head p {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ts);
  max-width: 560px;
}
.conn-doodle {
  display: flex;
  align-items: center;
}
.doodle-lead {
  position: relative;
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--e2);
  padding: 13px 16px;
  transform: rotate(-2deg);
}
.doodle-lead-in {
  display: flex;
  align-items: center;
  gap: 10px;
}
.doodle-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green-t);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-d);
}
.doodle-lead b {
  display: block;
  font-size: 13px;
  font-weight: 800;
}
.doodle-lead span {
  display: block;
  font-size: 12px;
  color: var(--ts);
}
.doodle-arrow {
  flex: 0 0 auto;
  color: var(--tt);
  margin: 0 2px;
}
.doodle-inbox {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--e2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.doodle-count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.conn-grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.conn-card {
  background: var(--card);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: var(--e2);
}
.conn-card.custom {
  border: 2px dashed var(--line);
  box-shadow: none;
}
.conn-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green-t);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-d);
}
.conn-icon.gold {
  background: var(--gold-t);
  color: var(--gold-d);
}
.conn-title {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 700;
}
.conn-desc {
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ts);
}
.pill-builtin {
  margin-top: 12px;
  display: inline-block;
  background: var(--green-t);
  color: var(--green-d);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 11px;
  font-weight: 800;
}
.pill-custom {
  margin-top: 12px;
  display: inline-block;
  background: var(--gold-t);
  color: var(--gold-d);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 11px;
  font-weight: 800;
}

/* ---------- FAQ ---------- */

.faq {
  padding-top: 68px;
  padding-bottom: 80px;
}
.faq h2 {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 800;
}
.faq h2.center {
  text-align: center;
}
.faq-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 40px;
}
.faq-grid.narrow {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.faq-card {
  background: var(--card);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: var(--e2);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.faq-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(23, 33, 30, 0.14);
}
.faq-q {
  font-size: 16px;
  font-weight: 700;
}
.faq-a {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ts);
}

/* ---------- dark CTA + footer ---------- */

.cta-dark {
  background: var(--ink);
  color: var(--page);
}
.cta-dark-in {
  padding-top: 84px;
  padding-bottom: 84px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-dark h2 {
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 800;
  max-width: 700px;
  margin: 0 auto;
  text-wrap: balance;
}
.cta-dark p {
  margin: 16px auto 0;
  font-size: 16px;
  opacity: 0.72;
}
.cta-dark .btn-gold {
  margin-top: 28px;
}
.cta-row-in {
  padding-top: 72px;
  padding-bottom: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.cta-row-in h2 {
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 800;
  max-width: 620px;
}
.cta-row-in .btn-gold {
  flex: none;
}

.footer-in {
  padding-top: 26px;
  padding-bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--tt);
  gap: 16px;
  flex-wrap: wrap;
}
.footer-brand {
  font-weight: 800;
  color: var(--ink);
}
.footer-links {
  display: flex;
  gap: 24px;
}
.footer-links a {
  color: var(--ts);
  text-decoration: none;
}
.footer-links a:hover {
  color: var(--ink);
}

/* ---------- how-it-works ---------- */

.page-hero {
  border-bottom: 1px solid var(--line);
}
.page-hero-in {
  padding-top: 80px;
  padding-bottom: 72px;
  text-align: center;
}
.page-hero h1 {
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 800;
  max-width: 760px;
  margin: 0 auto;
  text-wrap: balance;
}
.page-hero .squig svg {
  bottom: -8px;
}
.page-hero-sub {
  margin: 22px auto 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ts);
  max-width: 540px;
  text-wrap: pretty;
}
.steps {
  padding-top: 72px;
  padding-bottom: 84px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
}
.step-card {
  background: var(--card);
  border-radius: 18px;
  padding: 28px 30px;
  box-shadow: var(--e2);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.step-chip {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 800;
}
.step-chip.green { background: var(--green-t); color: var(--green-d); }
.step-chip.gold { background: var(--gold-t); color: var(--gold-d); }
.step-chip.pink { background: var(--pink-t); color: var(--pink-d); }
.step-card h2 {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.step-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ts);
  text-wrap: pretty;
}
.knowledge-art {
  margin-top: auto;
  background: var(--green-t);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.knowledge-art-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-d);
}
.knowledge-row {
  background: var(--card);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}
.knowledge-row b {
  color: var(--green-d);
  font-weight: 700;
}
.code-art {
  margin-top: auto;
  background: var(--ink);
  border-radius: 12px;
  padding: 16px 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  color: #fdf8f0;
  line-height: 1.6;
  overflow: hidden;
}
.code-art .p { color: var(--tt); }
.code-art .t { color: var(--gold); }
.code-art .a { color: #7fc0ab; }
.code-art .s { color: #ffffff; }
.lead-art {
  margin-top: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  box-shadow: var(--e2);
}
.lead-art-top {
  display: flex;
  align-items: center;
  gap: 7px;
}
.lead-art-top .dot-pink {
  width: 7px;
  height: 7px;
}
.lead-art-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ts);
}
.lead-art-time {
  margin-left: auto;
  font-size: 11px;
  color: var(--tt);
}
.lead-art-name {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 700;
}
.lead-art-desc {
  font-size: 12px;
  color: var(--ts);
}
.guardrails {
  padding-top: 76px;
  padding-bottom: 84px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.guardrails h2,
.wa-band h2 {
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 800;
}
.guardrails p,
.wa-band p {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ts);
  max-width: 480px;
  text-wrap: pretty;
}
.flow-chips {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.flow-chip {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ts);
  background: var(--card);
  border-radius: 999px;
  padding: 6px 14px;
  box-shadow: var(--e2);
}
.flow-chip.live {
  color: #fff;
  background: var(--green);
  box-shadow: none;
}
.flow-sep {
  color: var(--tt);
}
.draft-card {
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--e3);
  padding: 22px 24px;
}
.draft-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
}
.pill-draft {
  background: var(--gold-t);
  color: var(--gold-d);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 11px;
  font-weight: 800;
}
.draft-answer {
  margin-top: 12px;
  background: var(--page);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.draft-highlight {
  background: var(--gold-t);
  border-radius: 4px;
  padding: 0 4px;
  font-weight: 700;
}
.draft-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
}
.draft-btn-edit {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 10px 0;
}
.draft-btn-publish {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--green);
  border-radius: 10px;
  padding: 12px 0;
  box-shadow: 0 3px 0 var(--green-d);
}
.wa-band {
  padding-top: 76px;
  padding-bottom: 84px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.wa-chat {
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--e2);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.wa-chat .msg-v {
  border-radius: 13px 13px 4px 13px;
  padding: 9px 13px;
  font-size: 13.5px;
}
.wa-chat .msg-a {
  border-radius: 13px 13px 13px 4px;
  padding: 9px 13px;
  font-size: 13.5px;
}
.wa-pill {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--page);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 700;
}
.wa-logo {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #25d366;
  color: #06301a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}

/* ---------- client-portal page ---------- */

.feature-grid {
  padding-top: 72px;
  padding-bottom: 84px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.feature-card {
  background: var(--card);
  border-radius: 20px;
  padding: 26px 28px;
  box-shadow: var(--e2);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feature-card:nth-child(odd):hover {
  transform: translateY(-6px) rotate(-0.4deg);
  box-shadow: 0 22px 48px rgba(23, 33, 30, 0.16);
}
.feature-card:nth-child(even):hover {
  transform: translateY(-6px) rotate(0.4deg);
  box-shadow: 0 22px 48px rgba(23, 33, 30, 0.16);
}
.feature-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.feature-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-icon.green { background: var(--green-t); color: var(--green-d); }
.feature-icon.gold { background: var(--gold-t); color: var(--gold-d); }
.feature-icon.pink { background: var(--pink-t); color: var(--pink-d); }
.feature-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.feature-tag.green { color: var(--green-d); }
.feature-tag.gold { color: var(--gold-d); }
.feature-tag.pink { color: var(--pink-d); }
.feature-card h2 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.feature-card > p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ts);
  text-wrap: pretty;
}
.leads-art {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.leads-art-row {
  background: var(--band);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ping-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: fdPing 1.8s ease-out infinite;
  flex: none;
}
.ping-spacer {
  width: 8px;
  height: 8px;
  flex: none;
}
.mini-pill-new {
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: var(--green);
  border-radius: 999px;
  padding: 2px 7px;
}
.mini-pill-seen {
  font-size: 9px;
  font-weight: 800;
  color: var(--ts);
  background: var(--card);
  border-radius: 999px;
  padding: 2px 7px;
}
.leads-art-name {
  font-size: 13px;
  font-weight: 700;
  flex: 1;
}
.leads-art-name.seen {
  font-weight: 600;
}
.leads-art-time {
  font-size: 11px;
  color: var(--tt);
}
.transcript-art {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tmsg-v {
  align-self: flex-end;
  background: var(--ink);
  color: #fff;
  border-radius: 10px 10px 3px 10px;
  padding: 7px 11px;
  font-size: 12px;
}
.tmsg-a {
  align-self: flex-start;
  background: var(--band);
  border-radius: 10px 10px 10px 3px;
  padding: 7px 11px;
  font-size: 12px;
}
.transcript-art .typing {
  background: var(--band);
  border: 0;
}
.bars-art {
  margin-top: 6px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 56px;
}
.bars-art span {
  flex: 1;
  background: var(--band);
  border-radius: 5px 5px 0 0;
  transform-origin: bottom;
}
.bars-art .bar-34 { height: 34%; }
.bars-art .bar-52 { height: 52%; }
.bars-art .bar-44 { height: 44%; }
.bars-art .bar-72 { height: 72%; background: var(--pink); }
.bars-art .bar-100 { height: 100%; background: var(--green); }
.bars-labels {
  display: flex;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--tt);
}
.bars-labels span {
  flex: 1;
  text-align: center;
}
.knowledge-live-art {
  margin-top: 6px;
  background: var(--band);
  border-radius: 12px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.knowledge-live-art .txt {
  font-size: 12px;
  flex: 1;
}
.pill-saved {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ts);
  background: var(--card);
  border-radius: 999px;
  padding: 4px 10px;
}
.pill-live {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: var(--green);
  border-radius: 999px;
  padding: 4px 10px;
  animation: fdPing 2s ease-out infinite;
}
.conn-strip {
  padding-top: 68px;
  padding-bottom: 76px;
}
.conn-strip h2 {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 800;
}
.conn-strip .conn-grid {
  margin-top: 28px;
  gap: 18px;
}
.conn-strip .conn-card {
  border-radius: 16px;
  padding: 18px 20px;
}
.conn-strip .conn-title {
  margin-top: 0;
  font-size: 15px;
}
.conn-strip .conn-desc {
  margin-top: 4px;
  font-size: 13px;
}
.conn-strip .pill-builtin,
.conn-strip .pill-custom {
  margin-top: 10px;
  padding: 2px 10px;
  font-size: 10px;
}

/* ---------- pricing ---------- */

.tiers {
  padding-top: 72px;
  padding-bottom: 84px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}
.tier {
  background: var(--card);
  border-radius: 18px;
  padding: 32px 34px;
  box-shadow: var(--e2);
  display: flex;
  flex-direction: column;
}
.tier-name {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ts);
}
.tier-price {
  margin-top: 14px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.tier-price b {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.tier-price span {
  font-size: 15px;
  color: var(--tt);
}
.tier-blurb {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ts);
}
.tier-feats {
  margin: 22px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
}
.tier-feats > div {
  display: flex;
  gap: 9px;
}
.tier .btn {
  margin-top: auto;
}
.tier-highlight {
  border: 2px solid var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
  position: relative;
}
.tier-highlight .tier-name {
  color: var(--green-d);
}
.tier-tab {
  position: absolute;
  top: -14px;
  right: 24px;
  background: var(--gold);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  transform: rotate(2deg);
}
.tier-dark {
  background: var(--ink);
  color: var(--page);
  box-shadow: none;
}
.tier-dark .tier-name {
  color: var(--gold);
}
.tier-dark .tier-blurb {
  color: inherit;
  opacity: 0.75;
}
.tier-dark .check {
  color: var(--gold);
}
.tier .btn-green,
.tier .btn-gold {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 0;
  padding-right: 0;
  font-size: 15px;
}
.tier .btn-outline {
  padding: 13px 0;
}

/* ---------- contact ---------- */

.contact-grid {
  padding-top: 84px;
  padding-bottom: 92px;
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 88px;
  align-items: start;
}
.contact-grid h1 {
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.contact-grid .squig svg {
  bottom: -8px;
}
.contact-sub {
  margin-top: 24px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ts);
  max-width: 460px;
  text-wrap: pretty;
}
.contact-steps {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.contact-chip {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 11px; /* square chip, matching the how-it-works steps */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
}
.contact-chip.green { background: var(--green-t); color: var(--green-d); }
.contact-chip.gold { background: var(--gold-t); color: var(--gold-d); }
.contact-chip.pink { background: var(--pink-t); color: var(--pink-d); }
/* Scoped to the inner div: a bare `.contact-step span` also catches the
   number chip and flattens its flex centring (owner-spotted misrender). */
.contact-step div b {
  display: block;
  font-size: 15px;
  font-weight: 700;
}
.contact-step div span {
  display: block;
  font-size: 14px;
  color: var(--ts);
  line-height: 1.5;
}
.contact-alt {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--ts);
  display: flex;
  flex-direction: column;
  gap: 12px;
  line-height: 1.6;
}
.contact-alt a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 1px;
}
.form-card {
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--e3);
  padding: 32px 34px;
}
.form-card h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.form-fields {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-fields label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}
.form-fields input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--fig);
  color: var(--ink);
  background: var(--card);
}
.form-fields input::placeholder {
  color: var(--tt);
}
.form-fields .btn-green {
  margin-top: 6px;
  padding: 15px 0;
  font-size: 15px;
  width: 100%;
}
.form-note {
  text-align: center;
  font-size: 12px;
  color: var(--tt);
  margin-top: 14px;
}
.form-error {
  margin-top: 14px;
  background: var(--pink-t);
  color: var(--pink-d);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
}
.form-error ul {
  margin: 8px 0 0;
  padding-left: 18px;
  font-weight: 500;
}
.form-error a {
  color: inherit;
}
.field-error {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pink-d);
}
.form-fields input[aria-invalid="true"] {
  border-color: var(--pink-d);
  box-shadow: 0 0 0 2px var(--pink-t);
}
.btn[aria-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
}
.form-success {
  margin-top: 22px;
  background: var(--green-t);
  border-radius: 12px;
  padding: 18px 20px;
}
.form-success b {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--green-d);
}
.form-success p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ts);
}
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- legal + 404 ---------- */

.prose {
  padding-top: 64px;
  padding-bottom: 84px;
  max-width: 760px;
}
.prose h1 {
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 800;
}
.prose h2 {
  margin-top: 36px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.prose p,
.prose li {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ts);
}
.prose table {
  margin-top: 16px;
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}
.prose th,
.prose td {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--line);
  color: var(--ts);
}
.prose th {
  color: var(--ink);
  background: var(--band);
}
.notfound {
  padding-top: 96px;
  padding-bottom: 112px;
  text-align: center;
}
.notfound h1 {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.notfound p {
  margin-top: 16px;
  font-size: 17px;
  color: var(--ts);
}
.notfound .btn-green {
  margin-top: 28px;
}

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  /* minmax(0, 1fr), not 1fr: a bare 1fr track is minmax(auto, 1fr) and cannot
     shrink below its content's min-content width, so the 390px chat card made
     the single column 390px wide inside a 375px viewport (measured live
     2026-09-01: every hero child ended at x=408, clipped by .hero's overflow). */
  .hero-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .hero-widget {
    justify-self: center;
  }
  .split,
  .portal-band,
  .guardrails,
  .wa-band,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .demos-grid,
  .steps,
  .tiers {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .conn-grid {
    grid-template-columns: 1fr 1fr;
  }
  .conn-head {
    grid-template-columns: 1fr;
  }
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .faq-grid {
    grid-template-columns: 1fr;
  }
  .pmock-side {
    display: none;
  }
}

@media (max-width: 768px) {
  .wrap {
    padding-left: 18px;
    padding-right: 18px;
  }
  .nav-in {
    height: 58px;
  }
  .nav-brand img {
    width: 27px;
    height: 27px;
  }
  .nav-brand span {
    font-size: 16px;
  }
  .nav-links {
    gap: 16px;
  }
  .nav-links a:not(.btn-green-sm) {
    display: none;
  }
  .nav-links .btn-green-sm {
    font-size: 13px;
    padding: 9px 15px;
    border-radius: 10px;
    box-shadow: 0 2px 0 var(--green-d);
  }
  .nav-in {
    position: relative;
    gap: 12px;
  }
  .nav-brand {
    margin-right: auto;
  }
  .nav-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 9px;
    border: 1.5px solid var(--band);
    border-radius: 10px;
    cursor: pointer;
    flex: none;
  }
  .nav-burger span {
    display: block;
    height: 2.5px;
    background: var(--ink);
    border-radius: 2px;
  }
  .nav-toggle:focus-visible ~ .nav-burger {
    outline: 2px solid var(--green-d);
    outline-offset: 2px;
  }
  .nav-toggle:checked ~ .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--card);
    border-bottom: 1px solid var(--band);
    box-shadow: var(--e2);
    padding: 6px 18px 16px;
  }
  .nav-toggle:checked ~ .nav-links a:not(.btn-green-sm) {
    display: block;
    padding: 13px 2px;
    font-size: 16px;
    border-bottom: 1px solid var(--band);
  }
  .nav-toggle:checked ~ .nav-links a.active {
    border-bottom: 1px solid var(--band); /* the 3px gold desktop underline reads as a divider here */
    color: var(--green-d);
  }
  .nav-toggle:checked ~ .nav-links .btn-green-sm {
    margin-top: 14px;
    padding: 13px;
    font-size: 15px;
  }
  .hero-in {
    padding-top: 38px;
    padding-bottom: 34px;
  }
  .hero h1 {
    font-size: 38px;
    line-height: 1.05;
    letter-spacing: -0.025em;
  }
  .hero .squig svg {
    bottom: -7px;
    height: 10px;
  }
  .hero-sub {
    margin-top: 18px;
    font-size: 16px;
  }
  .hero-ctas {
    margin-top: 22px;
  }
  .hero-ctas .btn-green {
    display: block;
    width: auto;
    margin-right: 72px; /* the launcher lane, ST-8.5 */
    padding: 15px 0;
    font-size: 16px;
  }
  /* Redesign session 03: the pointer arrow aims at a bubble that is a screen
     away on a phone, but the words still hold (the bubble IS in the corner),
     so the label stays and only the arrow goes. */
  .try-me {
    display: block;
    margin-top: 14px;
  }
  .try-me svg {
    display: none;
  }
  .try-me-label {
    font-size: 14px;
  }
  .try-me-label small {
    display: inline;
    font-size: 14px;
    font-weight: 500;
  }
  .try-me-label small::before {
    content: ", ";
  }
  .hero-badges {
    margin-top: 24px;
    gap: 14px;
  }
  .sticker {
    font-size: 11px;
    letter-spacing: 0.06em;
    border-radius: 7px;
    padding: 9px 14px;
    box-shadow: 4px 4px 0 var(--ink);
  }
  .lead-card {
    position: static;
    width: auto;
    margin-top: 14px;
    transform: none;
  }
  .hero-badges .sticker-green {
    display: none;
  }
  .hero-time-badge {
    right: 0;
  }
  .page-hero-in {
    padding-top: 48px;
    padding-bottom: 44px;
  }
  .page-hero h1,
  .contact-grid h1 {
    font-size: 36px;
  }
  .h2,
  .split h2,
  .cta-dark h2,
  .cta-row-in h2,
  .demos h2 {
    font-size: 25px;
    line-height: 1.12;
    letter-spacing: -0.02em;
  }
  .conn-head h2,
  .faq h2,
  .conn-strip h2,
  .guardrails h2,
  .wa-band h2 {
    font-size: 24px;
  }
  .split,
  .demos,
  .connections,
  .faq,
  .portal-band,
  .guardrails,
  .wa-band,
  .steps,
  .tiers,
  .feature-grid,
  .conn-strip,
  .contact-grid {
    padding-top: 30px;
    padding-bottom: 34px;
  }
  .split-copy,
  .demos-sub {
    font-size: 16px;
    margin-top: 10px;
  }
  .cta-dark-in,
  .cta-row-in {
    padding-top: 34px;
    padding-bottom: 34px;
    text-align: left;
  }
  .cta-dark h2 {
    margin: 0;
  }
  .cta-dark .btn-gold,
  .cta-row-in .btn-gold {
    display: block;
    width: auto;
    margin-right: 72px; /* the launcher lane, ST-8.5 */
    margin-top: 18px;
    padding: 15px 0;
    font-size: 16px;
  }
  .demos-grid > div:first-child,
  .demos-grid > div:last-child {
    display: none;
  }
  .conn-doodle {
    display: none;
  }
  .dark-strip-in {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .stat-strip {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .stat b {
    font-size: 30px;
  }
  .pmock-topbar span {
    display: none;
  }
  .pmock-thead,
  .pmock-trow {
    grid-template-columns: 70px 1fr 90px;
  }
  .pmock-thead span:nth-child(3),
  .pmock-thead span:nth-child(5),
  .pmock-trow .pmock-cell:nth-of-type(1),
  .pmock-trow .pmock-cell-when {
    display: none;
  }
}

/* ---------- pricing page: 4-up tiers, UK strip, credits, tables (ST-2.6) */

.tiers-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.tiers-4 .tier {
  padding: 28px 24px;
}
.tiers-4 .tier-price b {
  font-size: 38px;
}
.tiers-5 {
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.tiers-5 .tier {
  padding: 26px 20px;
}
.tiers-5 .tier-price b {
  font-size: 32px;
}
/* At five across the price row is narrow enough that a label-priced tier
   ("+£149", suffix "/month, on any plan") broke between the "+" and the
   number and then ran back over itself. The number never wraps; the suffix
   takes its own line instead. */
.tiers-5 .tier-price {
  flex-wrap: wrap;
}
.tiers-5 .tier-price b {
  white-space: nowrap;
}
.tiers-5 .tier-price span {
  font-size: 13px;
  line-height: 1.35;
}
.tiers-5 .tier-feats {
  font-size: 13px;
  gap: 9px;
}
.tiers-5 .tier-blurb {
  font-size: 13px;
}
.tiers-5 .tier-tab {
  right: 14px;
  padding: 4px 10px;
}
.tiers-note {
  margin-top: -46px;
  padding-bottom: 76px;
  text-align: center;
  font-size: 14px;
  color: var(--ts);
}
.uk-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  justify-content: center;
  padding-top: 26px;
  padding-bottom: 26px;
  font-size: 15px;
  color: var(--ts);
}
.uk-strip b {
  color: var(--green-d);
}
.credits {
  padding-top: 64px;
  padding-bottom: 72px;
}
.credits h2,
.cmp-section h2 {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 800;
  text-align: center;
}
.credits-note {
  margin: 16px auto 34px;
  max-width: 660px;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ts);
}
.addon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.addon {
  background: var(--card);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: var(--e2);
}
.addon-name {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-d);
}
.addon-price {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.addon-price span {
  font-size: 13px;
  font-weight: 600;
  color: var(--tt);
}
.addon-blurb {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ts);
}
.cmp-section {
  padding-top: 64px;
  padding-bottom: 72px;
}
.cmp-sub {
  margin: 12px auto 0;
  max-width: 560px;
  text-align: center;
  font-size: 15px;
  color: var(--ts);
}
.cmp-wrap {
  margin-top: 30px;
  overflow-x: auto;
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--e2);
}
.cmp {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-size: 14px;
}
.cmp th,
.cmp td {
  padding: 11px 16px;
  text-align: center;
  border-bottom: 1px solid var(--band);
}
.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td {
  border-bottom: none;
}
.cmp th[scope="row"] {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  /* The row label stays put while the plan columns scroll under it on a
     narrow screen (the wrap is overflow-x: auto), so a reader never loses
     which line they are comparing. */
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--card);
}
.cmp thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--card);
}
.cmp thead th {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--ink);
}
.cmp thead th.cmp-pop {
  background: var(--gold-t);
}
.cmp td.cmp-us {
  background: var(--gold-t);
  font-weight: 700;
}
.cmp-yes {
  color: var(--green-d);
  font-weight: 800;
}
.cmp-no {
  color: var(--tt);
}
.cmp-foot {
  margin-top: 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--tt);
}
@media (max-width: 1280px) {
  .tiers-4 {
    grid-template-columns: 1fr 1fr;
  }
  /* Five never halves cleanly. At three across the second row is Agency and
     Managed, which is a sensible pair to leave together; at two across it
     would be Scale and Agency with Managed stranded alone. */
  .tiers-5 {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .tiers-5 .tier-price b {
    font-size: 38px;
  }
  .tiers-5 .tier-feats,
  .tiers-5 .tier-blurb {
    font-size: 14px;
  }
}
@media (max-width: 1080px) {
  .addon-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 900px) {
  .tiers-5 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .tiers-4,
  .tiers-5 {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .addon-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- /agencies (ST-3.5) ---------------------------------------- */

/* The one price card on the page, beside the copy rather than in a row of
   its own: this page sells a single tier, and a lone card centred under a
   heading reads as the start of a comparison table that never arrives. */
.agency-price {
  padding-top: 76px;
  padding-bottom: 84px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 64px;
  align-items: center;
}
.agency-price h2 {
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 800;
}
.agency-price-copy p {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ts);
}
.agency-price-note {
  font-size: 14px;
}
.faq-sub {
  margin-top: 10px;
  font-size: 15px;
  color: var(--ts);
}
@media (max-width: 980px) {
  .agency-price {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* ---------- phone layout rules (ST-8.5) ---------------------------------- */

/* Body copy never drops below 16px on a phone, primary buttons stay out of
   the widget launcher's lane (56px bubble + 20px offset, rounded up), and the
   page end reserves the launcher's footprint so the footer links are never
   under it. Labels, stickers, pills and table cells are not body copy and
   keep the design's sizes. */
@media (max-width: 768px) {
  .checks,
  .tiers .tier-feats,
  .tiers .tier-blurb,
  .faq-a,
  .conn-desc,
  .step-card p,
  .feature-card p,
  .guardrails p,
  .credits-note,
  .addon-blurb,
  .agency-price-note,
  .form-fields input {
    font-size: 16px;
  }
  .tier .btn,
  .form-fields .btn-green {
    display: block;
    width: auto;
    margin-right: 72px;
    font-size: 16px;
  }
  /* The hero CTA row is a flex row on desktop (button + "try me" pointer);
     the pointer is hidden on a phone, and a flex item with width:auto would
     shrink the button to its label. */
  .hero-ctas,
  .cta-row-in {
    display: block;
  }
  .footer-in {
    padding-bottom: 96px;
  }
}