/* ============================================================
   business.css — styles unique to the Business landing page.
   Loaded only by business.php (via $extra_css). Reuses the
   global design tokens from style.css (--cream, --forest,
   --coral, fonts, radii). Nothing here affects index.php.
   ============================================================ */

/* ---------- Hero CTAs (trim height vs the global .btn-large) ---------- */
.hero-ctas .btn {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

/* ---------- Audience switch (nav pill) ---------- */
.audience-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--forest);
  text-decoration: none;
  background: rgba(26, 58, 50, 0.07);
  border-radius: 100px;
  padding: 0.4rem 0.9rem;
  margin-right: 0.75rem;
  white-space: nowrap;
  line-height: 1.2;
  transition: background 0.25s ease, color 0.25s ease;
}
.audience-switch:hover {
  background: rgba(26, 58, 50, 0.12);
  color: var(--coral);
}
.audience-switch-arrow { transition: transform 0.25s ease; }
.audience-switch:hover .audience-switch-arrow { transform: translateX(3px); }

/* ---------- Business nav ----------
   The header's geometry (1236px width, 16px radius) and scroll-docking now live
   in the shared style.css nav + includes/header.php, so they apply site-wide and
   nothing page-specific is needed here beyond guarding the action buttons from
   wrapping. The ≤1024px compact bar below still layers the business-only grid
   (logo · Start Free · burger) on top of that shared nav. */
.audience-business .nav-cta .btn { white-space: nowrap; }

/* Right-cluster hierarchy: demote the audience switch from a filled grey pill
   to a quiet text link, fenced off from the auth pair by a hairline, so the
   cluster reads as one ramp — utility (For developers →) · Log in · Start Free. */
.audience-business .audience-switch {
  background: none;
  padding: 0;
  margin-right: 0;
  font-size: 0.82rem;
  color: var(--forest);
  opacity: 0.72;
}
.audience-business .audience-switch:hover { background: none; opacity: 1; color: var(--coral); }
.audience-business .nav-divider {
  display: inline-block;
  width: 1px;
  height: 20px;
  margin: 0 0.15rem;
  background: rgba(26, 58, 50, 0.18);
}

/* ----- Menu burger + left slide-in drawer (business, ≤1024px) ----- */
.nav-burger {
  display: none;                /* desktop hidden; shown ≤1024px */
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  justify-self: end;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--forest);
}
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 30, 25, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 200;
}
body.drawer-open .mobile-overlay { opacity: 1; pointer-events: auto; }
.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 84%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.25rem 1.5rem;
  background: var(--cream);
  box-shadow: 2px 0 28px rgba(0, 0, 0, 0.14);
  transform: translateX(-100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 210;
  overflow-y: auto;
}
body.drawer-open .mobile-drawer { transform: translateX(0); }
.mobile-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.mobile-drawer-title { font-weight: 700; font-size: 1.05rem; color: var(--charcoal); }
.mobile-drawer-close {
  background: none;
  border: none;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--forest);
  cursor: pointer;
  padding: 0 0.2rem;
}
.mobile-drawer-links { display: flex; flex-direction: column; }
.mobile-drawer-label {
  margin: 0.6rem 0 0.1rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: 0.5;
}
.mobile-drawer-links a {
  padding: 0.7rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--charcoal);
  text-decoration: none;
  border-bottom: 1px solid rgba(26, 58, 50, 0.08);
}
.mobile-drawer-links a:hover { color: var(--forest); }
.mobile-drawer-foot { margin-top: auto; padding-top: 1.25rem; display: flex; flex-direction: column; gap: 0.9rem; }
.mobile-drawer-login { font-size: 1rem; font-weight: 600; color: var(--charcoal); text-decoration: none; }
.mobile-drawer-switch { font-size: 0.95rem; font-weight: 600; color: var(--forest); opacity: 0.78; text-decoration: none; }

/* Compact bar (≤1024px): hide the links + in-bar switch/divider/Log in, show
   the burger, and let Start Free take the centre cell of the grid. */
@media (max-width: 1024px) {
  /* Compact bar: a 1fr/auto/1fr grid puts the logo flush-left, Start Free dead
     centre and the burger flush-right (the links collapse into the drawer).
     This grid is intentionally scoped to mobile only — desktop uses the shared
     style.css nav so the header matches /automate. */
  .audience-business nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .audience-business .logo { justify-self: start; }
  .audience-business .nav-links { display: none; }
  .audience-business .nav-cta .btn-ghost { display: none; }
  .audience-business .nav-cta { justify-self: center; }
  .audience-business .nav-burger { display: inline-flex; }
  body.drawer-open { overflow: hidden; }
}

/* Desktop: keep all the drawer machinery out of the layout. */
@media (min-width: 1025px) {
  .audience-business .nav-burger,
  .mobile-overlay,
  .mobile-drawer { display: none; }
}

/* ---------- Page-wide headline scale ----------
   Dial every section <h2> down a notch from the shared 3rem so the page
   reads tighter. Loaded only on business.php, so index.php is untouched.
   .modal-title is protected (it's smaller by design — don't let it grow);
   the forest #demo headline keeps its own, slightly-smaller tier. */
.audience-business h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.audience-business .demo-section h2 { font-size: clamp(1.45rem, 2.7vw, 2rem); }
.audience-business .modal-title { font-size: 1.85rem; }

/* Hero <h1> inherits the global h1 clamp (style.css), whose 5rem (80px) max
   overflows the 590px hero text column — the longer "The AI that runs your
   company" headline wraps mid-phrase on screens wider than ~1320px. Cap the
   max at 3.5rem (56px) so both headline lines stay on one line each. The
   2.75rem min and 4.5vw curve match the global rule, so the font only stops
   growing on wide desktops — mobile/tablet sizing is unchanged. */
.audience-business .hero h1 { font-size: clamp(2.75rem, 4.5vw, 3.5rem); }

/* Governance subtext was capped narrower (560px), squeezing it into extra
   lines. Match the wider "Why WebRun" proof-bar width (720px) so the two
   sections read at a consistent measure. */
.audience-business .governance .section-description { max-width: 720px; }

/* Same fix for the Templates and Speed subheads: both fell back to the base
   .section-description (600px) while every other section uses 720px. Widen
   them to 720px so all the page's subheads read at one consistent measure. */
.audience-business .templates-section .section-description { max-width: 720px; }
.audience-business .speed-metrics-section .section-header .section-description { max-width: 720px; }

/* ---- Even section rhythm (desktop) ----
   A few sections shipped with outsized vertical spacing that broke the page's
   rhythm and left big empty bands between sections:
   - .integrate-section had an 18vh (~160px+) top margin → huge gap before it.
   - .pricing-section + .cta-section used 8rem top/bottom (vs the ~6rem most
     sections use) → a 256px void between them.
   Normalise to the common 6rem so the gaps read evenly. Desktop-only — the
   mobile paddings below 900px were tuned separately, leave them be. */
@media (min-width: 901px) {
  .audience-business .integrate-section { margin-top: 0; padding-top: 4rem; padding-bottom: 4rem; }
  .audience-business .pricing-section { padding-top: 6rem; padding-bottom: 6rem; }
  .audience-business .cta-section { padding-top: 6rem; padding-bottom: 6rem; }
}

/* ---------- Hero: animated workflow-flow diagram (mirrors the dashboard) ---------- */
.bizf-demo {
  height: 350px;
  background: #f6f4f0;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  display: flex;
  flex-direction: column;
  padding: 0.85rem 0.95rem 0.7rem;
  gap: 0.55rem;
}
.bizf-head { display: flex; align-items: center; gap: 0.55rem; }
.bizf-head-icon {
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(34, 197, 94, 0.15);
  color: var(--forest);
  display: flex; align-items: center; justify-content: center;
}
.bizf-head-icon svg { width: 17px; height: 17px; }
.bizf-head-text { display: flex; flex-direction: column; line-height: 1.15; }
.bizf-head-text b { font-size: 0.86rem; font-weight: 700; color: var(--charcoal); transition: opacity 0.22s ease; }
.bizf-head-text.is-swapping b { opacity: 0; }
.bizf-head-text i { font-size: 0.68rem; font-style: normal; color: var(--text-muted); }

/* Dotted canvas */
.bizf-canvas {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background-color: #f4f2ef;
  background-image: radial-gradient(circle, rgba(26, 58, 50, 0.11) 1px, transparent 1.4px);
  background-size: 15px 15px;
  overflow: hidden;
}

