/* ============================================================
   Revvalo — The Agentic-first CRM
   REFINED LIGHT — Premium global revenue command system.
   Clean. Airy. Authoritative. Zero clutter.
   ============================================================ */

/* Fonts are loaded via <link> tags in the document head (non-blocking, with
   preconnect) rather than @import here, which avoids a render-blocking,
   serialized stylesheet fetch and improves first paint. */

@layer tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    --paper: #FAF7F1;
    --paper-2: #F3EDE2;
    --paper-3: #ECE4D6;
    --line: #E4DACB;
    --line-strong: #D6C9B4;
    --white: #FFFFFF;

    --ink: #1B1E1C;
    --ink-muted: #5A635C;
    --ink-subtle: #8A9089;

    --pine: #0E5B4E;
    --pine-deep: #0A423A;
    --pine-bright: #14776B;
    --honey: #E19B32;
    --honey-deep: #C77E1C;

    --font-display: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
    --font-body: "Instrument Sans", system-ui, -apple-system, sans-serif;

    --step-hero: clamp(3.25rem, 8vw, 7rem);
    --step-h2: clamp(2.25rem, 4.5vw, 3.75rem);
    --step-h3: clamp(1.375rem, 2vw, 1.75rem);
    --step-body: 1.0625rem;
    --step-small: 0.875rem;
    --step-micro: 0.75rem;

    --leading-display: 0.95;
    --leading-body: 1.6;
    --track-display: -0.03em;

    /* padding-block applies to both the top and the bottom of a section, so
       the visible gap between two adjacent sections is the SUM of two of
       these values, not one. Sized so that sum — not the token itself —
       stays inside a sane ~96-240px band for any pairing while the three
       steps stay clearly distinct from each other. */
    --space-tight: 3.5rem;
    --space-normal: 5rem;
    --space-breathe: 7rem;

    --container: 1180px;
    --container-narrow: 44rem;

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    --shadow-sm: 0 1px 2px rgba(27, 30, 28, 0.05);
    --shadow: 0 10px 30px -12px rgba(27, 30, 28, 0.10);
    --shadow-lg: 0 30px 70px -25px rgba(10, 66, 58, 0.16);

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --nav-height: 72px;
  }

  /* Mobile compaction of the section-rhythm scale. The legacy CSS reduced
     .section's own padding at this breakpoint (in `components`, which
     always wins over `layout`'s token-driven rule regardless of layer
     intent) — re-expressed here on the tokens themselves so all three
     rhythm steps stay distinct and strictly increasing on small screens
     too, instead of only the "normal" step moving. */
  @media (max-width: 640px) {
    :root {
      --space-tight: 2.5rem;
      --space-normal: 3.5rem;
      --space-breathe: 5rem;
    }
  }
}

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

  body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--step-body);
    line-height: var(--leading-body);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11", "tnum";
  }

  img, svg { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; }

  h1, h2, h3, h4 {
    margin: 0 0 0.35em;
    font-family: var(--font-display);
    font-weight: 650;
    font-optical-sizing: auto;
    line-height: var(--leading-display);
    letter-spacing: var(--track-display);
    color: var(--ink);
    text-wrap: balance;
  }

  h1 { font-size: var(--step-hero); }
  h2 { font-size: var(--step-h2); }
  h3 { font-size: var(--step-h3); line-height: 1.15; }
  h4 { font-size: var(--step-body); font-weight: 600; color: var(--ink-muted); }

  p { margin: 0 0 1em; color: var(--ink-muted); max-width: 62ch; }

  ::selection { background: var(--pine); color: var(--paper); }

  :is(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--pine);
    outline-offset: 2px;
    border-radius: 6px;
  }

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

@layer base {
  .metric, .command-text {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }
}

@layer layout {
  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 1.5rem;
  }
  .container--narrow { max-width: var(--container-narrow); }
  .container--wide { max-width: 1280px; }

  /* Rhythm must vary. --space-normal is the default; the modifiers exist
     so adjacent sections do not share a padding value. */
  .section { padding-block: var(--space-normal); }
  .section--tight { padding-block: var(--space-tight); }
  .section--breathe { padding-block: var(--space-breathe); }

  .section--tint { background: var(--paper-2); border-block: 1px solid var(--line); }

  /* Asymmetric 7/5 split; --reverse flips it so the eye zig-zags down the page. */
  .split {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
  }
  @media (min-width: 900px) {
    .split { grid-template-columns: 7fr 5fr; }
    .split--reverse { grid-template-columns: 5fr 7fr; }
    .split--reverse > :first-child { order: 2; }
  }

  /* Break the container, full viewport width */
  .bleed {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  .stack > * + * { margin-block-start: var(--stack-gap, 1rem); }
}

@layer utilities {
  /* ---- Utilities layer ----
     The site's small, real set of layout/spacing/typography utility
     classes, applied directly in page markup (grid, gap, margin, padding,
     font-size, and friends). This replaced a fake Tailwind shim (Task 8)
     whose arbitrary-value classes were referenced in markup but never
     actually defined anywhere; every rule below is a genuine, working
     implementation of a class real pages use — the "small, real,
     documented set" the project's plan called for, not a stopgap.

     Kept pruned to exactly what's in use: Task 16 removed every class
     here that no page referenced any longer (19 classes). Keep it that
     way going forward — add a rule only when markup needs it, and drop a
     rule once its last usage disappears. `.build/lint/dead-classes.mjs`
     catches the opposite mistake (markup using a class this layer
     doesn't define); there is deliberately no automated check for the
     reverse (an unused rule sitting here), so prune by hand at the next
     sweep. */

  /* Display */
  .grid { display: grid; }
  .flex { display: flex; }
  .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Grid columns (base) */
  .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Flex */
  .flex-col { flex-direction: column; }
  .flex-wrap { flex-wrap: wrap; }
  .items-center { align-items: center; }
  .justify-center { justify-content: center; }
  .justify-between { justify-content: space-between; }

  /* Gap */
  .gap-2 { gap: 0.5rem; }
  .gap-2\.5 { gap: 0.625rem; }
  .gap-3 { gap: .75rem; }
  .gap-3\.5 { gap: 0.875rem; }
  .gap-4 { gap: 1rem; }

  /* Width */
  .w-full { width: 100%; }

  /* Margin */
  .mx-auto { margin-left: auto; margin-right: auto; }
  .mt-1 { margin-top: 0.25rem; }
  .mt-2 { margin-top: .5rem; }
  .mt-3 { margin-top: 0.75rem; }
  .mt-4 { margin-top: 1rem; }
  .mt-5 { margin-top: 1.25rem; }
  .mt-6 { margin-top: 1.5rem; }
  .mt-8 { margin-top: 2rem; }
  .mt-auto { margin-top: auto; }
  .mb-1 { margin-bottom: 0.25rem; }
  .mb-1\.5 { margin-bottom: 0.375rem; }
  .mb-2 { margin-bottom: .5rem; }
  .mb-3 { margin-bottom: .75rem; }
  .mb-4 { margin-bottom: 1rem; }
  .mb-5 { margin-bottom: 1.25rem; }
  .mb-6 { margin-bottom: 1.5rem; }
  .mb-7 { margin-bottom: 1.75rem; }
  .mb-8 { margin-bottom: 2rem; }

  /* Padding */
  .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
  .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
  .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
  .px-4 { padding-left: 1rem; padding-right: 1rem; }
  .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
  .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
  .py-1 { padding-top: .25rem; padding-bottom: .25rem; }
  .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
  .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }

  /* Stacked vertical spacing */
  .space-y-0\.5 > * + * { margin-top: 0.125rem; }
  .space-y-1\.5 > * + * { margin-top: 0.375rem; }

  /* Text alignment */
  .text-center { text-align: center; }

  /* Font size */
  .text-sm { font-size: 13px; }
  .text-xs { font-size: 11.5px; }
  .text-lg { font-size: 1.0625rem; }
  .text-xl { font-size: 1.2rem; }
  .text-3xl { font-size: clamp(1.65rem, 3vw, 2.1rem); }
  .text-\[10px\] { font-size: 10px; }

  /* Font weight */
  .font-medium { font-weight: 500; }
  .font-semibold { font-weight: 600; }

  /* Letter spacing */
  .tracking-tight { letter-spacing: -0.022em; }
  .tracking-widest { letter-spacing: 0.065em; }
  .tracking-\[-1\.6px\] { letter-spacing: -1.6px; }

  /* Max width */
  .max-w-2xl { max-width: 42rem; }

  /* Border-radius */
  .rounded { border-radius: var(--radius-sm); }
  .rounded-xl { border-radius: var(--radius-lg); }
  .rounded-full { border-radius: 999px; }

  /* Text transform */
  .uppercase { text-transform: uppercase; }

  /* Responsive — sm (>=640px) */
  @media (min-width: 640px) {
    .sm\:flex-row { flex-direction: row; }
  }

  /* Responsive — md (>=768px) */
  @media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:text-left { text-align: left; }
    .md\:text-\[2\.65rem\] { font-size: 2.65rem; }
  }

  /* Responsive — lg (>=1024px) */
  @media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  }
}

