/* ============================================================
   DESIGN TOKENS
   ------------------------------------------------------------
   ONE confident emerald brand color — the EXACT logo green
   #04AB70 — a refined cool-neutral ramp, an 8pt spacing
   scale, a modular type scale, radii and LAYERED tinted elevation.
   Every value below is a token; nothing is hardcoded downstream.
   ============================================================ */
:root {
  /* ============================================================
     BRAND GREEN — canonical #04AB70 (sampled from the real logo
     square; the PNG reads #03aa6f–#04ab6f). #04AB70 is the EXACT
     brand color: it fills the logo badge, primary buttons, the
     hero accent word, the 30-day-trial chip, key gradients & large
     display. It is 2.97:1 on white — fine for FILLS and LARGE
     display, but FAILS AA for small text — so small brand-colored
     TEXT on white uses the derived darker --brand-label / -700 /
     -800. Those two are now the MINIMUM-darkened shades that still
     clear AA (--brand-700 #047d52 = 5.2:1, --brand-800 #036e48 =
     6.3:1) AND stay in the SAME green hue family as the button —
     no more dull/teal-leaning greens. Never set small body/caption
     text to --brand-green directly. */
  --brand-green: #04AB70;  /* EXACT logo green — fills/badges/large display */
  --brand-50:  #ecfdf5;
  --brand-100: #d3f5e6;
  --brand-200: #a6ecd0;
  --brand-300: #62dca9;
  --brand-400: #1fc488;
  --brand-500: #04AB70;   /* core = exact brand green */
  --brand-600: #04AB70;   /* logo square = exact brand green */
  --brand-700: #047d52;   /* AA text shade — same hue family, ~4.6:1 on white */
  --brand-800: #036e48;   /* AA label shade — same hue family, ~5.4:1 on white */
  --brand-900: #04AB70;   /* unified: deep-green slot now resolves to brand green */
  --brand-ink: #036e48;   /* on-tint text — same green family, AA on brand-50 */

  /* ============================================================
     ONE GREEN — the canonical hero CTA gradient. EVERY solid-green
     fill / button / chip / badge / active state on the page uses this
     SAME gradient (#1FC488 → #04AB70) so the whole page reads as a
     single green that matches the hero "Start free trial" button.
     Dark CTA bands use --brand-grad-deep, a slightly deeper version of
     the SAME hue (still #04AB70 family) for white text contrast. */
  --brand-grad:      linear-gradient(180deg, #1FC488, #04AB70);
  --brand-grad-135:  linear-gradient(135deg, #1FC488, #04AB70);
  --brand-grad-deep: linear-gradient(155deg, #04AB70, #037a50 88%);

  /* Cool neutral ramp — slightly green-tinted greys, never pure */
  --n-0:   #ffffff;
  --n-25:  #fbfcfc;       /* alternating section wash */
  --n-50:  #f6f8f8;
  --n-100: #eef2f1;
  --n-150: #e6ebea;
  --n-200: #dde4e2;
  --n-300: #c4cecb;
  --n-400: #8a9692;   /* decorative hairlines / placeholder glyphs */
  --n-500: #586763;   /* AA caption/meta on white AND on --bg-wash (≈5.2:1) */
  --n-600: #4e5a56;
  --n-700: #38423f;
  --n-800: #232b29;
  --n-900: #131817;       /* near-black ink */
  --ink:   #101513;

  /* Semantic surfaces */
  --bg:            var(--n-0);
  --bg-wash:       var(--n-25);
  --surface:       var(--n-0);
  --surface-2:     var(--n-50);
  --border:        var(--n-200);
  --border-soft:   var(--n-100);
  --text:          var(--ink);
  --text-soft:     var(--n-600);
  --text-mute:     var(--n-500);
  --brand-label:   var(--brand-800);   /* AA-safe brand text on white & brand-50 (eyebrows, pills) */
  --wordmark:      var(--n-500);        /* AA-safe trade wordmarks (was decorative n-400) */

  /* Type */
  --font-display: "Space Grotesk", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "Space Grotesk", ui-monospace, "SF Mono", Menlo, monospace;

  /* Modular type scale (1.0 = 16px base) */
  --t-xs:   0.75rem;    /* 12 */
  --t-sm:   0.8125rem;  /* 13 */
  --t-base: 0.9375rem;  /* 15 */
  --t-md:   1.0625rem;  /* 17 */
  --t-lg:   1.25rem;    /* 20 */
  --t-xl:   1.5rem;     /* 24 */
  --t-2xl:  2rem;       /* 32 */
  --t-3xl:  2.75rem;    /* 44 */
  --t-4xl:  3.75rem;    /* 60 */
  --t-5xl:  4.75rem;    /* 76 */

  /* 8pt spacing scale */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 2.5rem;    --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5rem;   --s-12: 7rem;     --s-14: 9rem;

  /* Radii */
  --r-xs: 6px;  --r-sm: 10px;  --r-md: 14px;  --r-lg: 20px;
  --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px;

  /* LAYERED, surface-tinted elevation (never flat black) */
  --e-1: 0 1px 2px rgba(16,40,33,0.04),
         0 1px 1px rgba(16,40,33,0.05);
  --e-2: 0 2px 4px rgba(16,40,33,0.04),
         0 4px 10px rgba(16,40,33,0.05),
         0 1px 0 rgba(255,255,255,0.6) inset;
  --e-3: 0 1px 3px rgba(16,40,33,0.05),
         0 8px 18px rgba(16,40,33,0.06),
         0 24px 48px -16px rgba(11,87,56,0.14);
  --e-4: 0 1px 3px rgba(16,40,33,0.05),
         0 14px 30px -8px rgba(16,40,33,0.10),
         0 40px 80px -28px rgba(11,87,56,0.22);
  --e-brand: 0 1px 2px rgba(4,120,74,0.30),
             0 8px 20px -6px rgba(4,171,112,0.42),
             0 2px 0 rgba(255,255,255,0.18) inset;

  --ring: 0 0 0 3px var(--n-0), 0 0 0 5.5px var(--brand-400);

  /* ============================================================
     CREWTRON LOGO WATERMARK
     A large, very-faint logo motif in ONE premium spot, plus a small
     corner badge on the big "day in the life" photos. Subtle, on-brand,
     never hurts contrast. */
  --wm-url: url("/assets/crewtron-logo.png");

  /* ============================================================
     LAYOUT WIDTH SYSTEM — "modern-wide" (Linear/Vercel feel)
     --maxw       : default content container (sections, footer, grids)
     --maxw-wide  : key bands (hero, day carousel, feature rows) run a
                    touch wider on big screens — fills wide monitors
                    without going edge-to-edge or hurting readability.
     --maxw-nav   : the sticky nav inner — full-width through 1920 so the
                    logo hugs the LEFT and the CTAs hug the RIGHT at BOTH
                    1440 and 1920 (brand-left / CTA-right sit at the
                    --gutter, ~56px there). The 1920 cap keeps it from
                    sprawling on ultra-wide (2560), where it centers.
     --gutter     : symmetric responsive side padding for the nav (and
                    a responsive floor for .wrap), replacing fixed 32px
                    boxed-in gutters. */
  --maxw:      1320px;
  --maxw-wide: 1400px;
  --maxw-nav:  1920px;
  --gutter:    clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Inline check glyph (used as a mask so it inherits brand color) */
  --check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* ============================================================ RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }

:focus-visible {
  /* A real, always-visible outline (box-shadow alone gets clipped by
     overflow:hidden cards and is invisible in forced-colors mode). */
  outline: 2px solid var(--brand-700);
  outline-offset: 2px;
  border-radius: var(--r-xs);
  box-shadow: var(--ring);
}

/* Skip to content — first focusable element; off-screen until focused. */
.skip-link {
  position: absolute; left: var(--s-4); top: -60px; z-index: 200;
  padding: 0.6rem 1rem; border-radius: var(--r-sm);
  background: var(--surface); color: var(--brand-800);
  font-weight: 700; box-shadow: var(--e-3);
  transition: top .2s var(--ease);
}
.skip-link:focus-visible { top: var(--s-4); }

/* ============================================================ LAYOUT */
/* Content container: widened 1200 → 1320. Side padding stays at the
   32px (--s-6) baseline on roomy viewports but clamps down gracefully
   on narrow ones so nothing ever overflows. */
.wrap {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: clamp(var(--s-5), 4vw, var(--s-6));
}
/* Key bands run a touch wider on big screens (hero, day carousel,
   product showcase / feature rows). Body-copy measure is still capped
   per-element (~44–70ch), so widening the band fills wide monitors
   without stretching prose. */
.wrap--wide { max-width: var(--maxw-wide); }
.section { padding-block: var(--s-12); position: relative; }
.section--wash { background: var(--bg-wash); }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-body);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-label);
}
.eyebrow::before {
  content: ""; width: 18px; height: 1.5px; background: var(--brand-500);
  display: inline-block; border-radius: 2px;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.lede { color: var(--text-soft); font-size: var(--t-md); line-height: 1.62; max-width: 46ch; }
.lede em { font-style: normal; font-weight: 700; color: var(--brand-800); }

/* ============================================================ BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-weight: 600; font-size: var(--t-base);
  padding: 0.72rem 1.25rem; border-radius: var(--r-pill);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn--primary {
  /* THE canonical green: #1FC488 → #04AB70 — the exact hero CTA gradient
     that every other green on the page now matches. */
  background: var(--brand-grad);
  color: #fff; box-shadow: var(--e-brand);
}
.btn--primary:hover { transform: translateY(-1.5px); box-shadow: 0 4px 8px rgba(4,120,74,.30), 0 14px 28px -8px rgba(4,171,112,.5); }
.btn--primary:active { transform: translateY(0); }
.btn--ghost {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); box-shadow: var(--e-1);
}
.btn--ghost:hover { border-color: var(--n-300); background: var(--n-25); transform: translateY(-1.5px); box-shadow: var(--e-2); }
.btn--lg { padding: 0.92rem 1.6rem; font-size: var(--t-md); }
.btn--block { width: 100%; }

/* ============================================================ NAV */
.nav {
  position: sticky; top: 0; z-index: 100;
  transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom-color: var(--border-soft);
}
/* Full-width sticky nav: the inner content spans the full viewport through
   1920 (capped at --maxw-nav so it doesn't sprawl on ultra-wide 2560+) with
   symmetric --gutter padding instead of the 1320 content cap — so the logo
   hugs the LEFT edge and "Sign in" + "Start free trial" hug the RIGHT at
   BOTH 1440 and 1920 (brand-left / CTA-right ≈ the --gutter, ~56px).
   These override the .wrap defaults the same element also carries. */
.nav__inner {
  display: flex; align-items: center; gap: var(--s-6); height: 72px;
  max-width: var(--maxw-nav);
  padding-inline: var(--gutter);
}
.brand { display: inline-flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }
.brand__badge {
  width: 34px; height: 34px; border-radius: 9px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(10,110,70,.25), 0 4px 12px -3px rgba(15,169,104,.4);
}
.brand__badge img { width: 100%; height: 100%; object-fit: cover; }
.brand__name { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; letter-spacing: -0.02em; }
.nav__links { display: flex; align-items: center; gap: var(--s-1); margin-left: var(--s-4); }
.nav__link {
  padding: 0.45rem 0.8rem; border-radius: var(--r-sm);
  color: var(--text-soft); font-weight: 500; font-size: var(--t-base);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav__link:hover { color: var(--text); background: var(--n-50); }
.nav__cta { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }
.nav__cta > * { flex-shrink: 0; white-space: nowrap; }
.nav__signin { color: var(--text-soft); font-weight: 600; padding: 0.5rem 0.6rem; border-radius: var(--r-sm); transition: color .2s; white-space: nowrap; }
.nav__signin:hover { color: var(--text); }
.nav__demo { display: inline-flex; align-items: center; gap: 6px; color: var(--text-soft); font-weight: 600; font-size: var(--t-base); padding: 0.5rem 0.7rem; border-radius: var(--r-sm); transition: color .2s var(--ease), background .2s var(--ease); white-space: nowrap; }
.nav__demo svg { width: 15px; height: 15px; }
.nav__demo:hover { color: var(--brand-700); background: var(--brand-50); }
.nav__burger { display: none; width: 42px; height: 42px; border-radius: var(--r-sm); border: 1px solid var(--border); align-items: center; justify-content: center; }
.nav__burger svg { width: 20px; height: 20px; }

/* ---- Nav dropdowns / mega-menus (Jobber-style, hover desktop / focus a11y) ---- */
.nav__item { position: relative; }
.nav__btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0.45rem 0.8rem; border-radius: var(--r-sm);
  color: var(--text-soft); font-weight: 500; font-size: var(--t-base);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav__btn:hover,
.nav__item.is-open .nav__btn { color: var(--text); background: var(--n-50); }
.nav__btn svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
/* caret rotates only when the menu is actually open (JS-driven) */
.nav__item.is-open .nav__btn svg { transform: rotate(180deg); }
/* ---- MEGA-MENU: large, polished, multi-column panel with a featured/promo
   side. Full-white, generous padding, layered tinted shadow.
   Interaction is fully JS-driven via the `.is-open` class on .nav__item
   (pointerenter, click, Enter/Space, focus open it; pointerleave-with-grace,
   outside-pointerdown, Escape, scroll, and any panel-link click close it).
   Hidden by DEFAULT — never stuck visible. ---- */
.nav__panel {
  position: absolute; top: 100%; left: 0; z-index: 120;
  margin-top: 10px;                 /* visual gap, but NOT a dead hover zone */
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  box-shadow:
    0 1px 3px rgba(16,40,33,0.06),
    0 16px 34px -10px rgba(16,40,33,0.16),
    0 40px 80px -32px rgba(4,120,74,0.26);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s var(--ease);
  padding: var(--s-4);
}
/* Transparent bridge fills the 10px gap so the cursor can travel from the
   trigger into the panel without crossing dead space (which would fire
   pointerleave and close the menu). */
.nav__panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.nav__item.is-open .nav__panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}