/* Each slide stacks and fades (cycler toggles .active) */
.biz-tpl {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.6rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.biz-tpl.active { opacity: 1; transform: none; pointer-events: auto; }

.bizf-trigger {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: #dee0dc;
  border: 1px solid var(--forest);
  color: var(--forest);
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 600;
  padding: 0.28rem 0.7rem;
}
.bizf-trigger svg { width: 12px; height: 12px; }
.bizf-vline { width: 0; height: 14px; border-left: 1.5px dashed rgba(26, 58, 50, 0.4); }
.bizf-webrun {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: #fff;
  border: 1px solid var(--forest);
  border-radius: 10px;
  padding: 0.4rem 0.7rem;
  box-shadow: 0 4px 14px rgba(26, 58, 50, 0.14);
}
.biz-tpl.active .bizf-webrun { animation: bizfWrGlow 2.4s ease-in-out infinite; }
.bizf-wr-logo {
  width: 26px; height: 26px; border-radius: 7px; background: var(--forest);
  display: flex; align-items: center; justify-content: center;
}
.bizf-wr-logo svg { width: 17px; height: 17px; }
.bizf-wr-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.bizf-wr-text b { font-size: 0.78rem; font-weight: 700; color: var(--charcoal); }
.bizf-wr-text i { font-size: 0.62rem; font-style: normal; color: var(--text-muted); }

/* Fan width is locked to each slide's card-strip width (set per data-steps
   below) with a 1:1 viewBox, so the branch endpoints land exactly on the
   centered step badges. preserveAspectRatio="none" keeps the px mapping. */
.bizf-fan { display: block; height: 44px; max-width: 100%; margin: 0 auto; }
.biz-tpl[data-steps="2"] .bizf-fan { width: 309px; }
.biz-tpl[data-steps="3"] .bizf-fan { width: 476px; }
.bizf-fan path { fill: none; stroke: var(--forest); stroke-width: 1.4; stroke-dasharray: 4 4; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.3; }

.bizf-steps { display: flex; align-items: stretch; justify-content: center; gap: 0.15rem; width: fit-content; max-width: 100%; margin: 0 auto; }
.bizf-step {
  position: relative;
  width: 142px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  padding: 0.7rem 0.5rem 0.55rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.bizf-num {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--forest); color: #fff;
  font-size: 0.68rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #f4f2ef;
  box-shadow: 0 2px 6px rgba(26, 58, 50, 0.18);
  z-index: 3;
}
.bizf-check {
  position: absolute; top: -9px; right: -9px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--forest);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #f4f2ef;
  box-shadow: 0 2px 6px rgba(26, 58, 50, 0.18);
  opacity: 0; transform: scale(0);
}
.bizf-check svg { width: 11px; height: 11px; }
.bizf-logo {
  width: 34px; height: 34px; border-radius: 9px;
  background: #fff; border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex; align-items: center; justify-content: center;
}
.bizf-logo img { width: 22px; height: 22px; border-radius: 4px; object-fit: contain; }
.bizf-app { font-size: 0.78rem; font-weight: 700; color: var(--charcoal); }
.bizf-act { font-size: 0.62rem; color: var(--text-muted); text-align: center; line-height: 1.25; }
.bizf-arrow { display: flex; align-items: center; color: var(--forest); opacity: 0.4; flex-shrink: 0; }
.bizf-arrow svg { width: 20px; height: 10px; }

/* Run animation: WebRun fires each step in sequence while the slide is active.
   Cadence 0.8s/step (the whole cycle fits the 4s carousel INTERVAL). Per-element
   offsets within a step's turn: branch draws from WebRun (0.25s) -> card lights
   (0.40s) -> check pops (0.70s) -> arrow hands off to the next step (0.90s).
   Step index comes from --s on .bizf-step (inherited by .bizf-check); branches
   and arrows are staggered by DOM position via :nth-of-type. animation-fill-mode
   "both" holds the completed state until the slide rotates out, and replays it
   when the slide becomes .active again. */
