/* ============================================================
   Endflo — site stylesheet
   Built from the Endflo brand tokens (ink/paper monochrome,
   Manrope display / Sora body / Space Mono labels).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Sora:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* base palette */
  --ink: #0B0B0C;
  --paper: #F4EFE6;         /* warmed toward cream — coffee-tech direction */
  --cream: #F3EFE6;         /* text on ink surfaces */
  --mist: #E1DCCF;
  --mist-strong: #BBB4A2;

  /* single warm signature — terracotta replaces the indigo + amber split */
  --terra: #C25B3D;          /* graphic/decorative fills only — 3.77:1 on paper, not for text */
  --terra-deep: #9E4429;     /* terracotta as TEXT on paper — 5.54:1, passes AA */
  --terra-btn: #B24A2E;      /* terracotta as a BUTTON fill — white on this is 5.37:1 */
  --terra-soft: rgba(194, 91, 61, 0.12);
  --accent-indigo: var(--terra);   /* legacy aliases now resolve to terracotta */
  --accent-amber: var(--terra);

  /* semantic */
  --text-primary: var(--ink);
  --text-muted: #57544C;
  --text-faint: #6E6B61;    /* 4.66:1 on paper — was #8C897E at 3.06:1 */
  --paper-muted: rgba(243, 239, 230, 0.66);
  --paper-faint: rgba(243, 239, 230, 0.42);
  --ink-line: rgba(243, 239, 230, 0.14);
  --surface-card-alt: #FFFFFF;
  --link: var(--terra);
  --link-hover: var(--terra-deep);
  --focus-ring: var(--terra);

  /* type */
  --font-display: 'Manrope', sans-serif;
  --font-body: 'Sora', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --tracking-display: -0.045em;
  --tracking-heading: -0.01em;
  --tracking-mono-label: 0.14em;

  /* spacing + radii */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px;  --space-7: 48px; --space-8: 64px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --header-h: 72px;
  --content-w: 1120px;

  /* easing — the built-in CSS curves are too weak to read as intentional */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: var(--tracking-heading);
  line-height: 1.15;
  margin: 0 0 var(--space-4);
}
p { margin: 0 0 var(--space-4); }

.wrap {
  width: min(var(--content-w), calc(100% - 48px));
  margin-inline: auto;
}

/* ---------- mono kicker labels ---------- */
.kicker {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--tracking-mono-label);
  text-transform: uppercase;
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-4);
}
.kicker::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.on-ink .kicker { color: var(--paper-faint); }

/* ---------- buttons (pill, per brand core components) ---------- */
.btn {
  font-family: var(--font-body);
  font-weight: 700;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-size: 15px;
  padding: 13px 26px;
  transition: background-color 0.16s var(--ease-out), transform 0.16s var(--ease-out);
}
/* press reads as "pressed", not "disabled" */
.btn:active { transform: scale(0.97); }
/* gate the lift behind a real pointer — on touch, tap triggers :hover and it sticks */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
  .btn:hover:active { transform: scale(0.97); }
}
.btn .lucide { width: 17px; height: 17px; }

.btn-secondary { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-lg { font-size: 17px; padding: 16px 32px; }
/* inverted variants for ink surfaces */
.on-ink .btn-secondary { color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--paper-faint); }
.on-ink .btn-secondary:hover { box-shadow: inset 0 0 0 1.5px var(--paper); }

/* ---------- scroll progress bar ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: var(--accent-indigo);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 60;
}

/* ---------- header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.site-header.scrolled { border-bottom-color: var(--ink-line); }
.site-header .wrap {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.logo svg { width: 34px; height: 34px; }
.logo .wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: var(--tracking-display);
  color: var(--paper);
  line-height: 1;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.main-nav a:not(.btn) {
  font-size: 15px;
  font-weight: 500;
  color: var(--paper-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.main-nav a:not(.btn):hover { color: var(--paper); }
.main-nav a[aria-current="page"] { color: var(--paper); }
.main-nav a[aria-current="page"]::after {
  content: '';
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-amber);
  margin-top: 3px;
}
.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--paper);
  cursor: pointer;
  padding: 8px;
}
.nav-toggle .lucide { width: 26px; height: 26px; }

/* ---------- sections ---------- */
.section { padding: 88px 0; }
.section-head { max-width: 720px; margin-bottom: var(--space-7); }
.section-head h2 { font-size: clamp(30px, 4vw, 44px); }
.section-head .lede { font-size: 19px; color: var(--text-muted); max-width: 620px; }

.on-ink {
  background: var(--ink);
  color: var(--paper);
}
.on-ink .lede, .on-ink .muted { color: var(--paper-muted); }
.muted { color: var(--text-muted); }

/* ---------- hero ---------- */
.hero {
  background: var(--ink);
  color: var(--paper);
  /* tightened from +60: the stage below is the point of the hero, and it was
     landing under the fold on a 900px-tall laptop */
  padding: calc(var(--header-h) + 34px) 0 0;
  overflow: hidden;
}
.hero-inner { max-width: 860px; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  font-size: clamp(30px, 9vw, 88px);
  /* wrapped headline lines need breathing room for the drawn underlines */
  line-height: 1.14;
  margin-bottom: var(--space-5);
}
.hero h1 .u-mess, .hero h1 .u-flow { position: relative; white-space: nowrap; }
.hero h1 svg.underline {
  position: absolute;
  left: 0; right: 0;
  bottom: -0.06em;
  width: 100%;
  height: 0.22em;
  overflow: visible;
}
.hero h1 svg.underline path {
  fill: none;
  stroke: var(--accent-amber);
  stroke-width: 5;
  stroke-linecap: round;
}
.hero .sub {
  font-size: clamp(17px, 2vw, 21px);
  color: var(--paper-muted);
  max-width: 560px;
  margin-bottom: var(--space-6);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-5); }