/* Simple single-column panel (Pricing / Resources) */
.nav__panel--simple { min-width: 230px; padding: var(--s-3); }

/* right-anchor panels that belong to right-side nav items (avoid overflow) */
.nav__panel--end { left: auto; right: 0; }

/* Mega panel: a content column (one or two item columns) + a featured promo */
.nav__panel--mega { display: grid; grid-template-columns: minmax(420px, 540px) 230px; gap: var(--s-4); }
.nav__panel--mega.nav__panel--mega-1 { grid-template-columns: 300px 220px; }
/* The right-anchored single-column mega (Pricing / Resources) sits left of
   the right-side nav cluster; trim its columns a touch so its LEFT edge stays
   inside the viewport at 1440 (right edge still aligns to its trigger). */
.nav__panel--mega-1.nav__panel--end { grid-template-columns: 282px 210px; }
.megacol { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; align-content: start; }
.nav__panel--mega-1 .megacol { grid-template-columns: 1fr; }

/* Mega item: icon badge + title + one-line description */
.megaitem {
  display: grid; grid-template-columns: 38px 1fr; gap: var(--s-3); align-items: start;
  padding: var(--s-3); border-radius: var(--r-md);
  transition: background .18s var(--ease);
}
.megaitem:hover { background: var(--brand-50); }
.megaitem__ico {
  width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--brand-50);
  display: grid; place-items: center; color: var(--brand-600); flex-shrink: 0;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.megaitem:hover .megaitem__ico { background: var(--brand-green); color: #fff; }
.megaitem__ico svg { width: 19px; height: 19px; }
.megaitem__t b { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); color: var(--text); letter-spacing: -0.01em; }
.megaitem__t span { display: block; font-size: var(--t-xs); color: var(--text-mute); line-height: 1.4; margin-top: 2px; }

/* Featured / promo side panel */
.megapromo {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  padding: var(--s-5); display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--brand-grad-deep);
  min-height: 188px; color: #fff;
}
.megapromo::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 80% at 80% 0%, rgba(255,255,255,0.16), transparent 60%); }
.megapromo > * { position: relative; }
.megapromo__ey { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.8); }
.megapromo__h { font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); letter-spacing: -0.02em; margin-top: var(--s-2); line-height: 1.2; }
.megapromo__p { font-size: var(--t-xs); color: rgba(255,255,255,0.82); margin-top: var(--s-2); line-height: 1.45; }
.megapromo__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-4); font-weight: 700; font-size: var(--t-sm); color: #fff; }
.megapromo__cta svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.megapromo:hover .megapromo__cta svg { transform: translateX(3px); }
/* a real photo promo variant */
.megapromo--photo { padding: 0; min-height: 200px; }
.megapromo--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.megapromo--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,66,51,0.10) 30%, rgba(4,40,24,0.82) 100%); }
.megapromo--photo .megapromo__body { position: relative; z-index: 2; margin-top: auto; padding: var(--s-5); }

/* Simple panel list links */
.nav__panel--simple a {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0.55rem 0.7rem; border-radius: var(--r-sm);
  color: var(--text-soft); font-size: var(--t-sm); font-weight: 500;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav__panel--simple a:hover { color: var(--brand-800); background: var(--brand-50); }
.nav__panel--simple a svg { width: 16px; height: 16px; color: var(--brand-600); flex-shrink: 0; }

/* Mobile-sheet disclosure groups reuse the panel links inline */
.msheet__group { border-bottom: 1px solid var(--border-soft); }
.msheet__group > .nav__btn { width: 100%; justify-content: space-between; font-size: var(--t-lg); color: var(--text); padding: var(--s-3) 0; }
.msheet__sub { display: none; padding: 0 0 var(--s-3) var(--s-3); }
.msheet__group.is-open .msheet__sub { display: block; }
.msheet__group.is-open > .nav__btn svg { transform: rotate(180deg); }
.msheet__sub a { display: block; color: var(--text-soft); font-size: var(--t-base); padding: 6px 0; }

/* ============================================================ HERO */
.hero { position: relative; padding-top: var(--s-10); padding-bottom: var(--s-12); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* whisper-soft tonal emerald wash only — NO grid lines (clean white) */
.hero__bg::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 78% 8%, rgba(15,169,104,0.10), transparent 70%),
    radial-gradient(40% 40% at 12% 0%, rgba(15,169,104,0.05), transparent 70%);
}
.hero__grid { display: grid; grid-template-columns: 1.02fr 1.18fr; gap: var(--s-8); align-items: center; }
.hero__copy { max-width: 560px; }
.hero h1 {
  font-size: var(--t-4xl); line-height: 1.04; letter-spacing: -0.035em;
  margin-top: var(--s-5); margin-bottom: var(--s-5); font-weight: 600;
}
/* Hero accent word: EXACT brand green (#04AB70). Large display type
   (≥60px) clears the 3:1 large-text threshold, so the exact fill is used
   here for maximum brand presence. */
.hero h1 em { font-style: normal; color: var(--brand-green); }
.hero__sub { font-size: var(--t-md); color: var(--text-soft); max-width: 46ch; line-height: 1.6; }
.hero__sub strong { color: var(--brand-800); font-weight: 800; }

/* ============================================================ 30-DAY FREE TRIAL MOTIF
   A recurring, emphasized promise. The solid variant uses EXACT #04AB70 with
   white text (large/bold → clears 3:1); the tint variant uses brand-50 with
   AA-safe --brand-800 ink for small text. */
.trial-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 700; font-size: var(--t-sm); letter-spacing: -0.01em;
  padding: 0.42rem 0.85rem 0.42rem 0.55rem; border-radius: var(--r-pill);
}
.trial-chip svg { width: 16px; height: 16px; flex-shrink: 0; }
.trial-chip--solid { background: var(--brand-green); color: #fff; box-shadow: var(--e-brand); }
.trial-chip--solid svg { color: #fff; }
.trial-chip--tint {
  background: var(--brand-50); color: var(--brand-800);
  border: 1px solid var(--brand-200);
}
.trial-chip--tint svg { color: var(--brand-700); }
.trial-chip b { font-weight: 800; }
.trial-chip .sep { opacity: 0.7; font-weight: 600; }
.hero__copy .trial-chip { margin-bottom: var(--s-4); }

/* ---- Hero "every feature, one price" callout — prominent, above the fold.
   A highlighted brand-tinted bar: every feature is included starting at
   $29.99/mo. Large/bold brand text uses the AA-safe darker shades. ---- */
.hero__pricecue {
  display: inline-flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-5); padding: 0.6rem 1rem 0.6rem 0.7rem;
  border-radius: var(--r-pill); border: 1px solid var(--brand-200);
  background: linear-gradient(180deg, var(--brand-50), #fff);
  box-shadow: var(--e-1); max-width: 100%;
}
.hero__pricecue-ico {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-grad); display: grid; place-items: center; color: #fff;
  box-shadow: var(--e-brand);
}
.hero__pricecue-ico svg { width: 16px; height: 16px; }
.hero__pricecue-txt { font-size: var(--t-sm); color: var(--brand-ink); line-height: 1.3; }
.hero__pricecue-txt b { color: var(--brand-800); font-weight: 800; }
.hero__pricecue-txt .price { font-family: var(--font-display); font-weight: 700; color: var(--brand-800); white-space: nowrap; }
@media (max-width: 520px) {
  .hero__pricecue { width: 100%; }
  .hero__pricecue-txt { font-size: var(--t-xs); }
}

.hero__actions { display: flex; gap: var(--s-3); margin-top: var(--s-7); flex-wrap: wrap; }

/* ---- Hero product visual (layered, depth, parallax) ---- */
.hero__art { position: relative; perspective: 1600px; }
.stage { position: relative; transform-style: preserve-3d; }
.float { will-change: transform; }

/* ============================================================ PHOTO-LED HERO
   A premium editorial photo collage of real service pros, layered with a
   real app screenshot inset + small floating proof chips. Replaces the
   crafted calendar/schedule mock entirely. */
.hero__collage { position: relative; }
.hero__collage-grid {
  display: grid;
  grid-template-columns: 1.32fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--s-3);
}
.hero__pic {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border); background: var(--n-50);
  box-shadow:
    0 1px 3px rgba(16,40,33,0.06),
    0 16px 34px -14px rgba(16,40,33,0.16),
    0 40px 84px -30px rgba(4,120,74,0.28);
}
.hero__pic img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.02); display: block; }
/* big hero portrait — spans both rows on the left */
.hero__pic--lead { grid-row: 1 / span 2; aspect-ratio: 3 / 4.05; }
.hero__pic--a { aspect-ratio: 4 / 3.1; }
.hero__pic--b { aspect-ratio: 4 / 3.1; }
/* warm tonal kiss in the brand color across each photo's lower edge */
.hero__pic::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(6,66,51,0.06) 72%, rgba(6,66,51,0.34) 100%);
}
.hero__pic--lead::after { background: linear-gradient(180deg, transparent 48%, rgba(6,66,51,0.05) 66%, rgba(6,66,51,0.42) 100%); }
.hero__pic-cap {
  position: absolute; left: var(--s-4); bottom: var(--s-3); z-index: 2; color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm);
  letter-spacing: -0.01em; text-shadow: 0 1px 6px rgba(4,40,24,0.55);
}