.biz-tpl.active .bizf-fan path { animation: bizfBranchDraw 0.55s ease both; animation-delay: 0.25s; }
.biz-tpl.active .bizf-fan path:nth-of-type(2) { animation-delay: 1.05s; }
.biz-tpl.active .bizf-fan path:nth-of-type(3) { animation-delay: 1.85s; }
.biz-tpl.active .bizf-step  { animation: bizfStepDone 0.45s ease both; animation-delay: calc(0.40s + var(--s) * 0.8s); }
.biz-tpl.active .bizf-check { animation: bizfCheckPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both; animation-delay: calc(0.70s + var(--s) * 0.8s); }
.biz-tpl.active .bizf-arrow { animation: bizfArrowOn 0.4s ease both; animation-delay: 0.90s; }
.biz-tpl.active .bizf-arrow:nth-of-type(2) { animation-delay: 1.70s; }
@keyframes bizfBranchDraw {
  0%   { opacity: 0.16; stroke-dashoffset: 11; }
  60%  { opacity: 0.8;  stroke-dashoffset: 0; }
  100% { opacity: 0.6;  stroke-dashoffset: 0; }
}
@keyframes bizfStepDone {
  0%   { background: #fff; border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); }
  100% { background: #e6eae4; border-color: var(--forest); box-shadow: 0 6px 20px rgba(26, 58, 50, 0.18); }
}
@keyframes bizfCheckPop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes bizfArrowOn { from { opacity: 0.35; } to { opacity: 1; } }

/* Respect reduced-motion: skip the sequence, show the finished "run complete" state. */
@media (prefers-reduced-motion: reduce) {
  .biz-tpl.active .bizf-fan path,
  .biz-tpl.active .bizf-step,
  .biz-tpl.active .bizf-check,
  .biz-tpl.active .bizf-arrow,
  .biz-tpl.active .bizf-webrun { animation: none !important; }
  .biz-tpl.active .bizf-fan path { opacity: 0.6; }
  .biz-tpl.active .bizf-step { background: #e6eae4; border-color: var(--forest); box-shadow: 0 6px 20px rgba(26, 58, 50, 0.18); }
  .biz-tpl.active .bizf-check { opacity: 1; transform: none; }
  .biz-tpl.active .bizf-arrow { opacity: 1; }
}
@keyframes bizfWrGlow {
  0%, 100% { box-shadow: 0 4px 14px rgba(26, 58, 50, 0.14); }
  50% { box-shadow: 0 0 0 5px rgba(26, 58, 50, 0.1), 0 4px 14px rgba(26, 58, 50, 0.14); }
}

/* Pagination dots */
.biz-wf-dots { display: flex; justify-content: center; gap: 6px; }
.biz-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(26, 58, 50, 0.18); transition: width 0.3s ease, background 0.3s ease; cursor: pointer; }
.biz-dot.active { width: 18px; border-radius: 4px; background: var(--forest); }

/* ---------- Works With Your Stack: integrations marquee ---------- */
/* Sits directly under the forest hero on a cream band, so real tool
   favicons pop by contrast and answer "does it work with MY stack?"
   before the visitor scrolls into the pillars below. */
.wstack-section {
  background: var(--cream);
  padding: 0rem 2rem 4.25rem;
  overflow: hidden;
}
.wstack-inner { max-width: 1120px; margin: 0 auto; }
.wstack-head { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
.wstack-section .section-label { color: var(--coral); }
.wstack-head h2 { color: var(--forest); margin-bottom: 0.85rem; }
/* Highlight via colour only - upright, not the cursive italic. */
.wstack-head h2 em { font-style: normal; color: var(--coral); }
.wstack-head .section-description {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}
.wstack-rows { display: flex; flex-direction: column; gap: 0.85rem; }
.wstack-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.wstack-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
/* Trailing margin per chip (not flex gap) so [setA][setB] is exactly 2x one
   set wide - translateX(-50%) then loops seamlessly with no half-gap jump. */
.wstack-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: none;
  margin-right: 0.7rem;
  background: var(--white);
  border: 1px solid rgba(26, 58, 50, 0.1);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--forest);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(26, 58, 50, 0.04);
}
.wstack-chip img { width: 20px; height: 20px; border-radius: 4px; flex: none; }
.wstack-track-1 { animation: wstack-scroll-l 46s linear infinite; }
.wstack-track-2 { animation: wstack-scroll-r 52s linear infinite; }
.wstack-marquee:hover .wstack-track { animation-play-state: paused; }
@keyframes wstack-scroll-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes wstack-scroll-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (max-width: 640px) {
  .wstack-section { padding: 3rem 1rem 3.25rem; }
  .wstack-chip { font-size: 0.82rem; padding: 0.5rem 0.85rem; }
  .wstack-chip img { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .wstack-track-1, .wstack-track-2 { animation: none; }
  .wstack-marquee { -webkit-mask-image: none; mask-image: none; }
  .wstack-track { width: auto; flex-wrap: wrap; justify-content: center; }
  .wstack-chip { margin-bottom: 0.6rem; }
  .wstack-chip[aria-hidden="true"] { display: none; }
}

/* ---------- New Section 1: Proprietary Stack Proof Bar ---------- */
.proof-bar-section {
  background: var(--forest);
  padding: 5rem 2rem;
}
.proof-bar-inner {
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}
.proof-bar-section .section-label { color: var(--coral); }
.proof-bar-section h2 {
  color: var(--cream);
  margin-bottom: 1rem;
}
.proof-bar-section .section-description {
  color: rgba(255, 255, 255, 0.78);
  max-width: 720px;
  margin: 0 auto 3rem;
}
.proof-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  overflow: hidden;
}
.proof-pillar {
  background: var(--forest);
  padding: 2rem 1.4rem;
  text-align: left;
  transition: background 0.3s ease;
}
.proof-pillar:hover { background: var(--forest-mid); }
.proof-pillar-value {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  color: var(--cream);
  line-height: 1;
  margin-bottom: 0.85rem;
}
.proof-pillar-value em { font-style: normal; color: var(--coral); }
.proof-pillar-desc {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}
.proof-bar-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
  background: var(--cream);
  color: var(--forest);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.7rem 1.6rem;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.proof-bar-link:hover {
  background: #fff;
  color: var(--forest);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

/* ---- "Why WebRun" proof bar: staggered scroll reveal + 10x count-up ----
   The hidden initial state is gated behind .proof-anim, which JS adds only
   when motion is allowed, so no-JS and reduced-motion visitors see the final
   copy immediately. The container fades in as one unit (its 1px-gap dividers
   would otherwise ghost through transparent pillars) while the text inside
   each pillar rises in sequence. */
.proof-pillars.proof-anim {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.proof-pillars.proof-anim.is-visible {
  opacity: 1;
  transform: none;
}
.proof-anim .proof-pillar-value,
.proof-anim .proof-pillar-desc {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.proof-anim.is-visible .proof-pillar-value,
.proof-anim.is-visible .proof-pillar-desc {
  opacity: 1;
  transform: none;
}
.proof-anim.is-visible .proof-pillar:nth-child(1) .proof-pillar-value { transition-delay: 0.10s; }
.proof-anim.is-visible .proof-pillar:nth-child(1) .proof-pillar-desc  { transition-delay: 0.18s; }
.proof-anim.is-visible .proof-pillar:nth-child(2) .proof-pillar-value { transition-delay: 0.24s; }
.proof-anim.is-visible .proof-pillar:nth-child(2) .proof-pillar-desc  { transition-delay: 0.32s; }
.proof-anim.is-visible .proof-pillar:nth-child(3) .proof-pillar-value { transition-delay: 0.38s; }
.proof-anim.is-visible .proof-pillar:nth-child(3) .proof-pillar-desc  { transition-delay: 0.46s; }

/* stop the counting digits from reflowing the line width */
.proof-count { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .proof-pillars.proof-anim,
  .proof-anim .proof-pillar-value,
  .proof-anim .proof-pillar-desc {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- New Section 2: Show Us Your Process ---------- */
.suyp-section {
  background: var(--cream);
  padding: 6rem 2rem;
  overflow: hidden;
}
.suyp-inner { max-width: 1120px; margin: 0 auto; }
.suyp-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 4rem;
  align-items: center;
}
.suyp-copy .section-label { text-align: left; }
.suyp-copy h2 {
  color: var(--charcoal);
  text-align: left;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}
.suyp-copy h2 em { display: block; font-style: normal; color: var(--coral); }
.suyp-copy .section-description {
  text-align: left;
  margin: 0 0 2rem;
  max-width: 520px;
}
.suyp-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.25rem; }
.suyp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.suyp-step { display: flex; gap: 0.85rem; align-items: flex-start; }
.suyp-step-num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  font-size: 0.82rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.suyp-step > div { display: flex; flex-direction: column; gap: 0.05rem; }
.suyp-step b { font-weight: 700; font-size: 0.95rem; color: var(--charcoal); }
.suyp-step > div > span { font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; }

/* Show-us demo: a recorded browser (steps 1–2) that minimises into an
   attachment, then the workflow renders STANDALONE on the plain playground. */
.suyp-demo {
  position: relative;
  display: flex; flex-direction: column;
  height: 430px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 16px;
  overflow: hidden;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
/* The shadowed panel frames the BROWSER only (stages 1–2). The intro card
   (stage 0) and the built workflow (stage 3) carry their own cards and float
   straight on the section. */
.suyp-demo[data-stage="1"],
.suyp-demo[data-stage="2"] {
  background: var(--cream);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.09), 0 2px 8px rgba(0, 0, 0, 0.05);
}
.suyp-stage-area { position: relative; flex: 1; min-height: 0; }

/* ---- The recording browser (steps 1–2) ---- */
.suyp-rec {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  background: #fff;
  transform-origin: 50% 6%;
  transition: transform 0.34s cubic-bezier(.5,.05,.2,1), opacity 0.28s ease;
}
/* frame 1 — the browser hasn't launched yet (hidden behind the prompt) */
.suyp-demo[data-stage="0"] .suyp-rec { opacity: 0; transform: scale(0.92); pointer-events: none; }
/* frame 2 — the browser launches */
.suyp-demo[data-stage="1"] .suyp-rec { animation: suypLaunch 0.32s cubic-bezier(.2,.7,.3,1) both; }
/* final frame — the whole browser minimises away (into the attachment) */
.suyp-demo[data-stage="3"] .suyp-rec { transform: scale(0.42) translateY(-14%); opacity: 0; z-index: 1; pointer-events: none; }
@keyframes suypLaunch { from { opacity: 0; transform: scale(0.9) translateY(8px); } to { opacity: 1; transform: none; } }

/* Frame 1 — the Composer "Show us instead" prompt */
.suyp-intro {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease;
}
.suyp-demo[data-stage="0"] .suyp-intro { opacity: 1; }
.suyp-showus {
  position: relative;
  width: calc(100% - 2.4rem); max-width: 470px;
  display: flex; align-items: center; gap: 0.9rem;
  background: #ececeb; border: 1px solid rgba(0,0,0,0.13);
  border-radius: 14px; padding: 1.05rem 1.15rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05);
}
.suyp-showus-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--forest); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.suyp-showus-icon svg { width: 20px; height: 20px; }
.suyp-showus-copy { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.suyp-showus-copy b { font-size: 0.95rem; color: var(--charcoal); }
.suyp-showus-copy span { font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; }
.suyp-rec-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.45rem; background: var(--forest); color: #fff; border: none; border-radius: 10px; padding: 0.65rem 0.95rem; font-family: var(--font-sans); font-size: 0.84rem; font-weight: 600; cursor: pointer; }
.suyp-rec-btn svg { width: 16px; height: 16px; }
.suyp-demo[data-stage="0"] .suyp-rec-btn { animation: suypBtnPress 1.2s ease infinite; }
@keyframes suypBtnPress { 0%, 55% { transform: none; box-shadow: none; } 66% { transform: scale(0.96); box-shadow: 0 0 0 6px rgba(26,58,50,0.12); } 78%, 100% { transform: none; } }
/* Sit the cursor on the "Record your screen" button (right-anchored to clear the button's right edge,
   top:50% to track the button's vertical centre) so its tip lands on the button, not below it. */
.suyp-intro-cur { position: absolute; right: 52px; top: 50%; width: 15px; height: 19px; z-index: 4; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
.suyp-intro-cur svg { width: 100%; height: 100%; display: block; }
.suyp-demo[data-stage="0"] .suyp-intro-cur { animation: suypIntroCur 1.2s ease infinite; }
@keyframes suypIntroCur { 0%, 55% { transform: translate(0,0); } 66% { transform: translate(-2px,2px) scale(0.85); } 78%, 100% { transform: translate(0,0); } }

.suyp-bchrome {
  display: flex; align-items: flex-end; gap: 0.6rem;
  background: #e8e9eb;
  padding: 0.5rem 0.7rem 0;
  border-bottom: 1px solid #dfe0e3;
  flex-shrink: 0;
}
.suyp-bdots { display: flex; gap: 6px; flex-shrink: 0; padding-bottom: 0.5rem; }
.suyp-bdots span { width: 10px; height: 10px; border-radius: 50%; }
.suyp-bdots span:nth-child(1) { background: #EF4444; }
.suyp-bdots span:nth-child(2) { background: #F59E0B; }
.suyp-bdots span:nth-child(3) { background: #10B981; }
.suyp-btabs { display: flex; gap: 3px; flex: 1; min-width: 0; align-items: flex-end; }
.suyp-btab {
  display: inline-flex; align-items: center; gap: 0.32rem;
  max-width: 140px; padding: 0.36rem 0.6rem;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: #7a7f87; font-size: 0.72rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background 0.26s ease, color 0.26s ease;
}
.suyp-btab img { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.55; transition: opacity 0.26s ease; }
.suyp-demo[data-stage="1"] .suyp-btab[data-tab="stripe"],
.suyp-demo[data-stage="2"] .suyp-btab[data-tab="xero"] {
  background: #fff; color: var(--charcoal);
  animation: suypTabPop 0.3s ease;
}
.suyp-demo[data-stage="1"] .suyp-btab[data-tab="stripe"] img,
.suyp-demo[data-stage="2"] .suyp-btab[data-tab="xero"] img { opacity: 1; }
@keyframes suypTabPop { 0% { transform: translateY(3px); } 60% { transform: translateY(-1px); } 100% { transform: translateY(0); } }

/* The Contacts tab doesn't exist yet — the cursor opens it from the "+" new-tab button. */
.suyp-btab[data-tab="xero"] { display: none; }
.suyp-demo.tabs-opened .suyp-btab[data-tab="xero"] { display: inline-flex; animation: suypTabPop 0.26s ease; }
.suyp-btab-new {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 24px; height: 24px; margin-bottom: 4px; padding: 0;
  border: none; background: transparent; color: #8b9098;
  border-radius: 7px; cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.suyp-btab-new svg { width: 14px; height: 14px; }
.suyp-btab-new.is-pressed { background: rgba(0,0,0,0.08); color: var(--charcoal); }
.suyp-demo.tabs-opened .suyp-btab-new { display: none; }

.suyp-recpill {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.32rem;
  font-size: 0.66rem; font-weight: 700; color: #EF4444; padding-bottom: 0.5rem;
}
.suyp-recpill .rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #EF4444; animation: pulse 1.4s infinite; }

.suyp-burl {
  display: flex; align-items: center; gap: 0.4rem;
  background: #fff; padding: 0.45rem 0.85rem;
  border-bottom: 1px solid #eee; color: #9ca3af; flex-shrink: 0;
}
.suyp-burl-lock { flex-shrink: 0; }
.suyp-burl-text {
  font-family: var(--font-mono); font-size: 0.72rem; color: #6b7280;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.suyp-bview { position: relative; flex: 1; min-height: 0; background: #fff; overflow: hidden; }
.suyp-page {
  position: absolute; inset: 0;
  padding: 1rem 1.1rem;
  background: #fff;
  opacity: 0; z-index: 1;
  pointer-events: none;
}
/* Active page fades in over a solid bg; the outgoing page hides instantly. */
.suyp-demo[data-stage="1"] .suyp-page-stripe,
.suyp-demo[data-stage="2"] .suyp-page-xero {
  opacity: 1; z-index: 2;
  animation: suypPageIn 0.3s ease;
}
@keyframes suypPageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Stripe · Payments page */
.suyp-sp-head { display: flex; align-items: center; gap: 0.45rem; padding-bottom: 0.6rem; margin-bottom: 0.5rem; border-bottom: 1px solid #eef0f6; }
.suyp-sp-fav { border-radius: 4px; flex-shrink: 0; }
.suyp-sp-head b { font-size: 0.92rem; color: #1a1f36; font-weight: 700; }
.suyp-sp-live { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.62rem; font-weight: 700; color: #635BFF; background: rgba(99,91,255,0.1); border-radius: 100px; padding: 0.15rem 0.5rem; }
.suyp-sp-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #635BFF; }
.suyp-sp-table { display: flex; flex-direction: column; }
.suyp-sp-row { display: grid; grid-template-columns: 1fr 1.95fr 0.85fr 0.55fr; gap: 0.4rem; align-items: center; padding: 0.5rem 0.5rem; border-radius: 7px; }
.suyp-sp-head-row { font-size: 0.61rem; text-transform: uppercase; letter-spacing: 0.05em; color: #8792a2; font-weight: 700; padding: 0.1rem 0.55rem 0.3rem; }
.suyp-sp-amt { font-weight: 700; color: #1a1f36; font-size: 0.8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.suyp-sp-amt i { font-style: normal; font-weight: 500; font-size: 0.62rem; color: #8792a2; }
.suyp-sp-cust { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.suyp-sp-cust b { font-weight: 600; color: #1a1f36; font-size: 0.78rem; }
.suyp-sp-cust i { font-style: normal; font-size: 0.6rem; color: #8792a2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suyp-sp-status { display: inline-flex; align-items: center; gap: 0.32rem; font-size: 0.71rem; font-weight: 600; color: #0e7c52; }
.suyp-dot-ok { width: 7px; height: 7px; border-radius: 50%; background: #30b86c; box-shadow: 0 0 0 2px rgba(48,184,108,0.18); flex-shrink: 0; }
.suyp-sp-date { font-size: 0.7rem; color: #8792a2; text-align: right; white-space: nowrap; }
.suyp-sp-row.is-new { background: rgba(99,91,255,0.06); box-shadow: inset 2px 0 0 #635BFF; }

/* Xero · New contact page */
.suyp-xr-head { display: flex; align-items: center; gap: 0.45rem; padding-bottom: 0.55rem; margin-bottom: 0.7rem; border-bottom: 1px solid #eceff1; }
.suyp-xr-fav { border-radius: 4px; flex-shrink: 0; }
.suyp-xr-crumb { font-size: 0.82rem; color: #9aa4ac; display: inline-flex; align-items: center; gap: 0.32rem; }
.suyp-xr-crumb i { font-style: normal; color: #c4cbd0; }
.suyp-xr-crumb b { color: #1f2d3a; font-weight: 700; }
.suyp-xr-form { display: flex; flex-direction: column; gap: 0.55rem; }
.suyp-xr-field { display: flex; flex-direction: column; gap: 0.22rem; min-width: 0; }
.suyp-xr-label { font-size: 0.66rem; font-weight: 600; color: #6b7780; }
.suyp-xr-input { background: #fff; border: 1px solid #c2cdd6; border-radius: 4px; padding: 0 0.6rem; font-size: 0.8rem; line-height: 1.3; color: #1f2d3a; min-height: 34px; box-sizing: border-box; display: flex; align-items: center; }
.suyp-xr-input.is-typing { border-color: #13B5EA; box-shadow: 0 0 0 3px rgba(19,181,234,0.16); }
.suyp-xr-val { white-space: nowrap; }
.suyp-xr-caret { display: none; width: 1.5px; height: 14px; background: #1f2d3a; margin-left: 1px; vertical-align: text-bottom; }
.suyp-xr-input.is-typing .suyp-xr-caret { display: inline-block; animation: suypCaret 1.05s step-end infinite; }
@keyframes suypCaret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.suyp-xr-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.suyp-xr-tag { background: #e6f6fc; color: #0e7fc1; border-radius: 4px; padding: 0.04rem 0.45rem; font-size: 0.72rem; font-weight: 600; }
.suyp-xr-muted { color: #8a949c; }
.suyp-xr-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.8rem; margin-top: 0.9rem; }
.suyp-xr-cancel { font-size: 0.8rem; color: #6b7780; font-weight: 600; }
.suyp-xr-save { background: #0078C8; color: #fff; border: none; border-radius: 5px; padding: 0.5rem 1.15rem; font-family: var(--font-sans); font-size: 0.82rem; font-weight: 700; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.12); }

/* The cursor lives at the browser level (child of .suyp-rec) so it can travel from a
   page row all the way up to the tab bar. JS sets left/top in px for every action. */
.suyp-cur { position: absolute; left: 50%; top: 50%; width: 15px; height: 19px; z-index: 30; opacity: 0; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.28)); transition: left 0.21s cubic-bezier(.5,.02,.2,1), top 0.21s cubic-bezier(.5,.02,.2,1), opacity 0.18s ease; }
.suyp-cur svg { width: 100%; height: 100%; display: block; transition: transform 0.08s ease; }
.suyp-cur.no-anim { transition: none !important; }
.suyp-cur.is-press svg { transform: translate(1px, 1px) scale(0.82); }
.suyp-cur::after { content: ''; position: absolute; left: -7px; top: -6px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(26,58,50,0.5); transform: scale(0.2); opacity: 0; pointer-events: none; }
.suyp-cur.is-click::after { animation: suypClick 0.3s ease-out; }
@keyframes suypClick { 0% { transform: scale(0.2); opacity: 0.8; } 100% { transform: scale(1.8); opacity: 0; } }
.suyp-demo[data-stage="1"] .suyp-cur,
.suyp-demo[data-stage="2"] .suyp-cur,
.suyp-demo.deploy-step .suyp-cur { opacity: 1; }

/* the customer details, highlighted as they're copied off the Stripe row */
.suyp-sp-cust.is-copying { background: rgba(99,91,255,0.16); outline: 1.5px solid rgba(99,91,255,0.45); outline-offset: 2px; border-radius: 4px; }

/* "Copied" confirmation that pops by the cursor at the copy beat */
.suyp-copy-toast { position: absolute; z-index: 31; pointer-events: none; display: inline-flex; align-items: center; gap: 0.28rem; background: var(--forest); color: #fff; font-size: 0.66rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 100px; box-shadow: 0 6px 16px rgba(0,0,0,0.22); white-space: nowrap; opacity: 0; transform: translateY(5px) scale(0.9); transition: opacity 0.12s ease, transform 0.12s ease; }
.suyp-copy-toast svg { width: 11px; height: 11px; }
.suyp-copy-toast.is-show { opacity: 1; transform: translateY(0) scale(1); }

/* the destination tab the cursor 'clicks' just before the page switches, and the Save press */
.suyp-btab.is-pressed { background: #fff; color: var(--charcoal); }
.suyp-btab.is-pressed img { opacity: 1; }
.suyp-xr-save { transition: transform 0.12s ease, box-shadow 0.12s ease; }
.suyp-xr-save.is-press { transform: scale(0.96); box-shadow: 0 0 0 4px rgba(0,120,200,0.18); }
/* The one narration channel: a quiet caption tethered to the cursor that rides along as
   it moves — no bold pinned pill, no separate caption strip below the demo. It sits just
   above the pointer by default and is kept inside the frame by the flip classes below. */
.suyp-action {
  position: absolute; left: -2px; bottom: calc(100% + 7px); z-index: 1;
  white-space: nowrap; pointer-events: none;
  background: rgba(255, 255, 255, 0.97); color: var(--charcoal);
  font-size: 0.7rem; font-weight: 600;
  padding: 0.22rem 0.55rem; border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.14);
}
.suyp-action:empty { display: none; }
/* keep it on-frame: open left when the cursor nears the right edge, drop below near the top (tab bar) */
.suyp-cur.chip-left  .suyp-action { left: auto; right: -2px; }
.suyp-cur.chip-below .suyp-action { bottom: auto; top: calc(100% + 7px); }

/* Honour reduced-motion: keep the storyboard, drop the in-between motion */
@media (prefers-reduced-motion: reduce) {
  .suyp-cur { transition: opacity 0.2s ease; }
  .suyp-cur.is-click::after { animation: none; }
  .suyp-cur svg { transition: none; }
  .suyp-xr-input.is-typing .suyp-xr-caret { animation: none; opacity: 1; }
  .suyp-rec, .suyp-copy-toast, .suyp-deploy-btn, .suyp-deploy-done { transition: none; }
  .suyp-deploy-spin { animation: none; }
  .suyp-deploy-status .biz-status-dot::after { animation: none; opacity: 0; }
}

/* ---- The built result (step 3): standalone on the plain playground ---- */
.suyp-built {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; gap: 0.7rem;
  padding: 1.1rem 1.2rem;
  pointer-events: none;
}
.suyp-demo[data-stage="3"] .suyp-built { z-index: 4; pointer-events: auto; }
.suyp-attach, .suyp-flow, .suyp-deploy-row { opacity: 0; }
.suyp-demo[data-stage="3"] .suyp-attach { animation: suypRise 0.3s ease both; }
.suyp-demo[data-stage="3"] .suyp-flow { animation: suypRise 0.3s ease 0.05s both; }
.suyp-demo[data-stage="3"] .suyp-deploy-row { animation: suypRise 0.3s ease 0.1s both; }
@keyframes suypRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* the recording, minimised to an attachment chip */
.suyp-attach {
  display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0;
  background: #fff; border: 1px solid rgba(0,0,0,0.1);
  border-radius: 10px; padding: 0.5rem 0.65rem;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}
.suyp-attach-thumb {
  width: 38px; height: 28px; border-radius: 5px; flex-shrink: 0;
  background: #f1f0ec; border: 1px solid rgba(0,0,0,0.12);
  display: flex; align-items: flex-start; padding: 4px;
}
.suyp-attach-bar { display: flex; gap: 2px; }
.suyp-attach-bar i { width: 3px; height: 3px; border-radius: 50%; background: #c7c7c7; }
.suyp-attach-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.suyp-attach-meta b { font-size: 0.8rem; color: var(--charcoal); }
.suyp-attach-meta span { font-size: 0.68rem; color: var(--text-muted); }
.suyp-attach-ok { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.3rem; color: var(--green-success); font-weight: 700; font-size: 0.72rem; }
.suyp-attach-ok svg { width: 12px; height: 12px; }

/* the standalone workflow render, on a plain playground canvas */
.suyp-flow {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px;
  padding: 0.55rem 0.65rem 0.7rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}
.suyp-flow-label { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #9ca3af; margin-bottom: 0.4rem; }
.suyp-flow-canvas {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
  background-color: #fbfaf8;
  background-image: radial-gradient(rgba(26,58,50,0.13) 1px, transparent 1px);
  background-size: 14px 14px;
  border: 1px solid rgba(0,0,0,0.05); border-radius: 9px;
  padding: 0.85rem;
}
.suyp-bf-trigger { display: inline-flex; align-items: center; gap: 0.35rem; background: #dee0dc; border: 1px solid var(--forest); color: var(--forest); border-radius: 999px; font-size: 0.72rem; font-weight: 600; padding: 0.26rem 0.65rem; }
.suyp-bf-trigger svg { width: 12px; height: 12px; }
.suyp-bf-down { width: 0; height: 13px; border-left: 1.5px dashed rgba(26,58,50,0.4); }
.suyp-bf-webrun { display: inline-flex; align-items: center; gap: 0.4rem; background: #fff; border: 1px solid var(--forest); border-radius: 9px; padding: 0.32rem 0.65rem; font-size: 0.8rem; font-weight: 700; color: var(--charcoal); box-shadow: 0 3px 10px rgba(26,58,50,0.12); }
.suyp-bf-wr { width: 22px; height: 22px; border-radius: 6px; background: var(--forest); display: flex; align-items: center; justify-content: center; }
.suyp-bf-wr svg { width: 14px; height: 14px; }
.suyp-bf-apps { display: flex; align-items: center; gap: 0.35rem; }

/* Final step: a Deploy button that, once clicked, becomes the "deployed" confirmation. */
.suyp-deploy-row { position: relative; flex-shrink: 0; min-height: 48px; }
.suyp-deploy-btn {
  position: absolute; inset: 0; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--forest); color: #fff; border: none; border-radius: 12px;
  font-family: var(--font-sans); font-size: 0.92rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 18px rgba(26, 58, 50, 0.22);
  transition: opacity 0.18s ease, transform 0.1s ease, box-shadow 0.1s ease;
}
.suyp-deploy-ico { width: 16px; height: 16px; }
.suyp-deploy-btn.is-press { transform: scale(0.97); box-shadow: 0 2px 8px rgba(26, 58, 50, 0.22); }
.suyp-deploy-spin { display: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; animation: suypSpin 0.55s linear infinite; }
@keyframes suypSpin { to { transform: rotate(360deg); } }
/* deploying: swap the icon for a spinner */
.suyp-demo.is-deploying .suyp-deploy-ico { display: none; }
.suyp-demo.is-deploying .suyp-deploy-spin { display: inline-block; }
/* deployed: button fades out, confirmation fades in */
.suyp-demo.is-deployed .suyp-deploy-btn { opacity: 0; pointer-events: none; }
.suyp-deploy-done {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid rgba(34, 197, 94, 0.5); border-radius: 12px;
  padding: 0.6rem 0.9rem; box-shadow: 0 4px 14px rgba(34, 197, 94, 0.14);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.suyp-demo.is-deployed .suyp-deploy-done { opacity: 1; transform: none; }
.suyp-deploy-status { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 0.82rem; color: var(--forest); }
/* Live status dot — a real dot with an expanding "ping" halo so the agent reads as live, not static. */
.suyp-deploy-status .biz-status-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--green-success); flex-shrink: 0; }
.suyp-deploy-status .biz-status-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--green-success); animation: suypLivePing 1.7s ease-out infinite; }
@keyframes suypLivePing { 0% { transform: scale(1); opacity: 0.5; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
/* "Live" tag next to the deployed label */
.suyp-live-tag { display: inline-flex; align-items: center; margin-left: 0.1rem; font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-success); background: rgba(34,197,94,0.12); border-radius: 100px; padding: 0.1rem 0.42rem; }
.suyp-deploy-next { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); }

/* ---------- New Section 3: Templates ---------- */
.templates-section {
  background: var(--cream-dark);
  padding: 6rem 2rem;
}
.templates-inner { max-width: 1100px; margin: 0 auto; }
.templates-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}
.tpl-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.tpl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.1);
  border-color: rgba(26, 58, 50, 0.25);
}
.tpl-card-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--charcoal);
  line-height: 1.3;
  letter-spacing: -0.01em;
  padding: 1.4rem 1.4rem 0;
}
.tpl-card-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.55;
  /* Bottom spacing is a MARGIN, not padding, on purpose: -webkit-line-clamp
     still paints the clipped 4th line, and any bottom *padding* sits inside
     the overflow box, letting that line peek through. A margin lives outside
     the clip, so the cut lands exactly at the end of line 3. */
  padding: 0.55rem 1.4rem 0;
  margin-bottom: 1.2rem;
  /* Cap the card blurb at three lines so card heights stay even; the full
     copy still shows on the /automate/ detail page each card links to.
     NB: no flex-grow here — a stretched -webkit-box defeats the clamp. The
     footer is pinned to the bottom via margin-top:auto on .tpl-card-foot. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
/* Shaded footer mirroring the dashboard workflow card */
.tpl-card-foot {
  background: var(--cream);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding: 1rem 1.4rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  /* Pin to the card bottom now that .tpl-card-desc no longer flex-grows,
     keeping the app-flow rows aligned across cards of uneven copy length. */
  margin-top: auto;
}
/* (.tpl-trigger removed — trigger hidden to reduce card clutter) */
/* App-flow chips (favicon + name + chevron) — the dashboard's card language */
.tpl-flow { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 0.3rem; }
/* 3-app rows are compacted just enough to stay on one line in narrow cards */
.tpl-flow-3 { gap: 0.22rem; }
.tpl-flow-3 .appchip { font-size: 0.68rem; padding: 0.2rem 0.45rem 0.2rem 0.34rem; gap: 0.28rem; }
.tpl-flow-3 .appchip-img { width: 14px; height: 14px; }
.tpl-flow-3 .appsep { font-size: 0.7rem; }
.appchip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  padding: 0.24rem 0.55rem 0.24rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--charcoal);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.appchip-img { width: 16px; height: 16px; border-radius: 4px; object-fit: contain; display: block; }
.appchip-generic { display: inline-flex; align-items: center; justify-content: center; color: var(--forest); background: rgba(26, 58, 50, 0.08); }
.appchip-generic svg { width: 11px; height: 11px; }
.appsep { color: var(--text-muted); font-weight: 700; font-size: 0.78rem; opacity: 0.55; }
/* Whole card is a link to its /automate/ landing page — reset anchor defaults */
.tpl-card-link { text-decoration: none; color: inherit; cursor: pointer; }
.tpl-card-link:hover { text-decoration: none; }
.templates-foot { text-align: center; margin-top: 3rem; }
.templates-foot-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1px solid rgba(26, 58, 50, 0.3);
  padding-bottom: 2px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.templates-foot-link:hover { color: var(--coral); border-color: var(--coral); }

/* ---------- Deploy section (integration rewrite) — 6 tiles ---------- */
.deploy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin-top: 2.5rem;
}
.deploy-tile {
  background: var(--cream);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 1.4rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.deploy-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
  border-color: rgba(26, 58, 50, 0.22);
}
.deploy-tile-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(26, 58, 50, 0.08);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.9rem;
}
.deploy-tile-icon svg { width: 21px; height: 21px; }
.deploy-tile-logos { display: flex; align-items: center; gap: 6px; margin-bottom: 0.9rem; }
.deploy-tile-logos img { width: 22px; height: 22px; object-fit: contain; }
.deploy-tile-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--charcoal);
  margin-bottom: 0.35rem;
}
.deploy-tile-desc { font-size: 0.84rem; color: var(--text-muted); line-height: 1.5; }
/* Center the DEPLOY section header (the integrate-section forces labels left) */
.integrate-section .section-header { text-align: center; margin-bottom: 0; }
.integrate-section .section-header .section-label { text-align: center; margin-bottom: 1rem; }
.integrate-section .deploy-grid { max-width: 1000px; margin-left: auto; margin-right: auto; }
.deploy-marquee { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid rgba(0,0,0,0.07); }
.deploy-marquee .marquee-wrapper::before { background: linear-gradient(to right, var(--white) 0%, rgba(255,255,255,0.8) 40%, transparent 100%); }
.deploy-marquee .marquee-wrapper::after { background: linear-gradient(to left, var(--white) 0%, rgba(255,255,255,0.8) 40%, transparent 100%); }

/* ---------- Speed: "vs typical AI agent" tile (sits inside the light telemetry card) ---------- */
.speed-vs-tile {
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
}
.speed-vs-label {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}
.speed-vs-value {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text);
  line-height: 1.5;
}
.speed-vs-value strong { color: var(--coral); font-weight: 600; }

/* ---------- Capabilities ACT card: Stripe → Legacy Admin (CSS-driven) ---------- */
#act-demo .act-event,
#act-demo .act-fill,
#act-demo .act-btn-on,
#act-demo .act-btn-label-on,
#act-demo .act-cursor,
#act-demo .act-success { opacity: 0; }
#act-demo .act-cursor { transform: translate(150px, 96px); }

.cap-card.active #act-demo .act-event      { animation: actEventIn  7s ease-in-out infinite; }
.cap-card.active #act-demo .act-fill-1     { animation: actFieldIn  7s ease-in-out infinite; }
.cap-card.active #act-demo .act-fill-2     { animation: actFieldIn2 7s ease-in-out infinite; }
.cap-card.active #act-demo .act-fill-3     { animation: actFieldIn3 7s ease-in-out infinite; }
.cap-card.active #act-demo .act-cursor     { animation: actCursor   7s ease-in-out infinite; }
.cap-card.active #act-demo .act-btn-on     { animation: actBtnOn    7s ease infinite; }
.cap-card.active #act-demo .act-btn-label-on  { animation: actBtnOn  7s ease infinite; }
.cap-card.active #act-demo .act-btn-label-off { animation: actBtnOff 7s ease infinite; }
.cap-card.active #act-demo .act-success    { animation: actSuccess  7s ease infinite; }

@keyframes actEventIn { 0% { opacity: 0; transform: translateY(-6px); } 4% { opacity: 1; transform: none; } 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes actFieldIn  { 0%, 12% { opacity: 0; } 17% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes actFieldIn2 { 0%, 22% { opacity: 0; } 27% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes actFieldIn3 { 0%, 32% { opacity: 0; } 37% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes actCursor {
  0%, 40% { opacity: 0; transform: translate(150px, 96px); }
  45%     { opacity: 1; transform: translate(150px, 96px); }
  53%     { opacity: 1; transform: translate(150px, 150px); }
  56%     { opacity: 1; transform: translate(150px, 150px) scale(0.86); }
  59%     { opacity: 1; transform: translate(150px, 150px) scale(1); }
  67%     { opacity: 0; transform: translate(150px, 150px); }
  100%    { opacity: 0; }
}
@keyframes actBtnOn  { 0%, 54% { opacity: 0; } 58% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes actBtnOff { 0%, 54% { opacity: 1; } 58% { opacity: 0; } 100% { opacity: 0; } }
@keyframes actSuccess { 0%, 64% { opacity: 0; } 70% { opacity: 1; } 96% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .proof-pillars { grid-template-columns: repeat(3, 1fr); }
  .suyp-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .templates-grid { grid-template-columns: repeat(2, 1fr); }
  .deploy-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .proof-pillars { grid-template-columns: 1fr; }
  .templates-grid { grid-template-columns: 1fr; }
  .deploy-grid { grid-template-columns: 1fr; }
  /* Compact bar on phones: logo · Start Free · menu. Shrink the logo a touch so
     the centred Start Free button keeps breathing room on the narrowest screens. */
  .audience-business nav { padding: 0.6rem 0.9rem; column-gap: 0.6rem; }
  .audience-business .logo { font-size: 1.1rem; gap: 0.4rem; }
  .audience-business .logo-icon { width: 28px; height: 28px; }
  .audience-business .nav-cta .btn-primary { font-size: 0.82rem; padding: 0.5rem 0.95rem; }
  .suyp-grid { gap: 2rem; }
  /* The "Show us instead" composer card is a horizontal row: icon | copy |
     "Record your screen" button. On phones all three can't share one row, so
     the copy column collapses to ~0 and the title wraps one word per line.
     Wrap the button onto its own full-width row and let the copy take the
     whole top row beside the icon. */
  .suyp-showus { flex-wrap: wrap; row-gap: 0.75rem; }
  .suyp-rec-btn { flex: 1 0 100%; justify-content: center; }
  /* The hint cursor is right/top-anchored to the button's desktop position;
     once the button wraps below, that anchor no longer lands on it — hide it
     (the button keeps its own press-pulse animation as the affordance). */
  .suyp-intro-cur { display: none; }
}

/* ============================================================
   Landing polish — business-only (this file is not loaded on
   index.php, so nothing here touches the developer page).
   ============================================================ */

/* #12 — The fixed nav was overlapping section headings whenever a
   footer/anchor link jumped to a section. Offset anchored scrolling
   by the nav's height so headings clear the bar. */
html { scroll-padding-top: 96px; }

/* #10 — Pricing: lead with the per-task cost as the hero figure, with the
   manual-labour cost beside it, struck through — "what you'd pay otherwise". */
.pricing-rates { align-items: center; }
.rate-item-hero .rate-value { font-size: 3.6rem; color: var(--coral); line-height: 1; white-space: nowrap; }
.rate-item-hero .rate-prefix { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; opacity: 0.7; vertical-align: middle; margin-right: 0.35rem; }
.rate-item-hero .rate-label { opacity: 1; font-weight: 600; }
.pricing-rates .rate-item:not(.rate-item-hero) .rate-value { font-size: 1.95rem; opacity: 0.55; white-space: nowrap; text-decoration: line-through; text-decoration-thickness: 2px; }
.pricing-rates .rate-item:not(.rate-item-hero) .rate-label { opacity: 0.85; }

/* #13 — The demo video block rendered as a black void before play (and
   3.mp4 is currently missing). Poster frames now cover that; this just
   makes the brief pre-poster flash on-brand instead of pure black. */
.demo-video-container { background: var(--forest); }

/* Templates: 3-up by default. Step down to 2-up then 1-up sooner than the
   shared 980/600 breakpoints so cards stay roomy and the app-flow chips
   never have to wrap. */
@media (max-width: 1024px) { .templates-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .templates-grid { grid-template-columns: 1fr; } }

/* ============================================================
   #demo — "Run your business from your phone" (Telegram +
   WhatsApp control). Replaces the old video/capability-card
   cycler. Reuses the shared forest .demo-section band; all the
   phone + chat styling below is business-only. Deliberately
   STATIC (no JS, no animation) — the page already has plenty of
   animated demos; this is a product illustration, not another.
   ============================================================ */
.phone-pitch {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3.5rem;
}
.phone-pitch-visual { flex: 0 0 auto; display: flex; justify-content: center; }
.phone-pitch-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.phone-pitch-copy .section-header { text-align: left; margin-bottom: 0; }
.phone-pitch-copy .section-description { margin: 0; max-width: 560px; }
.phone-pitch-copy h2 em { font-style: normal; color: var(--coral); }

/* Keep the section in the white nav header's footprint (same 80% width +
   1200px cap) so it doesn't sprawl wider than the header pill. Desktop only —
   below 901px the row stacks and should use the full column. */
@media (min-width: 901px) {
  .audience-business .demo-container { width: 80%; }
  /* Center the phone + copy as a balanced pair. Without this the copy column
     stretched to the right edge while its text only filled ~half of it,
     leaving a large void on the right. Capping the copy and centering the
     group splits the leftover space evenly on both sides. */
  .phone-pitch { justify-content: center; }
  .phone-pitch-copy { flex: 0 1 580px; max-width: 580px; }
}

/* ---- The phone ---- */
.phone-device {
  position: relative;
  width: 312px;
  padding: 13px;
  background: linear-gradient(160deg, #11231d, #0a1714);
  border-radius: 46px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 55px 100px -25px rgba(0, 0, 0, 0.65),
    0 26px 52px -14px rgba(0, 0, 0, 0.48),
    0 6px 16px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.phone-notch {
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  width: 112px;
  height: 24px;
  background: #0a1714;
  border-radius: 0 0 16px 16px;
  z-index: 3;
}
.phone-screen {
  position: relative;
  height: 590px;
  border-radius: 34px;
  overflow: hidden;
  background: #E6DFD6;
  display: flex;
  flex-direction: column;
}

/* Status bar (shares the forest header colour, like WhatsApp) */
.phone-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  padding: 0 18px;
  background: var(--forest);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  position: relative;
  z-index: 2;
}
.phone-status-ic { display: inline-flex; align-items: center; gap: 5px; }
.phone-status-ic svg { height: 11px; width: auto; display: block; }

/* Chat app bar */
.chat-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 10px;
  background: var(--forest);
  color: #fff;
}
.chat-back { width: 20px; height: 20px; flex: 0 0 auto; opacity: 0.9; }
.chat-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--coral);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.chat-avatar svg { width: 17px; height: 17px; }
.chat-who { display: flex; flex-direction: column; line-height: 1.15; margin-right: auto; }
.chat-who b { font-size: 14px; font-weight: 600; }
.chat-who i { font-style: normal; font-size: 11px; opacity: 0.72; }
.chat-bar-ic { width: 18px; height: 18px; opacity: 0.85; flex: 0 0 auto; }

/* Conversation */
.chat-body {
  flex: 1;
  overflow: hidden;
  padding: 14px 12px 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7px;
  background: #E6DFD6;
}
.chat-day {
  align-self: center;
  background: rgba(255, 255, 255, 0.8);
  color: #5a6b62;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 8px;
  margin-bottom: 3px;
}
.chat-msg {
  max-width: 82%;
  padding: 7px 10px 5px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #1f2c26;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  overflow-wrap: break-word;
}
.chat-msg.in { align-self: flex-start; background: #fff; border-top-left-radius: 3px; }
.chat-msg.out { align-self: flex-end; background: #D9FDD3; border-top-right-radius: 3px; }
.chat-meta {
  float: right;
  margin: 4px 0 -1px 10px;
  font-size: 9.5px;
  color: #8a978f;
  white-space: nowrap;
}
.chat-tick { color: #53BDEB; font-size: 10px; letter-spacing: -1.5px; margin-left: 1px; }

/* Result card inside a bubble */
.chat-msg.has-card { padding: 5px; background: #fff; max-width: 88%; }
.chat-card {
  display: block;
  background: #F4F7F4;
  border: 1px solid #E3EAE3;
  border-left: 3px solid var(--coral);
  border-radius: 8px;
  padding: 9px 10px;
}
.chat-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 12px;
  color: #1f2c26;
  margin-bottom: 7px;
}
.chat-card-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}
.chat-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
  font-size: 11.5px;
  color: #4b5a52;
}
.chat-card-row b { color: #1f2c26; font-weight: 700; }
.chat-card-ok { color: #15803d; font-weight: 600; }
.chat-card-foot {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #E3EAE3;
  font-size: 10.5px;
  color: #7c8a82;
}

/* Composer */
.chat-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 12px;
  background: #E6DFD6;
}
.chat-field {
  flex: 1;
  background: #fff;
  border-radius: 20px;
  padding: 9px 14px;
  font-size: 12.5px;
  color: #9aa49d;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.chat-send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--coral);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(232, 93, 76, 0.4);
}
.chat-send svg { width: 18px; height: 18px; margin-left: -1px; }

/* ---- Copy column: supporting points + channel pills ---- */
.phone-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
}
.phone-point {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  line-height: 1.5;
}
.phone-point b { color: #fff; font-weight: 600; }
/* Stacked text: bold lead-in on its own line, description underneath */
.phone-point-txt { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.phone-point-title { color: #fff; font-weight: 600; font-size: 1rem; line-height: 1.35; }
.phone-point-desc { color: rgba(255, 255, 255, 0.66); font-size: 0.9rem; line-height: 1.5; }
.phone-point-ic {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(232, 93, 76, 0.16);
  color: #F08C79;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.phone-point-ic svg { width: 19px; height: 19px; }

.phone-channels { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.25rem; }
.phone-channel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 100px;
  padding: 0.45rem 0.9rem 0.45rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
}
/* Channel glyphs: self-built brand marks (Telegram plane / WhatsApp bubble)
   rendered as a white silhouette on a coral squircle — mirrors the real app
   icons for recognition, but recoloured to the page's coral so they sit on
   palette instead of clashing (matches the coral .chat-send button above). */
.phone-channel-ic {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--coral);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(232, 93, 76, 0.35);
}
.phone-channel-ic svg { width: 15px; height: 15px; fill: #fff; display: block; }
/* The Telegram plane carries more empty space in its box than the WhatsApp
   mark — nudge it up a touch for optical parity, and offset the plane's
   built-in lean so it reads centred. */
.phone-channel-tg svg { width: 17px; height: 17px; margin-left: -1px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .phone-pitch { flex-direction: column; gap: 2.25rem; }
  .phone-pitch-copy { align-items: center; text-align: center; }
  .phone-pitch-copy .section-header { text-align: center; }
  .phone-pitch-copy .section-description { margin: 0 auto; }
  .phone-points { text-align: left; max-width: 430px; }
  .phone-channels { justify-content: center; }
}
@media (max-width: 380px) {
  .phone-device { width: 268px; }
  .phone-screen { height: 552px; }
}

/* Footer columns are unified in style.css (.footer-grid = 3 content-width
   columns, centered as a group). Both the developer and business footers now
   have three columns, so the old business-only grid override is retired. */

/* Scheduled Tasks vignette — split each row into two columns so the cards
   line up: task name + frequency on the left, status pill + control buttons
   on the right. The two stacked text lines would otherwise make this card
   taller than its siblings, so the row/vignette padding is tightened to keep
   the vignette height in line with the Agent Memory / Skills cards.
   Business-only; index.php and the shared style.css base rule
   (.env-vignette-tasks .env-task-row) are intentionally left untouched. */
.env-vignette-tasks {
  padding-top: 11px;
  padding-bottom: 11px;
}
.env-vignette-tasks .env-task-row {
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
.env-task-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.env-task-info .env-task-name,
.env-task-info .env-task-freq {
  white-space: nowrap;
  line-height: 1.3;
}
.env-task-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ===== FAQ section — SEO/AEO addition (2026-06). Scoped to business.php via $extra_css. ===== */
.faq-section { background: var(--cream, #FAF7F2); padding: 5.5rem 2rem 6rem; }
.faq-container { max-width: 760px; margin: 0 auto; }
.faq-section .section-header { text-align: center; margin-bottom: 2.5rem; }
.faq-list { display: flex; flex-direction: column; gap: .8rem; }
.faq-item { background: #fff; border: 1px solid rgba(26, 58, 50, .12); border-radius: 14px; }
.faq-item[open] { border-color: rgba(26, 58, 50, .28); }
.faq-question { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.3rem; font-weight: 600; font-size: .98rem; color: var(--forest, #1a3a32); }
.faq-question::-webkit-details-marker { display: none; }
.faq-marker { flex: 0 0 auto; width: 1.1rem; text-align: center; }
.faq-marker::before { content: '+'; font-size: 1.15rem; line-height: 1; color: var(--coral, #E85D4C); font-weight: 500; }
.faq-item[open] .faq-marker::before { content: '\2212'; }
.faq-answer { margin: 0; padding: 0 1.3rem 1.2rem; color: #475467; line-height: 1.65; font-size: .95rem; }
.faq-answer a { color: var(--forest, #1a3a32); text-decoration: underline; text-underline-offset: 2px; }
.faq-updated { text-align: center; margin-top: 2.25rem; font-size: .78rem; letter-spacing: .04em; color: #8a948f; }
@media (max-width: 640px) { .faq-section { padding: 3.5rem 1rem 4rem; } }

/* Always-visible reliability stats strip (moved out of the engine expander). */
.engine-stats-always { padding-bottom: .75rem; }

/* ============================================================================
   Subscription plans — boards, toggle, "In every plan", comparison table.
   Rendered by includes/pricing-data.php on the home #pricing section and on
   /pricing. WebRun tokens only (forest / coral / cream / green). 2026-07.
   ============================================================================ */

/* ---- Section wrappers -------------------------------------------------- */
.plans-section { max-width: 1140px; margin: 0 auto; padding: 7rem 2rem 5rem; }
.plans-pertask { text-align: center; margin: -0.25rem 0 2.1rem; font-size: 1.02rem; color: var(--text-muted); }
.plans-pertask strong { color: var(--coral); font-weight: 700; }
/* Coral accent on the merged 1¢ line in the home pricing description. */
.plans-section .section-description strong { color: var(--coral); font-weight: 700; }

/* ---- Monthly / Yearly toggle ------------------------------------------ */
.plans-toggle-wrap { text-align: center; margin: 0 0 2.25rem; }
.plans-toggle { display: inline-flex; gap: 4px; padding: 4px; background: var(--cream-dark); border-radius: 999px; }
.plans-toggle-btn { border: 0; background: transparent; cursor: pointer; font: inherit; font-weight: 600; font-size: .9rem; color: var(--forest); padding: .55rem 1.45rem; border-radius: 999px; transition: background .2s ease, color .2s ease; }
.plans-toggle-btn.is-active { background: var(--forest); color: #fff; }
.plans-toggle-btn:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }

/* ---- Board grid + card ------------------------------------------------- */
.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; max-width: 1080px; margin: 0 auto; padding-top: 6px; }
.plan-board { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cream-dark); border-radius: 20px; padding: 2rem 1.75rem; }
/* Highlight the popular plan with a bold forest border + a gentle "hero" lift on
   desktop (see the min-width rule below) — no heavy drop shadow. */
.plan-board--popular { border: 2px solid var(--forest); }
@media (min-width: 921px) {
  .plan-board--popular { transform: scale(1.035); z-index: 1; }
}

.plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--coral); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .35rem .85rem; border-radius: 999px; white-space: nowrap; }

.plan-name { font-size: 1.05rem; font-weight: 700; color: var(--forest); }
.plan-price { font-family: var(--font-serif); font-size: 3rem; line-height: 1; margin: .35rem 0 0; color: var(--charcoal); letter-spacing: -.01em; }
.plan-per { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; color: var(--text-muted); margin-left: .15rem; }
.plan-billed { font-size: .78rem; color: var(--text-muted); min-height: 1.1em; margin-top: .45rem; }
.plans-grid[data-period="monthly"] .plan-billed [data-billed="y"] { display: none; }
.plans-grid[data-period="yearly"]  .plan-billed [data-billed="m"] { display: none; }

.plan-allowance { margin: 1.1rem 0 .25rem; font-size: .92rem; font-weight: 600; color: var(--charcoal); line-height: 1.45; }
.plan-bonus { display: inline-block; background: var(--green-soft); color: #15803d; font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; vertical-align: middle; white-space: nowrap; }

.plan-feats { list-style: none; margin: 1.15rem 0 1.6rem; padding: 0; display: grid; gap: .7rem; }
.plan-feats li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; color: var(--text); line-height: 1.4; }
.plan-feats b { color: var(--charcoal); font-weight: 700; }
.wr-check-ico { flex: 0 0 auto; }
.plan-feats .wr-check-ico { color: var(--green-success); margin-top: .12rem; }

.plan-cta { margin-top: auto; display: block; text-align: center; text-decoration: none; font-weight: 600; font-size: .92rem; padding: .8rem 1rem; border-radius: 12px; border: 1.5px solid var(--forest); color: var(--forest); background: #fff; transition: background .2s ease, transform .2s ease, color .2s ease; }
.plan-cta:hover { background: rgba(26, 58, 50, .06); transform: translateY(-1px); }
.plan-cta--primary { background: var(--forest); color: #fff; }
.plan-cta--primary:hover { background: #0f2a22; color: #fff; }

.plans-fineprint { text-align: center; color: var(--text-muted); font-size: .82rem; margin: 1.7rem 0 0; }
.plans-viewall { text-align: center; margin: 1.4rem 0 0; }
.plans-viewall a { display: inline-flex; align-items: center; gap: .4rem; color: var(--forest); font-weight: 700; font-size: .95rem; text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 2px; transition: border-color .2s ease; }
.plans-viewall a:hover { border-bottom-color: var(--forest); }
.plans-viewall svg { transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.plans-viewall a:hover svg { transform: translateX(4px); }

/* ---- Pricing page hero ------------------------------------------------- */
.pricing-hero { text-align: center; max-width: 760px; margin: 0 auto; padding: 7rem 2rem 1.5rem; }
.pricing-hero .section-label { margin-bottom: .9rem; }
.pricing-hero h1 { font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1.08; margin-bottom: 1rem; }
.pricing-hero p { color: var(--text-muted); font-size: 1.15rem; line-height: 1.65; max-width: 660px; margin: 0 auto; }

/* ---- "In every plan" strip -------------------------------------------- */
.everyplan { text-align: center; max-width: 920px; margin: 4rem auto 0; }
.everyplan-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); }
.everyplan-chips { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.1rem; }
.everyplan-chip { display: inline-flex; align-items: center; gap: .45rem; background: #fff; border: 1px solid var(--cream-dark); border-radius: 999px; padding: .5rem .9rem; font-size: .85rem; font-weight: 600; color: var(--charcoal); }
.everyplan-chip .wr-check-ico { color: var(--green-success); }

/* ---- Comparison table -------------------------------------------------- */
.compare { max-width: 1000px; margin: 0 auto; padding: 5rem 2rem 2rem; }
.compare .section-header { margin-bottom: 2rem; }
.compare-wrap { overflow-x: auto; border: 1px solid var(--cream-dark); border-radius: 16px; background: #fff; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare-table thead th { text-align: center; padding: 1.15rem 1rem .95rem; border-bottom: 1px solid var(--cream-dark); vertical-align: bottom; }
.compare-table thead th.compare-feat { text-align: left; }
.compare-th-name { display: block; font-weight: 700; font-size: 1rem; color: var(--forest); }
.compare-th-price { display: block; font-weight: 600; font-size: .78rem; color: var(--text-muted); margin-top: .15rem; }
.compare-table th.is-pro, .compare-table td.is-pro { background: rgba(26, 58, 50, .05); }
.compare-group td { background: var(--cream); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--forest-muted); padding: .7rem 1rem; }
.compare-table tbody td { padding: .85rem 1rem; border-bottom: 1px solid #f0ece3; font-size: .9rem; text-align: center; color: var(--text); }
.compare-table tbody td.compare-feat { text-align: left; font-weight: 500; color: var(--charcoal); }
.compare-check { color: var(--green-success); display: inline-flex; }
.compare-dash { color: #c3bcae; }
.compare-table tbody tr:last-child td { border-bottom: 0; }

.pricing-notice { text-align: center; color: var(--text-muted); font-size: .82rem; padding: 2.25rem 2rem 5.5rem; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 920px) {
  .plans-grid { grid-template-columns: 1fr; max-width: 440px; gap: 1.5rem; }
  .plans-section { padding: 5rem 1.25rem 3.5rem; }
  .pricing-hero { padding-top: 5rem; }
  .compare { padding: 3.5rem 1rem 2rem; }
}

/* ============================================================================
   Pricing page — marketing sections (value band, benefit tiles). Rendered by
   pricing.php around the shared boards + comparison table. 2026-07.
   ============================================================================ */

.pricing-hero-trust { margin-top: 1.1rem; font-size: .85rem; font-weight: 600; color: var(--text-muted); }

/* On the pricing page the hero already supplies top spacing, so the boards sit
   closer beneath it than they do inside the home #pricing section. */
.plans-section--tight { padding-top: 2.5rem; }

/* ---- Value band: the 1¢-vs-labor economics (forest marketing centerpiece) -- */
.value-band { background: var(--forest); color: #fff; padding: 4.5rem 2rem; }
.value-band-inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.value-band-copy .section-label { color: #9db8ac; }
.value-band-copy h2 { color: #fff; margin-bottom: 1rem; }
.value-band-copy h2 em { color: var(--coral); font-style: normal; }
.value-band-copy p { color: rgba(255, 255, 255, .82); font-size: 1.06rem; line-height: 1.7; margin-bottom: 1.6rem; }
.value-band-cta { display: inline-flex; align-items: center; gap: .45rem; background: #fff; color: var(--forest); font-weight: 700; font-size: .95rem; padding: .8rem 1.4rem; border-radius: 12px; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.value-band-cta:hover { transform: translateY(-1px); background: #f3f0ea; }
.value-band-cta svg { transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.value-band-cta:hover svg { transform: translateX(4px); }

.value-band-figures { position: relative; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 20px; padding: 2rem 1.5rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.value-fig { text-align: center; }
.value-fig-num { font-family: var(--font-serif); font-size: 2.2rem; line-height: 1; color: #fff; }
.value-fig-lbl { margin-top: .55rem; font-size: .78rem; color: rgba(255, 255, 255, .7); line-height: 1.35; }
.value-fig-muted .value-fig-num { color: rgba(255, 255, 255, .72); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(232, 93, 76, .85); }
.value-fig-vs { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .5); }
.value-fig-badge { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); background: var(--coral); color: #fff; font-size: .78rem; font-weight: 700; padding: .35rem .9rem; border-radius: 999px; white-space: nowrap; }

/* ---- Benefit tiles ----------------------------------------------------- */
.benefits { padding: 5.5rem 2rem; }
.benefits-inner { max-width: 1080px; margin: 0 auto; }
.benefits .section-header { margin-bottom: 2.5rem; }
.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.benefit-tile { background: #fff; border: 1px solid var(--cream-dark); border-radius: 18px; padding: 1.9rem 1.6rem; }
.benefit-ico { width: 44px; height: 44px; border-radius: 12px; background: rgba(26, 58, 50, .07); color: var(--forest); display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; }
.benefit-ico svg { width: 22px; height: 22px; }
.benefit-tile h3 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 700; color: var(--forest); margin-bottom: .5rem; }
.benefit-tile p { font-size: .92rem; color: var(--text); line-height: 1.6; }
.benefit-tile strong { color: var(--charcoal); font-weight: 700; }

@media (max-width: 920px) {
  .value-band { padding: 3.5rem 1.25rem; }
  .value-band-inner { grid-template-columns: 1fr; gap: 2.25rem; }
  .benefits { padding: 3.75rem 1.25rem; }
  .benefits-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
}

/* Homepage: tighten the vertical gaps around the FAQ block (pricing boards → FAQ
   → CTA). Scoped to the home instances only — #pricing is the home boards
   section (the /pricing page's boards have no id), and the --tight modifiers are
   added just to index.php's FAQ + CTA sections, so /pricing and /developer are
   untouched. 2026-07. */
#pricing.plans-section { padding-bottom: 2rem; }
.faq-section--tight { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.audience-business .cta-section--tight { padding-top: 2.75rem; }

/* Softer border on the homepage "View integration docs" button — thinner and
   more transparent than the default .btn-outline. Scoped to the integrate
   section only (business.css doesn't load on /developer, so its identical
   .docs-btn-wrapper button is unaffected). 2026-07. */
.docs-btn-wrapper .btn-outline { border-width: 1px; border-color: rgba(107, 114, 128, 0.18); }

/* The "View integration docs" button ships as position:absolute (bottom:1.5rem) —
   it was pinned over the old logo marquee. With that marquee removed, the absolute
   button floated inside the section's bottom padding, making the section look
   top-heavy (big top gap, tiny bottom gap). Let it flow normally so the balanced
   6rem top/bottom padding reads evenly. Homepage only; /developer keeps the
   original absolute button. 2026-07. */
.audience-business .integrate-section .docs-btn-wrapper { position: static; transform: none; }