@layer components {

  /* ---------------------------------------------------------------
     Buttons + product frame (Task 9 step 1, verbatim). .btn--primary
     is pine, not honey — honey is the single signal colour, capped at
     3 uses/page, and must not be spent on every CTA. The old teal
     synonym class for primary buttons is intentionally absent here.
     --------------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.35rem;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--step-small);
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: background 160ms var(--ease-out), color 160ms var(--ease-out),
                border-color 160ms var(--ease-out);
  }
  .btn--primary { background: var(--pine); color: var(--paper); }
  .btn--primary:hover { background: var(--pine-deep); }
  .btn--primary:focus-visible { box-shadow: 0 0 0 3px rgba(14, 91, 78, 0.2); }
  .btn--secondary { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
  .btn--secondary:hover { border-color: var(--pine); color: var(--pine); }
  .btn--ghost { background: transparent; color: var(--ink-muted); }
  .btn--ghost:hover { color: var(--ink); }
  .btn--lg { padding: 0.95rem 1.75rem; font-size: var(--step-body); }

  /* Real product captures sit in this frame. Crop tight — a full browser
     screenshot reads as a dump; a detail reads as a working system. */
  .product-frame {
    position: relative;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--white);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }
  /* Default: fill the frame completely and let object-fit crop any
     mismatch between the capture's own proportions and the frame's
     (per-instance, inline) aspect-ratio, instead of leaving gaps. */
  .product-frame img { width: 100%; height: 100%; object-fit: cover; }

  /* analytics.png specifically was rendering as the full 1440px browser
     window scaled down — sidebar, top nav, and all — instead of a tight
     detail crop. Its frame is 3.388/1 (wide, short); the source capture
     is 1.6/1 (2880x1800). Because the frame is proportionally WIDER than
     the capture, plain `object-fit: cover` has no choice but to scale the
     image to the frame's full width and can only pan vertically — there
     is no slack left on the horizontal axis to crop the sidebar out, no
     matter what object-position is used (the same is true in reverse for
     any frame proportionally taller than its capture: cover would show
     full height with no way to crop top chrome). Getting rid of BOTH the
     sidebar (left, ~460 of 2880px) and the top chrome/banner/cost-tile
     row (top, ~830 of 1800px) at once needs more zoom than "cover"'s
     minimum covering scale, i.e. an oversized, explicitly positioned
     crop — the same technique already used (successfully) for the other
     three captures on this page, whose inline styles this overrides
     since inline beats an external rule on every property but !important. */
  .product-frame img[src$="analytics.png"] {
    position: absolute !important;
    max-width: none !important;
    width: 119% !important;
    height: auto !important;
    left: -19% !important;
    top: -116.2% !important;
  }

  /* Demoted to a plain margin reset: the old ornate framing (border,
     shadow, hover-zoom) belonged to a decorative era. Task 10's real
     screenshots use .product-frame above instead. */
  .premium-visual { margin: 0; }

  .tier-label {
    display: block;
    margin-top: 0.65rem;
    font-size: var(--step-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-subtle);
  }
  .sim-label {
    display: inline-block;
    margin-top: 0.65rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: var(--step-micro);
    color: var(--ink-subtle);
  }

  /* ---------------------------------------------------------------
     Eyebrow / section heading / section sub (Task 9 step 2, verbatim).
     Deliberately NOT centred — centring is opt-in via .text-center.
     The uniform centred rhythm across fifteen sections is the defect
     this redesign exists to fix; these must not re-introduce it.
     --------------------------------------------------------------- */
  .eyebrow {
    display: inline-block;
    font-size: var(--step-micro);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pine);
  }
  .section-heading { font-size: var(--step-h2); margin-bottom: 0.4rem; letter-spacing: var(--track-display); }
  .section-sub { font-size: var(--step-body); color: var(--ink-muted); max-width: 54ch; }

/* ---------- Promo Bar — minimal, crisp ---------- */


.promo {
  background: var(--paper-2);
  color: var(--ink-subtle);
  font-size: 12.5px;
  padding: 7px 24px;
  text-align: center;
  letter-spacing: -0.003em;
  border-bottom: 1px solid var(--line);
}
.promo a { color: var(--pine); font-weight: 600; }
.promo a:hover { color: var(--pine-deep); }
.promo .pill {
  display: inline-block;
  padding: 1px 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: rgba(14, 91, 78, 0.08);
  color: var(--pine);
  border-radius: 999px;
  margin-right: 9px;
  text-transform: uppercase;
  border: 1px solid rgba(14, 91, 78, 0.18);
}/* ---------- Navigation — light elegant frosted ---------- */


.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.nav.is-scrolled { border-bottom-color: var(--line-strong); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
.nav__brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav__brand img { height: 36px; width: auto; }

.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
  padding: 7px 13px;
  border-radius: 8px;
  transition: all 0.2s var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.nav__link:hover { color: var(--ink); background: var(--paper-2); }
.nav__link svg { width: 11px; height: 11px; opacity: 0.55; transition: transform 0.25s var(--ease-out); }
.nav__item:hover .nav__link svg { transform: rotate(180deg); }

.nav__item { position: relative; }

.megamenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 7px);
  width: 760px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.22s var(--ease-out);
  z-index: 100;
}
.nav__item:hover .megamenu,
.nav__item:focus-within .megamenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 3px);
}
.megamenu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.megamenu__item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 11px;
  border-radius: 9px;
  transition: background 0.18s var(--ease-out), border-color 0.18s;
  text-decoration: none;
  color: var(--ink-muted);
  border: 1px solid transparent;
}
.megamenu__item:hover { 
  background: var(--paper-2); 
  border-color: var(--line); 
  transform: translateX(1px);
}
.megamenu__item:focus-visible {
  box-shadow: 0 0 0 2px rgba(14, 91, 78,0.35);
  outline: none;
}
.megamenu__icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-2);
  color: var(--pine);
  border-radius: 7px;
  flex-shrink: 0;
  font-size: 15px;
  border: 1px solid var(--line);
}
.megamenu__title { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 1px; letter-spacing: -0.008em; }
.megamenu__desc { font-size: 11.5px; color: var(--ink-subtle); line-height: 1.35; }

.nav__cta { display: flex; align-items: center; gap: 10px; }

.nav__toggle {
  display: none;
  background: none;
  border: none;
  width: 40px; height: 40px;
  position: relative;
  color: var(--ink);
}
.nav__toggle span {
  position: absolute; left: 9px; right: 9px; height: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease-out), top 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.nav__toggle span:nth-child(1) { top: 14px; }
.nav__toggle span:nth-child(2) { top: 19px; }
.nav__toggle span:nth-child(3) { top: 24px; }
.nav.is-open .nav__toggle span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

@media (max-width: 1024px) { .megamenu { display: none; } }
@media (max-width: 900px) {
  .nav__toggle { display: block; }
  .nav__links, .nav__cta .btn--text { display: none; }
  .nav.is-open .nav__links, .nav.is-open .nav__cta .btn--text { display: flex; }
  .nav.is-open .nav__links { position: absolute; top: var(--nav-height); left: 0; right: 0; flex-direction: column; gap: 0; background: var(--white); padding: 10px 0 20px; border-bottom: 1px solid var(--line); }
  .nav.is-open .nav__link { padding: 14px 24px; font-size: 16px; border-radius: 0; width: 100%; }
}/* ---------- Reveal + Motion ---------- */


[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-stagger] > * { opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
[data-reveal-stagger].is-visible > * { opacity: 1; transform: none; }
[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 35ms; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 95ms; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 155ms; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 215ms; }

.live-metric { transition: all 0.3s var(--ease-out); }/* ---------- Cards / Surfaces — light premium ---------- */


.glass, .glass-strong {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.glass-strong { box-shadow: var(--shadow-lg); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  transition: transform 0.18s var(--ease-out), border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-lg); }

.ledger {
  background-image:
    linear-gradient(rgba(27, 30, 28,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 30, 28,0.012) 1px, transparent 1px);
  background-size: 24px 24px;
}/* PR1: Executive credibility module — minimal reuse of glass-strong + ledger + btn; calm executive */


.exec-cred h2 { margin-bottom: 1rem; }
.cred-bullet {
  position: relative;
  padding-left: 1.35em;
  line-height: 1.55;
}
.cred-bullet:before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--pine);
  font-weight: 700;
}/* ---------- Agent Cards — clean, modern, light ---------- */


.agent-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 22px 20px;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s var(--ease-out), border-color 0.18s;
}
.agent-card:hover { 
  border-color: var(--line-strong); 
  transform: translateY(-1px); 
  box-shadow: 0 10px 30px -15px rgba(14, 91, 78,0.12);
}
.agent-card:hover .agent-icon {
  transform: scale(1.04) rotate(1deg);
  transition: transform 180ms var(--ease-out);
}
.agent-card::after {
  content: '';
  position: absolute; top: 0; left: 0; width: 3px; height: 100%;
  background: linear-gradient(to bottom, var(--pine), transparent);
  opacity: 0.7;
}
.agent-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.025em;
  padding: 1px 8px; border-radius: 999px;
  background: rgba(20, 119, 107, 0.08); color: var(--pine-bright);
}
.agent-status .dot { width: 4.5px; height: 4.5px; border-radius: 50%; background: currentColor; animation: pulse 2.2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.agent-badge {
  display: inline-block;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.065em;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(10, 66, 58, 0.08); color: var(--pine-deep);
  border: 1px solid rgba(10, 66, 58, 0.18);
}/* ---------- Pipeline — clean light tactical ---------- */


.pipeline {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  background: var(--paper-2); border-radius: var(--radius-lg); padding: 14px;
  border: 1px solid var(--line);
}
.pipeline-col { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-height: 242px; }
.pipeline-col h2, .pipeline-col h3 { font-size: 10.5px; font-weight: 700; color: var(--pine); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.06em; }
.deal {
  background: var(--paper-2); border: 1px solid var(--line-strong); border-radius: 7px;
  padding: 9px 11px; margin-bottom: 6px; font-size: 12.5px; cursor: grab;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s, border-color 0.18s;
  color: var(--ink);
}
.deal:hover { 
  transform: translateY(-1px); 
  border-color: var(--pine); 
  box-shadow: var(--shadow-sm); 
  background: var(--paper-2);
}
.deal:active { transform: scale(0.985); }
.pipeline-col {
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.pipeline-col.drag-over {
  background: var(--paper-2);
  border-color: var(--pine);
  box-shadow: 0 0 0 1px var(--pine) inset;
}
.deal .value { font-weight: 700; color: var(--pine); font-size: 12.5px; font-family: var(--font-body); }
.deal .meta { font-size: 10.5px; color: var(--ink-subtle); margin-top: 2px; }
.deal.ai { border-left: 3px solid var(--pine); }/* ---------- Command Bar — signature clean interaction ---------- */


.command-bar {
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 11px;
  box-shadow: var(--shadow);
}
.command-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--ink); font-size: 14.5px; font-family: var(--font-body);
}
.command-input::placeholder { color: var(--ink-subtle); }
.command-result { margin-top: 12px; }/* ---------- Pricing — elegant cards ---------- */