/* Real app screenshot inset, floated over the collage corner */
.hero__inset {
  position: absolute; z-index: 4; right: -22px; bottom: -26px; width: 156px;
  border-radius: 26px; padding: 6px; background: var(--surface);
  border: 1px solid var(--border);
  box-shadow:
    0 2px 6px rgba(16,40,33,0.12),
    0 18px 40px -14px rgba(4,120,74,0.34);
}
.hero__inset-screen { border-radius: 20px; overflow: hidden; background: var(--n-50); aspect-ratio: 390 / 720; border: 1px solid var(--border-soft); }
.hero__inset-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Floating proof chips on the collage */
.hero__chip {
  position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 0.42rem 0.8rem 0.42rem 0.5rem;
  box-shadow: 0 2px 6px rgba(16,40,33,0.10), 0 14px 30px -12px rgba(4,120,74,0.30);
  font-size: var(--t-xs); font-weight: 700; color: var(--text); letter-spacing: -0.01em;
}
.hero__chip-ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; color: #fff; }
.hero__chip-ico svg { width: 14px; height: 14px; }
.hero__chip--paid { left: -26px; top: 14%; }
.hero__chip--paid .hero__chip-ico { background: linear-gradient(180deg, var(--brand-400), var(--brand-green)); }
.hero__chip--paid b { color: var(--brand-700); }
.hero__chip--live { right: 6%; top: -18px; }
.hero__chip--live .hero__chip-ico { background: linear-gradient(135deg, #4f86f0, #2c54a8); }
.hero__chip--live .dotlive { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-green); box-shadow: 0 0 0 3px rgba(4,171,112,0.22); margin-right: 2px; }

/* ============================================================ REAL SCREENSHOT FRAMES
   Subtle device mockup for the real 390x840 iOS captures. The status bar
   (9:41) stays — it reads authentic. Clean white bezel + layered tinted
   shadow so the real shot sits on white without a heavy black phone shell. */
.shot {
  position: relative; width: 100%; max-width: 280px; margin-inline: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 38px; padding: 8px;
  box-shadow:
    0 1px 3px rgba(16,40,33,0.06),
    0 18px 38px -12px rgba(16,40,33,0.14),
    0 44px 88px -30px rgba(11,87,56,0.26);
}
.shot__screen {
  position: relative; border-radius: 30px; overflow: hidden;
  background: var(--n-50); border: 1px solid var(--border-soft);
}
.shot__screen img { width: 100%; height: auto; display: block; }
/* Real crew-map phone already ships its own white frame — place it directly,
   never double-frame; just give it the same layered lift. */
.shot--bare {
  background: none; border: none; padding: 0; max-width: 360px;
  border-radius: 30px;
  box-shadow:
    0 1px 3px rgba(16,40,33,0.06),
    0 18px 40px -12px rgba(16,40,33,0.16),
    0 48px 96px -32px rgba(11,87,56,0.28);
  overflow: hidden;
}
.shot--bare img { width: 100%; height: auto; display: block; }

/* Tall real captures: fixed-aspect window that clips overflow. object-fit
   cover crops the lower overflow; object-position top keeps the product UI. */
.shot__screen--clip { aspect-ratio: 390 / 720; }
.shot__screen--clip img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* clip-top: for captures whose top edge carries an iOS status bar. Render the
   image at full width in natural flow, then shift it UP inside this
   overflow:hidden window so the top ~9% is cropped behind the bezel. */
.shot__screen--clip-top { aspect-ratio: 390 / 690; }
.shot__screen--clip-top img {
  width: 100%; height: auto; object-fit: unset;
  margin-top: -12%;
}

/* Crew-map: tall real shot, top-aligned, lower overflow cropped */
.shot--map .shot__screen { aspect-ratio: 390 / 720; }
.shot--map .shot__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ============================================================ HERO "DAY IN THE LIFE" CAROUSEL */
.dayband { padding-block: var(--s-9) var(--s-12); }
.dayband__head { text-align: center; max-width: 50ch; margin: 0 auto var(--s-7); display: flex; flex-direction: column; align-items: center; }
.dayband__head h2 { font-size: var(--t-2xl); line-height: 1.12; letter-spacing: -0.03em; margin-top: var(--s-3); }
.carousel { position: relative; max-width: 940px; margin-inline: auto; }
.carousel__viewport { overflow: hidden; }

/* ---- CINEMATIC CROSS-FADE CAROUSEL ----
   Slides are stacked and cross-fade (not a hard cut). The active slide also
   drives: a slow Ken-Burns zoom/pan on the photo, a parallax lift on the app
   inset, and a staggered slide-up + fade on the caption/step number.
   GPU-friendly (opacity + transform only), 60fps, pause-on-hover.
   Under prefers-reduced-motion everything is instant/disabled. */
.carousel__stack {
  position: relative;
  /* Reserve the height of a slide so the absolutely-positioned slides have a
     box to fill; the day-slide's own aspect ratios drive the real height. */
}
.carousel__slide {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; gap: var(--s-5); padding-inline: var(--s-4);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .8s var(--ease), visibility .8s var(--ease);
  will-change: opacity;
}
/* The first slide stays in normal flow to define the stack's height; the rest
   overlay it. JS keeps this in sync as slides change height across breakpoints
   by measuring the active slide. */
.carousel__slide--measure { position: relative; }
.carousel__slide.is-active {
  position: relative; opacity: 1; visibility: visible; pointer-events: auto;
  z-index: 2;
}
/* Ken-Burns: the active slide's photo slowly zooms/pans while it's shown. */
.carousel__slide .day-stage > img {
  transform: scale(1.06);
  transition: transform .8s var(--ease);
}
.carousel__slide.is-active .day-stage > img {
  animation: kenburns 7s var(--ease) forwards;
}
@keyframes kenburns {
  0%   { transform: scale(1.04) translate3d(0,0,0); }
  100% { transform: scale(1.12) translate3d(-1.6%, -1.4%, 0); }
}
/* App inset parallax lift: rises + settles as the slide becomes active. */
.carousel__slide .day-stage__inset {
  transform: translate3d(0, 16px, 0) scale(.96); opacity: 0;
  transition: transform .7s var(--ease) .12s, opacity .7s var(--ease) .12s;
}
.carousel__slide.is-active .day-stage__inset {
  transform: translate3d(0, 0, 0) scale(1); opacity: 1;
}
/* Step number + caption animate in (staggered slide-up + fade). */
.carousel__slide .day-stage__num {
  transform: translate3d(0, 10px, 0); opacity: 0;
  transition: transform .55s var(--ease) .14s, opacity .55s var(--ease) .14s;
}
.carousel__slide.is-active .day-stage__num { transform: none; opacity: 1; }
.carousel__slide .day-cap b,
.carousel__slide .day-cap span {
  transform: translate3d(0, 14px, 0); opacity: 0;
  transition: transform .6s var(--ease), opacity .6s var(--ease);
}
.carousel__slide.is-active .day-cap b { transform: none; opacity: 1; transition-delay: .18s; }
.carousel__slide.is-active .day-cap span { transform: none; opacity: 1; transition-delay: .28s; }
/* The logo watermark badge eases in last. */
.carousel__slide .day-stage__wm {
  opacity: 0; transition: opacity .6s var(--ease) .3s;
}
.carousel__slide.is-active .day-stage__wm { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .carousel__slide,
  .carousel__slide .day-stage > img,
  .carousel__slide .day-stage__inset,
  .carousel__slide .day-stage__num,
  .carousel__slide .day-cap b,
  .carousel__slide .day-cap span,
  .carousel__slide .day-stage__wm { transition: none !important; animation: none !important; }
  .carousel__slide.is-active .day-stage > img { transform: scale(1); }
  .carousel__slide .day-stage__inset,
  .carousel__slide .day-stage__num,
  .carousel__slide .day-cap b,
  .carousel__slide .day-cap span { transform: none; opacity: 1; }
}
.carousel__step {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-sm); color: var(--text-soft); font-weight: 500;
}
.carousel__step b { font-family: var(--font-display); font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.carousel__num { width: 26px; height: 26px; border-radius: 8px; background: var(--brand-50); color: var(--brand-800); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: var(--t-xs); flex-shrink: 0; }
.carousel__phone { width: 100%; max-width: 248px; }

/* ---- Photo-led day-in-the-life slide: a real photo stage with an optional
   small real app-screenshot inset, then a step label + one-line caption. ---- */
.day-slide { width: 100%; max-width: 1040px; display: flex; flex-direction: column; align-items: center; gap: var(--s-5); }
.day-stage {
  position: relative; width: 100%; border-radius: var(--r-xl); overflow: hidden;
  aspect-ratio: 16 / 9; border: 1px solid var(--border); background: var(--n-50);
  box-shadow:
    0 1px 3px rgba(16,40,33,0.06),
    0 18px 40px -16px rgba(16,40,33,0.16),
    0 44px 90px -34px rgba(4,120,74,0.26);
}
.day-stage > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.02); }
.day-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(6,66,51,0.30), transparent 46%);
}
.day-stage__num {
  position: absolute; left: var(--s-5); top: var(--s-4); z-index: 3;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--brand-grad); color: #fff; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-base);
  box-shadow: var(--e-brand);
}
/* small real app screenshot inset, floated over the photo */
.day-stage__inset {
  position: absolute; right: var(--s-5); bottom: var(--s-5); z-index: 3; width: 270px;
  border-radius: 20px; padding: 5px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(16,40,33,0.16), 0 16px 34px -12px rgba(4,40,24,0.4);
}
.day-stage__inset-screen { border-radius: 15px; overflow: hidden; background: var(--n-50); aspect-ratio: 390 / 720; border: 1px solid var(--border-soft); }
.day-stage__inset-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* taller inset variant that shows the document (invoice) without cropping the top */
.day-stage__inset--doc .day-stage__inset-screen { aspect-ratio: 390 / 560; }
.day-stage__inset--doc .day-stage__inset-screen img { object-position: top; }
.day-cap { text-align: center; max-width: 52ch; }
.day-cap b { font-family: var(--font-display); font-weight: 600; font-size: var(--t-lg); letter-spacing: -0.02em; color: var(--text); display: block; }
.day-cap span { color: var(--text-soft); font-size: var(--t-sm); margin-top: 4px; display: block; }
@media (max-width: 520px) {
  .day-stage { aspect-ratio: 4 / 3; }
  .day-stage__inset { width: 116px; right: var(--s-3); bottom: var(--s-3); }
  .day-stage__num { left: var(--s-3); top: var(--s-3); width: 28px; height: 28px; font-size: var(--t-sm); }
}
.carousel__arrow {
  position: absolute; top: 42%; transform: translateY(-50%); z-index: 4;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--e-2);
  display: grid; place-items: center; color: var(--text-soft);
  transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.carousel__arrow:hover { color: var(--brand-700); border-color: var(--brand-300); transform: translateY(-50%) scale(1.05); }
.carousel__arrow svg { width: 20px; height: 20px; }
.carousel__arrow--prev { left: -8px; }
.carousel__arrow--next { right: -8px; }
.carousel__controls { display: flex; justify-content: center; align-items: center; gap: var(--s-4); margin-top: var(--s-6); }
.carousel__dots { display: flex; justify-content: center; align-items: center; gap: var(--s-2); }
/* Pause/Play toggle for the auto-advancing carousel (WCAG 2.2.2). */
.carousel__playpause {
  width: 34px; height: 34px; flex-shrink: 0;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  color: var(--text-soft); background: var(--surface);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.carousel__playpause:hover { color: var(--brand-700); border-color: var(--brand-300); }
.carousel__playpause svg { width: 15px; height: 15px; }
.carousel__playpause .ico-play { display: none; }
.carousel__playpause[aria-pressed="true"] .ico-pause { display: none; }
.carousel__playpause[aria-pressed="true"] .ico-play { display: block; }
/* Dots: inactive = small pill track; active = a wide pill with an auto-advancing
   progress fill that sweeps left→right over the slide's dwell time. */
.carousel__dot {
  position: relative; width: 9px; height: 9px; border-radius: var(--r-pill);
  background: var(--n-200); overflow: hidden;
  transition: width .35s var(--ease), background .25s var(--ease);
}
.carousel__dot.is-active { width: 34px; background: var(--n-150); }
.carousel__dot__fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  border-radius: var(--r-pill); background: var(--brand-grad);
  transform: scaleX(0); transform-origin: left center;
}
.carousel__dot.is-active .carousel__dot__fill { transform: scaleX(1); }
/* While the slide auto-advances, the fill sweeps; JS sets --dwell. The
   .is-running class (added on activate) plays it; removed on pause. */
.carousel__dot.is-active.is-running .carousel__dot__fill {
  animation: dotsweep var(--dwell, 5200ms) linear forwards;
}
@keyframes dotsweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Reduced motion / non-active dots: the active dot just shows a full fill. */
@media (prefers-reduced-motion: reduce) {
  .carousel__dot.is-active .carousel__dot__fill { transform: scaleX(1); animation: none !important; }
}
@media (max-width: 520px) {
  .carousel__arrow--prev { left: -4px; }
  .carousel__arrow--next { right: -4px; }
}

/* AI section: a real screenshot framed beside the three AI cards */
.ai-shotwrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s-9); align-items: center; margin-bottom: var(--s-9); }
.ai-shotwrap .ai-shot { max-width: 270px; }
/* The AI insets are clean 921x2000 iOS captures (no phone frame baked in).
   Render them in a fixed-aspect window and object-fit:cover from the top so
   both phones read the same height beside the copy, matching the other shots. */
.shot__screen--ai { aspect-ratio: 921 / 2000; }
.shot__screen--ai img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ai-shotwrap__copy h3 { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; margin-bottom: var(--s-3); }
.ai-shotwrap__copy p { color: var(--text-soft); font-size: var(--t-base); line-height: 1.6; max-width: 46ch; }
.ai-shotwrap__copy .flist { margin-top: var(--s-5); }

/* ============================================================ "BUILT FOR THE FIELD" PHOTO BAND */
.fieldband { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-top: var(--s-8); }
.fieldband figure {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 3 / 4; border: 1px solid var(--border);
  box-shadow: var(--e-2); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.fieldband figure:hover { transform: translateY(-3px); box-shadow: var(--e-3); }
.fieldband img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.04) contrast(1.02); }
.fieldband figure::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 42%, rgba(6,66,51,0.04) 60%, rgba(6,66,51,0.60) 100%);
}
.fieldband figcaption {
  position: absolute; left: var(--s-4); bottom: var(--s-3); z-index: 2; color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-base);
  letter-spacing: -0.01em; text-shadow: 0 1px 6px rgba(4,40,24,0.5);
}
.fieldband figcaption span { display: block; font-family: var(--font-body); font-weight: 500; font-size: var(--t-xs); opacity: 0.92; }