/* the big flow line under the hero copy */
.hero-flow { padding: 0 0 56px; }
.hero-flow svg { width: 100%; height: auto; overflow: visible; }
.hero-flow .flow-stroke {
  fill: none;
  stroke: var(--paper);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-flow .flow-node, .hero-flow .flow-head { fill: var(--paper); }
.hero-flow .flow-pulse { fill: var(--accent-amber); opacity: 0; }

/* tools strip */
.tools-strip {
  border-top: 1px solid var(--ink-line);
  padding: 22px 0;
}
.tools-strip .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
}
.tools-strip .strip-label,
.tools-strip .tool {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--tracking-mono-label);
  text-transform: uppercase;
}
.tools-strip .strip-label { color: var(--paper-faint); flex: none; }

/* horizontal auto-scrolling carousel of tool logos */
.tools-marquee {
  position: relative;
  flex: 1 1 320px;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.tools-track {
  display: flex;
  width: max-content;
  animation: toolsScroll 40s linear infinite;
}
.tools-marquee:hover .tools-track { animation-play-state: paused; }
@keyframes toolsScroll { to { transform: translateX(-50%); } }
.tools-strip .tool {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  margin-right: var(--space-6);
  color: var(--paper-muted);
  white-space: nowrap;
  transition: color .2s ease;
}
.tools-strip .tool:hover { color: var(--cream); }
.tools-strip .tool svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.tools-strip .tool:hover svg { color: var(--terra); }
@media (prefers-reduced-motion: reduce) {
  .tools-track { animation: none; }
  .tools-marquee { overflow-x: auto; }
}

/* ---------- cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.card {
  background: var(--surface-card-alt);
  border: 1.5px solid var(--mist);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.card .card-icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--paper);
  border: 1.5px solid var(--mist);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-4);
}
.card .card-icon .lucide { width: 22px; height: 22px; stroke-width: 1.75; }
.card h3 { font-size: 19px; margin-bottom: var(--space-2); }
.card p { color: var(--text-muted); font-size: 15.5px; margin: 0; }

/* on-ink cards */
.on-ink .card {
  background: transparent;
  border-color: var(--ink-line);
}
.on-ink .card .card-icon { background: transparent; border-color: var(--ink-line); color: var(--paper); }
.on-ink .card p { color: var(--paper-muted); }

/* ---------- flow connectors between sections ---------- */
.flow-connector {
  display: flex;
  justify-content: center;
  padding: 12px 0;
}
.flow-connector svg { height: 120px; width: auto; overflow: visible; }
.flow-connector path.draw {
  fill: none;
  stroke: #A9A091;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.flow-connector .head { fill: var(--mist-strong); }

/* ---------- workflow diagrams (animated inline svg) ----------
   Line-art on brand: ink/mist strokes, white panels, amber only
   on the moving parts. GSAP loops them; without JS they render
   as complete static diagrams. */
.wf svg { width: 100%; height: auto; overflow: visible; }
.wf .wf-line {
  fill: none;
  stroke: var(--mist-strong);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wf .wf-ink {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wf .wf-panel { fill: var(--surface-card-alt); stroke: var(--mist); stroke-width: 1.5; }
.wf .wf-node { fill: var(--surface-card-alt); stroke: var(--mist-strong); stroke-width: 2.5; }
.wf .wf-shape { fill: var(--surface-card-alt); stroke: var(--ink); stroke-width: 2.5; }
.wf .wf-fill-ink { fill: var(--ink); }
.wf .wf-dot { fill: var(--accent-amber); }
.wf .wf-accent {
  fill: none;
  stroke: var(--accent-amber);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wf .wf-text { stroke: var(--mist); stroke-width: 4; stroke-linecap: round; }
.wf .wf-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--tracking-mono-label);
  text-transform: uppercase;
  fill: var(--text-faint);
}
.wf .wf-count {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 20px;
  fill: var(--ink);
}

/* homepage: whatsapp inbox -> tasks + meetings */
.inbox-anim { margin-top: var(--space-7); max-width: 880px; }

/* services page: one flow diagram per service */
.service-anim { max-width: 760px; margin-bottom: var(--space-6); }

/* hero flow: task nodes that light up as the pulse passes */
.hero-flow .flow-task { fill: var(--paper-faint); }

/* ---------- statement (what endflo does) ---------- */
.statement { max-width: 780px; }
.statement h2 { font-size: clamp(30px, 4vw, 44px); }
.statement .big {
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.55;
  color: var(--text-primary);
}
.statement .big em {
  font-style: normal;
  border-bottom: 3px solid var(--accent-amber);
}

/* ---------- how it works (pinned steps) ---------- */
.steps-flow { position: relative; }
.steps-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  padding-top: 56px;
}
.steps-line {
  position: absolute;
  top: 20px; left: 0; right: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--mist);
  overflow: hidden;
}
.steps-line .fill {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.step-card { position: relative; }
.step-card .dot {
  position: absolute;
  top: -44px; left: 0;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--mist-strong);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.step-card.active .dot { background: var(--ink); border-color: var(--ink); }
.step-card .step-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--tracking-mono-label);
  color: var(--text-faint);
  display: block;
  margin-bottom: var(--space-3);
}
.step-card h3 { font-size: 21px; }
.step-card p { color: var(--text-muted); font-size: 15.5px; }

/* ---------- automate grid ---------- */
.automate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.automate-grid .card { display: flex; flex-direction: column; text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease; }
.automate-grid .card:hover { border-color: var(--ink); transform: translateY(-3px); }
.automate-grid .card .go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--space-4);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--tracking-mono-label);
  text-transform: uppercase;
  color: var(--link);
}
.automate-grid .card:hover .go { color: var(--link-hover); }
.automate-grid .card .go .lucide { width: 14px; height: 14px; }

/* ---------- who band ---------- */
.who-band { text-align: center; }
.who-band .wrap { max-width: 720px; }
.who-band h2 { font-size: clamp(26px, 3.4vw, 38px); }