.pricing-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pricing-grid { grid-template-columns: repeat(4, 1fr); } }
.pricing-enterprise {
  margin-top: 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-xl); padding: 24px 22px; box-shadow: var(--shadow-sm);
}
.pricing-enterprise__features {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px;
  margin: 0; flex: 1 1 320px;
}
@media (min-width: 640px) { .pricing-enterprise__features { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 639px) {
  .pricing-enterprise { flex-direction: column; align-items: stretch; }
  .pricing-enterprise .btn { width: 100%; text-align: center; }
}
.pricing-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl); padding: 24px 22px; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.pricing-card.featured { border-color: var(--pine); position: relative; }
.pricing-card.featured::before {
  content: "MOST POPULAR"; position: absolute; top: -10px; left: 22px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.09em;
  background: var(--pine); color: white; padding: 1px 9px; border-radius: 999px;
}
.pricing-name { font-weight: 700; font-size: 13.5px; color: var(--pine); letter-spacing: 0.015em; }
.pricing-price { font-size: 38px; font-weight: 800; letter-spacing: -0.032em; margin: 8px 0; font-feature-settings: "tnum"; }
.pricing-price span { font-size: 14px; font-weight: 500; color: var(--ink-subtle); }
.pricing-features { list-style: none; padding: 0; margin: 14px 0 18px; flex: 1; }
.pricing-features li { padding: 5px 0; font-size: 13.5px; color: var(--ink-muted); display: flex; gap: 7px; align-items: flex-start; }
.pricing-features li::before { content: "→"; color: var(--pine); font-weight: 700; font-family: var(--font-body); }/* ---------- FAQ — minimal ---------- */


.faq-item { border-bottom: 1px solid var(--line); }
.faq-question {
  width: 100%; text-align: left; padding: 15px 0; font-size: 14.5px; font-weight: 600;
  color: var(--ink); display: flex; justify-content: space-between; align-items: center;
}
.faq-question:hover { color: var(--pine); }
.faq-icon { transition: transform 0.2s var(--ease-out); color: var(--ink-subtle); }
.faq-item.open .faq-icon { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.32s var(--ease-out); color: var(--ink-muted); padding-bottom: 3px; font-size: 14px; }
.faq-item.open .faq-answer { max-height: 180px; }/* ---------- Footer — quiet authority ---------- */


.footer {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  padding: 46px 0 22px; font-size: 13.5px;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 28px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-brand p { color: var(--ink-subtle); max-width: 240px; }
.footer-col h3 { font-size: 10.5px; font-weight: 700; color: var(--ink-subtle); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.055em; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 6px; }
.footer-col a { color: var(--ink-muted); }
.footer-col a:hover { color: var(--pine); }
.footer-bottom { margin-top: 38px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-subtle); font-size: 12px; }/* ---------- Section rhythm — generous breathing ---------- */


/* ---------- Stats & mini dashboards ---------- */


.stat { text-align: center; }
.stat-number {
  font-family: var(--font-body);
  font-size: 28px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.02em; font-feature-settings: "tnum";
  text-shadow: 0 0 40px rgba(14, 91, 78, 0.10), 0 2px 10px rgba(14, 91, 78, 0.06);
}
.stat-label { font-size: 11.5px; color: var(--ink-subtle); margin-top: 1px; }

.mini-dash {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px;
  box-shadow: var(--shadow-sm);
}
.mini-dash-title { font-size: 10.5px; font-weight: 600; color: var(--ink-subtle); margin-bottom: 7px; letter-spacing: 0.035em; }/* ---------- Workflow rail (playbooks) — light ---------- */


.workflow-rail {
  display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 10px 0;
}
.wf-step {
  display: flex; flex-direction: column; align-items: center; min-width: 84px;
}
.wf-step .node {
  width: 50px; height: 50px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; border: 2px solid var(--line-strong); background: var(--white);
  color: var(--pine);
}
.wf-step .label { font-size: 10px; margin-top: 6px; color: var(--ink-subtle); font-weight: 600; letter-spacing: 0.015em; }
.wf-connector {
  flex: 1; height: 2px; background: linear-gradient(to right, rgba(14, 91, 78,0.28), rgba(20, 119, 107,0.2));
  min-width: 22px; position: relative;
}
.wf-connector::after {
  content: ''; position: absolute; right: -1px; top: 50%; transform: translateY(-50%);
  border: 4.5px solid transparent; border-left-color: rgba(14, 91, 78,0.38);
}/* ---------- Comparison table — clean light ---------- */


.compare-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: 14px; overflow: hidden; }
.compare-table th, .compare-table td { padding: 13px 15px; text-align: left; border-bottom: 1px solid var(--line); }
.compare-table th { font-size: 10.5px; font-weight: 700; color: var(--ink-subtle); text-transform: uppercase; letter-spacing: 0.055em; background: var(--paper-2); }
.compare-table .highlight { background: rgba(14, 91, 78,0.06); color: var(--pine); font-weight: 700; }/* ---------- Logo wall — quiet, credible social proof ---------- */


.logo-wall {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 38px;
}
.logo-wall .logo-mark {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--ink-subtle);
  opacity: 0.9;
  transition: color 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
  white-space: nowrap;
}
.logo-wall .logo-mark:hover { color: var(--ink-muted); opacity: 1; }
.logo-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-subtle);
}/* ---------- Trust badges (compliance + rating) ---------- */


.trust-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.trust-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--ink-muted);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 11px;
}
.trust-badge .icon { width: 14px; height: 14px; color: var(--pine); }
.rating-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.rating-stars { color: var(--honey-deep); letter-spacing: 1px; font-size: 13px; }/* ---------- Mobile sticky CTA ---------- */


.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: rgba(255,255,255,0.96); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 9px 14px; display: none;
}
@media (max-width: 640px) { .sticky-cta { display: block; } }/* ---------- Modal — clean light ---------- */


.modal {
  position: fixed; inset: 0; background: rgba(27, 30, 28,0.82);
  display: none; align-items: center; justify-content: center; z-index: 200;
  padding: 20px;
}
.modal.open { display: flex; }
.modal-content {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 28px 26px;
  width: 100%; max-width: 500px;
  position: relative;
  box-shadow: var(--shadow-lg);
}
.modal-close {
  position: absolute; top: 12px; right: 16px;
  font-size: 24px; line-height: 1; color: var(--ink-subtle);
}
.modal-close:hover { color: var(--ink); }/* Form inputs — light clean */


.label { font-size: 10.5px; font-weight: 600; color: var(--ink-subtle); margin-bottom: 4px; letter-spacing: 0.03em; }
.input, .select, textarea.input {
  width: 100%; background: var(--white); border: 1px solid var(--line-strong);
  color: var(--ink); padding: 10px 13px; border-radius: var(--radius);
  font-size: 14.5px; transition: border-color 0.18s; font-family: inherit;
}
.input:focus, .select:focus, textarea.input:focus { border-color: var(--pine); outline: none; }
select.select { appearance: none; }/* ---------- Live / data elements ---------- */


.live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--pine-bright);
  border-radius: 50%;
  box-shadow: 0 0 0 2.5px rgba(20, 119, 107,0.15);
  animation: pulse 2s infinite;
}
.live-dot.strong {
  box-shadow: 0 0 0 3px rgba(20, 119, 107,0.22), 0 0 0 6px rgba(20, 119, 107,0.08);
  animation: pulse 1.6s infinite;
}
.signal-item {
  font-family: var(--font-body);
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
  color: var(--ink-muted);
}
.signal-item:last-child { border-bottom: none; }

@media (max-width: 640px) {
  h1 { font-size: 2.45rem; }
}/* ============================================================
   PREMIUM VISUAL EXTENSIONS — executive light aesthetic
   Extends existing glass, card, ledger, reveal primitives.
   All new visuals use refined teal/indigo, generous space.
   ============================================================ *//* Live high-fidelity product screen mocks (browser-rendered, not screenshots) */


.hf-mock {
  background: var(--white);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid var(--line);
}
.hf-mock .mock-header {
  padding: 8px 12px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hf-mock .mock-body {
  padding: 12px;
}
.hf-mock .mock-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--paper-3);
}
.hf-mock .mock-row:last-child { border-bottom: none; }
.hf-mock .mock-pill {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(14, 91, 78,0.08);
  color: var(--pine);
  border: 1px solid rgba(14, 91, 78,0.2);
  white-space: nowrap;
}
.hf-mock .mock-value {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--pine);
}
.hf-mock .mock-graph {
  height: 48px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  margin-top: 8px;
}
.hf-mock .mock-bar {
  flex: 1;
  background: linear-gradient(to top, var(--pine), var(--pine-bright));
  border-radius: 2px;
  transition: height 200ms ease;
}
.hf-mock .mock-stakeholder {
  position: relative;
  min-height: 110px;
  margin: 8px 0 4px;
  padding-bottom: 4px;
  overflow: hidden;
}
.hf-mock .mock-node {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--white);
  border: 2px solid var(--pine);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.hf-mock .mock-node:hover { transform: scale(1.08); box-shadow: var(--shadow); }
.hf-mock .mock-edge {
  position: absolute;
  height: 1.5px;
  background: rgba(14, 91, 78,0.35);
  transform-origin: left center;
}/* Apple-quality refinements for hf-mocks: precise executive typography, soft depth, fluid micro-states, production fidelity */