/* ============================================================ DEVICE / BROWSER FRAMES */
.browser {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--e-4); overflow: hidden;
}
.browser__bar {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0.7rem var(--s-4); border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, var(--n-25), var(--n-0));
}
.browser__dots { display: flex; gap: 7px; }
.browser__dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--n-200); display: block; }
.browser__url {
  flex: 1; height: 28px; border-radius: var(--r-pill); background: var(--n-50);
  border: 1px solid var(--border-soft); display: flex; align-items: center; gap: var(--s-2);
  padding-inline: var(--s-3); font-size: var(--t-xs); color: var(--text-mute); font-weight: 500;
}
.browser__url svg { width: 12px; height: 12px; color: var(--brand-600); }
.browser__body { background: var(--n-25); }

/* ---- App shell bits (used inside the Scheduling feature browser mock) ---- */
.app__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-5); }
.app__title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-lg); letter-spacing: -0.02em; }
.app__pill { font-size: var(--t-xs); font-weight: 700; color: var(--brand-label); background: var(--brand-50); padding: 0.3rem 0.7rem; border-radius: var(--r-pill); }

/* ---- Weekly schedule grid ---- */
.cal { display: grid; grid-template-columns: 38px repeat(var(--cal-days, 5), 1fr); gap: 6px; }
.cal__h { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); text-align: center; padding-bottom: 4px; }
.cal__time { font-size: 10px; color: var(--text-mute); text-align: right; padding-right: 6px; padding-top: 2px; font-weight: 600; }
.cal__col { display: flex; flex-direction: column; gap: 6px; min-height: 60px; }
.cal__cell { border-top: 1px solid var(--border-soft); min-height: 56px; position: relative; }
.job {
  border-radius: var(--r-sm); padding: 7px 9px; font-size: 10.5px; line-height: 1.3;
  box-shadow: var(--e-1); border: 1px solid; position: relative; overflow: hidden;
}
.job::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.job b { font-weight: 700; display: block; font-size: 11px; color: var(--text); letter-spacing: -0.01em; }
.job span { color: var(--text-soft); display: block; }
.job--a { background: #ecfdf5; border-color: #c4f0db; } .job--a::before { background: var(--brand-500); }
.job--b { background: #eef4ff; border-color: #d4e2fb; } .job--b::before { background: #4f86f0; }
.job--c { background: #fff6ed; border-color: #fbe3c6; } .job--c::before { background: #e8943a; }
.job--d { background: #f3f0ff; border-color: #e0d8fb; } .job--d::before { background: #8a6ff0; }
.job__crew { display: flex; align-items: center; gap: 4px; margin-top: 4px; }

/* ============================================================ METRIC STRIP / SOCIAL PROOF */
.proof { padding-block: var(--s-9); }
.proof__metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--e-3); overflow: hidden;
}
.metric { padding: var(--s-6) var(--s-5); position: relative; }
.metric + .metric::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--border-soft); }
.metric__num { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; }
.metric__num em { font-style: normal; color: var(--brand-600); }
.metric__label { color: var(--text-soft); font-size: var(--t-sm); margin-top: var(--s-2); }
.wordmarks { margin-top: var(--s-8); text-align: center; }
.wordmarks__cap { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); }
.wordmarks__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-7); margin-top: var(--s-5); }
.wordmark { font-family: var(--font-display); font-weight: 600; font-size: var(--t-lg); letter-spacing: -0.02em; color: var(--wordmark); display: inline-flex; align-items: center; gap: var(--s-2); transition: color .25s var(--ease); }
.wordmark svg { width: 19px; height: 19px; }
.wordmark:hover { color: var(--n-600); }

/* ---- Photographic industry tiles (art-directed, on-brand) ---- */
.trade-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-top: var(--s-7); }
.trade-tile {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 4 / 3; border: 1px solid var(--border);
  box-shadow: var(--e-2); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.trade-tile:hover { transform: translateY(-3px); box-shadow: var(--e-3); }
.trade-tile img {
  width: 100%; height: 100%; object-fit: cover;
  /* subtle, consistent grade so photos sit together and stay warm-on-white */
  filter: saturate(1.04) contrast(1.02);
}
.trade-tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 38%, rgba(6,66,51,0.04) 58%, rgba(6,66,51,0.62) 100%);
}
.trade-tile__label {
  position: absolute; left: var(--s-4); bottom: var(--s-3); z-index: 2;
  color: #fff; font-family: var(--font-display); font-weight: 600; font-size: var(--t-base);
  letter-spacing: -0.01em; text-shadow: 0 1px 6px rgba(4,40,24,0.5);
}

/* ============================================================ FEATURE SECTIONS (asymmetric) */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: center; }
.feature + .feature { margin-top: var(--s-12); }
.feature--flip .feature__media { order: -1; }
.feature__copy h1, .feature__copy h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-3xl); line-height: 1.08; margin-top: var(--s-4); margin-bottom: var(--s-4); letter-spacing: -0.03em; }
.feature__copy .lede { margin-bottom: var(--s-5); }
.flist { display: grid; gap: var(--s-3); }
.flist li { display: flex; gap: var(--s-3); align-items: flex-start; }
.flist__ico { width: 26px; height: 26px; border-radius: 8px; background: var(--brand-50); display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
.flist__ico svg { width: 15px; height: 15px; color: var(--brand-600); }
.flist b { font-weight: 600; }
.flist span { color: var(--text-soft); }
.feature__media { position: relative; }

/* ---- Quote/Invoice document mock ---- */
.doc {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--e-3); overflow: hidden; max-width: 440px;
}
.doc__head { padding: var(--s-5) var(--s-5) var(--s-4); display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--border-soft); }
.doc__brand { display: flex; align-items: center; gap: var(--s-2); }
.doc__brand img { width: 26px; height: 26px; border-radius: 7px; }
.doc__brand b { font-family: var(--font-display); font-weight: 600; }
.doc__meta { text-align: right; font-size: var(--t-xs); color: var(--text-mute); }
.doc__meta b { display: block; color: var(--text); font-family: var(--font-display); font-size: var(--t-base); }
.doc__badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-label); background: var(--brand-50); padding: 3px 8px; border-radius: var(--r-pill); margin-top: 4px; }
.doc__bill { padding: var(--s-4) var(--s-5); display: flex; justify-content: space-between; font-size: var(--t-xs); }
.doc__bill .l { color: var(--text-mute); }
.doc__bill b { display: block; color: var(--text); font-size: var(--t-sm); margin-top: 2px; }
.doc__table { padding: 0 var(--s-5) var(--s-4); }
.doc__lrow { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--border-soft); font-size: var(--t-sm); align-items: baseline; }
.doc__lrow:first-child { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-mute); font-weight: 700; padding-bottom: 6px; }
.doc__lrow span:last-child { font-weight: 600; text-align: right; min-width: 56px; }
.doc__lrow .qty { color: var(--text-mute); text-align: right; }
.doc__sum { padding: var(--s-4) var(--s-5); background: var(--n-25); }
.doc__sumrow { display: flex; justify-content: space-between; font-size: var(--t-sm); color: var(--text-soft); padding: 3px 0; }
.doc__totalrow { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border); }
.doc__totalrow span { font-weight: 600; }
.doc__totalrow b { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 700; color: var(--brand-700); letter-spacing: -0.02em; }
.doc__foot { padding: var(--s-3) var(--s-5); display: flex; align-items: center; justify-content: center; gap: var(--s-2); font-size: 10px; color: var(--text-mute); border-top: 1px solid var(--border-soft); }
.doc__foot img { width: 14px; height: 14px; border-radius: 4px; opacity: .9; }

/* ---- REAL document showcase: a genuine Crewtron invoice/quote PDF shown
   in a clean browser frame, with the companion doc floated off the corner. ---- */
.realdoc { position: relative; max-width: 480px; margin-inline: auto; }
.realdoc .browser { max-width: 480px; }
.realdoc__page {
  background: var(--surface); overflow: hidden;
  /* Show the top of the document (logo, brand, amount due, line items);
     fixed window crops the long lower whitespace of the PDF. */
  aspect-ratio: 1275 / 1180;
}
.realdoc__page img { width: 100%; height: auto; display: block; }
/* companion quote doc, floated off the bottom-left corner */
.realdoc__peek {
  position: absolute; z-index: 3; left: -22px; bottom: -26px; width: 168px;
  border-radius: var(--r-md); overflow: hidden; background: var(--surface);
  border: 1px solid var(--border);
  box-shadow:
    0 2px 6px rgba(16,40,33,0.12),
    0 18px 40px -14px rgba(4,120,74,0.34);
}
.realdoc__peek-head {
  display: flex; align-items: center; gap: 6px; padding: 7px 9px;
  border-bottom: 1px solid var(--border-soft); background: var(--n-25);
  font-size: 10px; font-weight: 700; color: var(--brand-800); letter-spacing: -0.01em;
}
.realdoc__peek-head img { width: 13px; height: 13px; border-radius: 4px; }
.realdoc__peek-page { aspect-ratio: 1275 / 980; overflow: hidden; background: var(--surface); }
.realdoc__peek-page img { width: 100%; height: auto; display: block; }
@media (max-width: 520px) {
  .realdoc__peek { width: 124px; left: 2px; bottom: -18px; }
}

/* ============================================================ CONTRACTS DOC MOCK
   A branded "Service Agreement" document: scope/terms block, milestones, and a
   signature panel with a signed signature + green "Signed" chip. An "AI-drafted
   from Quote #364" note and a "Send for signature" affordance. Tokens-only. */
.contractdoc {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--e-3); overflow: hidden; max-width: 460px; margin-inline: auto;
}
.contractdoc__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) var(--s-5) var(--s-4); border-bottom: 1px solid var(--border-soft);
}
.contractdoc__brand { display: flex; align-items: center; gap: var(--s-2); }
.contractdoc__brand img { width: 28px; height: 28px; border-radius: 7px; }
.contractdoc__brand b { font-family: var(--font-display); font-weight: 600; font-size: var(--t-base); letter-spacing: -0.01em; display: block; }
.contractdoc__brand span { font-size: 10px; color: var(--text-mute); display: block; }
.contractdoc__meta { text-align: right; }
.contractdoc__type { font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm); letter-spacing: -0.01em; color: var(--text); }
.contractdoc__no { font-size: 10px; color: var(--text-mute); margin-top: 2px; }
/* AI-drafted note */
.contractdoc__ai {
  display: flex; align-items: center; gap: var(--s-2);
  margin: 0 var(--s-5); padding: var(--s-3); margin-top: var(--s-4);
  border-radius: var(--r-sm); background: var(--brand-50); border: 1px solid var(--brand-100);
  font-size: var(--t-xs); color: var(--brand-ink); line-height: 1.4;
}
.contractdoc__ai svg { width: 15px; height: 15px; color: var(--brand-600); flex-shrink: 0; }
.contractdoc__ai b { font-weight: 700; }
.contractdoc__body { padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-4); }
.cblock__h { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 6px; }
.cblock__p { font-size: var(--t-sm); color: var(--text-soft); line-height: 1.5; }
.cblock__p b { color: var(--text); font-weight: 600; }
/* Terms as a compact two-up */
.cterms { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.cterms div { font-size: var(--t-xs); }
.cterms .l { color: var(--text-mute); }
.cterms b { display: block; color: var(--text); font-size: var(--t-sm); margin-top: 2px; font-family: var(--font-display); font-weight: 600; }
/* Milestones list with progress ticks */
.cmiles { display: grid; gap: 0; }
.cmile { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--border-soft); font-size: var(--t-sm); }
.cmile:last-child { border-bottom: none; }
.cmile__dot { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.cmile__dot--done { background: var(--brand-grad); }
.cmile__dot--done svg { width: 11px; height: 11px; color: #fff; }
.cmile__dot--pend { border: 2px solid var(--border); background: var(--surface); }
.cmile__t { flex: 1; min-width: 0; }
.cmile__t b { font-weight: 600; color: var(--text); }
.cmile__amt { font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); color: var(--text); white-space: nowrap; }
/* Signature panel */
.csign {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4);
  padding: var(--s-4) var(--s-5) var(--s-5); border-top: 1px solid var(--border-soft);
  background: var(--n-25);
}
.csign__cell { min-width: 0; }
.csign__lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); }
.csign__pad {
  position: relative; height: 52px; margin-top: 6px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface); overflow: hidden;
}
.csign__pad svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.csign__pad svg path { fill: none; stroke: var(--brand-700); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.csign__name { font-size: var(--t-xs); color: var(--text-soft); margin-top: 6px; }
.csign__name b { color: var(--text); font-weight: 600; }
/* "Signed" green chip */
.csigned {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
  padding: 3px 9px 3px 7px; border-radius: var(--r-pill);
  background: var(--brand-50); color: var(--brand-800); border: 1px solid var(--brand-200);
}
.csigned svg { width: 12px; height: 12px; color: var(--brand-700); }
.contractdoc__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border-soft);
}
.contractdoc__foot .meta { font-size: 10px; color: var(--text-mute); display: flex; align-items: center; gap: 6px; }
.contractdoc__foot .meta svg { width: 13px; height: 13px; color: var(--brand-600); }
.contractdoc__send {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: var(--t-xs); font-weight: 700; color: #fff; background: var(--brand-grad);
  padding: 0.4rem 0.75rem; border-radius: var(--r-pill); box-shadow: var(--e-brand);
}
.contractdoc__send svg { width: 13px; height: 13px; }
/* "Sign on any device" companion chip floated off the corner */
.contract-wrap { position: relative; max-width: 460px; margin-inline: auto; }
.contract-device {
  position: absolute; z-index: 4; right: -16px; bottom: -16px;
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--e-3); padding: var(--s-3) var(--s-4);
}
.contract-device__ico { width: 30px; height: 30px; border-radius: 9px; background: var(--brand-50); display: grid; place-items: center; flex-shrink: 0; color: var(--brand-600); }
.contract-device__ico svg { width: 16px; height: 16px; }
.contract-device__meta b { display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: -0.01em; }
.contract-device__meta span { display: block; font-size: 10px; color: var(--text-mute); }
@media (max-width: 520px) {
  .cterms { grid-template-columns: 1fr; }
  .contract-device { position: relative; right: auto; bottom: auto; margin-top: var(--s-4); }
}