/* ---------- closing cta ---------- */
.closing { text-align: center; padding: 130px 0; }
.closing .wrap { max-width: 760px; }
.closing h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.05;
}
.closing .lede { margin: 0 auto var(--space-6); }
.closing-flow { margin: 0 auto var(--space-6); max-width: 420px; }
.closing-flow svg { width: 100%; overflow: visible; }
.closing-flow .flow-stroke { fill: none; stroke: var(--paper-faint); stroke-width: 5; stroke-linecap: round; }
.closing-flow .head { fill: var(--paper-faint); }

/* ---------- page hero (subpages) ---------- */
.page-hero {
  background: var(--ink);
  color: var(--paper);
  padding: calc(var(--header-h) + 76px) 0 84px;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  font-size: clamp(38px, 5.6vw, 66px);
  line-height: 1.04;
  max-width: 800px;
  margin-bottom: var(--space-4);
}
.page-hero .lede {
  font-size: 19px;
  color: var(--paper-muted);
  max-width: 640px;
  margin: 0;
}

/* ---------- services page ---------- */
.service-block { padding: 96px 0; }
.service-block + .service-block { border-top: 1px solid var(--mist); }
.service-head {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
.service-head .service-icon {
  width: 58px; height: 58px;
  border-radius: 16px;
  background: var(--surface-card-alt);
  border: 1.5px solid var(--mist);
  display: grid;
  place-items: center;
  flex: none;
}
.service-head .service-icon .lucide { width: 26px; height: 26px; stroke-width: 1.75; }
.service-head .service-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--tracking-mono-label);
  color: var(--text-faint);
  display: block;
  margin-bottom: 4px;
}
.service-head h2 { font-size: clamp(26px, 3.2vw, 36px); margin: 0; }

.pfr {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--space-4);
  align-items: stretch;
}
.pfr .pfr-card {
  background: var(--surface-card-alt);
  border: 1.5px solid var(--mist);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.pfr .pfr-card .pfr-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--tracking-mono-label);
  text-transform: uppercase;
  color: var(--text-faint);
  display: block;
  margin-bottom: var(--space-3);
}
.pfr .pfr-card.result { border-color: var(--ink); }
.pfr .pfr-card.result .pfr-label { color: var(--ink); }
.pfr .pfr-card p { margin: 0; font-size: 15.5px; color: var(--text-muted); }
.pfr .pfr-card.result p { color: var(--text-primary); }
.pfr .pfr-arrow {
  align-self: center;
  color: var(--mist-strong);
}
.pfr .pfr-arrow .lucide { width: 22px; height: 22px; }

/* ---------- how-it-works page timeline ---------- */
.timeline {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  padding-left: 56px;
}
.timeline .rail {
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--mist);
}
.timeline .rail .rail-fill {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: 50% 0;
  transform: scaleY(0);
}
.tl-step {
  position: relative;
  padding-bottom: var(--space-8);
  display: grid;
  grid-template-columns: 1fr 230px;
  gap: var(--space-6);
  align-items: center;
}
.tl-step:last-child { padding-bottom: 0; }
.tl-step .tl-anim { width: 100%; }
.tl-step .tl-dot {
  position: absolute;
  left: -56px; top: 5px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--mist-strong);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.tl-step.active .tl-dot { background: var(--ink); border-color: var(--ink); }
.tl-step .step-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--tracking-mono-label);
  text-transform: uppercase;
  color: var(--text-faint);
  display: block;
  margin-bottom: var(--space-2);
}
.tl-step h3 { font-size: 23px; }
.tl-step p { color: var(--text-muted); max-width: 560px; margin: 0; }

.need-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.timeline-note {
  border: 1.5px solid var(--mist);
  border-radius: var(--radius-lg);
  background: var(--surface-card-alt);
  padding: var(--space-6);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  max-width: 760px;
}
.timeline-note .lucide { flex: none; width: 24px; height: 24px; stroke-width: 1.75; margin-top: 3px; }
.timeline-note p { margin: 0; color: var(--text-muted); }
.timeline-note strong { color: var(--text-primary); }

/* ---------- faq ---------- */
.faq-list { max-width: 820px; }
.faq-item {
  background: var(--surface-card-alt);
  border: 1.5px solid var(--mist);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  overflow: hidden;
}
.faq-item button.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 22px var(--space-6);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17.5px;
  color: var(--text-primary);
}
.faq-item .faq-q .lucide {
  flex: none;
  width: 20px; height: 20px;
  transition: transform 0.25s ease;
  color: var(--text-faint);
}
.faq-item.open .faq-q .lucide { transform: rotate(45deg); color: var(--accent-indigo); }
.faq-item .faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease-out);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
/* the grid item must carry NO padding: min-height:0 zeroes the content box
   but padding still floors the 0fr track, which left a 24px sliver showing
   when closed. Padding lives on the content instead. */