.hf-mock {
  box-shadow: 0 1px 3px rgba(27, 30, 28,0.06), 0 10px 30px -15px rgba(27, 30, 28,0.08);
  font-feature-settings: "tnum", "ss01";
  position: relative;
}
.hf-mock::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(rgba(27, 30, 28,0.035) 0.6px, transparent 0.6px);
  background-size: 3px 3px;
  pointer-events: none;
  opacity: 0.6;
  mix-blend-mode: multiply;
  border-radius: inherit;
}
.hf-mock .mock-header {
  font-size: 9.5px;
  letter-spacing: 0.075em;
  padding: 9px 14px;
  background: var(--paper-2);
}
.hf-mock .mock-body {
  padding: 14px 14px 12px;
  font-size: 12.5px;
  line-height: 1.45;
}
.hf-mock .mock-row {
  padding: 7px 0;
  transition: background 140ms var(--ease-out), transform 140ms var(--ease-out);
  border-radius: 4px;
}
.hf-mock .mock-row:hover {
  background: var(--paper-2);
  transform: translateX(1px);
  box-shadow: 0 1px 0 rgba(14, 91, 78,0.06);
}
.hf-mock .mock-row:active {
  transform: translateX(0) scale(0.995);
  transition: transform 60ms var(--ease-out);
}
.hf-mock button {
  position: relative;
  overflow: hidden;
}
.hf-mock button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: translateX(-100%);
  transition: transform 420ms var(--ease-out);
  pointer-events: none;
}
.hf-mock button:hover::after {
  transform: translateX(300%);
}
.hf-mock .mock-pill {
  font-size: 9px;
  padding: 1px 7px;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.hf-mock .mock-value {
  font-size: 12.5px;
  letter-spacing: -0.01em;
}
.hf-mock button {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  transition: all 120ms var(--ease-out);
}
.hf-mock button:hover {
  background: var(--pine);
  color: var(--white);
  border-color: var(--pine);
}
.hf-mock .mock-detail {
  font-size: 10px;
  color: var(--ink-subtle);
  margin-top: 4px;
  padding-left: 2px;
}/* ============================================================
   HERO FLOW — editorial premium explainer (initHeroFlow in JS)
   Direction: refined light, glass depth, teal intelligence accent
   ============================================================ */


.hero-flow {
  position: relative;
  width: 100%;
  --hf-stage-color: var(--pine);
}/* Canvas — inset stage with atmosphere */


.hero-flow__canvas {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(165deg, var(--white) 0%, var(--paper-2) 48%, var(--paper-2) 100%);
  border: 1px solid rgba(228, 218, 203, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(27, 30, 28, 0.04),
    0 18px 48px -28px rgba(14, 91, 78, 0.14);
}
.hero-flow__ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 18% 85%, rgba(14, 91, 78, 0.09), transparent 58%),
    radial-gradient(ellipse 55% 45% at 88% 18%, rgba(10, 66, 58, 0.07), transparent 52%),
    radial-gradient(ellipse 40% 35% at 50% 50%, rgba(20, 119, 107, 0.04), transparent 60%);
}
.hero-flow__ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: radial-gradient(rgba(27, 30, 28, 0.055) 0.6px, transparent 0.6px);
  background-size: 14px 14px;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.hero-flow__svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  max-height: 300px;
  overflow: visible;
}/* SVG layers */


.hero-flow .hf-bg { pointer-events: none; }
.hero-flow .hf-track-base { fill: none; stroke-linecap: round; }
.hero-flow .hf-edge-accent {
  fill: none;
  stroke-linecap: round;
  filter: url(#hfEdgeGlow);
  transition: stroke-dashoffset 900ms var(--ease-out);
}
.hero-flow .hf-edge-shimmer {
  fill: none;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 320ms ease;
}
.hero-flow .hf-edge-wrap.is-active .hf-edge-shimmer { opacity: 0.85; animation: hfShimmer 1.4s ease-in-out infinite; }
@keyframes hfShimmer {
  0%, 100% { stroke-dashoffset: 0; opacity: 0.35; }
  50% { stroke-dashoffset: -24; opacity: 0.95; }
}/* Nodes */


.hero-flow .hf-node { cursor: default; }
.hero-flow .hf-spotlight {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.55);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
.hero-flow .hf-node.is-active .hf-spotlight { opacity: 0.22; transform: scale(1); }
.hero-flow .hf-node.is-done .hf-spotlight { opacity: 0.1; transform: scale(0.92); }

.hero-flow .hf-node-core {
  transition: transform 560ms var(--ease-out), filter 420ms ease;
  transform: scale(0.78);
  filter: drop-shadow(0 2px 4px rgba(27, 30, 28, 0.06));
}
.hero-flow .hf-node-plate {
  transition: opacity 420ms ease, stroke 420ms ease;
  opacity: 0.55;
}
.hero-flow .hf-node-fill {
  transition: opacity 480ms ease;
  opacity: 0.12;
}
.hero-flow .hf-node-icon {
  transition: opacity 420ms ease, transform 420ms var(--ease-out);
  opacity: 0.35;
  transform: scale(0.88);
}
.hero-flow .hf-label {
  transition: fill 420ms ease, opacity 420ms ease;
  fill: var(--ink-subtle);
  opacity: 0.65;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-family: var(--font-body);
}

.hero-flow .hf-node.is-done .hf-node-core { transform: scale(0.94); }
.hero-flow .hf-node.is-done .hf-node-plate { opacity: 0.92; }
.hero-flow .hf-node.is-done .hf-node-fill { opacity: 0.88; }
.hero-flow .hf-node.is-done .hf-node-icon { opacity: 1; transform: scale(1); }
.hero-flow .hf-node.is-done .hf-label { opacity: 1; fill: var(--ink-muted); }

.hero-flow .hf-node.is-active .hf-node-core {
  transform: scale(1.14);
  filter: drop-shadow(0 8px 22px rgba(27, 30, 28, 0.12)) drop-shadow(0 0 18px color-mix(in srgb, var(--hf-node-color, var(--pine)) 28%, transparent));
}
.hero-flow .hf-node.is-active .hf-node-plate { opacity: 1; }
.hero-flow .hf-node.is-active .hf-node-fill { opacity: 1; }
.hero-flow .hf-node.is-active .hf-node-icon { opacity: 1; transform: scale(1); }
.hero-flow .hf-node.is-active .hf-label { opacity: 1; fill: var(--ink); }

.hero-flow .hf-pulse {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.5);
}
.hero-flow .hf-node.is-active .hf-pulse { animation: hfPulse 2.2s var(--ease-out) infinite; }
@keyframes hfPulse {
  0%   { opacity: 0.5; transform: scale(0.55); }
  65%  { opacity: 0;   transform: scale(1.65); }
  100% { opacity: 0;   transform: scale(1.65); }
}/* Result chips */


.hero-flow .hf-chip {
  opacity: 0;
  transform: translateY(10px) scale(0.92);
  transition: opacity 440ms var(--ease-out), transform 440ms var(--ease-out);
  filter: drop-shadow(0 6px 16px rgba(27, 30, 28, 0.08));
}
.hero-flow .hf-chip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}/* YOU command card + tether */


.hero-flow .hf-you-card { filter: drop-shadow(0 10px 28px rgba(14, 91, 78, 0.12)); }
.hero-flow .hf-you-live { animation: hfLive 2.4s ease-in-out infinite; }
@keyframes hfLive {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.hero-flow .hf-command-line {
  fill: none;
  stroke-dasharray: 4 7;
  animation: hfMarch 1.1s linear infinite;
}
@keyframes hfMarch { to { stroke-dashoffset: -22; } }/* Lead token + comet trail */


.hero-flow .hf-token { transition: opacity 380ms ease; }
.hero-flow .hf-token-body { transition: fill 420ms ease, stroke 420ms ease; }
.hero-flow .hf-token-glow { transition: opacity 420ms ease; }
.hero-flow .hf-comet {
  opacity: 0;
  transition: opacity 280ms ease;
}
.hero-flow .hf-token.is-moving .hf-comet { opacity: 0.7; animation: hfComet 680ms var(--ease-out) forwards; }
@keyframes hfComet {
  0% { opacity: 0.65; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(-28px) scale(0.4); }
}/* Narration panel */


.hero-flow__narration {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}
.hero-flow__progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 4px;
}
.hero-flow__progress-track {
  height: 3px;
  border-radius: 999px;
  background: var(--paper-3);
  overflow: hidden;
}
.hero-flow__progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--hf-stage-color), color-mix(in srgb, var(--hf-stage-color) 65%, var(--pine-bright)));
  transition: width 720ms var(--ease-out), background 420ms ease;
  box-shadow: 0 0 12px color-mix(in srgb, var(--hf-stage-color) 35%, transparent);
}
.hero-flow__dots {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 0 2px;
}
.hero-flow__dots i {
  flex: 1;
  max-width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  transition: background 380ms ease, box-shadow 380ms ease, transform 380ms var(--ease-out);
}
.hero-flow__dots i.is-on {
  background: var(--hf-stage-color, var(--pine));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hf-stage-color, var(--pine)) 18%, transparent);
  transform: scaleY(1.35);
}

.hero-flow__card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(228, 218, 203, 0.95);
  box-shadow:
    inset 3px 0 0 var(--hf-stage-color),
    0 1px 2px rgba(27, 30, 28, 0.04),
    0 12px 32px -20px rgba(27, 30, 28, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: box-shadow 420ms ease, border-color 420ms ease;
}
.hero-flow__badge {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hf-stage-color);
  background: color-mix(in srgb, var(--hf-stage-color) 10%, var(--white));
  border: 1px solid color-mix(in srgb, var(--hf-stage-color) 22%, transparent);
  padding: 5px 8px;
  border-radius: 8px;
  line-height: 1;
  transition: color 420ms ease, background 420ms ease, border-color 420ms ease;
}
.hero-flow__card-body {
  flex: 1;
  min-width: 0;
  transition: opacity 260ms ease, transform 260ms var(--ease-out);
}
.hero-flow__card.is-swap .hero-flow__card-body {
  opacity: 0;
  transform: translateY(6px);
}
.hero-flow__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.hero-flow__num {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--hf-stage-color);
  letter-spacing: -0.02em;
  line-height: 1;
  transition: color 420ms ease;
}
.hero-flow__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.hero-flow__desc {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-muted);
  line-height: 1.45;
}

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