/* ============================================================ PROJECT HUB MOCK
   The hub for a whole job: project header (client + address + status), a row of
   linked items (Quote ✓ · Contract ✓ · Invoice · Schedule) reusing real PDF
   thumbnails, a budget-vs-actual / margin indicator, and a receipts/photos
   strip. Tokens-only, premium, realistic. */
.projhub {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--e-3); overflow: hidden; max-width: 480px; margin-inline: auto;
}
.projhub__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-5); border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, var(--n-25), var(--n-0));
}
.projhub__title b { font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); letter-spacing: -0.01em; display: block; }
.projhub__title span { font-size: var(--t-xs); color: var(--text-mute); display: block; margin-top: 2px; }
.projhub__status {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  padding: 4px 10px 4px 8px; border-radius: var(--r-pill);
  background: var(--brand-50); color: var(--brand-800); border: 1px solid var(--brand-200);
}
.projhub__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-grad); }
/* Linked items row */
.projlinks { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); padding: var(--s-5); }
.projlink {
  position: relative; border: 1px solid var(--border); border-radius: var(--r-sm);
  overflow: hidden; background: var(--n-25); aspect-ratio: 3 / 4;
}
.projlink__thumb { position: absolute; inset: 0; }
.projlink__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* placeholder thumb (Invoice / Schedule — not yet generated) */
.projlink__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--n-400); }
.projlink__ph svg { width: 30%; height: 30%; }
.projlink__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 4px; justify-content: center;
  padding: 5px 4px; font-size: 9.5px; font-weight: 700; letter-spacing: -0.01em;
  color: #fff; background: linear-gradient(180deg, transparent, rgba(6,66,51,0.78));
}
.projlink__tick { width: 12px; height: 12px; border-radius: 50%; background: var(--brand-grad); display: grid; place-items: center; flex-shrink: 0; }
.projlink__tick svg { width: 8px; height: 8px; color: #fff; }
/* placeholder/linked items use a light label instead of photo gradient */
.projlink--ph .projlink__cap { color: var(--text-soft); background: var(--n-50); border-top: 1px solid var(--border-soft); }
/* Budget vs actual / margin band */
.projmargin {
  margin: 0 var(--s-5) var(--s-5); padding: var(--s-4);
  border-radius: var(--r-sm); background: var(--brand-50); border: 1px solid var(--brand-100);
}
.projmargin__top { display: flex; align-items: baseline; justify-content: space-between; }
.projmargin__pct { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.03em; color: var(--brand-700); line-height: 1; }
.projmargin__lbl { font-size: var(--t-xs); color: var(--brand-ink); font-weight: 600; }
.projmargin__bar { height: 8px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--brand-100); overflow: hidden; margin-top: var(--s-3); }
.projmargin__bar i { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--brand-400), var(--brand-600)); }
.projmargin__legend { display: flex; justify-content: space-between; font-size: 10px; color: var(--brand-ink); margin-top: var(--s-3); }
.projmargin__legend b { color: var(--brand-800); font-weight: 700; }
/* Receipts & photos strip */
.projstrip { padding: 0 var(--s-5) var(--s-5); }
.projstrip__cap { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 6px; }
.projstrip__row { display: flex; gap: var(--s-2); }
.projphoto {
  width: 56px; height: 56px; border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--border); flex-shrink: 0; background: var(--n-50);
}
.projphoto img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.04) contrast(1.02); }
/* receipt tile (document, not photo) */
.projphoto--rcpt { display: grid; place-items: center; color: var(--brand-600); background: var(--brand-50); border-color: var(--brand-100); }
.projphoto--rcpt svg { width: 22px; height: 22px; }
.projphoto--more { display: grid; place-items: center; font-size: var(--t-xs); font-weight: 700; color: var(--text-soft); background: var(--n-50); }
@media (max-width: 520px) {
  .projlinks { gap: var(--s-2); }
}

/* ---- Tap to Pay: a realistic PHOTO of a card tapped to a phone, in a
   clean frame. Tap to Pay happens ON the phone — no separate reader. ---- */
.tappay {
  position: relative; max-width: 420px; margin-inline: auto;
}
.tappay__frame {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--border); background: var(--n-50);
  /* New verified image is landscape ~3:2 (card tapped directly to a bare
     phone, no terminal) — frame it landscape, object-fit:cover. */
  aspect-ratio: 3 / 2;
  box-shadow:
    0 1px 3px rgba(16,40,33,0.06),
    0 18px 40px -16px rgba(16,40,33,0.16),
    0 44px 90px -34px rgba(4,120,74,0.26);
}
.tappay__frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.04) contrast(1.02); }
.tappay__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, rgba(6,66,51,0.06) 70%, rgba(6,66,51,0.40) 100%);
}
.tappay__cap {
  position: absolute; left: var(--s-5); bottom: var(--s-4); z-index: 3; color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm);
  letter-spacing: -0.01em; text-shadow: 0 1px 6px rgba(4,40,24,0.55);
}
/* "Pay link sent" companion chip stays — pay links / get-paid copy is live */
.tappay__link {
  position: absolute; right: -16px; bottom: -16px; z-index: 4;
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--e-3); padding: var(--s-3) var(--s-4);
}
.tappay__link-ico { width: 30px; height: 30px; border-radius: 9px; background: var(--brand-50); display: grid; place-items: center; flex-shrink: 0; color: var(--brand-600); }
.tappay__link-ico svg { width: 16px; height: 16px; }
.tappay__link-meta b { display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: -0.01em; }
.tappay__link-meta span { display: block; font-size: 10px; color: var(--text-mute); }
@media (max-width: 520px) {
  .tappay__link { position: relative; right: auto; bottom: auto; margin-top: var(--s-4); }
}

/* ---- Clients mock ---- */
.clients { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--e-3); overflow: hidden; max-width: 460px; }
.clients__bar { padding: var(--s-4); border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: var(--s-3); }
.clients__search { flex: 1; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--n-25); display: flex; align-items: center; gap: var(--s-2); padding-inline: var(--s-3); font-size: var(--t-sm); color: var(--text-mute); }
.clients__search svg { width: 15px; height: 15px; color: var(--n-400); }
.clients__add { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--brand-grad); display: grid; place-items: center; box-shadow: var(--e-brand); }
.clients__add svg { width: 16px; height: 16px; color: #fff; }
.client-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border-soft); }
.client-row:last-child { border-bottom: none; }
.client-row__av { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: var(--t-sm); flex-shrink: 0; }
.client-row__meta { flex: 1; min-width: 0; }
.client-row__meta b { font-size: var(--t-sm); font-weight: 600; }
.client-row__meta span { display: block; font-size: var(--t-xs); color: var(--text-mute); }
.client-row__amt { text-align: right; }
.client-row__amt b { font-size: var(--t-sm); font-weight: 700; font-family: var(--font-display); }
.client-row__amt span { display: block; font-size: 10px; color: var(--text-mute); }

/* ============================================================ GET REVIEWS MOCK
   A "Company profile" card with a Google review-link field + a Yelp
   review-link field (recognizable brand marks), a "Request a review" action,
   and a 5-star review result. Tokens-only, premium, realistic. */
.reviews { position: relative; max-width: 460px; margin-inline: auto; padding-bottom: var(--s-7); }
.profcard {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--e-3); overflow: hidden;
}
.profcard__head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, var(--n-25), var(--n-0));
}
.profcard__logo { width: 34px; height: 34px; border-radius: 9px; overflow: hidden; box-shadow: var(--e-1); flex-shrink: 0; }
.profcard__logo img { width: 100%; height: 100%; object-fit: cover; }
.profcard__t b { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); letter-spacing: -0.01em; }
.profcard__t span { display: block; font-size: var(--t-xs); color: var(--text-mute); }
.profcard__body { padding: var(--s-5); display: grid; gap: var(--s-4); }
.revfield { display: grid; gap: 6px; }
.revfield__label { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); font-weight: 700; color: var(--text-soft); letter-spacing: -0.01em; }
.revfield__label svg, .revfield__label .brandmark { width: 16px; height: 16px; flex-shrink: 0; }
.revfield__input {
  display: flex; align-items: center; gap: var(--s-2); height: 38px;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--n-25);
  padding-inline: var(--s-3); font-size: var(--t-sm); color: var(--text);
}
.revfield__input .url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-soft); }
.revfield__input .ok { width: 18px; height: 18px; border-radius: 50%; background: var(--brand-grad); display: grid; place-items: center; flex-shrink: 0; }
.revfield__input .ok svg { width: 11px; height: 11px; color: #fff; }
.revsend { margin-top: var(--s-1); }
/* The 5-star review result chip, floated off the bottom edge, centered and
   BELOW the card so it never covers the "Request a review" button. */
.revresult {
  position: absolute; left: 50%; bottom: -56px; transform: translateX(-50%);
  z-index: 3; width: 264px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--e-3); padding: var(--s-4);
}
.revresult__top { display: flex; align-items: center; gap: var(--s-2); }
.revresult__stars { display: inline-flex; gap: 1px; color: var(--brand-500); }
.revresult__stars svg { width: 14px; height: 14px; }
.revresult__src { margin-left: auto; }
.revresult__src .brandmark { width: 16px; height: 16px; display: block; }
.revresult__txt { font-size: var(--t-xs); color: var(--text-soft); line-height: 1.45; margin-top: var(--s-2); }
.revresult__who { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.revresult__av { width: 22px; height: 22px; border-radius: 7px; background: var(--brand-grad-135); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 10px; flex-shrink: 0; }
.revresult__who b { font-size: 11px; font-weight: 700; }
.revresult__who span { font-size: 10px; color: var(--text-mute); }
@media (max-width: 520px) {
  .revresult { position: relative; left: auto; bottom: auto; transform: none; width: 100%; margin-top: var(--s-4); }
  .reviews { padding-bottom: 0; }
}

/* ============================================================ LEADS MOCK
   A unique lead link + REAL QR code, a lead-capture form preview, and a Leads
   inbox list with a "Convert to client" button on a lead. */
.leads { position: relative; max-width: 480px; margin-inline: auto; }
.leadshare {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--e-2); padding: var(--s-4); margin-bottom: var(--s-4);
}
.leadshare__l { min-width: 0; }
.leadshare__cap { font-size: var(--t-xs); font-weight: 700; color: var(--text-soft); letter-spacing: -0.01em; }
.leadshare__url {
  display: flex; align-items: center; gap: var(--s-2); margin-top: 6px; height: 34px;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--n-25);
  padding-inline: var(--s-3); font-size: var(--t-sm); color: var(--text);
}
.leadshare__url svg { width: 14px; height: 14px; color: var(--brand-600); flex-shrink: 0; }
.leadshare__url .u { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-soft); }
.leadshare__url .copy { color: var(--brand-700); font-weight: 700; font-size: var(--t-xs); flex-shrink: 0; }
.leadshare__qr {
  width: 84px; height: 84px; border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--border); background: #fff; padding: 5px; flex-shrink: 0;
}
.leadshare__qr img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Leads inbox */
.leadinbox { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--e-3); overflow: hidden; }
.leadinbox__head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border-soft); }
.leadinbox__head b { font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); letter-spacing: -0.01em; }
.leadinbox__count { font-size: 10px; font-weight: 700; color: var(--brand-800); background: var(--brand-50); border: 1px solid var(--brand-200); padding: 2px 8px; border-radius: var(--r-pill); }
.lead-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--border-soft); }
.lead-row:last-child { border-bottom: none; }
.lead-row__av { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: var(--t-xs); flex-shrink: 0; }
.lead-row__meta { flex: 1; min-width: 0; }
.lead-row__meta b { font-size: var(--t-sm); font-weight: 600; display: block; }
.lead-row__meta span { display: block; font-size: var(--t-xs); color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-row__src { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-mute); background: var(--n-50); border: 1px solid var(--border-soft); padding: 2px 7px; border-radius: var(--r-pill); flex-shrink: 0; }
.lead-row__src--qr { color: var(--brand-800); background: var(--brand-50); border-color: var(--brand-200); }
.lead-convert {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: var(--t-xs); font-weight: 700; color: #fff; background: var(--brand-grad);
  padding: 0.4rem 0.7rem; border-radius: var(--r-pill); box-shadow: var(--e-brand);
}
.lead-convert svg { width: 13px; height: 13px; }
@media (max-width: 520px) {
  .lead-row__src { display: none; }
  .lead-convert span { display: none; }
  .lead-convert { padding: 0.45rem; }
}