.faq-item .faq-a-inner {
  overflow: hidden;
  min-height: 0;
  color: var(--text-muted);
}
.faq-item .faq-a-inner > * { margin: 0; padding: 0 var(--space-6) 24px; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 72px 0 40px;
  border-top: 1px solid var(--ink-line);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-7);
  margin-bottom: var(--space-8);
}
.footer-brand .logo { margin-bottom: var(--space-4); }
.footer-brand p {
  color: var(--paper-muted);
  font-size: 15px;
  max-width: 320px;
  margin: 0;
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--tracking-mono-label);
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: var(--space-4);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a {
  color: var(--paper-muted);
  text-decoration: none;
  font-size: 15px;
  transition: color 0.15s ease;
}
.footer-col a:hover { color: var(--paper); }
.footer-bottom {
  border-top: 1px solid var(--ink-line);
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--paper-faint);
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .section { padding: 64px 0; }
  .auto-showcase { gap: 56px; }
  .card-grid, .automate-grid, .need-grid { grid-template-columns: 1fr 1fr; }
  .steps-track { grid-template-columns: 1fr; padding-top: 0; gap: var(--space-6); }
  .steps-line { display: none; }
  .step-card { padding-left: 36px; }
  .step-card .dot { top: 4px; }
  .pfr { grid-template-columns: 1fr; }
  .pfr .pfr-arrow { transform: rotate(90deg); justify-self: center; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .card-grid, .automate-grid, .need-grid { grid-template-columns: 1fr; }
  .nav-toggle { display: block; }
  .main-nav {
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--ink-line);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-5) 24px var(--space-6);
    gap: var(--space-5);
    display: none;
  }
  .main-nav.open { display: flex; }
  .hero { padding-top: calc(var(--header-h) + 56px); }
  .flow-connector svg { height: 96px; }
  .timeline { padding-left: 44px; }
  .tl-step { grid-template-columns: 1fr; }
  .tl-step .tl-anim { max-width: 240px; }
  .tl-step .tl-dot { left: -44px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   v3 — coffee-tech direction
   Centred hero + a library of REAL product elements
   (chat devices, app windows, data tables, dashboards, PDFs,
   output cards) that replace the abstract SVG "flow" diagrams.
   ============================================================ */

/* ---------- centred hero ---------- */
.hero-inner.center { max-width: 900px; margin-inline: auto; text-align: center; }
.hero-inner.center .kicker { color: var(--terra); }
.hero-inner.center .kicker::before { background: var(--terra); }
.hero-inner.center h1 {
  font-size: clamp(34px, 7vw, 78px);
  line-height: 1.03;
  margin-bottom: var(--space-5);
}
.hero-inner.center h1 .warm { color: var(--terra); }
.hero-inner.center .sub { margin-left: auto; margin-right: auto; }
.hero-cta.center { justify-content: center; }

/* quiet text-link button (coffee-tech restraint) */
.btn-quiet {
  background: transparent;
  color: var(--paper-muted);
  padding-left: 12px; padding-right: 12px;
}
.on-ink .btn-quiet { color: var(--paper-muted); }
.on-ink .btn-quiet:hover { color: var(--cream); }
.btn-primary { background: var(--terra-btn); color: #fff; }
.btn-primary:hover { background: var(--terra-deep); }
.on-ink .btn-primary { background: var(--terra-btn); color: #fff; }
.on-ink .btn-primary:hover { background: var(--terra-deep); }

/* ============================================================
   STAGE — where a real element floats, with output cards
   ============================================================ */
.stage {
  position: relative;
  margin: 8px auto 0;
  max-width: 900px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-6);
}
.stage::after {
  content: '';
  position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 70%; height: 130px;
  background: radial-gradient(60% 100% at 50% 100%, var(--terra-soft), transparent 70%);
  pointer-events: none;
}
.hero-stage { padding: 4px 0 8px; }
.stage-col { display: grid; gap: var(--space-4); width: 240px; flex: none; }

/* ---------- device (phone) ---------- */
.device {
  position: relative;
  width: 300px; flex: none;
  background: #0d0d0d;
  border-radius: 44px;
  padding: 11px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(243,239,230,.06);
  z-index: 2;
}
.device .screen { border-radius: 34px; overflow: hidden; position: relative; }
.device .notch {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 20px; background: #0d0d0d; border-radius: 999px; z-index: 4;
}

/* chat header */
.chat-head { color: #fff; display: flex; align-items: center; gap: 10px; padding: 30px 14px 11px; }
.chat-head .av { width: 34px; height: 34px; border-radius: 50%; background: var(--terra); display: grid; place-items: center; flex: none; }
.chat-head .av svg { width: 22px; height: 22px; }
.chat-head .who { line-height: 1.2; flex: 1; min-width: 0; }
.chat-head .who b { font-family: var(--font-body); font-size: 14px; font-weight: 600; display: block; }
.chat-head .who span { font-size: 11px; color: rgba(255,255,255,.72); }
.chat-head .ic { display: flex; gap: 15px; opacity: .85; }
.chat-head .ic svg { width: 17px; height: 17px; }

/* chat body + bubbles */
.chat-body {
  background-image: radial-gradient(rgba(0,0,0,.028) 1px, transparent 1px);
  background-size: 16px 16px;
  padding: 15px 12px 12px;
  min-height: 300px;
  display: flex; flex-direction: column; gap: 9px;
}
.bubble {
  max-width: 84%; padding: 8px 11px 6px; border-radius: 11px;
  font-size: 12.5px; line-height: 1.4; position: relative;
  box-shadow: 0 1px .5px rgba(0,0,0,.08); color: #111b21;
  font-family: var(--font-body); letter-spacing: 0;
}
.bubble .t { display: block; font-size: 9.5px; color: #667781; text-align: right; margin-top: 3px; }
.bubble.in  { align-self: flex-start; background: #fff; border-top-left-radius: 3px; }
.bubble.out { align-self: flex-end; border-top-right-radius: 3px; }
.bubble .tick { font-weight: 700; }

/* chat input */
.chat-input { display: flex; align-items: center; gap: 9px; padding: 9px 12px; }
.chat-input .box { flex: 1; background: #fff; border-radius: 999px; height: 32px; display: flex; align-items: center; padding: 0 13px; color: #8a9199; font-size: 12px; }
.chat-input .snd { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.chat-input .snd svg { width: 16px; height: 16px; color: #fff; }

/* WhatsApp skin */
.device.wa .chat-head { background: #075E54; }
.device.wa .screen, .device.wa .chat-body { background: #E6DDD3; }
.device.wa .bubble.out { background: #DCF8C6; }
.device.wa .bubble.out .t { color: #4a8a5f; }
.device.wa .bubble .tick { color: #53bdeb; }
.device.wa .chat-input { background: #F0F0F0; }
.device.wa .chat-input .snd { background: #075E54; }

/* Telegram skin */
.device.tg .chat-head { background: #527DA3; }
.device.tg .screen, .device.tg .chat-body { background: #C3D0DC; }
.device.tg .chat-body { background-image: radial-gradient(rgba(255,255,255,.4) 1px, transparent 1px); }
.device.tg .bubble.out { background: #EEFFDE; }
.device.tg .bubble.out .t { color: #6aa74f; }
.device.tg .bubble .tick { color: #4fae4e; }
.device.tg .chat-input { background: #fff; }
.device.tg .chat-input .snd { background: #527DA3; }

/* ---------- output cards (real "result" chips) ---------- */
.rc {
  width: 230px; background: var(--paper); color: var(--ink);
  border-radius: 16px; padding: 15px 16px;
  box-shadow: 0 26px 50px -22px rgba(0,0,0,.55);
  border: 1px solid rgba(0,0,0,.05);
}
.on-ink .rc { border-color: transparent; }
.rc-lbl {
  font-family: var(--font-mono); font-weight: 700; font-size: 9.5px;
  letter-spacing: var(--tracking-mono-label); text-transform: uppercase;
  color: var(--terra-deep); display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
}
.rc-lbl::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--terra); flex: none; }
/* .rc-head is a <p>, not a heading: these cards are UI mockups, and real
   <h4>s here put "Follow up with Acme" into the document outline above the
   page's own <h2>s */
.rc h4, .rc .rc-head { margin: 0 0 3px; font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.rc p { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.rc .rc-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 9px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint);
}
.rc .ok { color: #19714A; font-weight: 700; }
/* ============================================================
   HERO FLOW STAGE — a request becoming finished work.
   The phone and the deck are separated by a gap the connector
   crosses; depth comes from the deck sitting lower and dimmer,
   never from overlapping the thing it is meant to prove.
   Sequence + timings live in js/site.js.
   ============================================================ */
.stage-flow {
  --rate: 1;
  max-width: 880px;
  gap: clamp(56px, 9vw, 116px);
  isolation: isolate;
}
.stage-flow::after {
  background: radial-gradient(58% 100% at 46% 100%, var(--terra-soft), transparent 72%);
}
.stage-flow .device { z-index: 3; }

/* the thread behaves like a thread: newest at the bottom, older scrolled off */
.stage-flow .chat-body {
  height: 268px; min-height: 0; overflow: hidden;
  justify-content: flex-end;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34px);
  mask-image: linear-gradient(180deg, transparent 0, #000 34px);
}
.stage-flow .bubble { animation: bubbleIn calc(260ms / var(--rate)) var(--ease-out) both; }
.stage-flow .bubble.out { transform-origin: 85% 90%; }
.stage-flow .bubble.in  { transform-origin: 15% 90%; }
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(9px) scale(.965); }
  to   { opacity: 1; transform: none; }
}

/* ticks: grey on delivery, blue once Endflo has read it. Both selectors must
   out-specify the `.device.wa .bubble .tick` skin rule above. */
.stage-flow .device.wa .bubble .tick { color: #9bb0a3; transition: color 140ms linear; }
.stage-flow .device.wa .bubble.read .tick { color: #53bdeb; }

/* the latency beat — Endflo is thinking, so it sits on Endflo's side */
.stage-flow .typing {
  align-self: flex-start; background: #fff;
  border-radius: 11px; border-top-left-radius: 3px;
  padding: 11px 13px; display: flex; gap: 4px; align-items: center;
  box-shadow: 0 1px .5px rgba(0,0,0,.08);
  animation: bubbleIn calc(200ms / var(--rate)) var(--ease-out) both;
}
.stage-flow .typing i {
  width: 5px; height: 5px; border-radius: 50%; background: #93a0a8; display: block;
  animation: dotBob calc(1s / var(--rate)) ease-in-out infinite;
}
.stage-flow .typing i:nth-child(2) { animation-delay: calc(.16s / var(--rate)); }
.stage-flow .typing i:nth-child(3) { animation-delay: calc(.32s / var(--rate)); }
@keyframes dotBob { 0%,60%,100% { transform: none; opacity: .5 } 30% { transform: translateY(-3px); opacity: 1 } }

/* connector: one measured path, invisible at rest, bright only in transit.
   The old version was two 32px dashed stubs at hardcoded viewBox coordinates
   that lined up only by coincidence of the flex maths. */
.conn-arc { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: visible; }
.conn-arc path {
  fill: none; stroke: var(--terra); stroke-width: 1.6; stroke-linecap: round;
  opacity: .14; transition: opacity 380ms var(--ease-out);
}
.stage-flow.firing .conn-arc path { opacity: .62; transition-duration: 160ms; }

/* one dot = one job leaving the chat */
.flow-token {
  position: absolute; top: 0; left: 0; z-index: 4;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: var(--terra); opacity: 0;
  box-shadow: 0 0 0 3px rgba(194,91,61,.16);
  will-change: transform, opacity;
}

/* the deck of finished work */
/* sits lower than the phone (the asymmetry gives the eye a left-to-right
   direction), but not so low that the front card falls under the fold */
.deck { position: relative; width: 252px; height: 172px; flex: none; z-index: 3; margin-top: 26px; }
.deck .rc {
  position: absolute; left: 0; bottom: 0; width: 252px;
  transition: transform calc(420ms / var(--rate)) var(--ease-out),
              filter    calc(420ms / var(--rate)) var(--ease-out);
  will-change: transform, filter;
}
/* resting stack, so the seed state is correct before any script runs.
   Dim with brightness, never opacity — a translucent card lets the one
   behind bleed through its own text. */
.deck .rc:nth-child(1) { z-index: 20; }
.deck .rc:nth-child(2) { z-index: 19; transform: translateY(-30px) scale(.955); filter: brightness(.78); }
.deck .rc:nth-child(3) { z-index: 18; transform: translateY(-60px) scale(.91);  filter: brightness(.6); }
.deck .rc.landing { animation: cardLand calc(440ms / var(--rate)) var(--ease-out) both; }
@keyframes cardLand {
  from { opacity: 0; transform: translateY(-14px) scale(.94); filter: blur(7px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.deck .rc.landing .rc-row .ok { position: relative; }
.deck .rc.landing .rc-row .ok::after {
  content: ''; position: absolute; inset: -6px -9px; border-radius: 999px;
  border: 1.5px solid #19714A;
  animation: ringOut calc(620ms / var(--rate)) var(--ease-out) calc(240ms / var(--rate)) both;
}
@keyframes ringOut { from { opacity: .9; transform: scale(.7) } to { opacity: 0; transform: scale(1.25) } }

.deck-cap {
  position: absolute; left: 0; bottom: -30px; margin: 0; white-space: nowrap;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: var(--tracking-mono-label); text-transform: uppercase;
  color: var(--paper-faint);
}
.deck-cap b { color: var(--terra); font-weight: 700; font-variant-numeric: tabular-nums; }

/* mobile: the deck becomes one live card over the phone's lower third, the way
   a real notification arrives, so cause and result stay in one object and the
   connector is not needed to link them */
/* 900px, matching the breakpoint where `.stage` itself goes column — at 880
   the two disagreed and left a 20px band with a stacked phone but a desktop deck */
@media (max-width: 900px) {
  .stage-flow { flex-direction: column; gap: 0; }
  .stage-flow .chat-body { height: 236px; }
  .conn-arc, .flow-token { display: none; }
  .deck { width: min(300px, 88%); height: auto; margin: -74px 0 0; z-index: 5; }
  .deck .rc { position: relative; width: 100%; }
  .deck .rc:not(:first-child) { display: none; }
  .deck-cap { position: static; margin-top: 12px; text-align: center; }
}

/* reduced motion: keep the sequence, drop the travel. Gentler, not gone. */
@media (prefers-reduced-motion: reduce) {
  .stage-flow .bubble, .stage-flow .typing, .deck .rc.landing {
    animation: fadeOnly 200ms linear both;
  }
  @keyframes fadeOnly { from { opacity: 0 } to { opacity: 1 } }
  .stage-flow .typing i { animation: none; }
  .deck .rc.landing .rc-row .ok::after { display: none; }
}

/* ============================================================
   APP WINDOW — browser / spreadsheet / dashboard chrome
   ============================================================ */
.appwin {
  background: #fff; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--mist);
  box-shadow: 0 30px 60px -26px rgba(0,0,0,.4);
  width: 100%;
}
.appwin .bar {
  display: flex; align-items: center; gap: 8px;
  background: #ECEAE3; padding: 10px 14px; border-bottom: 1px solid var(--mist);
}
.appwin .lights { display: flex; gap: 6px; }
.appwin .lights i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.appwin .lights .r { background: #ED6A5E; }
.appwin .lights .y { background: #F4BF4F; }
.appwin .lights .g { background: #61C554; }
.appwin .addr {
  flex: 1; background: #fff; border-radius: 7px; height: 24px;
  display: flex; align-items: center; gap: 8px; padding: 0 11px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-faint);
  border: 1px solid var(--mist);
}
.appwin .addr svg { width: 12px; height: 12px; flex: none; }
.appwin .win-body { padding: 0; }

/* spreadsheet */
.sheet { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sheet th, .sheet td { text-align: left; padding: 9px 14px; border-bottom: 1px solid #EEECE4; }
.sheet thead th {
  background: #1E7A46; color: #fff; font-family: var(--font-mono); font-weight: 700;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}
.sheet tbody tr:nth-child(even) { background: #F7FbF7; }
.sheet .num { text-align: right; font-family: var(--font-mono); }
.sheet .new { animation: none; }
.sheet .new td { color: var(--terra-deep); font-weight: 700; }
.sheet .cellref {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-faint);
  background: #F3F1EA; padding: 2px 6px; border-radius: 4px;
}

/* generic data table (Data Table product) */
.dtable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dtable th, .dtable td { text-align: left; padding: 10px 15px; border-bottom: 1px solid #EEECE4; }
.dtable thead th {
  background: var(--paper); color: var(--text-faint); font-family: var(--font-mono);
  font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1.5px solid var(--mist);
}
.dtable .num { text-align: right; font-family: var(--font-mono); }
.dtable .pill-ok { font-family: var(--font-mono); font-size: 10px; color: #19714A; font-weight: 700; }
.dtable .pill-wait { font-family: var(--font-mono); font-size: 10px; color: var(--terra-deep); font-weight: 700; }

/* dashboard */
.dash { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 18px; }
.kpi { border: 1px solid var(--mist); border-radius: 12px; padding: 13px 15px; background: var(--paper); }
.kpi .k-lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.kpi .k-val { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; margin-top: 4px; }
.kpi .k-val.up { color: var(--terra); }
.chartcard { grid-column: 1 / -1; border: 1px solid var(--mist); border-radius: 12px; padding: 15px 16px 12px; }
.chartcard .c-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.chartcard .c-head b { font-size: 13px; }
.chartcard .c-head span { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: .08em; text-transform: uppercase; }
.bars { display: flex; align-items: flex-end; gap: 10px; height: 88px; }
.bars .bar { flex: 1; background: var(--terra-soft); border-radius: 5px 5px 0 0; position: relative; }
.bars .bar::after { content: ''; position: absolute; inset: 0; border-radius: 5px 5px 0 0; background: var(--terra); opacity: .85; }
.bars .bar.lo::after { opacity: .35; }

/* ---------- PDF document ---------- */
.pdfdoc {
  width: 190px; flex: none; background: #fff; border-radius: 8px;
  border: 1px solid var(--mist); overflow: hidden;
  box-shadow: 0 24px 44px -20px rgba(0,0,0,.45);
  transform: rotate(-3deg);
}
/* was #C0392B — a second, unrelated red sitting next to the terracotta */
.pdfdoc .pdf-top { background: var(--terra-deep); color: #fff; display: flex; align-items: center; gap: 7px; padding: 9px 12px; font-family: var(--font-mono); font-weight: 700; font-size: 10px; letter-spacing: .12em; }
.pdfdoc .pdf-top svg { width: 13px; height: 13px; }
.pdfdoc .pdf-body { padding: 13px 14px 16px; }
.pdfdoc .pdf-title { height: 8px; width: 70%; background: #2b2b2b; border-radius: 3px; margin-bottom: 5px; }
.pdfdoc .pdf-sub { height: 6px; width: 45%; background: #c9c9c9; border-radius: 3px; margin-bottom: 14px; }
.pdfdoc .pdf-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid #EEE; }
.pdfdoc .pdf-row span { height: 6px; border-radius: 3px; background: #d8d8d8; }
.pdfdoc .pdf-row span:first-child { width: 52%; }
.pdfdoc .pdf-row span:last-child { width: 26%; background: #bcbcbc; }
.pdfdoc .pdf-row.total span { background: var(--terra); }

/* ---------- screenshot chip (for OCR service) ---------- */
.shot {
  width: 176px; flex: none; border-radius: 12px; overflow: hidden;
  border: 3px solid #fff; box-shadow: 0 20px 40px -18px rgba(0,0,0,.5);
  transform: rotate(2.5deg); background: #fff;
}
.shot .shot-top { background: #2E3A45; height: 22px; display: flex; align-items: center; padding: 0 9px; gap: 5px; }
.shot .shot-top i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); display: block; }
.shot .shot-b { padding: 12px; display: grid; gap: 7px; }
.shot .shot-b .l { height: 7px; border-radius: 3px; background: #d9d9d9; }
.shot .shot-b .l.s { width: 55%; }
.shot .shot-b .l.terra { background: var(--terra); width: 40%; }

/* ============================================================
   Service real-element layout — element beside the p→f→r cards
   ============================================================ */
.svc-real {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-7); align-items: center;
  margin: var(--space-6) 0 var(--space-7);
}
.svc-real .svc-stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  gap: var(--space-4); min-height: 240px;
}
.svc-real .svc-copy .svc-flow-note {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-faint);
  display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-4);
}
.svc-real .svc-copy .svc-flow-note b { color: var(--terra-deep); }
.arrowflow { display: inline-flex; align-items: center; gap: 8px; color: var(--mist-strong); }
.arrowflow svg { width: 16px; height: 16px; }

/* ============================================================
   De-carded homepage sections (editorial, no boxes)
   ============================================================ */

/* "The problem" — numbered columns with a hairline rule */
.problem-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6) var(--space-7); }
.prob { border-top: 2px solid var(--ink); padding-top: var(--space-4); }
.prob .prob-num {
  font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  letter-spacing: var(--tracking-mono-label); color: var(--terra-deep);
  display: block; margin-bottom: var(--space-3);
}
.prob h3 { font-size: 20px; margin-bottom: var(--space-2); }
.prob p { color: var(--text-muted); font-size: 15.5px; margin: 0; }

/* "What we automate" — copy lead, then a full-width trigger → artifact →
   result triptych. Was a 50/50 split with a card floated on top of the
   artifact; the card covered the very data it was there to prove. */
.auto-showcase { display: grid; gap: 76px; margin-top: var(--space-7); }
.show-row { display: grid; gap: var(--space-5); }
.show-copy { max-width: 680px; }
.show-copy .num {
  font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  letter-spacing: var(--tracking-mono-label); color: var(--terra-deep); display: block; margin-bottom: var(--space-3);
}
.show-copy h3 { font-size: clamp(23px, 2.7vw, 32px); line-height: 1.12; margin-bottom: var(--space-3); }
.show-copy p { font-size: 17px; color: var(--text-muted); max-width: 620px; margin: 0 0 var(--space-4); }
.show-copy .go {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  letter-spacing: var(--tracking-mono-label); text-transform: uppercase; color: var(--terra-deep);
}
.show-copy .go svg { width: 15px; height: 15px; transition: transform .2s ease; }
.show-copy .go:hover svg { transform: translateX(4px); }
/* the homepage triptych sits flush left with the copy above it, so every
   element on the page shares one left edge */
.show-row .svc-flow { margin: 0; justify-content: flex-start; }
.show-row .svc-flow .appwin { width: 400px; }
.show-row .svc-flow .device { width: 258px; transform: none; }
.show-row .svc-flow .pdfdoc { width: 180px; }
.show-row .svc-flow .rc { width: 190px; }

/* remaining automations — a slim divided list, no cards */
.auto-more { margin-top: var(--space-8); border-top: 2px solid var(--ink); }
.auto-link {
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-5) var(--space-1);
  border-bottom: 1px solid var(--mist); text-decoration: none; color: inherit;
  transition: transform .2s var(--ease-out);
}
.auto-link:hover { transform: translateX(var(--space-3)); }
.auto-link .al-num { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: .1em; color: var(--text-faint); flex: none; width: 34px; }
.auto-link:hover .al-num { color: var(--terra-deep); }
.auto-link .al-main h3 { font-size: 18px; margin: 0 0 2px; }
.auto-link .al-main p { font-size: 14.5px; color: var(--text-muted); margin: 0; }
.auto-link .al-go { margin-left: auto; color: var(--mist-strong); flex: none; }
.auto-link:hover .al-go { color: var(--terra-deep); }
.auto-link .al-go svg { width: 20px; height: 20px; transition: transform .2s ease; }
.auto-link:hover .al-go svg { transform: translateX(4px); }

/* "Why Endflo" — de-carded feature columns on ink */
.why-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6) var(--space-7); }
.why-item { border-top: 2px solid var(--terra); padding-top: var(--space-4); }
.why-item .why-ic { color: var(--terra); margin-bottom: var(--space-3); }
.why-item .why-ic .lucide { width: 26px; height: 26px; stroke-width: 1.75; }
.why-item h3 { font-size: 20px; margin-bottom: var(--space-2); }
.why-item p { color: var(--paper-muted); font-size: 15.5px; margin: 0; }

@media (max-width: 820px) {
  .problem-list, .why-list { grid-template-columns: 1fr; gap: var(--space-5); }
  .auto-showcase { gap: 56px; }
  .show-row, .show-row.rev { grid-template-columns: 1fr; gap: var(--space-5); }
  .show-row .show-copy, .show-row.rev .show-copy { order: 1; }
  .show-row .show-visual, .show-row.rev .show-visual { order: 2; min-height: 0; }
  /* stack the real element and its floating card instead of leaving them
     side-by-side in the flex row (that overflowed the phone width) */
  .show-visual { flex-direction: column; gap: var(--space-5); width: 100%; }
  .show-visual > * { max-width: 100%; flex: none; }
  .show-visual .appwin { width: 100%; }
  .show-visual .device { width: 240px; }
  .show-visual .float, .show-row.rev .show-visual .float { position: static; }
  /* shrink table windows so all columns fit a narrow screen */
  .appwin .sheet th, .appwin .sheet td,
  .appwin .dtable th, .appwin .dtable td { padding: 7px 9px; font-size: 11px; }
  .appwin .addr { font-size: 10px; }
}

/* approve / reject chips inside a request card */
.mini-btn {
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  padding: 7px 14px; border-radius: 999px; flex: 1; text-align: center;
}
.mini-btn.ok-btn { background: var(--terra-btn); color: #fff; }
.mini-btn.no-btn { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1.5px var(--mist-strong); }

/* jotform-style form body inside an app window */
.formcard { padding: 16px 18px 18px; display: grid; gap: 11px; }
.formcard .f-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.formcard .f-field .f-lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); display: block; margin-bottom: 5px; }
.formcard .f-field .f-in { border: 1px solid var(--mist); border-radius: 8px; height: 30px; display: flex; align-items: center; padding: 0 11px; font-size: 12.5px; color: var(--text-muted); background: #fff; }
/* Jotform orange, darkened from #FF6100 (3.02:1) so white on it passes AA */
.formcard .f-submit { background: #C44400; color: #fff; font-weight: 700; font-size: 12.5px; text-align: center; padding: 9px; border-radius: 8px; margin-top: 3px; }

/* horizontal real-element flow (PDF → sheet → dashboard, etc.) sitting
   above the problem/fix/result cards on each service block */
.svc-flow {
  display: flex; align-items: center; justify-content: flex-start;
  gap: var(--space-4); flex-wrap: wrap;
  margin: var(--space-6) 0 var(--space-7);
}
.svc-flow .fl-el { flex: none; }
.svc-flow .appwin { width: 360px; max-width: 100%; }
.svc-flow .appwin.wide { width: 420px; }
.svc-flow .appwin.narrow { width: 300px; }
.svc-flow .device { width: 250px; transform: scale(0.92); }
.svc-flow .rc { width: 220px; }
.svc-flow .arrowflow { flex: none; }
@media (max-width: 900px) {
  .svc-flow { gap: var(--space-3); }
  .svc-flow .arrowflow { transform: rotate(90deg); }
  .svc-flow .device { transform: none; }
}

/* right-side pfr becomes a vertical stack when paired with a real element */
.svc-real .pfr-stack { display: grid; gap: var(--space-3); }
.svc-real .pfr-stack .pfr-card {
  background: var(--surface-card-alt); border: 1.5px solid var(--mist);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
}
.svc-real .pfr-stack .pfr-card .pfr-label {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: var(--tracking-mono-label); text-transform: uppercase;
  color: var(--text-faint); display: block; margin-bottom: 6px;
}
.svc-real .pfr-stack .pfr-card p { margin: 0; font-size: 14.5px; color: var(--text-muted); }
.svc-real .pfr-stack .pfr-card.result { border-color: var(--terra); }
.svc-real .pfr-stack .pfr-card.result .pfr-label { color: var(--terra-deep); }
.svc-real .pfr-stack .pfr-card.result p { color: var(--text-primary); }

@media (max-width: 900px) {
  .svc-real { grid-template-columns: 1fr; gap: var(--space-6); }
  .stage { flex-direction: column; }
  .stage-col { width: min(300px, 90%); }
  .rc { width: min(300px, 90%); }
  .hero-inner.center h1 { font-size: clamp(30px, 9vw, 52px); }
  .pdfdoc, .shot { transform: none; }
}

/* ============================================================
   Touch + small-screen corrections
   ============================================================ */
@media (max-width: 900px) {
  /* the triptych stacks; arrows turn to point down the flow */
  .show-row .svc-flow { justify-content: center; }
  .show-row .svc-flow .appwin,
  .show-row .svc-flow .device,
  .show-row .svc-flow .pdfdoc,
  .show-row .svc-flow .rc { width: min(320px, 100%); }
}

/* inline mono links were 20px tall — below the 44px touch minimum */
@media (pointer: coarse) {
  .show-copy .go,
  .site-footer .footer-col a,
  .main-nav a:not(.btn) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* the marquee's first logo used to fade in right against the strip label */
.tools-strip .wrap { column-gap: var(--space-7); }

/* stacked triptych on a phone: the elements carry the flow, so the gaps
   between them don't also need to be large */
@media (max-width: 900px) {
  .show-row .svc-flow { gap: var(--space-2); }
  .show-row .svc-flow .arrowflow { transform: rotate(90deg); margin: -2px 0; }
  .show-row .svc-flow .device { transform: scale(0.92); margin: -14px 0; }
}