@media (max-width: 640px) {
  .hero-flow__svg { max-height: 240px; }
  .hero-flow__card { padding: 14px 15px; gap: 12px; }
  .hero-flow__title { font-size: 15px; }
  .hero-flow__desc { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-flow .hf-node-core,
  .hero-flow .hf-node-plate,
  .hero-flow .hf-node-fill,
  .hero-flow .hf-node-icon,
  .hero-flow .hf-label,
  .hero-flow .hf-chip,
  .hero-flow .hf-edge-accent,
  .hero-flow .hf-spotlight,
  .hero-flow__progress-fill,
  .hero-flow__card-body,
  .hero-flow__dots i { transition: none !important; }
  .hero-flow .hf-pulse,
  .hero-flow .hf-command-line,
  .hero-flow .hf-edge-shimmer,
  .hero-flow .hf-you-live,
  .hero-flow .hf-comet { animation: none !important; }
}/* Compact flow diagrams (feature mocks + workflow section) */


.flow-diagram--compact .hero-flow__canvas { min-height: 188px; }
.flow-diagram--compact .hero-flow__svg { max-height: 210px; }
.flow-diagram--compact .hero-flow__card { padding: 12px 14px; gap: 10px; }
.flow-diagram--compact .hero-flow__title { font-size: 14px; }
.flow-diagram--compact .hero-flow__desc { font-size: 12px; }
.flow-diagram--compact .hero-flow__num { font-size: 11px; }
.hf-mock .flow-diagram { margin: 0; }
.hf-mock .flow-diagram .hero-flow__canvas { border-radius: 10px; }
.mock-stakeholder { min-height: 132px; }
.stakeholder-graph__svg .sg-node { cursor: pointer; }
.stakeholder-graph__svg .sg-node:focus { outline: 2px solid var(--pine); outline-offset: 2px; }/* 
  IMAGE POLICY (full spec: assets/images/README.md):
  - Type 1: Clean photos of PEOPLE ONLY — no text, no UIs, no charts, no logos, no screenshots, no watermarks.
  - Type 2: Browser-rendered hf-mock panels (real HTML/SVG). Caption these "INTERACTIVE PREVIEW" — never "identical to production".
  Never use static screenshots or AI-generated images containing text/UI (they render garbled). See README for art direction + checklist.
*/
.visual-caption {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  padding: 9px 14px;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  font-family: var(--font-body);
}/* ---------- Icon system — single monochrome line set (replaces emoji) ---------- */


.icon {
  width: 20px; height: 20px;
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.icon-lg { width: 22px; height: 22px; }
.agent-icon {
  width: 26px; height: 26px; color: var(--pine); opacity: 0.85;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}
.intel-icon {
  width: 38px; height: 38px; padding: 8px;
  color: var(--pine);
  background: rgba(14, 91, 78,0.07);
  border: 1px solid rgba(14, 91, 78,0.16);
  border-radius: 11px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  margin-bottom: 0.375rem;
}
.megamenu__icon .icon { color: var(--pine); }
.channel-icon {
  width: 17px; height: 17px; color: var(--pine); margin-right: 2px;
  vertical-align: -3px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}
.wf-step .node .icon { width: 22px; height: 22px; }/* Strong reduced-motion guard for all motion + rich visuals (extends existing JS check) */


@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-stagger], [data-reveal-stagger] > *,
  .premium-visual, .premium-visual img,
  .card, .agent-card, .btn, .nav,
  svg animate, svg *, .deal, .faq-icon, .faq-answer, .live-metric,
  .nav__link svg, .btn__arrow, .wf-connector, .wf-step .node, .nav__toggle span,
  .hf-mock, .hf-mock *, .hf-mock .mock-row, .hf-mock .mock-node, .hf-mock button,
  .provenance-detail, .live-trace, .agent-badge-inline,
  .hf-mock .mock-row:hover, .mock-stakeholder *, .cta-note, [data-reveal] * {
    transition: none !important;
    transform: none !important;
    animation: none !important;
    /* opacity:1 omitted to preserve deliberate static stepped opacities on sdr [data-phase] Q-rows (9-phase visual cue); transitions still killed and advancePhase respects RM */
  }
  .agent-status .dot, .live-dot { animation: none !important; }
  .premium-visual:hover img { transform: none !important; }
  .hf-mock .mock-row { background: transparent !important; }
  .orb,
  .gradient-text,
  .pulse-glow-cta,
  .marquee-track,
    .card-shine::before { animation: none !important; transition: none !important; }
  .hero-mosaic { display: none !important; }
}/* ============================================================
   APPLE-QUALITY EXECUTIVE POLISH — meticulous details across site
   - Refined type hierarchy + tracking for Satoshi
   - Micro interactions that feel deliberate (no gimmick)
   - Elevated surfaces, focus states, alignment
   - Scoped to existing primitives; no global leakage
   ============================================================ *//* Executive typography micro-refinements */


/* Card/ledger surfaces — softer Apple-like depth + precise hover */


.card, .ledger, .agent-card, .pricing-card {
  transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.card:hover, .ledger:hover, .agent-card:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  box-shadow: 0 14px 36px -18px rgba(27, 30, 28,0.11);
}
.ledger { background-size: 22px 22px; }/* tighter subtle grid for refined feel *//* Premium focus states for accessibility + craft *//* Elevated mock rows and provenance for "identical to production" fidelity */


.hf-mock .provenance {
  font-size: 10px;
  color: var(--ink-muted);
  padding: 4px 6px;
  background: var(--paper-2);
  border-radius: 4px;
  margin-top: 3px;
  cursor: default;
}
.hf-mock .live-trace {
  font-family: var(--font-body);
  font-size: 9.5px;
  color: var(--pine-bright);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hf-mock .agent-badge-inline {
  font-size: 9px;
  padding: 0 5px;
  border-radius: 3px;
  background: rgba(10, 66, 58,0.08);
  color: var(--pine-deep);
  border: 1px solid rgba(10, 66, 58,0.18);
}/* Conversion CTAs — confident but refined, with risk reversal space */


.cta-group { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cta-note {
  font-size: 11px;
  color: var(--ink-subtle);
  letter-spacing: -0.003em;
}/* Stagger orchestration for Apple-like spatial reveals (used with data-reveal-stagger) */


[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 275ms; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 335ms; }/* Subtle premium framing for clean people photos only (never applied to mocks) */


figure.premium-visual img[alt*="professional" i],
figure.premium-visual img[alt*="executive" i],
figure.premium-visual img[alt*="team" i] {
  box-shadow: inset 0 0 0 1px rgba(27, 30, 28,0.04);
}/* Consistent legal page minimal surfaces (no texture jpgs) */


.legal-surface {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
}/* Ensure all interactive elements in flow have touch/keyboard polish */


.hf-mock .mock-row, .deal, .wf-step { -webkit-tap-highlight-color: transparent; }/* PR4: Targeted premium polish, a11y, spacing, mobile, RM, .exec-cred refine (reuse patterns, no new primitives) */


.exec-cred { padding: 28px 26px; }
@media (min-width: 768px) { .exec-cred { padding: 36px 40px; } }
.cred-bullet { margin-bottom: 2px; }

.footer { padding-top: 48px; padding-bottom: 24px; }
.footer-col a { transition: color 120ms var(--ease-out); }

.hf-mock { border-radius: 12px; box-shadow: 0 10px 30px -18px rgba(27, 30, 28,0.10), 0 1px 0 var(--white); }
.agent-card { padding: 24px 22px 22px; }
.command-bar { border-radius: 14px; }

.btn, .nav__link, .hf-mock .mock-row, .mock-node { transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out), border-color 140ms var(--ease-out), background 140ms var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .exec-cred, .cred-bullet { transition: none !important; }
}/* Caption + sim-label consistency + aria support */
[data-cta] { cursor: pointer; }/* Footer link consistency micro */


.footer-col li a[href^="http"], .footer-col li a[href^="#"] { /* no change needed */ }/* ============================================================
   LUMINOUS COMMAND — ambience primitives (light-mode depth)
   Light translations of flycorpsec techniques: aurora mosaic,
   drifting orbs, dot grid, grain, card shine, shimmer, glow.
   ============================================================ *//* Aurora backgrounds for section rhythm (replace flat var(--paper-2)) */


.bg-aurora-teal {
  background:
    radial-gradient(60% 80% at 12% 0%, rgba(14, 91, 78, 0.10), transparent 60%),
    radial-gradient(70% 90% at 100% 100%, rgba(14, 91, 78, 0.07), transparent 60%),
    var(--white);
}
.bg-aurora-warm {
  background:
    radial-gradient(55% 75% at 90% 0%, rgba(225, 155, 50, 0.12), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(14, 91, 78, 0.10), transparent 60%),
    var(--white);
}
.bg-section-tint {
  background:
    radial-gradient(50% 60% at 50% 0%, rgba(14, 91, 78,0.05), transparent 55%),
    var(--paper-2);
}/* Drifting ambient orbs (place inside a position:relative section as
   <div class="ambient" aria-hidden="true"><span class="orb orb--1"></span>...</div>) */


.ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ambient + * { position: relative; z-index: 1; }
.orb {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5;
  will-change: transform;
}
.orb--1 { width: 380px; height: 380px; left: -80px; top: -60px;
  background: radial-gradient(circle, rgba(20, 119, 107,0.22), transparent 70%);
  animation: orb-drift-1 22s ease-in-out infinite; }
.orb--2 { width: 320px; height: 320px; right: -60px; top: 20%;
  background: radial-gradient(circle, rgba(225, 155, 50,0.14), transparent 70%);
  animation: orb-drift-2 26s ease-in-out infinite; }
.orb--3 { width: 300px; height: 300px; left: 40%; bottom: -80px;
  background: radial-gradient(circle, rgba(14, 91, 78,0.16), transparent 70%);
  animation: orb-drift-3 20s ease-in-out infinite; }
@keyframes orb-drift-1 { 0%,100%{transform:translate(0,0)} 33%{transform:translate(70px,-50px)} 66%{transform:translate(-40px,40px)} }
@keyframes orb-drift-2 { 0%,100%{transform:translate(0,0)} 33%{transform:translate(-60px,70px)} 66%{transform:translate(40px,-30px)} }
@keyframes orb-drift-3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,55px)} }/* Dot grid overlay (light) */