/* ============================================================ HOW IT WORKS */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); margin-top: var(--s-8); counter-reset: step; }
.step { position: relative; padding-top: var(--s-6); }
.step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm);
  color: var(--brand-label); letter-spacing: 0.04em;
}
.step__line { position: absolute; top: 9px; left: 30px; right: -8px; height: 1px; background: linear-gradient(to right, var(--brand-200), transparent); }
.step:last-child .step__line { display: none; }
.step__node { width: 38px; height: 38px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--e-2); display: grid; place-items: center; margin: var(--s-3) 0; }
.step__node svg { width: 18px; height: 18px; color: var(--brand-600); }
.step h3 { font-size: var(--t-md); margin-bottom: var(--s-2); font-weight: 600; letter-spacing: -0.02em; }
.step p { color: var(--text-soft); font-size: var(--t-sm); line-height: 1.55; }

/* ============================================================ TESTIMONIAL */
.quote-wrap { max-width: 60ch; }
.quote-big {
  font-family: var(--font-display); font-weight: 500; font-size: var(--t-2xl);
  line-height: 1.34; letter-spacing: -0.02em; color: var(--text);
}
.quote-big em { font-style: normal; color: var(--brand-700); }
.quote-mark { font-family: var(--font-display); font-size: 4rem; line-height: 0.4; color: var(--brand-300); }
.quote-author { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-6); }
.quote-author__av { width: 48px; height: 48px; border-radius: 14px; background: var(--brand-grad-135); display: grid; place-items: center; color: #fff; font-weight: 700; font-family: var(--font-display); box-shadow: var(--e-2); }
/* Real testimonial portrait — same rounding + layered tinted shadow */
.quote-author__photo {
  width: 64px; height: 64px; border-radius: var(--r-md); overflow: hidden; flex-shrink: 0;
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(16,40,33,0.10), 0 14px 30px -12px rgba(11,87,56,0.34);
}
.quote-author__photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.03) contrast(1.02); }
.quote-author__meta b { display: block; font-weight: 600; }
.quote-author__meta span { font-size: var(--t-sm); color: var(--text-mute); }

/* ============================================================ PRICING */
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-top: var(--s-8); align-items: stretch; }
.plan__seats { font-family: var(--font-display); font-weight: 600; color: var(--brand-800); font-size: var(--t-base); margin-bottom: var(--s-3); }
.plan-custom { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-5); padding: var(--s-5) var(--s-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--e-1); }
.plan-custom__copy b { font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: var(--t-md); }
.plan-custom__copy span { display: block; color: var(--text-soft); font-size: var(--t-sm); margin-top: 2px; }
.plan-custom .btn { flex-shrink: 0; }
.plan {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-5); box-shadow: var(--e-2); display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--e-3); border-color: var(--n-300); }
/* Featured (Most Popular) card: a centered pill sits cleanly ABOVE the card.
   We give the card extra top margin to reserve space for the pill, and pull the
   pill up by exactly that amount so it never overlaps the card border/heading.
   overflow:visible + a higher z-index keep the pill above neighbouring cards. */
.plan--feature {
  border-color: var(--brand-300); box-shadow: var(--e-4); position: relative;
  margin-top: 22px; z-index: 2; overflow: visible;
}
.plan--feature::after { content: ""; position: absolute; inset: -1px; border-radius: var(--r-lg); padding: 1px; background: linear-gradient(160deg, var(--brand-300), transparent 50%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.plan__tag {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  z-index: 3; white-space: nowrap;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: var(--brand-grad); padding: 5px 14px; border-radius: var(--r-pill);
  box-shadow: var(--e-brand);
}
.plan__name { font-family: var(--font-display); font-weight: 600; font-size: var(--t-lg); letter-spacing: -0.02em; }
.plan__desc { color: var(--text-soft); font-size: var(--t-sm); margin-top: var(--s-2); min-height: 40px; }
.plan__price { display: flex; align-items: baseline; gap: 4px; margin: var(--s-4) 0; }
.plan__price b { font-family: var(--font-display); font-size: var(--t-3xl); font-weight: 600; letter-spacing: -0.03em; }
.plan__price .cur { font-size: var(--t-lg); font-weight: 500; align-self: flex-start; margin-top: 6px; }
.plan__price .per { color: var(--text-mute); font-size: var(--t-sm); font-weight: 500; }
.plan__cta { margin-bottom: var(--s-5); }
.plan__feats { display: grid; gap: var(--s-3); }
.plan__feats li { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--t-sm); color: var(--text-soft); }
.plan__feats svg { width: 16px; height: 16px; color: var(--brand-600); flex-shrink: 0; margin-top: 2px; }
.plan__feats b { color: var(--text); font-weight: 600; }

/* ============================================================ FINAL CTA */
.cta-band { position: relative; overflow: hidden; border-radius: var(--r-2xl); padding: var(--s-12) var(--s-8); text-align: center;
  background: var(--brand-grad-deep);
  box-shadow: var(--e-4); }
.cta-band::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(50% 80% at 80% 0%, rgba(255,255,255,0.14), transparent 60%),
              radial-gradient(40% 60% at 10% 100%, rgba(255,255,255,0.08), transparent 60%); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band__trial {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-5); padding: 0.46rem 0.95rem 0.46rem 0.65rem;
  border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 700;
  color: #fff; background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28); letter-spacing: -0.01em;
}
.cta-band__trial svg { width: 16px; height: 16px; flex-shrink: 0; }
.cta-band__trial b { font-weight: 800; }
.cta-band__trial .sep { opacity: 0.6; font-weight: 600; }
.cta-band h2 { color: #fff; font-size: var(--t-3xl); letter-spacing: -0.03em; line-height: 1.08; max-width: 18ch; margin-inline: auto; }
.cta-band p { color: rgba(255,255,255,0.82); margin-top: var(--s-4); font-size: var(--t-md); max-width: 50ch; margin-inline: auto; }
.cta-band__actions { display: flex; gap: var(--s-3); justify-content: center; margin-top: var(--s-7); flex-wrap: wrap; }
.btn--onbrand {
  background: #fff; color: var(--brand-800);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset,
              0 2px 6px -2px rgba(4,40,24,0.30),
              0 10px 26px -8px rgba(4,40,24,0.42);
}
.btn--onbrand:hover {
  transform: translateY(-1.5px); background: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset,
              0 4px 10px -2px rgba(4,40,24,0.34),
              0 16px 36px -8px rgba(4,40,24,0.48);
}
.btn--onbrand:active { transform: translateY(0); }
.btn--onbrand-ghost { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25); color: #fff; }
.btn--onbrand-ghost:hover { background: rgba(255,255,255,0.16); transform: translateY(-1.5px); }

/* ============================================================ FOOTER */
.footer { padding-block: var(--s-10) var(--s-8); border-top: 1px solid var(--border-soft); }
.footer__grid { display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: var(--s-7); }
.footer__brand .brand { margin-bottom: var(--s-4); }
.footer__tag { color: var(--text-soft); font-size: var(--t-sm); max-width: 30ch; line-height: 1.6; }
.footer__badges { display: flex; gap: var(--s-3); margin-top: var(--s-5); flex-wrap: wrap; }
.footer__badges .store-badge img { height: 48px; }
.footer__col h3 { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); margin-bottom: var(--s-4); }
.footer__col a { display: block; color: var(--text-soft); font-size: var(--t-base); padding: 5px 0; transition: color .2s; }
.footer__col a:hover { color: var(--brand-700); }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-9); padding-top: var(--s-5); border-top: 1px solid var(--border-soft); flex-wrap: wrap; }
.footer__copy { color: var(--text-mute); font-size: var(--t-sm); }
.footer__social { display: flex; gap: var(--s-2); }
.footer__social a { width: 38px; height: 38px; border-radius: var(--r-sm); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-soft); transition: all .2s var(--ease); }
.footer__social a:hover { color: var(--brand-700); border-color: var(--brand-300); background: var(--brand-50); transform: translateY(-1.5px); }
.footer__social svg { width: 17px; height: 17px; }
/* ---- Official COLOR social brand badges (Instagram brand gradient, LinkedIn
   blue). The tile holds the full-color glyph; hover keeps the brand look. ---- */
.footer__social a.is-brand { border: none; overflow: hidden; padding: 0; }
.footer__social a.is-brand:hover { background: none; }
.footer__social .social-badge { width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; }
.footer__social .social-badge svg { width: 20px; height: 20px; }
/* Instagram: the camera glyph on its pink→purple→orange brand gradient */
.footer__social .social-badge--ig {
  background:
    radial-gradient(120% 120% at 28% 108%, #FEDA75 0%, #FA7E1E 24%, #D62976 52%, #962FBF 78%, #4F5BD5 100%);
}
.footer__social .social-badge--ig svg { color: #fff; }
/* LinkedIn: white "in" on LinkedIn blue */
.footer__social .social-badge--li { background: #0A66C2; }
.footer__social .social-badge--li svg { color: #fff; }
/* Subtle lift on hover, keeping the brand fill */
.footer__social a.is-brand:hover .social-badge { box-shadow: 0 2px 6px rgba(16,40,33,0.14), 0 8px 18px -8px rgba(11,87,56,0.30); }

/* ============================================================ HERO TRUST CLUSTER */
.hero__trust { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.ratings { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.rating { display: inline-flex; align-items: center; gap: var(--s-2); }
.rating__stars { display: inline-flex; gap: 1px; color: var(--brand-500); }
.rating__stars svg { width: 14px; height: 14px; }
.rating__txt { font-size: var(--t-xs); color: var(--text-soft); line-height: 1.3; }
.rating__txt b { color: var(--text); font-weight: 700; font-family: var(--font-display); }
.rating__txt span { display: block; color: var(--text-mute); }

/* Official, colored app-store badges (real store art, like Jobber).
   Both badges are normalized to one optical height so they sit level. */
.store-badges { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.store-badge {
  display: inline-flex; border-radius: 11px; overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease);
  box-shadow: 0 1px 2px rgba(16,40,33,0.10), 0 6px 16px -8px rgba(11,87,56,0.30);
}
.store-badge:hover { transform: translateY(-1.5px); box-shadow: 0 2px 4px rgba(16,40,33,0.12), 0 10px 22px -8px rgba(11,87,56,0.38); }
.store-badge img { display: block; height: 52px; width: auto; }

/* Crafted "Web App" badge — a third access option beside the real App Store +
   Google Play store art. Built to match their optical HEIGHT (52px hero / 48px
   footer) and the same black "download badge" look, so the three sit level in
   one row. Tokens-only; same hover lift as .store-badge above. */
.web-badge {
  display: inline-flex; align-items: center; gap: 9px;
  height: 52px; padding: 0 16px 0 13px;
  background: #000; color: #fff; border-radius: 11px;
  box-shadow: 0 1px 2px rgba(16,40,33,0.10), 0 6px 16px -8px rgba(11,87,56,0.30);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.web-badge:hover { transform: translateY(-1.5px); box-shadow: 0 2px 4px rgba(16,40,33,0.12), 0 10px 22px -8px rgba(11,87,56,0.38); }
.web-badge__ico { width: 24px; height: 24px; flex-shrink: 0; color: #fff; }
.web-badge__txt { display: flex; flex-direction: column; line-height: 1; text-align: left; }
.web-badge__top { font-size: 10px; font-weight: 500; letter-spacing: 0.02em; opacity: 0.92; }
.web-badge__btm { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin-top: 3px; }
/* Footer variant matches the 48px footer store badges. */
.footer__badges .web-badge { height: 48px; padding: 0 14px 0 12px; }
.footer__badges .web-badge__btm { font-size: 17px; }

/* ============================================================ AI SECTION (Crewtron AI) */
.ai-head { max-width: 56ch; margin-bottom: var(--s-9); }
.ai-head h2 { font-size: var(--t-3xl); line-height: 1.08; letter-spacing: -0.03em; margin-top: var(--s-4); }
.ai-head .lede { margin-top: var(--s-4); max-width: 54ch; }
.ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.ai-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-6); box-shadow: var(--e-2); display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.ai-card:hover { transform: translateY(-3px); box-shadow: var(--e-3); border-color: var(--n-300); }
.ai-card__ico { width: 38px; height: 38px; border-radius: var(--r-md); background: var(--brand-50); display: grid; place-items: center; color: var(--brand-600); margin-bottom: var(--s-4); }
.ai-card__ico svg { width: 20px; height: 20px; }
.ai-card h3 { font-size: var(--t-md); font-weight: 600; letter-spacing: -0.02em; margin-bottom: var(--s-2); }
.ai-card p { color: var(--text-soft); font-size: var(--t-sm); line-height: 1.55; }
.ai-card__viz { margin-top: var(--s-5); }

/* Voice → doc mock (card 1) */
.ai-voice { border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--n-25); padding: var(--s-4); }
.ai-voice__say { display: flex; align-items: center; gap: var(--s-3); }
.ai-voice__mic { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-grad); display: grid; place-items: center; box-shadow: var(--e-brand); flex-shrink: 0; }
.ai-voice__mic svg { width: 15px; height: 15px; color: #fff; }
.ai-wave { display: inline-flex; align-items: center; gap: 3px; }
.ai-wave i { width: 3px; border-radius: 2px; background: var(--brand-300); display: block; }
.ai-voice__txt { font-size: var(--t-xs); color: var(--text-soft); font-style: italic; margin-top: var(--s-3); line-height: 1.5; }
.ai-voice__arrow { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-3) 0; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-label); }
.ai-voice__arrow svg { width: 14px; height: 14px; }
.ai-voice__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ai-chip { font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); color: var(--text-soft); }
.ai-chip--on { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-label); }

/* Margin analysis mock (card 2) */
.ai-margin { border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--n-25); padding: var(--s-4); }
.ai-margin__top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s-3); }
.ai-margin__pct { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.03em; color: var(--brand-700); line-height: 1; }
.ai-margin__chip { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill); color: var(--brand-label); background: var(--brand-50); }
.ai-bar { height: 8px; border-radius: var(--r-pill); background: var(--n-150); overflow: hidden; }
.ai-bar i { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--brand-400), var(--brand-600)); }
.ai-margin__legend { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-mute); margin-top: var(--s-3); }
.ai-margin__legend span b { color: var(--text); font-weight: 700; }