.bg-dots {
  background-image: radial-gradient(circle, rgba(14, 91, 78,0.06) 1px, transparent 1px);
  background-size: 26px 26px;
}/* Subtle grain for premium texture (light) */


.grain { position: relative; }
.grain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}/* Hero light mosaic — lightening cells over an aurora base (Delve, inverted) */


.hero-aurora {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 80% at 15% 8%, rgba(20, 119, 107,0.20), transparent 60%),
    radial-gradient(50% 70% at 88% 0%, rgba(225, 155, 50,0.12), transparent 55%),
    radial-gradient(85% 95% at 50% 115%, rgba(14, 91, 78,0.12), transparent 60%),
    var(--white);
}
.hero-mosaic {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 1fr;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
}
.hero-mosaic > i { display: block; background: rgba(255,255,255,var(--cell, 0.6)); }/* Card shine sweep (light) — add class "card-shine" to .card/.agent-card/.premium-visual */


.card-shine { position: relative; overflow: hidden; }
.card-shine::before {
  content: ''; position: absolute; top: 0; left: -120%; width: 80%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(14, 91, 78,0.08), transparent);
  transition: left 0.7s var(--ease-out); pointer-events: none; z-index: 2;
}
.card-shine:hover::before { left: 130%; }/* Card glow hover (teal) */


.card-glow { transition: box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out); }
.card-glow:hover {
  border-color: rgba(14, 91, 78,0.22);
  box-shadow: 0 4px 18px rgba(14, 91, 78,0.08), 0 22px 50px -22px rgba(14, 91, 78,0.20);
}/* Gradient text (teal -> warm shimmer) for ONE key phrase per hero/section */


.gradient-text {
  background: linear-gradient(90deg, var(--pine), var(--pine-bright), var(--honey), var(--pine));
  background-size: 250% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: text-shimmer 7s linear infinite;
  /* Without this, a background-clip:text gradient on an inline span that wraps
     is positioned against the merged width of all line fragments, so which
     words land on which color band shifts arbitrarily with the wrap point
     (e.g. reflowing at mobile widths). Cloning repaints the full gradient on
     each line so the teal->warm sweep is consistent regardless of wrap. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@keyframes text-shimmer { 0%{background-position:200% center} 100%{background-position:-200% center} }/* Pulse-glow CTA (teal halo) — add class "pulse-glow-cta" to primary hero CTA */


.pulse-glow-cta { animation: pulse-glow 3.6s ease-in-out infinite; }
@keyframes pulse-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(14, 91, 78,0.22); }
  50% { box-shadow: 0 0 36px 8px rgba(14, 91, 78,0.14); }
}/* Marquee logo wall — wrap .logo-wall track in .marquee-container > .marquee-track */


.marquee-container {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; flex-wrap: nowrap; width: max-content; animation: marquee 32s linear infinite; }
.marquee-container:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }/* ── Photo placeholder slot (marks intended real photography; ships no jpg) ── */


.photo-slot {
  position: relative; border-radius: var(--radius-xl);
  border: 1.5px dashed rgba(14, 91, 78,0.35);
  background:
    repeating-linear-gradient(135deg, rgba(14, 91, 78,0.04) 0 12px, transparent 12px 24px),
    var(--paper-2);
  aspect-ratio: 16 / 9; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 18px; color: var(--ink-subtle);
}
.photo-slot__tag {
  font-family: var(--font-body); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--pine);
  border: 1px solid rgba(14, 91, 78,0.25); border-radius: 999px; padding: 2px 9px;
  background: var(--white);
}
.photo-slot__desc { font-size: 12.5px; max-width: 34ch; line-height: 1.4; }
.photo-slot__spec { font-size: 10.5px; color: var(--ink-subtle); font-family: var(--font-body); }/* ============================================================
   AGENT COMMAND CENTER — signature hero centerpiece
   A living, light-mode mission control for the 6-agent team.
   Self-contained HTML/CSS (no SVG viewBox clipping/bleed).
   Driven by initAgentConsole() in scripts.js.
   ============================================================ */


.agent-console {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(18px, 2.6vw, 34px);
  --ac: var(--pine);
}
.agent-console::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 6% -12%, rgba(20, 119, 107,0.10), transparent 56%),
    radial-gradient(90% 70% at 100% -20%, rgba(124,58,237,0.05), transparent 52%);
}/* Header — live overview */


.ac-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ac-head__stat { font-size: clamp(14px, 1.6vw, 17px); font-weight: 800; letter-spacing: -0.025em; color: var(--ink); }
.ac-accent { color: var(--pine); }
.ac-head__status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--pine-bright); flex-shrink: 0; }/* Command bar — the goal you issue */


.ac-command {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 14px; margin-bottom: 22px;
  background: linear-gradient(180deg, var(--white), var(--white));
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(27, 30, 28,0.04), inset 0 1px 0 var(--white);
}
.ac-command__tag {
  font-family: var(--font-body); font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em;
  color: var(--white); background: var(--pine); padding: 4px 8px; border-radius: 7px; line-height: 1;
}
.ac-command__text { font-size: clamp(15px, 1.8vw, 19px); font-weight: 700; letter-spacing: -0.028em; color: var(--ink); }
.ac-command__beam { margin-left: auto; width: 32px; height: 2px; border-radius: 2px; overflow: hidden; background: var(--line); position: relative; flex-shrink: 0; }
.ac-command__beam::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--pine), transparent); animation: acBeam 1.8s linear infinite; }
@keyframes acBeam { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }/* Rail + connective thread */


.ac-rail { position: relative; margin-bottom: 18px; }
.ac-thread { position: absolute; top: 28px; left: 8%; right: 8%; height: 2px; background: var(--paper-3); border-radius: 999px; z-index: 0; }
.ac-thread__fill {
  position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--pine), var(--ac));
  box-shadow: 0 0 10px color-mix(in srgb, var(--ac) 45%, transparent);
  transition: width 0.72s var(--ease-out), background 0.4s ease;
}
.ac-thread__pulse {
  position: absolute; top: 50%; left: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--ac); opacity: 0;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ac) 16%, transparent), 0 0 16px color-mix(in srgb, var(--ac) 70%, transparent);
  transition: left 0.72s var(--ease-out), background 0.4s ease, opacity 0.3s ease;
}

.ac-pods { position: relative; z-index: 1; display: flex; gap: 10px; }
.ac-pod {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 0 4px; background: none; border: none; cursor: pointer; --ac: var(--pine);
}
.ac-pod__icon {
  position: relative; width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); border: 1.5px solid var(--line); color: var(--ink-subtle);
  box-shadow: 0 1px 2px rgba(27, 30, 28,0.05);
  transition: transform 0.5s var(--ease-out), border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}
.ac-pod__icon svg { width: 24px; height: 24px; position: relative; z-index: 1; }
.ac-pod__glow {
  position: absolute; inset: -7px; border-radius: 20px; pointer-events: none; opacity: 0; transform: scale(0.7);
  background: radial-gradient(circle, color-mix(in srgb, var(--ac) 32%, transparent), transparent 70%);
  transition: opacity 0.5s ease, transform 0.5s var(--ease-out);
}
.ac-pod__name { font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-subtle); transition: color 0.4s ease; }
.ac-pod__check {
  position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--ac); color: var(--white);
  opacity: 0; transform: scale(0.4); box-shadow: 0 2px 6px rgba(27, 30, 28,0.18);
  transition: opacity 0.35s ease, transform 0.4s var(--ease-out);
}
.ac-pod__check svg { width: 11px; height: 11px; }

.ac-pod:hover .ac-pod__icon { transform: translateY(-3px); border-color: color-mix(in srgb, var(--ac) 40%, var(--line)); color: var(--ac); }
.ac-pod:hover .ac-pod__name { color: var(--ink); }
.ac-pod:focus-visible { outline: none; }
.ac-pod:focus-visible .ac-pod__icon { outline: 2px solid var(--ac); outline-offset: 3px; }

.ac-pod.is-done .ac-pod__icon { border-color: color-mix(in srgb, var(--ac) 30%, var(--line)); color: var(--ac); background: color-mix(in srgb, var(--ac) 8%, var(--white)); }
.ac-pod.is-done .ac-pod__name { color: var(--ink-muted); }
.ac-pod.is-done .ac-pod__check { opacity: 1; transform: scale(1); }

.ac-pod.is-active .ac-pod__icon {
  transform: translateY(-5px) scale(1.08);
  background: var(--ac); color: var(--white); border-color: var(--ac);
  box-shadow: 0 16px 34px -10px color-mix(in srgb, var(--ac) 65%, transparent), 0 0 0 5px color-mix(in srgb, var(--ac) 14%, transparent);
}
.ac-pod.is-active .ac-pod__glow { opacity: 1; transform: scale(1); animation: acGlow 1.9s ease-in-out infinite; }
.ac-pod.is-active .ac-pod__name { color: var(--ink); }
.ac-pod.is-active .ac-pod__check { opacity: 0; }
@keyframes acGlow { 0%, 100% { opacity: 0.5; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.12); } }/* Readout — the active agent, at a glance */


.ac-readout {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ac) 14%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 5%, var(--white)), var(--white));
  box-shadow: inset 4px 0 0 var(--ac), 0 14px 34px -22px color-mix(in srgb, var(--ac) 40%, rgba(27, 30, 28,0.18));
  transition: box-shadow 0.45s ease, border-color 0.45s ease, background 0.45s ease;
}
.ac-readout__rail { height: 3px; background: var(--paper-3); }
.ac-readout__rail-fill {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--pine), var(--ac));
  box-shadow: 0 0 10px color-mix(in srgb, var(--ac) 40%, transparent);
  transition: width 0.72s var(--ease-out), background 0.4s ease;
}
.ac-readout__main { display: flex; align-items: center; gap: 16px; padding: 16px 20px; }
.ac-readout__icon {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--ac); color: var(--white);
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--ac) 70%, transparent);
  transition: background 0.4s ease;
}
.ac-readout__icon svg { width: 24px; height: 24px; }
.ac-readout__body { flex: 1; min-width: 0; }
.ac-readout__head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; }
.ac-readout__name { font-size: 17px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.ac-readout__tag {
  font-size: 13px; font-weight: 600; color: var(--ink-subtle);
  transition: opacity 0.26s var(--ease-out), transform 0.26s var(--ease-out);
}
.ac-readout__tag::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--ac); margin-right: 8px; vertical-align: middle; }
.ac-readout__chips { display: flex; flex-wrap: wrap; gap: 6px; transition: opacity 0.26s var(--ease-out), transform 0.26s var(--ease-out); }
.ac-chip {
  font-size: 11.5px; font-weight: 600; color: var(--ink-muted);
  background: color-mix(in srgb, var(--ac) 8%, var(--white));
  border: 1px solid color-mix(in srgb, var(--ac) 20%, var(--line));
  border-radius: 999px; padding: 3px 10px;
}
.ac-readout__deal {
  flex-shrink: 0; align-self: center; font-family: var(--font-body); font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.03em; color: var(--ac);
  text-shadow: 0 0 22px color-mix(in srgb, var(--ac) 35%, transparent);
  transition: color 0.4s ease;
}
.ac-readout.is-swap .ac-readout__tag,
.ac-readout.is-swap .ac-readout__chips { opacity: 0; transform: translateY(5px); }/* Approve beat (Deal step) */


.ac-readout__approve {
  flex-shrink: 0; align-self: center; font-size: 12.5px; font-weight: 700; color: var(--white);
  background: var(--ac); border: none; border-radius: 10px; padding: 9px 16px; cursor: pointer;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--ac) 60%, transparent);
  animation: acApprove 1.8s ease-in-out infinite; transition: transform 0.15s ease, background 0.3s ease;
}
.ac-readout__approve:hover { transform: translateY(-1px); }
.ac-readout__approve.is-approved { background: var(--pine-bright); animation: none; }
@keyframes acApprove {
  0%, 100% { box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--ac) 60%, transparent), 0 0 0 0 color-mix(in srgb, var(--ac) 38%, transparent); }
  55% { box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--ac) 60%, transparent), 0 0 0 9px transparent; }
}/* Responsive */


@media (max-width: 720px) {
  .ac-thread { display: none; }
  .ac-pods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 6px; }
}
@media (max-width: 520px) {
  .ac-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ac-readout__main { flex-wrap: wrap; }
  .ac-readout__deal { order: 3; margin-left: 64px; }
}
@media (max-width: 430px) {
  .ac-pods { grid-template-columns: repeat(2, 1fr); }
}/* Reduced motion */


@media (prefers-reduced-motion: reduce) {
  .ac-command__beam::after,
  .ac-pod.is-active .ac-pod__glow,
  .ac-readout__approve { animation: none !important; }
  .ac-pod__icon, .ac-pod__glow, .ac-pod__check,
  .ac-thread__fill, .ac-thread__pulse,
  .ac-readout__rail-fill, .ac-readout__tag, .ac-readout__chips { transition: none !important; }
}/* ============================================================
   WARM SIGNAL SKIN — approachable "back to selling" reskin.
   Appended last so it wins on source order. Retunes type,
   color utilities, literal-hex surfaces, and calms heavy effects.
   Palette: warm paper + grounded pine + one honey signal.
   Type: Bricolage Grotesque (display) + Instrument Sans (body).
   ============================================================ *//* — Base type: warm, human, less machine — */


::selection { background: var(--pine); color: var(--white); }/* — Retire monospace everywhere (tabular sans instead of Fragment Mono) — */


.mono, .ops-text, .metric, .command-text,
.stat-number, .deal .value, .signal-item,
.hf-mock .mock-value, .visual-caption,
.hero-flow__num, .ac-command__tag, .ac-readout__deal,
.pricing-features li::before, .photo-slot__tag, .photo-slot__spec,
.hf-mock .live-trace, .rating-stars, .command-bar .font-mono { font-family: var(--font-body); }/* — Color utilities remap (arbitrary-value + named) — */
.text-emerald { color: var(--pine-bright); }
.text-slate-300 { color: var(--ink-muted); }
.text-slate-400 { color: var(--ink-subtle); }
.text-slate-500 { color: var(--ink-subtle); }
.text-slate-600 { color: var(--ink-muted); }
.text-amber-600 { color: var(--honey-deep); }
.bg-white { background-color: var(--white); }
.border, .border-t, .border-y { border-color: var(--line); }/* — Promo bar — warm — */


.promo { background: var(--pine-deep); color: var(--paper); border-bottom: none; }
.promo a { color: var(--honey); }
.promo a:hover { color: var(--white); }
.promo .pill { background: rgba(255,255,255,0.14); color: var(--white); border-color: rgba(255,255,255,0.28); }/* — Nav — warm frosted — */


.nav { background: rgba(250,247,241,0.82); border-bottom-color: var(--line); }
.nav.is-scrolled { border-bottom-color: var(--line-strong); }
.nav__link:hover { background: var(--paper-2); color: var(--ink); }
.megamenu { background: var(--white); border-color: var(--line); }
.megamenu__item:hover { background: var(--paper-2); border-color: var(--line); }
.megamenu__icon { background: var(--paper-2); border-color: var(--line); color: var(--pine); }
.megamenu__title { color: var(--ink); }
.nav.is-open .nav__links { background: var(--paper); border-bottom-color: var(--line); }/* — Buttons — pine trust + honey CTA — */
.btn--secondary { border-color: var(--line-strong); color: var(--ink); background: var(--white); }
.btn--secondary:hover { border-color: var(--pine); color: var(--pine); background: var(--paper-2); }
.btn--ghost:hover { background: var(--paper-2); color: var(--ink); }/* — Cards / surfaces — */


.glass, .glass-strong, .card, .agent-card, .pricing-card, .mini-dash,
.premium-visual, .hf-mock, .command-bar, .modal-content, .legal-surface { border-color: var(--line); }
.card:hover, .ledger:hover, .agent-card:hover { border-color: var(--line-strong); }
.ledger { background-image: none; }/* drop grid-paper texture — calmer */              
.cred-bullet:before { color: var(--pine); }
.agent-card::after { background: linear-gradient(to bottom, var(--pine), transparent); }
.agent-badge { background: rgba(14,91,78,0.08); color: var(--pine); border-color: rgba(14,91,78,0.2); }
.agent-status { background: rgba(20, 119, 107,0.10); color: var(--pine-bright); }/* — Pipeline — warm — */


.pipeline { background: var(--paper-2); border-color: var(--line); }
.pipeline-col { background: var(--white); border-color: var(--line); }
.pipeline-col h2, .pipeline-col h3 { color: var(--pine); }
.deal { background: var(--paper-2); border-color: var(--line-strong); color: var(--ink); }
.deal:hover { border-color: var(--pine); background: var(--paper-3); }
.pipeline-col.drag-over { background: rgba(14,91,78,0.06); border-color: var(--pine); box-shadow: 0 0 0 1px var(--pine) inset; }
.deal .value { color: var(--pine); }
.deal.ai { border-left-color: var(--pine); }/* — Command bar — de-console — */


.command-bar { border-color: var(--line-strong); }
.command-input::placeholder { color: var(--ink-subtle); }/* — Pricing — */


.pricing-card.featured { border-color: var(--pine); box-shadow: 0 0 46px rgba(225,155,50,0.12); }
.pricing-card.featured::before { background: var(--honey); color: var(--ink); }
.pricing-name { color: var(--pine); }
.pricing-features li::before { color: var(--pine); }/* — FAQ — */


.faq-item { border-bottom-color: var(--line); }
.faq-question:hover { color: var(--pine); }/* — Footer — warm — */


.footer { background: var(--paper-2); border-top-color: var(--line); }
.footer-col a:hover { color: var(--pine); }
.footer-bottom { border-top-color: var(--line); color: var(--ink-subtle); }/* — Stats / mini-dash — */


.stat-number { text-shadow: none; color: var(--ink); }
.mini-dash { border-color: var(--line); }
.mini-dash-title { color: var(--ink-subtle); }/* — Workflow rail — */


.wf-step .node { border-color: var(--line-strong); color: var(--pine); background: var(--white); }
.wf-connector { background: linear-gradient(to right, rgba(14,91,78,0.28), rgba(20,119,107,0.2)); }
.wf-connector::after { border-left-color: rgba(14,91,78,0.38); }/* — Compare table — */


.compare-table { background: var(--white); }
.compare-table th, .compare-table td { border-bottom-color: var(--line); }
.compare-table th { background: var(--paper-2); color: var(--ink-subtle); }
.compare-table .highlight { background: rgba(14,91,78,0.06); color: var(--pine); }/* — Trust badges / rating — */


.trust-badge { background: var(--white); border-color: var(--line); color: var(--ink-muted); }
.trust-badge .icon { color: var(--pine); }
.rating-stars { color: var(--honey-deep); }/* — Sticky CTA + modal + inputs — */


.sticky-cta { background: rgba(250,247,241,0.94); border-top-color: var(--line); }
.modal { background: rgba(10,66,58,0.55); }
.modal-content { border-color: var(--line); }
.input, .select, textarea.input { background: var(--white); border-color: var(--line-strong); }
.input:focus, .select:focus, textarea.input:focus { border-color: var(--pine); }/* — Live elements — */