/* Follow-up mock (card 3) */
.ai-follow { display: grid; gap: var(--s-2); }
.ai-follow__row { display: flex; align-items: center; gap: var(--s-3); border: 1px solid var(--border-soft); border-radius: var(--r-sm); background: var(--n-25); padding: var(--s-3); }
.ai-follow__dot { width: 24px; height: 24px; border-radius: 7px; background: var(--brand-50); display: grid; place-items: center; color: var(--brand-600); flex-shrink: 0; }
.ai-follow__dot svg { width: 13px; height: 13px; }
.ai-follow__t b { display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: -0.01em; }
.ai-follow__t span { display: block; font-size: 10px; color: var(--text-mute); }

/* ============================================================ AI MARGIN CHIP (on quote doc) */
.doc__margin { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3); padding: var(--s-3); border-radius: var(--r-sm); background: var(--brand-50); border: 1px solid var(--brand-100); }
.doc__margin-l { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); color: var(--brand-ink); }
.doc__margin-l svg { width: 14px; height: 14px; color: var(--brand-600); flex-shrink: 0; }
.doc__margin-l b { font-weight: 700; }
.doc__margin-v { font-family: var(--font-display); font-size: var(--t-md); font-weight: 700; color: var(--brand-700); letter-spacing: -0.02em; white-space: nowrap; }

/* ============================================================ CREW MAP STAT CHIP */
.feature__stat {
  display: inline-flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface); box-shadow: var(--e-1);
}
.feature__stat-num { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.03em; color: var(--brand-700); line-height: 1; }
.feature__stat-lbl { font-size: var(--t-xs); color: var(--text-soft); line-height: 1.3; }

/* ============================================================ INDUSTRIES GRID */
.ind-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3); margin-top: var(--s-7); }
.ind-tile {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--e-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.ind-tile:hover { transform: translateY(-2px); box-shadow: var(--e-2); border-color: var(--n-300); }
.ind-tile__ico { width: 30px; height: 30px; border-radius: 9px; background: var(--brand-50); display: grid; place-items: center; color: var(--brand-600); flex-shrink: 0; }
.ind-tile__ico svg { width: 17px; height: 17px; }
.ind-tile b { font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); letter-spacing: -0.01em; }

/* ============================================================ CUSTOMER WORDMARKS
   Tasteful, illustrative "trusted by" row — styled TEXT logos with varied,
   characterful type (not images). Clearly representative, not an endorsement
   claim. AA-safe ink. */
.trustmarks { text-align: center; margin-top: var(--s-9); }
.trustmarks__cap { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); }
.trustmarks__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-5) var(--s-8); margin-top: var(--s-5);
}
.trustmark {
  color: var(--n-600); letter-spacing: -0.01em; line-height: 1;
  display: inline-flex; align-items: baseline; gap: 4px;
  transition: color .25s var(--ease), opacity .25s var(--ease);
  opacity: 0.92;
}
.trustmark:hover { color: var(--brand-700); opacity: 1; }
/* varied, characterful type per wordmark */
.trustmark--1 { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.trustmark--2 { font-family: var(--font-body); font-weight: 800; font-size: 1.2rem; letter-spacing: 0.06em; text-transform: uppercase; }
.trustmark--3 { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; font-style: italic; }
.trustmark--4 { font-family: var(--font-body); font-weight: 700; font-size: 1.22rem; }
.trustmark--5 { font-family: var(--font-display); font-weight: 600; font-size: 1.28rem; letter-spacing: -0.03em; }
.trustmark--6 { font-family: var(--font-body); font-weight: 600; font-size: 1.18rem; letter-spacing: 0.02em; }
.trustmark .amp { color: var(--brand-600); font-weight: 700; }
.trustmark__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-green); align-self: center; }
.trustmarks__note { font-size: 11px; color: var(--n-400); margin-top: var(--s-4); }

/* Testimonial business name as a small wordmark */
.bizmark { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.tcard__who .bizmark { font-size: var(--t-sm); }

/* ============================================================ TESTIMONIAL 3-UP */
.tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-top: var(--s-8); }
.tcard {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-6); box-shadow: var(--e-2); display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tcard:hover { transform: translateY(-3px); box-shadow: var(--e-3); }
.tcard__stars { display: inline-flex; gap: 2px; color: var(--brand-500); margin-bottom: var(--s-3); }
.tcard__stars svg { width: 15px; height: 15px; }
.tcard__quote { font-size: var(--t-base); line-height: 1.55; color: var(--text); flex: 1; }
.tcard__quote em { font-style: normal; color: var(--brand-700); font-weight: 600; }
.tcard__foot { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--border-soft); }
.tcard__photo { width: 44px; height: 44px; border-radius: var(--r-sm); overflow: hidden; flex-shrink: 0; border: 1px solid var(--border); box-shadow: var(--e-1); }
.tcard__photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.03) contrast(1.02); }
.tcard__who b { display: block; font-weight: 600; font-size: var(--t-sm); }
.tcard__who span { display: block; font-size: var(--t-xs); color: var(--text-mute); }

/* ============================================================ PRICING BANNER */
.everyfeature {
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  max-width: 720px; margin: var(--s-8) auto 0; padding: var(--s-4) var(--s-5);
  border-radius: var(--r-pill); border: 1px solid var(--brand-200);
  background: var(--brand-50); text-align: center;
}
.everyfeature svg { width: 18px; height: 18px; color: var(--brand-600); flex-shrink: 0; }
.everyfeature b { color: var(--brand-800); font-weight: 700; }
.everyfeature span { color: var(--brand-ink); font-size: var(--t-sm); }

/* ============================================================ "EVERY FEATURE" GRID
   The complete capability list — one crafted inline-SVG icon + a one-line
   description per feature. Tokens-only, full-white, no emoji. Mirrors the
   old site's "every feature on every plan" coverage. */
.featgrid__head { text-align: center; max-width: 56ch; margin: 0 auto var(--s-8); display: flex; flex-direction: column; align-items: center; }
.featgrid__head h2 { font-size: var(--t-2xl); line-height: 1.12; letter-spacing: -0.03em; margin-top: var(--s-3); }
.featgrid__head .lede { text-align: center; margin-top: var(--s-3); margin-inline: auto; }
.featgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.featcard {
  display: grid; grid-template-columns: 42px 1fr; gap: var(--s-4); align-items: start;
  padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--e-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.featcard:hover { transform: translateY(-2px); box-shadow: var(--e-2); border-color: var(--n-300); }
.featcard__ico {
  width: 42px; height: 42px; border-radius: var(--r-md); flex-shrink: 0;
  background: var(--brand-50); display: grid; place-items: center; color: var(--brand-600);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.featcard:hover .featcard__ico { background: var(--brand-grad); color: #fff; box-shadow: var(--e-brand); }
.featcard__ico svg { width: 21px; height: 21px; }
.featcard__t b { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); letter-spacing: -0.02em; color: var(--text); }
.featcard__t span { display: block; font-size: var(--t-sm); color: var(--text-soft); line-height: 1.5; margin-top: 4px; }
@media (max-width: 860px) { .featgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .featgrid { grid-template-columns: 1fr; } }

/* ============================================================ FAQ ACCORDION */
.faq { max-width: 760px; margin: var(--s-8) auto 0; display: grid; gap: var(--s-3); }
.faq__item { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--e-1); overflow: hidden; }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); letter-spacing: -0.01em; color: var(--text);
}
.faq__q-ico { width: 24px; height: 24px; border-radius: 50%; background: var(--brand-50); display: grid; place-items: center; color: var(--brand-600); flex-shrink: 0; transition: transform .3s var(--ease); }
.faq__q-ico svg { width: 14px; height: 14px; }
.faq__item.is-open .faq__q-ico { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq__a-inner { padding: 0 var(--s-5) var(--s-5); color: var(--text-soft); font-size: var(--t-base); line-height: 1.6; }
.faq__a-inner a { color: var(--brand-700); font-weight: 600; }
.faq__a-inner a:hover { text-decoration: underline; }

/* ============================================================ INLINE CTA BAND (compact) */
.cta-strip {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
  border-radius: var(--r-xl); padding: var(--s-6) var(--s-7);
  background: var(--brand-grad-deep);
  box-shadow: var(--e-3); position: relative; overflow: hidden;
}
.cta-strip::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 100% at 85% 0%, rgba(255,255,255,0.12), transparent 60%); }
.cta-strip > * { position: relative; }
.cta-strip__copy h3 { color: #fff; font-size: var(--t-xl); letter-spacing: -0.02em; line-height: 1.15; }
.cta-strip__copy p { color: rgba(255,255,255,0.82); font-size: var(--t-sm); margin-top: var(--s-2); }
.cta-strip__copy p b { color: #fff; font-weight: 700; }

/* ============================================================ LOGO WATERMARK
   (a) A large, very-faint Crewtron logo behind the PRICING band — one premium
   spot, low opacity, sits under the content so it never hurts readability.
   (b) A small logo badge in the corner of the large "day in the life" photos. */
.section-wm { position: relative; overflow: hidden; }
.section-wm > .wrap { position: relative; z-index: 1; }
.section-wm__logo {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(280px, 34vw, 560px); aspect-ratio: 1 / 1;
  opacity: 0.05; filter: saturate(1.05);
}
@media (max-width: 860px) { .section-wm__logo { opacity: 0.04; } }

/* Small logo watermark badge on the big day-in-life photos */
.day-stage__wm {
  position: absolute; z-index: 3; left: var(--s-5); bottom: var(--s-4);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 6px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.16); backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.28);
}
.day-stage__wm img { width: 18px; height: 18px; border-radius: 5px; display: block; }
.day-stage__wm span {
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-xs);
  color: #fff; letter-spacing: -0.01em; text-shadow: 0 1px 4px rgba(4,40,24,0.45);
}
@media (max-width: 520px) {
  .day-stage__wm { left: var(--s-3); bottom: var(--s-3); padding: 4px 8px 4px 5px; }
  .day-stage__wm span { font-size: 10px; }
}

/* ============================================================ SCROLL REVEAL
   "Loads fully" guarantee: content is VISIBLE BY DEFAULT. .reveal only
   becomes a hidden entrance state when JS has confirmed it can drive the
   reveal (html.js + IntersectionObserver) AND motion is allowed — set via
   the `.js-reveal` class the script adds. With no JS, a failed observer, or
   reduced motion, every .reveal stays fully visible. Nothing is ever
   permanently opacity:0. */