.live-dot, .agent-status .dot { background: var(--pine-bright); }
.signal-item { border-bottom-color: var(--line); color: var(--ink-muted); }/* — hf-mock product previews — warm, calmer — */


.hf-mock { border-color: var(--line); box-shadow: 0 10px 30px -18px rgba(27,30,28,0.10); }
.hf-mock::before { display: none; }/* drop dotted noise overlay */              
.hf-mock .mock-header { background: var(--paper-2); color: var(--ink-subtle); }
.hf-mock .mock-row { border-bottom-color: var(--paper-3); }
.hf-mock .mock-row:hover { background: var(--paper-2); }
.hf-mock .mock-pill { background: rgba(14,91,78,0.08); color: var(--pine); border-color: rgba(14,91,78,0.2); }
.hf-mock .mock-value { color: var(--pine); }
.hf-mock .mock-bar { background: linear-gradient(to top, var(--pine), var(--pine-bright)); }
.hf-mock .mock-node { border-color: var(--pine); }
.hf-mock .mock-edge { background: rgba(14,91,78,0.35); }
.hf-mock button:hover { background: var(--pine); border-color: var(--pine); }
.hf-mock .provenance { background: var(--paper-3); color: var(--ink-subtle); }
.hf-mock .agent-badge-inline { background: rgba(14,91,78,0.08); color: var(--pine); border-color: rgba(14,91,78,0.18); }
.hf-mock .live-trace { color: var(--pine-bright); }/* — premium-visual caption / sim-label — */


.visual-caption { background: var(--paper-2); border-top-color: var(--line); color: var(--ink-subtle); }/* — Section backgrounds — warm (calm the aurora) — */


.bg-aurora-teal { background: radial-gradient(60% 80% at 12% 0%, rgba(14, 91, 78, 0.10), transparent 60%), var(--paper); }
.bg-aurora-warm { background: radial-gradient(55% 75% at 90% 0%, rgba(225, 155, 50, 0.12), transparent 60%), var(--paper); }
.bg-section-tint { background: var(--paper-2); }
.bg-dots { background-image: radial-gradient(circle, rgba(14,91,78,0.05) 1px, transparent 1px); }/* — Calm the loud effects — */


.orb { display: none; }/* drifting orbs off */                          
.grain::after { display: none; }/* grain off */                 
.hero-aurora, .hero-mosaic { display: none; }/* hero mosaic/aurora off */    
.pulse-glow-cta { animation: none; }
.card-shine::before { background: linear-gradient(100deg, transparent, rgba(14,91,78,0.06), transparent); }
.card-glow:hover { border-color: rgba(14,91,78,0.22); box-shadow: 0 4px 18px rgba(14,91,78,0.07), 0 22px 50px -22px rgba(14,91,78,0.16); }/* Gradient-text → a single solid pine emphasis (no shimmer) */

.gradient-text { background: none; -webkit-text-fill-color: var(--pine); color: var(--pine); animation: none; }/* — Icon accents — */


.agent-icon, .intel-icon, .channel-icon, .megamenu__icon .icon { color: var(--pine); }
.intel-icon { background: rgba(14,91,78,0.07); border-color: rgba(14,91,78,0.16); }/* — Legacy agent-console (if any page still renders it) — */


.agent-console::before { background: radial-gradient(120% 80% at 6% -12%, rgba(14,91,78,0.08), transparent 56%); }/* — Focus states — warm pine — */


.btn:focus-visible, .nav__link:focus-visible, .hf-mock button:focus-visible,
input:focus-visible, .modal-close:focus-visible, .hf-mock .mock-row:focus-visible {
  outline: 2px solid rgba(14,91,78,0.55);
  outline-offset: 2px;
}
/* ============================================================
   BACK TO SELLING — new hero + signature components.
   Reusable across the homepage (hero-split) and every other
   page (page-hero). Uses the Warm Signal tokens above.
   ============================================================ *//* ---- Homepage split hero: warm paper + photo ---- */


.hero-split { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-split__grid { display: grid; grid-template-columns: 1.02fr 0.98fr; min-height: min(84vh, 720px); }
.hero-split__copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,5vw,4rem) clamp(2.5rem,6vw,4.5rem)
           max(1.5rem, calc((100vw - var(--container)) / 2 + 1.5rem));
  background: radial-gradient(120% 90% at 0% 0%, rgba(14,91,78,0.05), transparent 60%), var(--paper);
}
.hero-split__copy .eyebrow { margin-bottom: 1.4rem; }
.hero-split__title {
  font-family: var(--font-display);
  font-size: var(--step-hero); font-weight: 650;
  letter-spacing: var(--track-display); line-height: var(--leading-display); color: var(--ink); margin: 0;
}
.hero-split__title em { font-style: normal; color: var(--pine); }
.hero-split__lead { margin-top: 1.4rem; font-size: clamp(1.02rem,1.4vw,1.2rem); line-height: 1.55; color: var(--ink-muted); max-width: 34ch; }
.hero-split__actions { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: 0.8rem; }
.hero-split__trust { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-size: 0.9rem; color: var(--ink-subtle); font-weight: 500; }
.hero-split__trust span { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero-split__trust span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pine); opacity: 0.55; }
.hero-split__media { position: relative; }
.hero-split__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero-split__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, var(--paper) 0%, rgba(250,247,241,0) 22%); }/* Handled ledger — the signature element */


.handled {
  position: absolute; left: clamp(-2.5rem,-4vw,-3.5rem); bottom: clamp(1.5rem,5vw,3rem);
  width: min(340px, 78%); background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 1.15rem 1.25rem 1rem; z-index: 3;
}
.handled__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; }
.handled__label { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; }
.handled__badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 600; color: var(--pine); background: rgba(14,91,78,0.08); padding: 0.25rem 0.6rem; border-radius: 999px; }
.handled__badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--pine); display: inline-block; animation: pulse 2.4s var(--ease-out) infinite; }
.handled__row { display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.42rem 0; font-size: 0.9rem; color: var(--ink); border-top: 1px solid var(--paper-2); }
.handled__row:first-of-type { border-top: none; }
.handled .check { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--pine); color: var(--white); display: grid; place-items: center; margin-top: 1px; }
.handled .check svg { width: 11px; height: 11px; }
.handled__foot { margin-top: 0.75rem; padding-top: 0.7rem; border-top: 1px solid var(--paper-2); font-size: 0.82rem; color: var(--ink-muted); }
.handled__foot b { color: var(--pine); font-weight: 600; }

@media (max-width: 900px) {
  .hero-split__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-split__media { min-height: 0; order: 2; }
  .hero-split__media img { height: auto; aspect-ratio: 16 / 11; object-position: 50% 42%; }
  .hero-split__media::after { background: linear-gradient(180deg, var(--paper), rgba(250,247,241,0) 12%); }
  .handled { position: relative; z-index: 3; left: auto; bottom: auto; width: auto; margin: -2.75rem 1.25rem 0; box-shadow: var(--shadow); }
}/* ---- Proof strip ---- */


.proof-strip { background: var(--paper-2); border-block: 1px solid var(--line); }
.proof-strip__inner { max-width: var(--container); margin-inline: auto; padding: 1.5rem 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 2.2rem; justify-content: center; }
.proof-strip__lead { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 0.98rem; }
.proof-strip__stat { font-size: 0.94rem; color: var(--ink-muted); }
.proof-strip__stat b { color: var(--pine); font-family: var(--font-display); font-weight: 700; }
.proof-strip__note { color: var(--ink-subtle); font-size: 0.82rem; }/* ---- Text-led page hero (secondary pages) ---- */


.page-hero { position: relative; overflow: hidden; background: radial-gradient(70% 90% at 0% 0%, rgba(14,91,78,0.05), transparent 60%), var(--paper); border-bottom: 1px solid var(--line); }
.page-hero__inner { max-width: var(--container); margin-inline: auto; padding: clamp(3rem,7vw,5.5rem) 24px clamp(2.5rem,5vw,4rem); }
.page-hero__title { font-family: var(--font-display); font-size: var(--step-h2); font-weight: 650; letter-spacing: var(--track-display); line-height: var(--leading-display); margin: 1.1rem 0 0; max-width: 18ch; }
.page-hero__title em { font-style: normal; color: var(--pine); }
.page-hero__lead { margin-top: 1.2rem; font-size: clamp(1.02rem,1.4vw,1.2rem); line-height: 1.55; color: var(--ink-muted); max-width: 56ch; }
.page-hero__actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 0.8rem; }/* ---- Helper card (the "team behind your team") ---- */


.helper-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s; }
.helper-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.helper-card__icon { width: 42px; height: 42px; border-radius: 12px; background: rgba(14,91,78,0.08); color: var(--pine); display: grid; place-items: center; margin-bottom: 1rem; }
.helper-card__icon svg { width: 22px; height: 22px; stroke-width: 1.8; fill: none; stroke: currentColor; }
.helper-card__role { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-subtle); }
.helper-card h3 { font-size: 1.25rem; margin: 0.25rem 0 0.55rem; letter-spacing: -0.02em; }
.helper-card p { color: var(--ink-muted); font-size: 0.97rem; line-height: 1.5; margin: 0; }/* col-span-6 utility (paired half-width columns in the 12-col grid) */


@media (min-width: 1024px) {
  .lg\:col-span-6 { grid-column: span 6 / span 6; }
}/* Pipeline reflows to 2 columns on small screens (4 fixed cols overflow < 700px) */


@media (max-width: 700px) {
  .pipeline { grid-template-columns: repeat(2, 1fr); }
  .pipeline-col { min-height: 0; }
}
}

@layer utilities {
  /* Small, real utilities (Task 9 step 3). Distinct from Task 8's
     temporary shim above: these are permanent, not slated for removal. */
  .text-center { text-align: center; }
  .mx-auto { margin-inline: auto; }
  .hidden { display: none; }
  .visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}