.reveal { opacity: 1; transform: none; }
html.js-reveal .reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
html.js-reveal .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================ RESPONSIVE */
@media (max-width: 1024px) {
  :root { --t-4xl: 3.25rem; --t-3xl: 2.4rem; }
  /* Tight desktop band (861–1024, where the nav links still show): the wide
     ~700px left-anchored mega panels sit under triggers that now sit a little
     further right in the full-width nav, so the right-most one (Industries)
     would poke a few px past the viewport. Trim the wide mega panel's content
     column slightly here so it stays fully on-screen — still left-anchored
     directly under its trigger, just a touch narrower at this one band. */
  .nav__panel--mega { grid-template-columns: minmax(360px, 480px) 220px; }
  /* Keep chips/inset inside the collage bounds so their desktop negative
     offsets can't clip off-canvas as the hero narrows. */
  .hero__chip--paid { left: clamp(var(--s-1), 0.5vw, var(--s-3)); }
  .hero__inset { right: clamp(var(--s-1), 0.5vw, var(--s-3)); }
  .footer__grid { grid-template-columns: repeat(4, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
  .ind-grid { grid-template-columns: repeat(4, 1fr); }
  .ai-shotwrap { grid-template-columns: 1fr; gap: var(--s-7); }
  .ai-shotwrap .ai-shot { max-width: 240px; }
  /* Pricing: 4 real tiers collapse 4-up → 2-up on tablet */
  .price-grid { grid-template-columns: 1fr 1fr; max-width: 720px; margin-inline: auto; }
}
/* Switch to the hamburger earlier (<=1000): below this the full desktop nav
   (logo + 4 mega-menus + Sign in + Book a demo + Start free trial) no longer
   fits, so .nav__cta would overflow the right edge and the Sign in / Book a
   demo items get pushed out of vertical alignment. */
/* Below the desktop breakpoint the entire nav collapses to logo + burger
   (Jobber-style, 1024px) — links and all CTAs move into the burger menu. */
@media (max-width: 1024px) {
  .nav__links,
  .nav__demo,
  .nav__signin,
  .nav__cta .btn { display: none; }
  .nav__burger { display: inline-flex; }
}
/* Hero keeps its two-column desktop layout (copy + image cluster) well below
   the nav breakpoint, only stacking to a single column at ~900px so the bar
   never leaves a blank right half when the window is merely minimized. */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-9); }
  .hero__art { max-width: 560px; margin-inline: auto; }
}
@media (max-width: 860px) {
  .feature, .feature--flip { grid-template-columns: 1fr; gap: var(--s-7); }
  .feature--flip .feature__media { order: 0; }
  .proof__metrics { grid-template-columns: 1fr 1fr; }
  .metric:nth-child(3)::before, .metric:nth-child(odd)::before { display: none; }
  .trade-tiles { grid-template-columns: 1fr 1fr; }
  .fieldband { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
  .step__line { display: none; }
  /* Keep 2-up at tablet so the 4 tiers stay scannable */
  .price-grid { grid-template-columns: 1fr 1fr; max-width: 560px; margin-inline: auto; }
  .ai-grid { grid-template-columns: 1fr; gap: var(--s-4); max-width: 460px; margin-inline: auto; }
  .tcards { grid-template-columns: 1fr; gap: var(--s-4); max-width: 480px; margin-inline: auto; }
  .ind-grid { grid-template-columns: repeat(3, 1fr); }
  .cta-strip { flex-direction: column; align-items: flex-start; text-align: left; gap: var(--s-5); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  :root { --t-4xl: 2.6rem; --t-3xl: 2rem; --t-2xl: 1.6rem; }
  .wrap { padding-inline: var(--s-5); }
  .section { padding-block: var(--s-9); }
  .hero h1 { letter-spacing: -0.03em; }
  .hero__actions .btn { flex: 1; }

  /* Hero collage on phones: keep the floating chips/inset tucked inside the
     collage bounds so nothing clips off-canvas under overflow:hidden. */
  .hero__inset { width: 116px; right: 2px; bottom: -16px; }
  .hero__chip { font-size: 10px; padding: 0.34rem 0.6rem 0.34rem 0.4rem; }
  .hero__chip--paid { left: 2px; top: 10%; }
  .hero__chip--live { right: 4%; top: -12px; }
  .hero__chip-ico { width: 22px; height: 22px; }

  .proof__metrics { grid-template-columns: 1fr 1fr; }
  .metric { padding: var(--s-5) var(--s-4); }
  .steps { grid-template-columns: 1fr; }
  /* Pricing: 1-up on phones */
  .price-grid { grid-template-columns: 1fr; max-width: 420px; }

  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { justify-content: center; text-align: center; }

  /* New sections collapse to single column on phones */
  .ind-grid { grid-template-columns: 1fr 1fr; }
  .everyfeature { flex-direction: column; gap: var(--s-2); border-radius: var(--r-lg); }
  .ratings { gap: var(--s-4); }
  .store-badge img { height: 48px; }
  .web-badge { height: 48px; padding: 0 14px 0 12px; }
  .web-badge__btm { font-size: 17px; }
  .fieldband { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .cta-strip { padding: var(--s-6); }
  .cta-strip__actions .btn { width: 100%; }
}

/* Mobile menu sheet */
.msheet { position: fixed; inset: 0; z-index: 200; display: none; }
.msheet.is-open { display: block; }
.msheet__scrim { position: absolute; inset: 0; background: rgba(16,24,21,0.4); backdrop-filter: blur(2px); opacity: 0; transition: opacity .3s var(--ease); }
.msheet.is-open .msheet__scrim { opacity: 1; }
.msheet__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(82vw, 340px); background: var(--surface); box-shadow: var(--e-4); padding: var(--s-5); transform: translateX(100%); transition: transform .35s var(--ease); display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.msheet.is-open .msheet__panel { transform: none; }
.msheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-6); }
.msheet__close { width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--border); display: grid; place-items: center; }
.msheet__close svg { width: 18px; height: 18px; }
.msheet a.nav__link { display: block; font-size: var(--t-lg); padding: var(--s-3) 0; color: var(--text); }
.msheet .btn { margin-top: var(--s-4); }

/* ============================================================ BLOG */
.blog-hero { padding-top: var(--s-10); padding-bottom: var(--s-7); }
.blog-hero .eyebrow { margin-bottom: var(--s-3); }
.blog-hero h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-4xl); line-height: 1.05; letter-spacing: -0.03em; }
.blog-hero p { color: var(--text-soft); font-size: var(--t-lg); max-width: 60ch; margin-top: var(--s-4); }
.postgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); margin-top: var(--s-9); }
.postcard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.postcard:hover { transform: translateY(-3px); box-shadow: var(--e-3); border-color: var(--brand-200); }
.postcard__body { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); flex: 1; }
.postcard__cat { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-700); }
.postcard__title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-lg); line-height: 1.2; letter-spacing: -0.02em; color: var(--text); }
.postcard__excerpt { color: var(--text-soft); font-size: var(--t-sm); line-height: 1.6; }
.postcard__meta { margin-top: auto; padding-top: var(--s-2); color: var(--text-mute); font-size: var(--t-xs); }
.postcard__more { color: var(--brand-700); font-weight: 600; font-size: var(--t-sm); display: inline-flex; align-items: center; gap: 6px; }

/* Article */
.article { max-width: 72ch; margin-inline: auto; padding-top: var(--s-9); }
.article__back { color: var(--text-mute); font-size: var(--t-sm); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--s-6); }
.article__back:hover { color: var(--brand-700); }
.article__cat { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-700); }
.article__title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-3xl); line-height: 1.08; letter-spacing: -0.03em; margin-top: var(--s-3); }
.article__dek { color: var(--text-soft); font-size: var(--t-lg); line-height: 1.5; margin-top: var(--s-4); }
.article__meta { color: var(--text-mute); font-size: var(--t-sm); margin-top: var(--s-4); padding-bottom: var(--s-5); border-bottom: 1px solid var(--border-soft); }
.article__body { margin-top: var(--s-6); color: var(--text); }
.article__body h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-xl); line-height: 1.2; letter-spacing: -0.02em; margin: var(--s-8) 0 var(--s-3); }
.article__body h3 { font-weight: 700; font-size: var(--t-md); margin: var(--s-6) 0 var(--s-2); }
.article__body p { font-size: var(--t-md); line-height: 1.75; margin-bottom: var(--s-4); color: var(--text-soft); }
.article__body ul, .article__body ol { margin: 0 0 var(--s-4) var(--s-5); display: grid; gap: var(--s-2); }
.article__body li { font-size: var(--t-md); line-height: 1.7; color: var(--text-soft); list-style: disc; }
.article__body ol li { list-style: decimal; }
.article__body strong { color: var(--text); font-weight: 700; }
.article__body a { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; }
.article__body blockquote { margin: var(--s-6) 0; padding: var(--s-4) var(--s-5); border-left: 3px solid var(--brand-400); background: var(--brand-50); border-radius: var(--r-sm); color: var(--text); font-style: italic; }
.article__cta { margin: var(--s-9) auto 0; padding: var(--s-7); text-align: center; background: var(--n-50); border: 1px solid var(--border); border-radius: var(--r-lg); }
.article__cta h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-xl); letter-spacing: -0.02em; }
.article__cta p { color: var(--text-soft); margin: var(--s-2) 0 var(--s-5); }
@media (max-width: 860px) { .postgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .postgrid { grid-template-columns: 1fr; } .blog-hero h1 { font-size: var(--t-3xl); } }

/* ============================================================ SUBPAGE HEROS + HUBS (features/industries) */
.pagehero { padding-top: var(--s-10); padding-bottom: var(--s-6); }
.pagehero .eyebrow { margin-bottom: var(--s-3); }
.pagehero h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-4xl); line-height: 1.05; letter-spacing: -0.03em; }
.pagehero__dek { color: var(--text-soft); font-size: var(--t-lg); max-width: 58ch; margin-top: var(--s-4); }
.crumb { color: var(--text-mute); font-weight: 600; font-size: var(--t-sm); display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--s-4); }
.crumb:hover { color: var(--brand-700); }
/* feature hub cards */
.hubgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.hubcard { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-6); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.hubcard:hover { transform: translateY(-3px); box-shadow: var(--e-3); border-color: var(--brand-200); }
.hubcard__ico { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--brand-50); color: var(--brand-600); display: grid; place-items: center; margin-bottom: var(--s-1); }
.hubcard__ico svg { width: 20px; height: 20px; }
.hubcard b { font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); letter-spacing: -0.02em; color: var(--text); }
.hubcard span { color: var(--text-soft); font-size: var(--t-sm); line-height: 1.55; }
.hubcard__more { margin-top: auto; padding-top: var(--s-2); color: var(--brand-700); font-weight: 600; font-size: var(--t-sm); }
/* "more features" strip at the bottom of a feature page */
.morefeatures { border-top: 1px solid var(--border-soft); margin-top: var(--s-9); padding-top: var(--s-8); }
.morefeatures h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-lg); letter-spacing: -0.02em; margin-bottom: var(--s-5); }
.morefeatures__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.morefeatures__grid a { padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); font-weight: 600; font-size: var(--t-sm); color: var(--text); transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.morefeatures__grid a:hover { border-color: var(--brand-300); color: var(--brand-700); background: var(--brand-50); }
@media (max-width: 860px) { .hubgrid { grid-template-columns: 1fr 1fr; } .morefeatures__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hubgrid { grid-template-columns: 1fr; } .pagehero h1 { font-size: var(--t-3xl); } }

/* ============================================================ QUICKBOOKS band */
.qb-band { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s-8); align-items: center; }
.qb-band__copy .flist { margin-top: var(--s-5); }
.qb-band__copy .btn { margin-top: var(--s-6); }
.qb-sync { position: relative; display: flex; flex-direction: column; gap: var(--s-4); max-width: 440px; margin-inline: auto; }
.qb-sync__card, .qb-sync__qbo { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--e-2); padding: var(--s-5); }
.qb-sync__label { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); }
.qb-sync__row { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-2); }
.qb-sync__row b { font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); }
.qb-sync__row span { color: var(--text-soft); font-size: var(--t-sm); }
.qb-sync__arrow { display: grid; place-items: center; color: var(--brand-600); }
.qb-sync__arrow svg { width: 26px; height: 26px; }
.qb-sync__qbo { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.qb-logo { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); color: var(--text); }
.qb-logo__mark { width: 34px; height: 34px; border-radius: 50%; background: #2CA01C; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: var(--t-sm); letter-spacing: -0.02em; flex-shrink: 0; }
.qb-sync__chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-xs); font-weight: 700; color: #2CA01C; background: rgba(44,160,28,0.10); border: 1px solid rgba(44,160,28,0.25); border-radius: var(--r-pill); padding: 4px 10px; white-space: nowrap; }
.qb-sync__chip svg { width: 13px; height: 13px; }
@media (max-width: 860px) { .qb-band { grid-template-columns: 1fr; gap: var(--s-7); } }