/* ==========================================================================
   FieldGrid: marketing site styles
   ========================================================================== */

:root {
  /* Brand greens */
  --forest-950: #0d1813;   /* pricing table */
  --forest-900: #112713;   /* footer */
  --forest-850: #102b20;   /* contact form panel */
  --forest-800: #043b20;   /* dark sections */
  --forest-700: #062d1e;   /* active chip */
  --green-700: #2a6b39;    /* connected workspace */
  --green-650: #307f1a;    /* solutions CTA */
  --green-600: #1f8a3c;
  --green-500: #2fbf4a;
  --brand: #3ed33f;        /* logo green */
  --lime: #91f675;         /* primary button / bands */
  --lime-strong: #b5f542;  /* high-emphasis button */
  --mint: #e1ffe7;
  --mint-50: #eef9ef;
  --eyebrow: #2f7d32;

  /* Neutrals */
  --ink: #141a16;
  --ink-2: #1f1f1f;
  --text: #3d4440;
  --muted: #69716c;
  --line: #e2e5e2;
  --surface: #f7f7f7;
  --surface-2: #f0f1ef;
  --white: #fff;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 20, .06), 0 1px 3px rgba(16, 24, 20, .08);
  --shadow: 0 10px 30px -10px rgba(16, 24, 20, .25);
  --shadow-lg: 0 24px 60px -20px rgba(6, 30, 18, .45);

  --container: 1312px;
  --gutter: clamp(16px, 4.4vw, 64px);
  --section-y: clamp(64px, 9vw, 120px);
  --header-h: 72px;

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  overflow-x: clip;
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--green-500); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -48px; z-index: 200; padding: 10px 16px; background: var(--ink); color: #fff; border-radius: var(--radius-sm); transition: top .2s; }
.skip-link:focus { top: 12px; }

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

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.stack > * + * { margin-top: var(--stack, 16px); }

/* ---------- Type ---------- */
.eyebrow {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--eyebrow);
  margin-bottom: 16px;
}
.eyebrow--lime { color: var(--lime); }
.eyebrow--light { color: rgba(255, 255, 255, .8); }
.display, .h1, .h2, .h3 { color: var(--ink); font-weight: 700; letter-spacing: -.025em; }
.display { font-size: clamp(40px, 6.2vw, 80px); line-height: 1.04; }
.h1 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.06; }
.h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.1; }
.h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; letter-spacing: -.015em; }
.lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--text); }
.small { font-size: 16px; }
.muted { color: var(--muted); }
.on-dark { color: rgba(255, 255, 255, .82); }
.on-dark .display, .on-dark .h1, .on-dark .h2, .on-dark .h3, .on-dark h3 { color: #fff; }
.text-center { text-align: center; }
.measure { max-width: 620px; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 22px;
  font-size: 16px; font-weight: 500; line-height: 1.2; white-space: nowrap;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-bd); border-radius: 4px;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--lg { min-height: 52px; padding: 14px 26px; font-size: 16px; }
.btn--primary { --btn-bg: var(--lime); --btn-fg: var(--ink); }
.btn--primary:hover { --btn-bg: #a6fa8e; box-shadow: 0 8px 24px -8px rgba(145, 246, 117, .7); }
.btn--accent { --btn-bg: var(--lime-strong); --btn-fg: var(--ink); font-weight: 600; }
.btn--accent:hover { --btn-bg: #c5fb62; }
.btn--dark { --btn-bg: #111; --btn-fg: #fff; font-weight: 600; }
.btn--dark:hover { --btn-bg: #000; }
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); }
.btn--light:hover { --btn-bg: #f1f4f1; }
.btn--outline { --btn-bd: var(--ink); }
.btn--outline:hover { --btn-bg: var(--ink); --btn-fg: #fff; }
.btn--outline-light { --btn-bd: rgba(255, 255, 255, .85); --btn-fg: #fff; }
.btn--outline-light:hover { --btn-bg: #fff; --btn-fg: var(--ink); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--eyebrow); }
.link-arrow svg { width: 18px; height: 18px; transition: transform .2s; }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow--lime { color: var(--lime); }

/* ---------- Icons ---------- */
.icon { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ==========================================================================
   Header
   ========================================================================== */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 120; height: 3px; transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); background: linear-gradient(90deg, var(--green-500), var(--lime)); pointer-events: none; }

.announce { background: var(--forest-800); color: rgba(255, 255, 255, .85); font-size: 16px; }
.announce__inner { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; padding-block: 6px; text-align: center; }
.announce strong { color: #fff; }
.announce__tag { padding: 2px 8px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.announce a { display: inline-flex; align-items: center; gap: 6px; color: var(--lime); font-weight: 500; white-space: nowrap; }
.announce a .icon { width: 15px; height: 15px; transition: transform .2s; }
.announce a:hover .icon { transform: translateX(3px); }
@media (max-width: 720px) { .announce__inner > span:nth-child(2) { display: none; } }

.site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
/* Blur lives on a pseudo-element so the fixed mobile panel isn't trapped inside the header. */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .9); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); transition: background-color .25s; }
.site-header.is-scrolled { border-color: rgba(20, 26, 22, .08); box-shadow: 0 10px 30px -18px rgba(6, 30, 18, .35); }
.site-header.is-scrolled::before { background: rgba(255, 255, 255, .94); }
.nav-open .site-header::before { background: #fff; }
.nav { position: relative; display: flex; align-items: center; gap: 28px; height: var(--header-h); transition: height .25s; }
.is-scrolled .nav { height: 64px; }
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { height: 36px; width: auto; transition: transform .3s; }
.logo:hover img { transform: scale(1.03); }
.site-footer .logo img { height: 30px; }

.nav__menu { position: static; display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__pill { position: absolute; top: 50%; left: 0; height: 40px; width: 0; margin-top: -20px; border-radius: 8px; background: var(--mint-50); opacity: 0; pointer-events: none; transition: transform .3s cubic-bezier(.2, .8, .2, 1), width .3s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
.nav__item { position: static; }
.nav__link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; font-size: 16px; font-weight: 500; color: var(--ink-2); border-radius: 8px; transition: color .15s; }
.nav__link:hover, .nav__item.is-open > .nav__link { color: var(--green-600); }
.nav__link .chev { width: 16px; height: 16px; transition: transform .25s; }
.nav__item.is-open .chev { transform: rotate(180deg); }
.nav__link[aria-current="page"] { color: var(--green-600); }
.nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--green-500); }
.has-dropdown .nav__link[aria-current="page"]::after { right: 36px; }
.nav__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav__actions .btn { min-height: 43px; font-size: 16px; }

/* Mega menu */
.mega { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% - 4px); z-index: 2; display: flex; justify-content: center; pointer-events: none; }
.mega__inner {
  display: grid; gap: 8px; width: 100%; max-width: 980px; padding: 14px;
  background: #fff; border: 1px solid rgba(20, 26, 22, .08); border-radius: 18px;
  box-shadow: 0 30px 70px -20px rgba(6, 30, 18, .35), 0 2px 6px rgba(6, 30, 18, .06);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.985); transform-origin: 50% 0;
  transition: opacity .22s ease, transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s;
}
.mega::before { content: ""; position: absolute; inset: -14px 0 auto; height: 18px; }
.nav__item.is-open .mega { pointer-events: auto; }
.nav__item.is-open .mega__inner { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega--product .mega__inner { grid-template-columns: 1.15fr .85fr 1fr; }
.mega--roles .mega__inner { grid-template-columns: 1.6fr 1fr; max-width: 900px; }
.mega--resources .mega__inner { grid-template-columns: 1.2fr 1fr; max-width: 820px; }
.mega__col { padding: 12px; }
.mega__label { margin: 0 0 10px 10px; font-size: 16px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mega__list, .mega__grid, .mega__links, .mega__chips { list-style: none; margin: 0; padding: 0; }
.mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.mega__list a, .mega__grid a { display: flex; gap: 14px; padding: 10px; border-radius: 12px; transition: background-color .15s; }
.mega__list a:hover, .mega__grid a:hover, .mega__list a:focus-visible, .mega__grid a:focus-visible { background: var(--mint-50); }
.mega__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; flex: none; background: var(--mint); color: var(--green-600); transition: background-color .2s, color .2s, transform .25s; }
.mega__icon .icon { width: 19px; height: 19px; }
.mega__list a:hover .mega__icon, .mega__grid a:hover .mega__icon { background: var(--green-600); color: #fff; transform: rotate(-6deg) scale(1.05); }
.mega strong { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.mega strong + span, .mega__list span span, .mega__grid span span { display: block; margin-top: 2px; font-size: 16px; color: var(--muted); line-height: 1.4; }
.mega .tag { padding: 1px 7px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 16px; font-style: normal; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mega__links { display: grid; gap: 2px; }
.mega__links a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 16px; font-weight: 500; color: var(--ink-2); transition: background-color .15s, color .15s, padding-left .2s; }
.mega__links a .icon { width: 17px; height: 17px; color: var(--green-500); }
.mega__links a:hover { background: var(--surface); color: var(--green-600); padding-left: 14px; }
.mega__chips { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 10px; }
.mega__chips a { display: block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 16px; color: var(--text); transition: border-color .15s, color .15s, background-color .15s; }
.mega__chips a:hover { border-color: var(--green-500); color: var(--green-600); background: var(--mint-50); }
.mega__help { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--surface); font-size: 16px; color: var(--muted); transition: background-color .15s; }
.mega__help strong { display: inline; font-size: 16px; margin-right: 6px; }
.mega__help > .icon:first-child { color: var(--green-600); }
.mega__help > .icon:last-child { width: 16px; height: 16px; margin-left: auto; transition: transform .2s; }
.mega__help:hover { background: var(--mint-50); }
.mega__help:hover > .icon:last-child { transform: translateX(3px); }

.mega__feature { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; overflow: hidden; color: rgba(255, 255, 255, .8); background: radial-gradient(400px 200px at 100% 0, rgba(145, 246, 117, .3), transparent 60%), linear-gradient(160deg, #043b20, #0a5b2d); }
.mega__feature strong { color: #fff; font-size: 16px; margin-top: 10px; }
.mega__feature strong + span { color: rgba(255, 255, 255, .75); }
.mega__kicker { margin-top: 10px; font-size: 16px; font-style: normal; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.mega__kicker + strong { margin-top: 0; }
.mega__shot { display: block; overflow: hidden; border-radius: 10px; aspect-ratio: 16 / 9; background: #fff; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5); }
.mega__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.mega__feature--photo .mega__shot img { object-position: 50% 40%; }
.mega__feature:hover .mega__shot img { transform: scale(1.06); }
.mega__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; font-size: 16px; font-weight: 600; color: var(--lime); }
.mega__cta .icon { width: 16px; height: 16px; transition: transform .2s; }
.mega__feature:hover .mega__cta .icon { transform: translateX(4px); }

/* Staggered entrance for menu items */
.mega__list li, .mega__grid li, .mega__links li, .mega__feature { opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .3s ease; }
.nav__item.is-open .mega__list li, .nav__item.is-open .mega__grid li, .nav__item.is-open .mega__links li, .nav__item.is-open .mega__feature { opacity: 1; transform: none; }
.nav__item.is-open li:nth-child(2) { transition-delay: .03s; }
.nav__item.is-open li:nth-child(3) { transition-delay: .06s; }
.nav__item.is-open li:nth-child(4) { transition-delay: .09s; }
.nav__item.is-open li:nth-child(5) { transition-delay: .12s; }
.nav__item.is-open li:nth-child(6) { transition-delay: .15s; }
.nav__item.is-open .mega__feature { transition-delay: .08s; }

.nav__scrim { position: fixed; inset: 0; top: auto; height: 0; }
@media (min-width: 1025px) {
  .nav__scrim { top: 100%; height: 100vh; position: absolute; left: 0; right: 0; background: rgba(6, 20, 12, .25); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; pointer-events: none; z-index: -1; }
  .menu-open .nav__scrim { opacity: 1; visibility: visible; }
}

.nav__toggle { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 10px; align-items: center; justify-content: center; background: var(--surface); }
.nav__toggle span { position: relative; display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); transition: background-color .2s; }
.nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after { top: 6px; }
.nav-open .nav__toggle span { background: transparent; }
.nav-open .nav__toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav__toggle span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1024px) {
  .nav__toggle { display: inline-flex; }
  .nav__pill { display: none; }
  .nav__panel {
    position: fixed; top: var(--panel-top, 112px); right: 0; bottom: 0; left: 0; z-index: 99; overflow-y: auto; overscroll-behavior: contain;
    padding: 8px var(--gutter) 24px; background: #fff;
    display: flex; flex-direction: column; gap: 24px;
    clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .4s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .4s;
  }
  .nav-open .nav__panel { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s; }
  .nav-open, .nav-open body { overflow: hidden; }
  .nav__menu { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .35s; }
  .nav-open .nav__item { opacity: 1; transform: none; }
  .nav-open .nav__item:nth-child(3) { transition-delay: .04s; }
  .nav-open .nav__item:nth-child(4) { transition-delay: .08s; }
  .nav-open .nav__item:nth-child(5) { transition-delay: .12s; }
  .nav-open .nav__item:nth-child(6) { transition-delay: .16s; }
  .nav__link { width: 100%; justify-content: space-between; padding: 18px 4px; font-size: 19px; font-weight: 600; }
  .nav__link[aria-current="page"]::after { display: none; }
  .mega { position: static; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.2, .8, .2, 1); pointer-events: auto; }
  .nav__item.is-open .mega { grid-template-rows: 1fr; }
  .mega__inner { min-height: 0; overflow: hidden; display: block; max-width: none; padding: 0; border: 0; box-shadow: none; border-radius: 0; opacity: 1; visibility: visible; transform: none; transition: none; }
  .mega__col { padding: 0 0 12px; }
  .mega__grid { grid-template-columns: 1fr; }
  .mega__feature, .mega__col + .mega__col .mega__label { display: none; }
  .mega__links { grid-template-columns: 1fr 1fr; }
  .nav__actions { margin: auto 0 0; flex-direction: column; align-items: stretch; }
  .nav__actions .btn { width: 100%; min-height: 52px; }
}
@media (min-width: 1025px) { .nav__panel { display: contents; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--forest-900); color: rgba(255, 255, 255, .82); padding-top: 64px; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.65fr) repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.footer__brand p { max-width: 340px; margin: 22px 0 18px; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .78); }
.footer__contact a { display: block; font-size: 16px; color: rgba(255, 255, 255, .88); line-height: 1.7; }
.footer__contact a:hover { color: #fff; }
.footer__cta { display: flex; gap: 12px; margin-top: 20px; }
.footer__cta .btn { min-height: 39px; padding: 8px 16px; font-size: 16px; font-weight: 400; border-radius: 3px; }
.footer__cta .btn--ghost { --btn-bd: rgba(255, 255, 255, .22); --btn-fg: #fff; }
.footer__cta .btn--ghost:hover { --btn-bg: rgba(255, 255, 255, .08); }
.footer__col h2 { margin-bottom: 26px; font-size: 16px; font-weight: 600; color: #fff; }
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.footer__col a { font-size: 16px; color: rgba(255, 255, 255, .82); transition: color .15s; }
.footer__col a:hover { color: var(--lime); }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-block: 36px 40px; border-top: 1px solid rgba(120, 140, 200, .28); font-size: 16px; color: rgba(255, 255, 255, .7); }
.footer__legal { display: flex; gap: 18px; font-size: 16px; }
.footer__legal a { color: rgba(255, 255, 255, .7); }
.footer__legal a:hover { color: #fff; }
@media (max-width: 960px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

/* ==========================================================================
   Shared components
   ========================================================================== */
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: 48px; }
.section-head .lead { max-width: 480px; }
@media (max-width: 860px) { .section-head { grid-template-columns: 1fr; } }

/* Image card on mint background (solutions) */
.mint-card { background: var(--mint); border-radius: var(--radius); overflow: hidden; display: grid; place-items: center; }

/* Metric rows (solutions) */
.metrics { margin-top: 36px; border-top: 0; }
.metrics__row { display: flex; justify-content: space-between; gap: 24px; padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--ink-2); }
.metrics__row dd { color: var(--green-650); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Full-bleed CTA band */
.cta-band { padding-block: clamp(64px, 8vw, 112px); }
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; padding-inline: clamp(0px, 3vw, 48px); }
.cta-band h2 { max-width: 720px; }
.cta-band--green { background: var(--green-650); }
.cta-band--green h2 { color: #fff; }
.cta-band--lime { background: var(--lime); }
.cta-band .btn { min-height: 66px; padding-inline: 52px; font-size: 18px; border-radius: 4px; }

/* Photo CTA (home) */
.photo-cta { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 460px; padding: 96px var(--gutter); text-align: center; color: #fff; overflow: hidden; }
.photo-cta__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: blur(1.5px); transform: scale(1.03); }
.photo-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 20, 14, .55), rgba(10, 20, 14, .7)); }
.photo-cta h2 { color: #fff; margin-bottom: 28px; }
.photo-cta .btn-row { justify-content: center; }
.photo-cta p { margin-top: 20px; font-size: 16px; color: rgba(255, 255, 255, .85); }

/* Case-study banner (home + resources) */
.case-banner { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: 430px; padding: clamp(40px, 5vw, 64px); border-radius: var(--radius); background: #14261b; color: rgba(255, 255, 255, .82); }
.case-banner__img { position: absolute; inset: 0 0 0 auto; z-index: -2; width: min(62%, 820px); height: 100%; object-fit: cover; }
.case-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #14261b 38%, rgba(20, 38, 27, .82) 58%, rgba(20, 38, 27, .25) 100%); }
.case-banner__body { max-width: 640px; }
.case-banner h2, .case-banner h3 { color: #fff; margin-bottom: 18px; }
.case-banner p { font-size: 17px; margin-bottom: 24px; }
@media (max-width: 760px) {
  .case-banner { align-items: flex-end; min-height: 520px; }
  .case-banner__img { width: 100%; }
  .case-banner::before { background: linear-gradient(0deg, #14261b 45%, rgba(20, 38, 27, .55)); }
}

/* Feature grid with small icons */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 28px; }
.feature-grid .icon { width: 22px; height: 22px; color: var(--green-500); margin-bottom: 14px; }
.feature-grid h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.feature-grid p { font-size: 16px; color: var(--muted); line-height: 1.5; }
@media (max-width: 640px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ==========================================================================
   HOME
   ========================================================================== */
.hero-home { position: relative; overflow: hidden; color: rgba(255, 255, 255, .85); background: linear-gradient(160deg, #003517 0%, #02542a 45%, #0b9a3d 100%); }
.hero-home__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; min-height: 640px; padding-block: 80px; }
.hero-home h1 { color: #fff; font-size: clamp(38px, 4.4vw, 60px); line-height: 1.12; letter-spacing: -.02em; margin-bottom: 24px; }
.hero-home .lead { color: rgba(255, 255, 255, .85); max-width: 560px; margin-bottom: 36px; }
.hero-proof { list-style: none; padding: 0; margin: 44px 0 0; display: grid; gap: 12px; font-size: 16px; }
.hero-proof li { display: flex; align-items: center; gap: 12px; }
.hero-proof strong { color: #fff; font-weight: 600; min-width: 84px; }
.hero-proof span { color: rgba(255, 255, 255, .6); }
.hero-proof .tick { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: rgba(255, 255, 255, .85); color: var(--forest-800); }
.hero-proof .tick svg { width: 12px; height: 12px; stroke-width: 3; }

.hero-home__visual { position: relative; align-self: stretch; min-height: 520px; }
.hero-frame { position: absolute; top: 4%; left: 0; right: 9%; padding: 22px; border-radius: 10px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px); box-shadow: var(--shadow-lg); z-index: 2; }
.hero-frame img { width: 100%; border-radius: 6px; aspect-ratio: 532 / 312; object-fit: cover; }
.hero-crew { position: absolute; right: calc(var(--gutter) * -1 - max(0px, (100vw - var(--container) - var(--gutter) * 2) / 2)); bottom: -80px; width: 58%; height: 58%; object-fit: cover; z-index: 1; }
.hero-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; color: var(--ink); border-radius: 10px; box-shadow: var(--shadow); font-size: 13px; font-weight: 600; line-height: 1.25; animation: float 6s ease-in-out infinite; }
.hero-chip small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.hero-chip .dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mint); color: var(--green-600); }
.hero-chip .dot svg { width: 16px; height: 16px; }
.hero-chip--a { left: -28px; bottom: 26%; }
.hero-chip--b { right: 2%; top: -2%; animation-delay: -3s; }
@keyframes float { 50% { transform: translateY(-8px); } }

@media (max-width: 960px) {
  .hero-home__grid { grid-template-columns: 1fr; min-height: 0; padding-block: 64px 0; }
  .hero-home__visual { min-height: 0; aspect-ratio: 1 / .95; }
  .hero-frame { right: 6%; }
  .hero-crew { right: calc(var(--gutter) * -1); bottom: 0; }
  .hero-chip--a { left: 0; }
}

/* Pain points */
.pain { background: var(--surface); }
.pain__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.pain__img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; border-radius: var(--radius-sm); }
.pain__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--line); gap: 1px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.pain-card { position: relative; display: flex; flex-direction: column; min-height: 280px; padding: 28px 24px 24px; background: #fff; transition: background-color .2s; }
.pain-card:hover { background: var(--mint-50); }
.pain-card .icon { width: 26px; height: 26px; color: var(--green-500); margin-bottom: 26px; }
.pain-card h3 { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 10px; letter-spacing: -.01em; }
.pain-card p { font-size: 16px; color: var(--muted); line-height: 1.55; max-width: 230px; }
.pain-card .arrow { margin-top: auto; align-self: flex-end; width: 20px; height: 20px; color: var(--ink); opacity: .7; transition: transform .2s, opacity .2s; }
.pain-card:hover .arrow { transform: translate(3px, -3px); opacity: 1; }
@media (max-width: 860px) { .pain__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .pain__cards { grid-template-columns: 1fr; } .pain-card { min-height: 0; } .pain-card .arrow { margin-top: 16px; } }

/* Connected workspace */
.workspace { background: var(--green-700); color: rgba(255, 255, 255, .82); }
.workspace__head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.workspace__head .eyebrow { color: rgba(255, 255, 255, .85); }
.workspace__head h2 { color: #fff; margin-bottom: 14px; }
.workspace__stage { position: relative; padding: 48px 0 0; }
.workspace__stage::before { content: ""; position: absolute; inset: 56px 0 0; border-radius: var(--radius) var(--radius) 0 0; background: rgba(255, 255, 255, .1); }
.workspace__screen { position: relative; width: min(66%, 840px); margin: -48px auto 0; border-radius: 10px 10px 0 0; overflow: hidden; box-shadow: var(--shadow-lg); background: #fff; }
.workspace__screen img { width: 100%; }
.float-card { position: absolute; z-index: 2; width: min(270px, 30%); padding: 20px; background: #fff; color: var(--ink); border-radius: 8px; border: 4px solid rgba(255, 255, 255, .6); background-clip: padding-box; box-shadow: var(--shadow-lg); transition: transform .35s ease, box-shadow .35s ease, outline-color .35s; outline: 2px solid transparent; outline-offset: 2px; }
.float-card .sq { width: 22px; height: 22px; border-radius: 4px; background: var(--mint); color: var(--green-600); display: grid; place-items: center; margin-bottom: 14px; }
.float-card .sq svg { width: 14px; height: 14px; }
.float-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; letter-spacing: -.01em; }
.float-card p { font-size: 13px; color: var(--muted); line-height: 1.5; }
.float-card--1 { left: 9%; top: 26%; }
.float-card--2 { left: 35%; bottom: 6%; }
.float-card--3 { right: 7%; top: 34%; }
.float-card.is-active { transform: translateY(-6px) scale(1.03); outline-color: var(--lime); }
.workspace__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.ws-tab { position: relative; text-align: left; padding: 24px 20px 26px; border-radius: 6px; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .82); transition: background-color .2s; overflow: hidden; }
.ws-tab::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--lime); transition: width .4s ease; }
.ws-tab:hover { background: rgba(255, 255, 255, .17); }
.ws-tab[aria-selected="true"] { background: rgba(255, 255, 255, .2); }
.ws-tab[aria-selected="true"]::before { width: 50%; }
.ws-tab .sq { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 4px; background: rgba(255, 255, 255, .85); color: var(--green-700); margin-bottom: 16px; }
.ws-tab .sq svg { width: 15px; height: 15px; }
.ws-tab h3 { font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.ws-tab p { font-size: 16px; line-height: 1.5; }
.workspace__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-top: 32px; }
.workspace__foot small { display: block; font-size: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.workspace__foot strong { color: #fff; font-weight: 600; }
@media (max-width: 960px) {
  .workspace__screen { width: 100%; margin-top: 0; border-radius: 10px; }
  .workspace__stage { padding: 0; }
  .workspace__stage::before { display: none; }
  .float-card { position: static; width: auto; border: 0; margin-top: 12px; }
  .workspace__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .workspace__tabs { grid-template-columns: 1fr; }
}
@media (max-width: 700px) { .workspace__cards { grid-template-columns: 1fr; } }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.step { display: flex; flex-direction: column; padding: 20px 16px 24px; background: var(--surface); border-radius: var(--radius-sm); transition: transform .25s, box-shadow .25s; }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.step__num { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; color: var(--green-500); }
.step__num::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.step h3 { font-size: 17px; font-weight: 600; color: var(--ink); margin: 4px 0 16px; min-height: 2.6em; line-height: 1.3; }
.step img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; mix-blend-mode: multiply; }
.step p { margin-top: 18px; font-size: 16px; color: var(--muted); line-height: 1.55; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } .step h3 { min-height: 0; } }

/* AI */
.ai { background: var(--mint-50); }
.ai__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.ai__cards { display: grid; gap: 20px; }
.ai-card { display: grid; grid-template-columns: minmax(0, 1fr) 200px; align-items: center; gap: 20px; padding: 24px 24px 24px 28px; background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.ai-card h3 { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.ai-card h3 .badge { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--green-600); color: #fff; }
.ai-card h3 .badge svg { width: 15px; height: 15px; }
.ai-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 16px; color: var(--muted); }
.ai-card li { display: flex; gap: 8px; }
.ai-card li::before { content: "•"; color: var(--green-500); }
@media (max-width: 960px) { .ai__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ai-card { grid-template-columns: 1fr; } }

/* Mini device mockups (pure CSS) */
.mock-phone { justify-self: center; width: 120px; height: 200px; padding: 10px 8px; border-radius: 22px; background: #fff; border: 5px solid #1d2420; box-shadow: var(--shadow); transform: rotate(8deg); display: flex; flex-direction: column; gap: 6px; position: relative; }
.mock-phone::before { content: ""; width: 34px; height: 5px; border-radius: 4px; background: #1d2420; align-self: center; margin-bottom: 4px; }
.mock-row { display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 5px; background: var(--surface); }
.mock-row i { width: 9px; height: 9px; border-radius: 50%; background: var(--green-500); flex: none; }
.mock-row b { height: 4px; flex: 1; border-radius: 2px; background: #d5dbd6; }
.mock-row.is-photo { height: 34px; background: linear-gradient(135deg, #8aa39a, #3a5048); }
.mock-btn { margin-top: auto; height: 16px; border-radius: 4px; background: var(--green-600); }
.mock-monitor { justify-self: center; width: 190px; }
.mock-monitor__screen { aspect-ratio: 16 / 10; padding: 8px; border-radius: 6px; background: #fff; border: 5px solid #c8cfca; box-shadow: var(--shadow); display: grid; grid-template-columns: 26px 1fr; gap: 6px; }
.mock-monitor__side { border-radius: 3px; background: var(--surface); }
.mock-monitor__main { display: grid; grid-template-rows: auto 1fr; gap: 5px; }
.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.mock-kpis span { height: 14px; border-radius: 3px; background: var(--mint); }
.mock-bars { display: flex; align-items: flex-end; gap: 4px; padding: 4px; border-radius: 3px; background: var(--surface); }
.mock-bars span { flex: 1; border-radius: 2px 2px 0 0; background: var(--green-500); }
.mock-monitor__stand { width: 40px; height: 16px; margin: 0 auto; background: linear-gradient(#c8cfca, #aeb6b0); clip-path: polygon(30% 0, 70% 0, 90% 100%, 10% 100%); }

/* Before / after */
.before-after { background: var(--forest-800); color: rgba(255, 255, 255, .82); }
.ba__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.ba__grid h2 { color: #fff; margin-bottom: 20px; }
.ba__grid .lead { color: rgba(255, 255, 255, .82); margin-bottom: 32px; max-width: 440px; font-size: 16px; }
.ba__cards { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ba-card { display: flex; flex-direction: column; min-height: 340px; padding: 24px; border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); }
.ba-card h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 36px; }
.ba-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; font-size: 16px; }
.ba-card li { display: flex; align-items: center; gap: 10px; }
.ba-card li .icon { width: 16px; height: 16px; opacity: .6; }
.ba-card li s { text-decoration-color: rgba(0, 0, 0, .25); }
.ba-card > p { margin-top: auto; font-size: 16px; line-height: 1.5; }
.ba-card--after { background: var(--mint); }
.ba-hub { position: relative; flex: 1; display: grid; place-items: center; min-height: 170px; margin: -12px 0 16px; }
.ba-hub__core { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); z-index: 1; }
.ba-hub__core svg { width: 38px; height: 38px; }
.ba-hub__ring { position: absolute; width: 150px; height: 150px; border: 1px dashed rgba(31, 138, 60, .35); border-radius: 50%; animation: spin 40s linear infinite; }
.ba-hub__ring span { position: absolute; display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; color: var(--green-600); box-shadow: var(--shadow-sm); animation: spin 40s linear infinite reverse; }
.ba-hub__ring span svg { width: 14px; height: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }
.ba-arrow { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; display: grid; place-items: center; border-radius: 50%; background: var(--forest-800); color: #fff; border: 3px solid var(--forest-800); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); z-index: 2; }
.ba-arrow svg { width: 16px; height: 16px; }
@media (max-width: 960px) { .ba__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ba__cards { grid-template-columns: 1fr; } .ba-arrow { transform: rotate(90deg); } .ba-card { min-height: 280px; } }

/* Jobsite conditions */
.jobsite__grid { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: center; }
.jobsite__img { width: 100%; aspect-ratio: 404 / 500; object-fit: cover; border-radius: var(--radius-sm); }
.jobsite__grid .lead { font-size: 16px; color: var(--muted); margin: 16px 0 40px; max-width: 520px; }
@media (max-width: 860px) { .jobsite__grid { grid-template-columns: 1fr; } .jobsite__img { aspect-ratio: 4 / 3; } }

/* Integrations */
.integrations__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.integrations__grid .lead { font-size: 16px; color: var(--muted); margin: 18px 0 24px; max-width: 460px; }
.logo-wall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; max-width: 520px; justify-self: end; width: 100%; }
.logo-tile { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; background: #fafafa; box-shadow: inset 0 0 0 1px #f0f0f0; transition: transform .2s, box-shadow .2s; }
.logo-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); background: #fff; }
.logo-tile svg { width: 44%; height: 44%; }
.logo-tile--more { font-size: 16px; color: var(--muted); }
@media (max-width: 860px) { .integrations__grid { grid-template-columns: 1fr; } .logo-wall { justify-self: start; } }

/* ==========================================================================
   PRODUCT
   ========================================================================== */
.hero-product { background: radial-gradient(1200px 500px at 85% -10%, rgba(145, 246, 117, .25), transparent 60%), linear-gradient(170deg, #041f12, #043b20 55%, #0a5b2d); color: rgba(255, 255, 255, .82); padding-top: clamp(64px, 8vw, 112px); overflow: hidden; }
.hero-product__head { max-width: 880px; margin: 0 auto; text-align: center; }
.hero-product h1 { color: #fff; margin-bottom: 22px; }
.hero-product .lead { color: rgba(255, 255, 255, .82); margin: 0 auto 32px; max-width: 640px; }
.hero-product .btn-row { justify-content: center; }
.hero-product__shot { position: relative; max-width: 980px; margin: 64px auto 0; }
.hero-product__shot > img { width: 100%; border-radius: 12px 12px 0 0; box-shadow: 0 -20px 80px -20px rgba(145, 246, 117, .35); }
.hero-product__shot .float-card { width: 250px; }
.hero-product__shot .float-card--1 { left: -6%; top: 22%; }
.hero-product__shot .float-card--3 { right: -6%; top: 46%; }
@media (max-width: 1100px) { .hero-product__shot .float-card { display: none; } }

.anchor-bar { position: sticky; top: 63px; z-index: 50; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.anchor-bar ul { display: flex; gap: 8px; overflow-x: auto; list-style: none; margin: 0; padding: 12px 0; scrollbar-width: none; }
.anchor-bar ul::-webkit-scrollbar { display: none; }
.anchor-bar a { display: block; padding: 8px 16px; border-radius: 999px; font-size: 16px; font-weight: 500; white-space: nowrap; color: var(--text); transition: background-color .15s, color .15s; }
.anchor-bar a:hover { background: var(--surface); }
.anchor-bar a.is-active { background: var(--forest-700); color: #fff; }

.modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.module { padding: 28px; border-radius: var(--radius); background: var(--surface); transition: background-color .2s, transform .2s; }
.module:hover { background: var(--mint-50); transform: translateY(-3px); }
.module__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: #fff; color: var(--green-600); box-shadow: var(--shadow-sm); margin-bottom: 22px; }
.module h3 { font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.module p { font-size: 16px; color: var(--muted); line-height: 1.55; }
.module ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; font-size: 16px; color: var(--text); }
.module li { display: flex; gap: 8px; align-items: flex-start; }
.module li svg { width: 16px; height: 16px; margin-top: 3px; color: var(--green-500); stroke-width: 2.4; }
@media (max-width: 960px) { .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .modules { grid-template-columns: 1fr; } }

.alex { background: var(--forest-800); color: rgba(255, 255, 255, .82); }
.alex__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.alex h2 { color: #fff; margin-bottom: 20px; }
.alex .lead { color: rgba(255, 255, 255, .82); margin-bottom: 32px; }
.alex__list { list-style: none; padding: 0; margin: 0 0 36px; display: grid; gap: 18px; }
.alex__list li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; }
.alex__list .ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: rgba(145, 246, 117, .14); color: var(--lime); }
.alex__list .ic svg { width: 18px; height: 18px; }
.alex__list strong { display: block; color: #fff; font-weight: 600; }
.alex__list span { font-size: 16px; }
.chat { padding: 20px; border-radius: var(--radius-lg); background: #fff; color: var(--ink); box-shadow: var(--shadow-lg); }
.chat__head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.chat__avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--green-600); color: #fff; font-weight: 700; }
.chat__head strong { display: block; font-size: 16px; }
.chat__head small { font-size: 16px; color: var(--green-600); }
.chat__msgs { display: grid; gap: 12px; }
.msg { max-width: 86%; padding: 12px 14px; border-radius: 12px; font-size: 16px; line-height: 1.5; }
.msg--user { justify-self: end; background: var(--forest-700); color: #fff; border-bottom-right-radius: 4px; }
.msg--ai { background: var(--surface); border-bottom-left-radius: 4px; }
.msg--ai ul { margin: 8px 0 0; padding-left: 18px; }
.msg__actions { display: flex; gap: 8px; margin-top: 12px; }
.msg__actions span { padding: 6px 12px; border-radius: 6px; font-size: 16px; font-weight: 600; background: var(--lime); }
.msg__actions span + span { background: #fff; border: 1px solid var(--line); font-weight: 500; }
.chat__input { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 16px; color: var(--muted); }
.chat__input svg { margin-left: auto; width: 18px; height: 18px; color: var(--green-600); }
@media (max-width: 960px) { .alex__grid { grid-template-columns: 1fr; } }

.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.trust > div { padding: 28px 24px; background: #fff; }
.trust .icon { color: var(--green-600); margin-bottom: 16px; }
.trust h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.trust p { font-size: 16px; color: var(--muted); line-height: 1.5; }
@media (max-width: 860px) { .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .trust { grid-template-columns: 1fr; } }

/* ==========================================================================
   SOLUTIONS
   ========================================================================== */
.hero-photo { position: relative; isolation: isolate; overflow: hidden; color: #fff; min-height: 606px; display: flex; align-items: center; }
.hero-photo__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.hero-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(31, 138, 60, .92) 0%, rgba(31, 138, 60, .7) 40%, rgba(20, 60, 120, .25) 100%), linear-gradient(0deg, rgba(31, 138, 60, .5), transparent 50%); }
.hero-photo__body { padding-block: 96px; max-width: 840px; }
.hero-photo .eyebrow { color: #fff; font-size: 16px; letter-spacing: .02em; font-weight: 500; }
.hero-photo h1 { color: #fff; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.05; letter-spacing: -.02em; margin-bottom: 32px; }
.hero-photo .lead { color: rgba(255, 255, 255, .92); max-width: 620px; margin-bottom: 40px; font-size: clamp(17px, 1.4vw, 20px); }
.hero-photo .btn { min-height: 53px; font-size: 17px; }

.role { padding-block: clamp(56px, 7vw, 100px); }
.role__grid { display: grid; grid-template-columns: minmax(0, 540fr) minmax(0, 676fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.role--flip .role__grid { grid-template-columns: minmax(0, 676fr) minmax(0, 540fr); }
.role--flip .mint-card { order: 2; }
.role .mint-card { aspect-ratio: 540 / 460; }
.role .mint-card img { width: 100%; height: 100%; object-fit: cover; }
.role .eyebrow { font-size: 16px; letter-spacing: .02em; font-weight: 600; }
.role h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -.02em; color: var(--ink); margin-bottom: 28px; }
.role .lead { color: var(--muted); font-size: 18px; }
@media (max-width: 860px) {
  .role__grid, .role--flip .role__grid { grid-template-columns: 1fr; }
  .role--flip .mint-card { order: 0; }
}

/* ==========================================================================
   RESOURCES
   ========================================================================== */
.hero-resources { background: linear-gradient(160deg, #2c8f3c 0%, #5aa340 45%, #c3c84b 100%); color: rgba(255, 255, 255, .9); padding-block: 80px; }
.hero-resources .eyebrow { color: var(--lime); font-size: 16px; letter-spacing: .02em; }
.hero-resources h1 { color: #fff; font-size: clamp(40px, 5vw, 72px); line-height: 1.05; letter-spacing: -.02em; margin-bottom: 56px; }
.featured { display: grid; grid-template-columns: minmax(0, 660fr) minmax(0, 564fr); gap: 56px; align-items: center; }
.featured img { width: 100%; aspect-ratio: 660 / 520; object-fit: cover; border-radius: var(--radius); }
.featured .eyebrow { color: var(--lime); font-size: 16px; letter-spacing: .02em; text-transform: uppercase; }
.featured h2 { color: #fff; font-size: clamp(28px, 3vw, 42px); line-height: 1.12; letter-spacing: -.02em; margin-bottom: 24px; }
.featured p { font-size: 17px; margin-bottom: 18px; }
.featured .meta { font-size: 16px; color: rgba(255, 255, 255, .85); margin-bottom: 28px; }
.featured .btn { --btn-bg: var(--lime-strong); font-weight: 600; font-size: 16px; min-height: 52px; }
@media (max-width: 860px) { .featured { grid-template-columns: 1fr; gap: 32px; } }

.filters { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 42px; }
.chip { padding: 12px 27px; border-radius: 6px; background: var(--surface-2); font-size: 20px; color: var(--ink-2); transition: background-color .15s, color .15s; }
.chip:hover { background: #e4e8e3; }
.chip[aria-pressed="true"] { background: var(--forest-700); color: #fff; }
@media (max-width: 640px) { .chips-scroll { overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } .filters { flex-wrap: nowrap; gap: 10px; } .chip { font-size: 16px; padding: 10px 18px; white-space: nowrap; } }

.res-list { display: grid; gap: 42px 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.res-list > .is-wide { grid-column: 1 / -1; }
.res-feature { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: var(--radius); background: var(--surface-2); }
.res-feature__body { padding: clamp(32px, 4vw, 56px); }
.res-feature .eyebrow { font-size: 17px; letter-spacing: 0; text-transform: uppercase; color: #276b3e; }
.res-feature h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.18; letter-spacing: -.02em; color: #14251c; margin-bottom: 28px; }
.res-feature p { font-size: 22px; line-height: 1.55; color: #6b736d; margin-bottom: 28px; max-width: 520px; }
.res-feature .link-arrow { font-size: 21px; color: #276b3e; }
.res-feature img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
@media (max-width: 860px) { .res-feature { grid-template-columns: 1fr; } .res-feature p { font-size: 18px; } .res-feature img { min-height: 280px; } }

.res-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: var(--surface-2); transition: transform .25s, box-shadow .25s; }
.res-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.res-card img { width: 100%; aspect-ratio: 640 / 370; object-fit: cover; }
.res-card__body { padding: 30px 26px 36px; }
.res-card .eyebrow { font-size: 17px; letter-spacing: 0; color: #276b3e; margin-bottom: 20px; }
.res-card h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -.02em; color: #14251c; margin-bottom: 26px; }
.res-card p { font-size: 22px; line-height: 1.5; color: #6b736d; margin-bottom: 22px; }
.res-card .link-arrow { font-size: 21px; color: #276b3e; }
@media (max-width: 760px) { .res-list { grid-template-columns: 1fr; } .res-card p { font-size: 18px; } }

.res-filter-item[hidden] { display: none !important; }
.res-empty { padding: 48px; text-align: center; border-radius: var(--radius); background: var(--surface); color: var(--muted); }

.blog-list { list-style: none; padding: 0; margin: 0; }
.blog-item a { display: grid; grid-template-columns: 235px minmax(0, 1fr) auto; gap: 30px; align-items: center; padding: 28px 0 20px; border-bottom: 1px solid var(--line); }
.blog-item:first-child a { padding-top: 0; }
.blog-item img { width: 235px; aspect-ratio: 235 / 145; object-fit: cover; border-radius: 6px; }
.blog-item h3 { font-size: 24px; font-weight: 600; color: #14251c; letter-spacing: -.01em; line-height: 1.3; margin-bottom: 12px; transition: color .15s; }
.blog-item a:hover h3 { color: #276b3e; }
.blog-item time, .blog-item .meta { font-size: 19px; color: #6b736d; }
.blog-item .go { width: 28px; height: 28px; color: #276b3e; transition: transform .2s; }
.blog-item a:hover .go { transform: translateX(4px); }
@media (max-width: 700px) {
  .blog-item a { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; }
  .blog-item img { width: 110px; }
  .blog-item h3 { font-size: 17px; margin-bottom: 4px; }
  .blog-item .meta { font-size: 16px; }
  .blog-item .go { display: none; }
}

.help-band { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 52px; align-items: center; padding: 56px clamp(24px, 4vw, 56px); border-radius: var(--radius) var(--radius) 0 0; background: var(--lime); color: var(--ink); }
.help-band h2 { font-size: clamp(28px, 2.8vw, 40px); color: #1a1f1b; letter-spacing: -.02em; margin-bottom: 12px; }
.help-band p { font-size: clamp(17px, 1.6vw, 23px); line-height: 1.45; margin-bottom: 16px; }
.help-band .link-arrow { font-size: 20px; color: var(--ink); font-weight: 600; }
.help-band .deco { width: 96px; height: 96px; stroke: #2a6b39; stroke-width: 1.4; fill: none; }
.help-band .deco--book { stroke: rgba(255, 255, 255, .8); }
@media (max-width: 760px) { .help-band { grid-template-columns: 1fr; gap: 20px; } .help-band .deco--book { display: none; } .help-band .deco { width: 64px; height: 64px; } }

/* ==========================================================================
   PRICING
   ========================================================================== */
.page-hero { padding-block: clamp(56px, 7vw, 80px) 56px; }
.page-hero .eyebrow { font-size: 16px; letter-spacing: 0; color: #1f6b1f; }
.page-hero h1 { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.05; letter-spacing: -.02em; color: var(--ink-2); margin-bottom: 30px; max-width: 760px; }
.page-hero .lead { font-size: 20px; color: var(--ink-2); max-width: 620px; }

/* Billing toggle */
.pricing-hero { padding-bottom: 40px; }
.pricing-hero .lead { font-size: 18px; color: var(--muted); margin-bottom: 32px; }
.billing { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.billing__opt { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 16px; font-weight: 600; color: var(--muted); cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.billing__opt[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.billing__opt em { padding: 2px 8px; border-radius: 999px; background: var(--mint); color: var(--green-600); font-size: 16px; font-style: normal; }

/* Plan cards */
.btn--green { --btn-bg: var(--green-600); --btn-fg: #fff; font-weight: 600; }
.btn--green:hover { --btn-bg: #18772f; box-shadow: 0 10px 24px -10px rgba(31, 138, 60, .7); }
.plan-cards-section { padding-bottom: clamp(56px, 7vw, 96px); }
.plan-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column; padding: 32px 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s; }
.plan-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(6, 30, 18, .3); }
.plan-card__badge { position: absolute; top: -13px; left: 28px; padding: 4px 12px; border-radius: 999px; background: var(--green-600); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .02em; }
/* Featured plan: dark forest card, no shadow or glow */
.plan-card--featured { border-color: var(--forest-800); background: var(--forest-800); color: #fff; box-shadow: none; }
.plan-card--featured:hover { box-shadow: none; }
.plan-card--featured .plan-card__badge { background: var(--lime); color: var(--ink); }
.plan-card--featured .plan-card__icon { background: rgba(255, 255, 255, .1); color: var(--lime); }
.plan-card--featured .plan-card__name, .plan-card--featured .plan-card__price .amount, .plan-card--featured .plan-card__list-title { color: #fff; }
.plan-card--featured .plan-card__desc, .plan-card--featured .plan-card__price .per, .plan-card--featured .plan-card__billed { color: rgba(255, 255, 255, .72); }
.plan-card--featured .plan-card__list-title { border-top-color: rgba(255, 255, 255, .16); }
.plan-card--featured .plan-card__list li { color: rgba(255, 255, 255, .9); }
.plan-card--featured .plan-card__list .icon { background: rgba(145, 246, 117, .16); color: var(--lime); }
.plan-card--featured .btn--primary:hover { box-shadow: none; }
.plan-card__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 12px; background: var(--mint); color: var(--green-600); }
.plan-card__icon .icon { width: 22px; height: 22px; }
.plan-card__name { font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.plan-card__desc { font-size: 16px; color: var(--muted); line-height: 1.5; min-height: 3em; }
.plan-card__price { display: flex; align-items: baseline; gap: 8px; margin-top: 28px; }
.plan-card__price .amount { font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.plan-card__price .per { font-size: 16px; color: var(--muted); }
.plan-card__billed { margin: 8px 0 24px; font-size: 16px; color: var(--muted); min-height: 1.5em; }
.plan-card .btn { min-height: 48px; font-size: 16px; }
.plan-card__list-title { margin: 28px 0 14px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 16px; font-weight: 600; color: var(--ink); }
.plan-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.plan-card__list li { display: flex; gap: 10px; font-size: 16px; color: var(--text); line-height: 1.45; }
.plan-card__list .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; padding: 3px; border-radius: 50%; background: var(--mint); color: var(--green-600); stroke-width: 3; }
.plan-includes { list-style: none; margin: 40px 0 0; padding: 20px 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; border: 1px dashed #cfd6d1; border-radius: var(--radius); font-size: 16px; color: var(--text); }
.plan-includes li { display: inline-flex; align-items: center; gap: 8px; }
.plan-includes .icon { width: 18px; height: 18px; color: var(--green-600); }
[data-monthly] { transition: opacity .18s; }
.is-swapping { opacity: 0; }

/* Comparison table (light) */
.compare-section { padding-top: 0; }
.compare-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; margin-bottom: 28px; }
.compare-head h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -.015em; color: var(--ink-2); }
.compare-head p { font-size: 16px; color: var(--muted); }
.compare { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.compare table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.compare .cmp-col-label { width: 28%; }
.compare col.is-featured { background: rgba(225, 255, 231, .35); }
.compare th, .compare td { padding: 20px 24px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 16px; }
.compare th + th, .compare td + td, .compare th + td { border-left: 1px solid var(--line); }
.compare thead th, .compare thead td { position: sticky; top: 64px; z-index: 2; background: #fff; padding-block: 22px; }
.compare thead tr > :first-child { border-top-left-radius: var(--radius-lg); }
.compare thead tr > :last-child { border-top-right-radius: var(--radius-lg); }
.compare thead th { text-align: left; }
.compare thead th.is-featured { background: #f3fbf4; box-shadow: inset 0 3px 0 var(--green-600); }
.cmp-plan, .cmp-price { display: inline-block; }
.compare thead th { white-space: nowrap; }
.compare thead th > span { vertical-align: middle; }
.cmp-plan { font-size: 17px; font-weight: 700; color: var(--ink); }
.cmp-plan em { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--green-600); color: #fff; font-size: 16px; font-style: normal; font-weight: 700; vertical-align: 2px; }
.cmp-price { float: right; font-size: 17px; color: var(--muted); }
.compare tbody th { text-align: left; font-weight: 600; color: var(--ink); }
.compare tbody th small, .compare td small { display: block; margin-top: 2px; font-size: 16px; font-weight: 400; color: var(--muted); line-height: 1.4; }
.compare td { text-align: center; color: var(--text); }
.compare td strong { display: block; font-weight: 600; color: var(--ink); }
.cmp-yes { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--mint); color: var(--green-600); }
.cmp-yes .icon { width: 15px; height: 15px; stroke-width: 3; }
.cmp-no { color: #b8beb9; font-size: 18px; }
.cmp-group th { padding: 28px 24px 12px; background: var(--surface); font-size: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-600); }
.compare tfoot td { padding-block: 24px; border-bottom: 0; }
.compare tfoot .btn { min-height: 46px; font-size: 16px; }
.plans-hint { display: none; }
@media (max-width: 1024px) {
  .plan-cards { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .plan-card__desc { min-height: 0; }
}
@media (max-width: 900px) {
  .compare { overflow-x: auto; contain: paint; -webkit-overflow-scrolling: touch; }
  .compare table { min-width: 640px; }
  .compare .cmp-col-label { width: 150px; }
  .compare thead th, .compare thead td { position: static; }
  .compare th, .compare td { padding: 16px; font-size: 16px; }
  .compare tbody th, .compare tfoot td:first-child, .compare thead td { position: sticky; top: auto; left: 0; z-index: 1; background: #fff; box-shadow: 8px 0 12px -10px rgba(6, 30, 18, .25); }
  .compare .cmp-group th { position: static; background: var(--surface); box-shadow: none; }
  .compare .cmp-group th span { position: sticky; left: 16px; }
  .cmp-price { float: none; display: block; margin-top: 2px; font-size: 16px; }
  .plans-hint { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 16px; font-weight: 600; color: var(--green-600); }
  .plans-hint .icon { width: 14px; height: 14px; animation: hintNudge 1.6s ease-in-out infinite; }
}
@keyframes hintNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .plans-hint .icon { animation: none; } .plan-card { transition: none; } }

.faq__grid { display: grid; grid-template-columns: minmax(0, 430fr) minmax(0, 770fr); gap: 80px; }
.faq .eyebrow { font-size: 16px; letter-spacing: 0; color: #4c8a1f; }
.faq h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -.015em; color: var(--ink-2); }
.faq-list { margin-top: 24px; }
.faq-item { border-bottom: 1px solid #cfd2cf; }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0 12px; list-style: none; cursor: pointer; font-size: 24px; font-weight: 600; color: var(--ink-2); line-height: 1.3; }
.faq-item:first-child summary { padding-top: 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { width: 22px; height: 22px; color: var(--muted); transition: transform .25s; }
.faq-item[open] summary .icon { transform: rotate(45deg); }
.faq-item__body { padding-bottom: 22px; font-size: 18px; color: #4a4f4b; }
@media (max-width: 860px) { .faq__grid { grid-template-columns: 1fr; gap: 16px; } .faq-item summary { font-size: 19px; } .faq-item__body { font-size: 16px; } }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact { padding-block: clamp(48px, 7vw, 112px); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 552fr) minmax(0, 632fr); gap: clamp(40px, 7vw, 96px); align-items: start; }
.contact .eyebrow { font-size: 16px; letter-spacing: 0; color: #1f6b1f; }
.contact h1 { font-size: clamp(40px, 4.6vw, 64px); line-height: 1.05; letter-spacing: -.01em; color: #2b2b2b; margin: 4px 0 36px; }
.contact .lead { font-size: 18px; color: var(--ink-2); margin-bottom: 44px; }
.channels { margin: 0; }
.channels > div { padding: 22px 0; border-top: 1px solid #d5d8d5; }
.channels dt { font-size: 16px; font-weight: 600; color: #2b2b2b; margin-bottom: 4px; }
.channels dd { font-size: 16px; color: var(--ink-2); }
.channels a:hover { color: var(--green-600); text-decoration: underline; }

.form-panel { padding: clamp(28px, 3vw, 40px); border-radius: var(--radius-sm); background: var(--forest-850); color: rgba(255, 255, 255, .85); }
.form-panel h2 { font-size: 24px; font-weight: 600; color: #fff; margin-bottom: 28px; letter-spacing: -.01em; }
.field { margin-bottom: 24px; }
.field label { display: block; font-size: 16px; margin-bottom: 8px; }
.field input, .field textarea, .field select { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid transparent; border-radius: 0; background: #164434; color: #fff; font-size: 16px; transition: border-color .15s, background-color .15s; }
.field textarea { min-height: 138px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 0; border-color: var(--lime-strong); background: #19503d; }
.field.has-error input, .field.has-error textarea { border-color: #ff8b7a; }
.field__error { display: none; margin-top: 6px; font-size: 16px; color: #ffb3a8; }
.field.has-error .field__error { display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.form-panel .btn { min-height: 52px; font-size: 16px; border-radius: 0; margin-top: 2px; }
.form-note { margin-top: 32px; font-size: 16px; color: rgba(255, 255, 255, .55); }
.form-success { display: none; padding: 40px 0 16px; text-align: center; }
.form-success .icon { width: 56px; height: 56px; margin: 0 auto 20px; color: var(--lime-strong); stroke-width: 1.8; }
.form-success h3 { color: #fff; font-size: 24px; margin-bottom: 8px; }
.form-panel.is-sent form { display: none; }
.form-panel.is-sent .form-success { display: block; }
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } }

/* Simple content pages (legal etc.) */
.prose { max-width: 720px; }
.prose h2 { font-size: 22px; color: var(--ink); margin: 36px 0 10px; }
.prose p + p { margin-top: 14px; }


/* ==========================================================================
   MOTION, ILLUSTRATIONS & PRODUCT VISUALS
   ========================================================================== */
:root { --ease-out: cubic-bezier(.2, .8, .2, 1); }

/* Reveal variants + stagger */
.reveal { transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.reveal--left { transform: translateX(-36px); }
.reveal--right { transform: translateX(36px); }
.reveal--scale { transform: scale(.94) translateY(16px); }

/* Split-word headline */
.split-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split-words .w > span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--ease-out); transition-delay: calc(var(--wi) * 55ms + 100ms); }
.split-words.is-visible .w > span { transform: none; }
.no-js .split-words .w > span { transform: none; }
.hl { background: linear-gradient(90deg, var(--lime), #d9ff9a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hl .w > span { background: inherit; -webkit-background-clip: text; background-clip: text; }
.split-words .hl { background: none; color: inherit; }
.split-words .hl .w > span { background: linear-gradient(90deg, var(--lime), #d9ff9a); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Button shine */
.btn--shine { position: relative; overflow: hidden; }
.btn--shine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .65) 50%, transparent 70%); transform: translateX(-120%); animation: shine 4.5s ease-in-out infinite 1.5s; }
@keyframes shine { 0%, 70% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.btn .icon { width: 18px; height: 18px; transition: transform .2s; }
.btn:hover .icon { transform: translateX(3px); }

/* Animated "field grid" background */
.grid-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 64px 64px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 75%); }
.grid-bg span { position: absolute; left: 0; height: 1px; width: 180px; background: linear-gradient(90deg, transparent, var(--lime), transparent); opacity: .7; animation: gridrun 7s linear infinite; }
.grid-bg span:nth-child(1) { top: calc(64px * 2 - 1px); animation-delay: 0s; }
.grid-bg span:nth-child(2) { top: calc(64px * 5 - 1px); animation-delay: -2.4s; animation-duration: 9s; }
.grid-bg span:nth-child(3) { top: calc(64px * 8 - 1px); animation-delay: -4.8s; }
.grid-bg span:nth-child(4), .grid-bg span:nth-child(5) { top: 0; left: calc(64px * 13 - 1px); width: 1px; height: 180px; background: linear-gradient(180deg, transparent, var(--lime), transparent); animation-name: gridrunY; animation-duration: 8s; }
.grid-bg span:nth-child(5) { left: calc(64px * 20 - 1px); animation-delay: -4s; animation-duration: 10s; }
@keyframes gridrun { from { transform: translateX(-200px); } to { transform: translateX(110vw); } }
@keyframes gridrunY { from { transform: translateY(-200px); } to { transform: translateY(900px); } }
.grid-bg--dark { background-image: linear-gradient(rgba(145, 246, 117, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(145, 246, 117, .08) 1px, transparent 1px); -webkit-mask-image: radial-gradient(70% 80% at 50% 50%, #000 20%, transparent 80%); mask-image: radial-gradient(70% 80% at 50% 50%, #000 20%, transparent 80%); }

/* Browser frame */
.browser { position: relative; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 40px 80px -30px rgba(3, 25, 13, .55), 0 0 0 1px rgba(10, 30, 18, .08); }
.browser__bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: #f3f5f3; border-bottom: 1px solid #e4e8e4; }
.browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: #dfe3df; }
.browser__bar i:nth-child(1) { background: #ff6159; } .browser__bar i:nth-child(2) { background: #ffbd2e; } .browser__bar i:nth-child(3) { background: #28c941; }
.browser__bar span { flex: 1; max-width: 340px; margin: 0 auto; padding: 4px 10px; border-radius: 6px; background: #fff; font-size: 11px; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .2s; }
.browser > img { width: 100%; }
.browser__views { position: relative; aspect-ratio: 16 / 9; background: #fff; }
.browser__views img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; opacity: 0; transform: scale(1.02); transition: opacity .6s ease, transform .9s var(--ease-out); }
.browser__views img.is-active { opacity: 1; transform: none; }

/* HOME hero (v2) */
.hero-home { isolation: isolate; }
.hero-home__grid { position: relative; z-index: 1; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); min-height: 680px; padding-block: 88px 96px; }
.hero-stage { position: relative; perspective: 1600px; min-height: 480px; }
.hero-stage__tilt { position: absolute; top: 40px; left: 0; right: -14%; transform-style: preserve-3d; transform: rotateY(calc(-14deg * (1 - var(--tilt, 0)))) rotateX(calc(8deg * (1 - var(--tilt, 0)))) translateZ(0); transform-origin: 0 50%; transition: transform .1s linear; }
.browser--hero { animation: heroIn 1.2s var(--ease-out) both .2s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(40px) scale(.96); } }
.mini-phone { position: absolute; z-index: 3; left: -6%; bottom: -10px; width: 170px; padding: 10px 10px 12px; border-radius: 26px; background: #fff; border: 6px solid #10201a; box-shadow: var(--shadow-lg); animation: heroIn 1.2s var(--ease-out) both .6s, float 7s ease-in-out infinite 2s; }
.mini-phone__notch { width: 50px; height: 6px; margin: 0 auto 10px; border-radius: 6px; background: #10201a; }
.mini-phone__kicker { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-600); }
.mini-phone__title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.mini-phone__photo { height: 78px; overflow: hidden; border-radius: 10px; }
.mini-phone__photo img { width: 100%; height: 100%; object-fit: cover; }
.mini-phone__wave { display: flex; align-items: center; gap: 3px; height: 30px; margin: 8px 0; padding: 0 8px; border-radius: 8px; background: var(--mint-50); }
.mini-phone__wave i { flex: 1; height: 30%; border-radius: 2px; background: var(--green-500); animation: wave 1.1s ease-in-out infinite; }
.mini-phone__wave i:nth-child(2n) { animation-delay: -.3s; } .mini-phone__wave i:nth-child(3n) { animation-delay: -.6s; } .mini-phone__wave i:nth-child(5n) { animation-delay: -.8s; }
@keyframes wave { 50% { height: 80%; } }
.mini-phone__btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; border-radius: 8px; background: var(--green-600); color: #fff; font-size: 12px; font-weight: 600; }
.mini-phone__btn .icon { width: 14px; height: 14px; stroke-width: 3; }
.hero-chip { animation: chipIn .8s var(--ease-out) both, float 6s ease-in-out infinite; }
.hero-chip--b { right: -4%; top: 0; animation-delay: 1s, 1.8s; }
.hero-chip--a { left: auto; right: 6%; bottom: 8%; animation-delay: 1.3s, 2.6s; }
.hero-chip--c { left: 30%; top: 56%; animation-delay: 1.6s, 3.4s; }
@keyframes chipIn { from { opacity: 0; transform: translateY(16px) scale(.9); } }
.hero-chip .dot--dark { background: var(--green-600); color: #fff; }
.hero-chip .dot--warn, .comp-chip .dot--warn { background: #fff3d6; color: #c77700; }
@media (max-width: 960px) {
  .hero-home__grid { grid-template-columns: 1fr; padding-block: 56px 72px; }
  .hero-stage { min-height: 0; aspect-ratio: 16 / 11; }
  .hero-stage__tilt { position: relative; top: 0; right: 0; }
  .mini-phone { width: 120px; left: -2%; bottom: -24px; border-width: 4px; }
  .mini-phone__photo { height: 48px; } .mini-phone__wave { display: none; }
  .hero-chip { font-size: 12px; padding: 8px 10px; } .hero-chip--c { display: none; }
  .hero-chip--b { right: 0; top: -18px; }
}
@media (max-width: 520px) { .hero-chip--a { display: none; } }

/* Stats */
.stats { position: relative; z-index: 2; margin-top: -48px; }
.stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border-radius: 16px; box-shadow: 0 30px 60px -30px rgba(6, 30, 18, .35), 0 0 0 1px rgba(10, 30, 18, .05); padding: 8px; }
.stats__grid { max-width: calc(var(--container) - 0px); }
.stat { padding: clamp(18px, 2.4vw, 26px) clamp(14px, 2vw, 24px); border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat strong { display: block; font-size: clamp(30px, 3.2vw, 44px); font-weight: 700; letter-spacing: -.03em; color: var(--ink); line-height: 1; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.stat strong span { color: var(--green-600); }
.stat > span { font-size: 16px; color: var(--muted); line-height: 1.45; }
@media (max-width: 860px) { .stats__grid { grid-template-columns: 1fr 1fr; } .stat:nth-child(2) { border-right: 0; } .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 860px) { .stats { margin-top: -32px; } }

/* Pain: scattered message bubbles over the photo */
.pain__media { position: relative; overflow: hidden; border-radius: var(--radius-sm); min-height: 360px; }
.pain__media .pain__img { position: absolute; inset: -6% 0; height: 112%; border-radius: 0; }
.scatter { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 30, 16, .05), rgba(4, 30, 16, .45)); }
.scatter span { position: absolute; left: var(--x); top: var(--y); display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .95); box-shadow: var(--shadow); font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; animation: scatter 6s ease-in-out infinite var(--d); }
.scatter .icon { width: 15px; height: 15px; color: #c0392b; }
@keyframes scatter { 0%, 100% { opacity: 0; transform: translateY(10px) scale(.95) rotate(-2deg); } 12%, 70% { opacity: 1; transform: none; } 85% { opacity: 0; transform: translateY(-8px) scale(.97) rotate(2deg); } }
.pain-card { transition: background-color .25s, transform .3s var(--ease-out); }
.pain-card .icon:first-child { transition: transform .4s var(--ease-out); }
.pain-card:hover .icon:first-child { transform: scale(1.15) rotate(-8deg); }

/* Workspace (v2) */
.workspace { position: relative; overflow: hidden; }
.workspace::after { content: ""; position: absolute; width: 900px; height: 900px; left: 50%; top: 30%; margin-left: -450px; border-radius: 50%; background: radial-gradient(closest-side, rgba(145, 246, 117, .18), transparent); pointer-events: none; }
.workspace .container { position: relative; z-index: 1; }
.workspace__screen { width: min(74%, 940px); margin: -48px auto 0; border-radius: 12px; }
.ws-tab::before { display: none; }
.ws-tab__bar { position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: rgba(255, 255, 255, .12); }
.ws-tab__bar::after { content: ""; position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: var(--lime); }
.ws-tab[aria-selected="true"] .ws-tab__bar::after { animation: tabfill var(--tab-ms, 5000ms) linear forwards; }
.is-paused .ws-tab[aria-selected="true"] .ws-tab__bar::after { animation: none; transform: scaleX(1); }
@keyframes tabfill { to { transform: scaleX(1); } }
.float-card { transition: transform .5s var(--ease-out), box-shadow .5s, outline-color .3s, opacity .4s; }
.float-card:not(.is-active) { opacity: .92; }
@media (max-width: 960px) { .workspace__screen { width: 100%; margin-top: 0; } }

/* Steps (v2) with SVG illustrations */
.steps-wrap { position: relative; }
.steps-line { position: absolute; left: 0; right: 0; top: 27px; height: 2px; background: var(--line); border-radius: 2px; }
.steps-line span { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--steps, 0)); background: linear-gradient(90deg, var(--green-500), var(--lime)); border-radius: 2px; }
.step { position: relative; background: var(--surface); }
.step__num { position: relative; z-index: 1; }
.ill { border-radius: 8px; overflow: hidden; }
.ill svg { width: 100%; height: auto; }
.ill-bg { fill: #fff; }
.ill-halo { fill: var(--mint-50); }
.ill-device { fill: #10201a; } .ill-device-light { fill: #fff; stroke: #e1e6e1; stroke-width: 1.5; filter: drop-shadow(0 8px 14px rgba(6, 30, 18, .12)); }
.ill-screen { fill: #fff; } .ill-ink { fill: #1b2a21; } .ill-line { fill: #dbe2dc; } .ill-photo { fill: #cfe9d4; } .ill-photo-hill { fill: #5fbf6e; } .ill-sun { fill: #ffd25e; }
.ill-wave rect { fill: var(--green-500); transform-box: fill-box; transform-origin: center; animation: ill-wave 1s ease-in-out infinite; }
.ill-wave rect:nth-child(2n) { animation-delay: -.25s; } .ill-wave rect:nth-child(3n) { animation-delay: -.5s; }
@keyframes ill-wave { 50% { transform: scaleY(.4); } }
.ill-btn { fill: var(--green-600); }
.ill-chip { fill: #fff; stroke: #e1e6e1; stroke-width: 1.2; filter: drop-shadow(0 6px 10px rgba(6, 30, 18, .12)); }
.ill-dot { fill: var(--green-500); } .ill-dotsq { fill: var(--lime); }
.ill-tick { fill: none; stroke: var(--green-600); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ill-stroke { fill: none; stroke: var(--green-600); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ill-float { animation: ill-float 5s ease-in-out infinite; }
.ill-float--b { animation-delay: -1.6s; } .ill-float--c { animation-delay: -3.2s; }
@keyframes ill-float { 50% { transform: translateY(-6px); } }
.ill-flow { fill: none; stroke: #cfe0d2; stroke-width: 2; stroke-dasharray: 5 6; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -22; } }
.ill-pulse { fill: var(--green-500); }
.ill-track { fill: #e8eee9; } .ill-fill { fill: var(--green-500); transform-box: fill-box; transform-origin: left; animation: ill-fill 3.5s var(--ease-out) infinite; }
@keyframes ill-fill { 0% { transform: scaleX(.2); } 60%, 100% { transform: scaleX(1); } }
.ill-tag { fill: var(--mint); } .ill-tag--alt { fill: #fff3d6; }
.ill-badge { fill: var(--green-600); }
.ill-spark { transform-box: fill-box; transform-origin: center; animation: spin 8s linear infinite; }
.ill-rowbg { fill: #f6f8f6; }
.ill-check { fill: #e3e8e4; transition: fill .3s; }
.ill-tickw { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12; stroke-dashoffset: 12; }
.is-visible .ill-row .ill-check { animation: ill-checkfill 6s infinite; }
.is-visible .ill-row .ill-tickw { animation: ill-tick 6s infinite; }
.ill-row--2 .ill-check, .ill-row--2 .ill-tickw { animation-delay: .7s !important; }
.ill-row--3 .ill-check, .ill-row--3 .ill-tickw { animation-delay: 1.4s !important; }
@keyframes ill-checkfill { 0%, 8% { fill: #e3e8e4; } 14%, 85% { fill: var(--green-500); } 95%, 100% { fill: #e3e8e4; } }
@keyframes ill-tick { 0%, 10% { stroke-dashoffset: 12; } 18%, 85% { stroke-dashoffset: 0; } 95%, 100% { stroke-dashoffset: 12; } }
.ill-bigtick { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; }
.is-visible .ill-bigtick { animation: ill-bigtick 4s var(--ease-out) infinite .6s; }
@keyframes ill-bigtick { 0% { stroke-dashoffset: 50; } 30%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 50; } }
.ill-orbit { fill: none; stroke: var(--green-500); stroke-width: 1.5; stroke-dasharray: 4 8; opacity: .6; }
.ill-ring { transform-box: fill-box; transform-origin: center; animation: spin 20s linear infinite; }
.ill-approve { fill: var(--lime); }
.ill-cursor { animation: ill-cursor 4s var(--ease-out) infinite; }
@keyframes ill-cursor { 0% { transform: translate(40px, 20px); opacity: 0; } 15% { opacity: 1; } 28% { transform: translate(0, 0); } 32% { transform: translate(0, 0) scale(.92); } 36%, 80% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(40px, 20px); opacity: 0; } }
@media (max-width: 960px) { .steps-line { display: none; } }

/* AI cards with real UI snippets */
.ai-card { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.snip { margin: 0; overflow: hidden; border-radius: 10px; box-shadow: 0 16px 30px -14px rgba(6, 30, 18, .35), 0 0 0 1px rgba(10, 30, 18, .06); transform: perspective(900px) rotateY(-8deg); transition: transform .6s var(--ease-out); }
.ai-card:hover .snip { transform: none; }
.snip img { width: 100%; }
.type-list li { opacity: 0; transform: translateX(-8px); transition: opacity .4s, transform .5s var(--ease-out); }
.is-visible .type-list li { opacity: 1; transform: none; }
.is-visible .type-list li:nth-child(1) { transition-delay: .5s; } .is-visible .type-list li:nth-child(2) { transition-delay: .9s; } .is-visible .type-list li:nth-child(3) { transition-delay: 1.3s; }
.ai-card .badge { animation: pulse-ring 2.4s ease-out infinite; }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(31, 138, 60, .45); } 80%, 100% { box-shadow: 0 0 0 10px rgba(31, 138, 60, 0); } }
@media (max-width: 560px) { .ai-card { grid-template-columns: 1fr; } .snip { transform: none; } }

/* Case study parallax */
.case-banner__img { inset: -18% 0 auto auto; height: 136%; }
.case-banner { transition: transform .5s var(--ease-out); }
.case-banner:hover .link-arrow .icon { transform: translateX(4px); }

/* Before/after polish */
.ba-card--before li { animation: jitter 3s ease-in-out infinite; }
.ba-card--before li:nth-child(2) { animation-delay: -.7s; } .ba-card--before li:nth-child(3) { animation-delay: -1.4s; } .ba-card--before li:nth-child(4) { animation-delay: -2.1s; }
@keyframes jitter { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.ba-arrow { animation: nudge 2s ease-in-out infinite; }
@keyframes nudge { 50% { box-shadow: 0 0 0 6px rgba(145, 246, 117, .25); } }
.ba-hub__core { animation: corepulse 3s ease-in-out infinite; }
@keyframes corepulse { 50% { box-shadow: 0 0 0 10px rgba(31, 138, 60, .12), var(--shadow); } }

/* Jobsite offline-sync illustration */
.sync { position: relative; overflow: hidden; border-radius: var(--radius); min-height: 480px; background: #0e2a1b; }
.sync__photo { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; opacity: .45; filter: grayscale(1) contrast(1.1); }
.sync::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(4, 59, 32, .7), rgba(4, 30, 16, .92)); }
.sync__panel { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 32px; }
.sync__phone { padding: 16px; border-radius: 22px; background: #fff; border: 6px solid #10201a; box-shadow: var(--shadow-lg); }
.sync__status { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 11px; font-weight: 700; }
.sync__signal { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.sync__signal i { width: 3px; border-radius: 1px; background: #cfd6d1; animation: sig 6s infinite; }
.sync__signal i:nth-child(1) { height: 25%; } .sync__signal i:nth-child(2) { height: 50%; } .sync__signal i:nth-child(3) { height: 75%; } .sync__signal i:nth-child(4) { height: 100%; }
@keyframes sig { 0%, 50% { background: #cfd6d1; } 55%, 95% { background: var(--green-500); } }
.sync__label { position: relative; height: 14px; overflow: hidden; }
.sync__label b { display: block; line-height: 14px; animation: label 6s infinite; }
.sync__label .off { color: #c0392b; } .sync__label .on { color: var(--green-600); }
@keyframes label { 0%, 50% { transform: translateY(0); } 55%, 95% { transform: translateY(-14px); } 100% { transform: translateY(0); } }
.sync__title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.sync__queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sync__queue li { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; background: var(--surface); font-size: 12px; color: var(--text); overflow: hidden; }
.sync__ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--mint); color: var(--green-600); }
.sync__ic .icon { width: 13px; height: 13px; }
.sync__queue em { margin-left: auto; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #cfd6d1; border-top-color: var(--green-500); animation: spin 1s linear infinite, done 6s infinite; }
.sync__queue li:nth-child(2) em { animation-delay: 0s, .25s; } .sync__queue li:nth-child(3) em { animation-delay: 0s, .5s; }
@keyframes done { 0%, 55% { border-color: #cfd6d1; border-top-color: var(--green-500); background: transparent; } 62%, 95% { border-color: var(--green-500); background: var(--green-500); } }
.sync__beam { display: grid; gap: 10px; }
.sync__beam span { width: 46px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--lime), transparent); background-size: 200% 100%; opacity: 0; animation: beam 6s infinite; }
.sync__beam span:nth-child(2) { animation-delay: .2s; } .sync__beam span:nth-child(3) { animation-delay: .4s; }
@keyframes beam { 0%, 52% { opacity: 0; background-position: 100% 0; } 58% { opacity: 1; } 80% { opacity: 1; background-position: -100% 0; } 90%, 100% { opacity: 0; } }
.sync__cloud { display: grid; justify-items: center; gap: 4px; padding: 22px 16px; border-radius: 18px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(8px); color: #fff; text-align: center; }
.sync__cloud svg { width: 44px; height: 44px; margin-bottom: 6px; animation: corepulse2 6s infinite; }
@keyframes corepulse2 { 0%, 55% { transform: scale(1); filter: grayscale(.8); opacity: .6; } 65%, 95% { transform: scale(1.1); filter: none; opacity: 1; } }
.sync__cloud strong { font-size: 14px; } .sync__cloud small { font-size: 12px; color: rgba(255, 255, 255, .65); }
@media (max-width: 560px) { .sync__panel { grid-template-columns: 1fr; padding: 20px; } .sync__beam { grid-auto-flow: column; justify-content: center; } .sync__beam span { width: 3px; height: 24px; } .sync { min-height: 620px; } }
@media (min-width: 861px) { .jobsite__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); } }

/* Integrations hub */
.hub { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; justify-self: end; container-type: inline-size; }
.hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub__orbit { fill: none; stroke: #d8e6da; stroke-width: 1.5; stroke-dasharray: 6 8; animation: dash 2s linear infinite; }
.hub__orbit--in { animation-direction: reverse; }
.hub__core { z-index: 2; position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 26%; background: #fff; box-shadow: 0 20px 40px -12px rgba(6, 30, 18, .35), 0 0 0 8px var(--mint-50); animation: corepulse 3s ease-in-out infinite; }
.hub__core svg { width: 52%; height: 52%; }
.hub__ring { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; animation: spin 60s linear infinite; }
.hub__ring--in { animation-direction: reverse; animation-duration: 45s; }
.hub__ring li { --r: 38.5cqw; position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 15%; aspect-ratio: 1; margin: -7.5% 0 0 -7.5%; border-radius: 28%; background: #fff; box-shadow: 0 12px 24px -10px rgba(6, 30, 18, .3), 0 0 0 1px rgba(10, 30, 18, .05); transform: rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a))); }
.hub__ring--in li { --r: 23cqw; width: 12%; margin: -6% 0 0 -6%; }
.hub__ring li svg { width: 52%; height: 52%; animation: spin 60s linear infinite reverse; }
.hub__ring--in li svg { animation-direction: normal; animation-duration: 45s; }
@media (max-width: 860px) { .hub { justify-self: center; } }

/* Final CTA */
.final-cta { position: relative; isolation: isolate; overflow: hidden; padding: clamp(96px, 12vw, 160px) 0; text-align: center; color: rgba(255, 255, 255, .85); background: radial-gradient(60% 80% at 50% 110%, rgba(145, 246, 117, .28), transparent 70%), linear-gradient(180deg, #062d1e, #043b20); }
.final-cta__body { position: relative; z-index: 2; }
.final-cta__mark { width: 56px; height: 56px; margin: 0 auto 24px; filter: drop-shadow(0 10px 30px rgba(145, 246, 117, .4)); animation: float 6s ease-in-out infinite; }
.final-cta h2 { color: #fff; margin-bottom: 28px; }
.final-cta .btn-row { justify-content: center; }
.final-cta p { margin-top: 18px; font-size: 16px; }
.final-cta__shot { position: absolute; z-index: 1; width: 34%; max-width: 520px; border-radius: 12px; box-shadow: var(--shadow-lg); opacity: .22; -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent); mask-image: linear-gradient(90deg, #000 40%, transparent); }
.final-cta__shot--r { -webkit-mask-image: linear-gradient(270deg, #000 40%, transparent); mask-image: linear-gradient(270deg, #000 40%, transparent); }
.final-cta__shot--l { left: -8%; top: 14%; transform: rotate(-8deg); }
.final-cta__shot--r { right: -8%; bottom: 10%; transform: rotate(7deg); }
@media (max-width: 860px) { .final-cta__shot { display: none; } }

/* PRODUCT hero + tour */
.hero-product { position: relative; isolation: isolate; }
.hero-product .container { position: relative; z-index: 1; }
.hero-product__shot { perspective: 1600px; }
.hero-product__shot .browser--hero { transform: rotateX(calc(14deg * (1 - var(--tilt, 0)))); transform-origin: 50% 100%; border-radius: 14px 14px 0 0; box-shadow: 0 -30px 100px -30px rgba(145, 246, 117, .45); }
.hero-product__shot .float-card { z-index: 3; animation: float 6s ease-in-out infinite; }
.hero-product__shot .float-card--3 { animation-delay: -3s; }

.tour { background: var(--forest-800); color: rgba(255, 255, 255, .78); }
.tour .h2 { color: #fff; }
.tour .lead { color: rgba(255, 255, 255, .78); }
.tour .eyebrow { color: var(--lime); }
.tour__grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 56px; align-items: start; }
.tour__steps { list-style: none; margin: 0; padding: 0; }
.tour__step { position: relative; min-height: 46vh; padding: 28px 0 28px 28px; border-left: 2px solid rgba(255, 255, 255, .12); opacity: .4; transition: opacity .4s, border-color .4s; }
.tour__step::before { content: ""; position: absolute; left: -2px; top: 28px; width: 2px; height: 0; background: var(--lime); transition: height .6s var(--ease-out); }
.tour__step.is-active { opacity: 1; }
.tour__step.is-active::before { height: 80px; }
.tour__num { font-size: 16px; font-weight: 700; color: var(--lime); letter-spacing: .08em; }
.tour__step h3 { margin: 6px 0 10px; font-size: 24px; font-weight: 600; color: #fff; letter-spacing: -.015em; }
.tour__step p { font-size: 16px; line-height: 1.6; max-width: 380px; }
.tour__sticky { position: sticky; top: calc(var(--header-h) + 90px); }
.tour__browser { box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08); }
.tour__dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.tour__dots i { width: 8px; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .25); transition: width .4s var(--ease-out), background-color .3s; }
.tour__dots i.is-active { width: 28px; background: var(--lime); }
@media (max-width: 960px) {
  .tour__grid { grid-template-columns: 1fr; }
  .tour__sticky { top: calc(var(--header-h) + 54px); z-index: 2; order: -1; }
  .tour__step { min-height: 0; padding-block: 22px; opacity: 1; }
  .tour__step h3 { font-size: 20px; }
}

/* SOLUTIONS compositions */
.mint-card--comp { position: relative; display: block; padding: 0; }
.comp { position: relative; height: 100%; padding: 12% 8% 0 10%; }
.comp__browser { transform: rotate(-2deg); transition: transform .6s var(--ease-out); box-shadow: 0 30px 60px -24px rgba(6, 30, 18, .45), 0 0 0 1px rgba(10, 30, 18, .06); }
.mint-card--comp:hover .comp__browser { transform: rotate(0) scale(1.02); }
.comp__browser img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 0 0; }
.comp-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #fff; box-shadow: var(--shadow); font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.25; animation: float 6s ease-in-out infinite; }
.comp-chip small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.comp-chip .dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mint); color: var(--green-600); flex: none; }
.comp-chip .dot .icon { width: 16px; height: 16px; }
.comp-chip .dot--dark { background: var(--green-600); color: #fff; }
.comp-chip--1 { left: 4%; top: 5%; }
.comp-chip--2 { right: 4%; bottom: 8%; animation-delay: -3s; }
.role .mint-card { transition: transform .5s var(--ease-out); }

/* Generic floating keyframe (shared) */
@keyframes float { 50% { transform: translateY(-8px); } }

@media (prefers-reduced-motion: reduce) {
  .grid-bg span, .scatter span, .hub__ring, .hub__ring li svg { animation: none !important; }
  .split-words .w > span, .type-list li { transform: none !important; opacity: 1 !important; }
}

/* Overflow guards */
html { overflow-x: clip; }
.integrations { overflow: hidden; }
.ai__grid > *, .ai-card > * { min-width: 0; }

/* Photography */
.hero-photo-card { position: absolute; z-index: 0; right: calc(var(--gutter) * -1 - max(0px, (100vw - var(--container) - var(--gutter) * 2) / 2)); bottom: -96px; width: 46%; aspect-ratio: 508 / 404; object-fit: cover; border-radius: 12px 0 0 0; box-shadow: var(--shadow-lg); animation: heroIn 1.2s var(--ease-out) both .9s; }
.hero-stage__tilt { z-index: 1; }
@media (max-width: 960px) { .hero-photo-card { display: none; } }


.sync__photo { filter: saturate(.6) contrast(1.05); opacity: .55; object-position: 50% 30%; }
.final-cta__photo { position: absolute; z-index: -1; left: 0; top: -15%; width: 100%; height: 130%; object-fit: cover; object-position: 50% 40%; filter: blur(2px) saturate(.8); transform: scale(1.04); }
.final-cta::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 80% at 50% 110%, rgba(145, 246, 117, .3), transparent 70%), linear-gradient(180deg, rgba(4, 45, 24, .82), rgba(4, 59, 32, .9)); }
.final-cta { background: #043b20; }
.final-cta .grid-bg { z-index: 1; }

/* =========================================================
   404
   ========================================================= */
.nf { position: relative; overflow: hidden; min-height: calc(100vh - 120px); display: grid; align-items: center; padding-block: clamp(64px, 9vw, 120px); background: radial-gradient(120% 90% at 85% 10%, #0b5a31 0%, var(--forest-800) 45%, #022614 100%); color: #fff; }
.nf__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(145, 246, 117, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(145, 246, 117, .07) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 70% at 30% 40%, #000, transparent); mask-image: radial-gradient(70% 70% at 30% 40%, #000, transparent); animation: nfgrid 18s linear infinite; }
@keyframes nfgrid { to { background-position: 56px 56px, 56px 56px; } }
.nf__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.nf__code { display: flex; align-items: center; gap: .08em; font-size: clamp(88px, 13vw, 168px); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: #fff; margin-bottom: 28px; }
.nf__code svg { width: .78em; height: .78em; margin-inline: .04em; filter: drop-shadow(0 10px 30px rgba(145, 246, 117, .35)); animation: nfspin 7s ease-in-out infinite; }
@keyframes nfspin { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-14deg) translateY(-6px); } 90% { transform: rotate(8deg); } }
.nf .eyebrow { color: var(--lime); }
.nf__title { font-size: clamp(36px, 5vw, 60px); line-height: 1.05; letter-spacing: -.02em; margin: 12px 0 18px; }
.nf__lead { font-size: 18px; color: rgba(255, 255, 255, .75); max-width: 480px; margin-bottom: 32px; }
.nf__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.nf__links a { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #fff; text-decoration: none; transition: background .2s, border-color .2s, transform .2s; }
.nf__links a:hover, .nf__links a:focus-visible { background: rgba(255, 255, 255, .11); border-color: rgba(145, 246, 117, .5); transform: translateX(4px); }
.nf__links a > .icon:first-child { width: 22px; height: 22px; flex: none; color: var(--lime); }
.nf__links span { display: grid; gap: 2px; flex: 1; }
.nf__links strong { font-size: 16px; font-weight: 600; }
.nf__links small { font-size: 16px; color: rgba(255, 255, 255, .6); }
.nf__go { width: 18px; height: 18px; flex: none; opacity: .5; transition: opacity .2s, transform .2s; }
.nf__links a:hover .nf__go { opacity: 1; transform: translateX(3px); }
@media (max-width: 860px) { .nf__inner { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .nf__grid, .nf__code svg { animation: none; } }
.nowrap { white-space: nowrap; }

/* =========================================================
   Full-width mega menus (desktop)
   The panel spans the viewport under the header; its content
   lines up with the page container. --sbw (scrollbar width) is
   set in main.js so 100vw doesn't run under the scrollbar.
   ========================================================= */
@media (min-width: 1025px) {
  .mega {
    left: calc(50% - (100vw - var(--sbw, 0px)) / 2); right: auto;
    width: calc(100vw - var(--sbw, 0px)); top: 100%;
  }
  .mega::before { inset: -10px 0 auto; height: 12px; }
  .mega__inner {
    max-width: none; gap: 24px;
    padding: 28px max(var(--gutter), calc((100% - var(--container)) / 2));
    border: 0; border-top: 1px solid rgba(20, 26, 22, .08); border-radius: 0;
    box-shadow: 0 30px 60px -30px rgba(6, 30, 18, .4);
    transform: translateY(-6px); transform-origin: 50% 0;
  }
  .mega--product .mega__inner { grid-template-columns: 1.1fr .9fr minmax(300px, .85fr); }
  .mega--roles .mega__inner, .mega--resources .mega__inner { max-width: none; grid-template-columns: 1.7fr minmax(300px, .85fr); }
  .mega__grid { gap: 4px 12px; }
  .mega--resources .mega__shot { aspect-ratio: 2.4 / 1; }
  .mega--resources .mega__list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
  .mega__feature { padding: 18px; }
  .is-scrolled .mega__inner { border-top-color: transparent; }
}

/* =========================================================
   HOME hero visual (v3): frosted frame + crew photo bleed
   Matches the original design comp. The crew photo runs off
   the right edge of the viewport and down to the hero's
   bottom edge; the frosted frame sits over its top-left.
   ========================================================= */
.hero-shot { position: relative; align-self: stretch; min-height: 500px; }
.hero-shot__frame {
  position: absolute; z-index: 2; top: -8px; left: 0; width: 92%;
  padding: clamp(14px, 1.6vw, 22px); border-radius: 12px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  animation: shotFrameIn 1s var(--ease-out) both .25s;
}
.hero-shot__frame > img { display: block; width: 100%; height: auto; aspect-ratio: 599 / 356; object-fit: cover; border-radius: 6px; background: #fff; }
.hero-shot__crew {
  position: absolute; z-index: 1; top: 47%; left: 29%;
  right: calc(var(--gutter) * -1 - max(0px, (100vw - var(--sbw, 0px) - var(--container) - var(--gutter) * 2) / 2));
  bottom: -96px; overflow: hidden;
  animation: shotCrewIn 1.1s var(--ease-out) both .45s;
}
.hero-shot__crew img { position: absolute; inset: -6% 0; width: 100%; height: 112%; max-width: none; object-fit: cover; object-position: 50% 30%; }
@keyframes shotFrameIn { from { opacity: 0; transform: translateY(24px); } }
@keyframes shotCrewIn { from { opacity: 0; transform: translateX(40px); } }
@media (max-width: 960px) {
  .hero-shot { min-height: 0; aspect-ratio: 1 / .92; margin-top: 8px; }
  .hero-shot__frame { top: 0; width: 90%; }
  .hero-shot__crew { top: 44%; left: 26%; right: calc(var(--gutter) * -1); bottom: -72px; }
}
@media (prefers-reduced-motion: reduce) { .hero-shot__frame, .hero-shot__crew { animation: none; } }

/* =========================================================
   Flat 2D illustrations (ill2): replace the 3D renders
   ========================================================= */
.ill2 { display: block; width: 100%; height: 100%; font-family: Inter, system-ui, sans-serif; overflow: visible; }
.i2-bg { fill: var(--mint-50); }
.i2-halo { fill: #fff; opacity: .6; }
.i2-faint { fill: none; stroke: #b9dcc0; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.i2-faint-fill { fill: #b9dcc0; }
.i2-slab { fill: #b7c4ba; } .i2-slab-top { fill: #d4ddd6; } .i2-slab-lines { fill: none; stroke: #c3cec6; stroke-width: 3; stroke-linecap: round; }
.i2-cone { fill: #ff8a3d; } .i2-cone-band { fill: #fff; }
.i2-pants { fill: #2b3a55; } .i2-boot { fill: #3a2f28; }
.i2-shirt { fill: #2b3a55; }
.i2-vest { fill: #d9f34a; } .i2-reflect { fill: #f4f7ef; opacity: .9; }
.i2-skin { fill: #c98b6b; } .i2-skin-2 { fill: #8d5a3f; } .i2-skin-3 { fill: #e7b896; }
.i2-hat { fill: #fff; stroke: #e2e8e3; stroke-width: 1; } .i2-hat-band { fill: var(--green-500); }
.i2-cap { fill: #ff8a3d; }
.i2-hair { fill: #1f1a17; } .i2-hair-2 { fill: #6b4a2b; }
.i2-top-a { fill: var(--green-600); } .i2-top-b { fill: #2b3a55; } .i2-top-c { fill: #5b6b7a; }
.i2-ink { fill: #1b2a21; } .i2-mouth { fill: none; stroke: #6d3b26; stroke-width: 1.6; stroke-linecap: round; }
.i2-arm { fill: none; stroke: #2b3a55; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.i2-device { fill: #10201a; } .i2-glow { fill: var(--green-500); }
.i2-paper { fill: #fff; stroke: #e1e6e1; stroke-width: 1.2; filter: drop-shadow(0 14px 22px rgba(6, 30, 18, .14)); }
.i2-kicker { font-size: 10px; font-weight: 700; letter-spacing: .12em; fill: var(--green-600); }
.i2-title { font-size: 16px; font-weight: 700; fill: var(--ink); }
.i2-sub, .i2-meta { font-size: 11px; fill: var(--muted); }
.i2-thumb { fill: #cfe9d4; } .i2-thumb--b { fill: #e3ebe5; }
.i2-hill { fill: #5fbf6e; } .i2-sun { fill: #ffd25e; }
.i2-slabmini { fill: #b7c4ba; } .i2-slabmini-top { fill: #d4ddd6; }
.i2-row { fill: var(--mint-50); }
.i2-play { fill: var(--green-600); } .i2-play-ic { fill: #fff; }
.i2-wave rect { fill: var(--green-500); transform-box: fill-box; transform-origin: center; animation: ill-wave 1s ease-in-out infinite; }
.i2-wave rect:nth-child(2n) { animation-delay: -.25s; } .i2-wave rect:nth-child(3n) { animation-delay: -.5s; }
.i2-box { fill: var(--green-500); }
.i2-line { fill: #dbe2dc; }
.i2-btn { fill: var(--green-600); } .i2-btn-t { font-size: 13px; font-weight: 600; fill: #fff; }
.i2-tick-w { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.i2-tick-sm { stroke-width: 1.6; }
.i2-link { fill: none; stroke: #9fd3aa; stroke-width: 2.5; stroke-dasharray: 6 7; animation: dash 1.2s linear infinite; }
.i2-links path { fill: none; stroke: #b5dcbd; stroke-width: 1.6; stroke-dasharray: 4 5; animation: dash 1.2s linear infinite; }
.i2-pulse { fill: var(--green-500); }
.i2-chip { fill: #fff; stroke: #e1e6e1; stroke-width: 1; filter: drop-shadow(0 8px 14px rgba(6, 30, 18, .12)); }
.i2-chip-t { font-size: 13px; font-weight: 600; fill: var(--ink); } .i2-chip-s { font-size: 11px; fill: var(--muted); }
.i2-dot-warn { fill: #fff3d6; } .i2-warn-ic { fill: none; stroke: #c77700; stroke-width: 1.8; stroke-linecap: round; }
.i2-dot-ok { fill: var(--green-600); }
.i2-float { animation: ill-float 5s ease-in-out infinite; }
.i2-float--b { animation-delay: -1.7s; } .i2-float--c { animation-delay: -3.3s; }
.i2-avatar { fill: #fff; stroke: #fff; stroke-width: 3; filter: drop-shadow(0 6px 12px rgba(6, 30, 18, .16)); }
.i2-avatar--b { fill: #dff3e3; } .i2-avatar--c { fill: #e8eefb; } .i2-avatar--d { fill: #fff0e3; }
.i2-avatar:not([class*="--"]) { fill: #e9f7d0; }
.i2-badge { fill: var(--green-600); stroke: #fff; stroke-width: 1.5; } .i2-badge-ic { fill: none; stroke: #fff; stroke-width: 1.3; stroke-linecap: round; }
.i2-label { font-size: 8.5px; font-weight: 600; fill: var(--ink); }
.i2-mini-title { font-size: 8.5px; font-weight: 700; fill: var(--ink); }
.i2-track { fill: #e8eee9; } .i2-fill { fill: var(--green-500); transform-box: fill-box; transform-origin: left; animation: ill-fill 3.5s var(--ease-out) infinite; }
.i2-logo path { fill: var(--green-500); }
.role .mint-card .ill2 { padding: 4% 3% 2%; }
.mega__shot--ill { background: var(--mint-50); }
.mega__feature:hover .mega__shot--ill .ill2 { transform: scale(1.04); }
.mega__shot--ill .ill2 { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) { .i2-float, .i2-wave rect, .i2-link, .i2-links path, .i2-fill { animation: none; } }

/* =========================================================
   HOME: Alex AI stacked capability cards
   Cards are sticky; each new card slides over the previous
   one. main.js sets --cover (0..1) on a card as the next one
   covers it, which scales and dims it slightly.
   ========================================================= */
.ai-stack-section { background: linear-gradient(180deg, #fff 0%, var(--surface) 18%, var(--surface) 100%); }
.ai-stack-head { max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.ai-stack-head .eyebrow { color: var(--green-600); }
.ai-stack-head .h2 { margin: 12px 0 18px; }
.ai-stack-head p { font-size: 18px; color: var(--muted); max-width: 620px; margin-inline: auto; }
.ai-stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.stack-card__inner {
  position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 12px;
  min-height: clamp(460px, 60vh, 540px); padding: 12px; border-radius: 28px;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 -10px 40px -24px rgba(6, 30, 18, .22);
  transform-origin: 50% 0; transform: scale(calc(1 - var(--cover, 0) * .05)); will-change: transform;
}
.stack-card__inner::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #0b1a12; opacity: calc(var(--cover, 0) * .08); pointer-events: none; }
.stack-card__body { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 44px) clamp(20px, 3vw, 40px) clamp(20px, 2.4vw, 32px); }
.stack-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.stack-card__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--mint); color: var(--green-600); }
.stack-card__icon .icon { width: 22px; height: 22px; }
.stack-card__count { font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.stack-card__count span { color: #a7aea9; font-weight: 500; }
.stack-card h3 { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.15; letter-spacing: -.015em; color: var(--ink); margin-bottom: 14px; }
.stack-card__desc { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 460px; }
.stack-card__meta { margin: 28px 0 0; }
.stack-card__meta > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); }
.stack-card__meta dt { font-size: 16px; color: var(--muted); }
.stack-card__meta dd { margin: 0; }
.stack-card__meta ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.stack-card__meta li { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--ink); }
.stack-card__meta li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green-500); box-shadow: 0 0 0 3px var(--mint); }
.stack-card__cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding: 12px 22px; border-radius: 999px; border: 1.5px solid var(--ink); font-size: 16px; font-weight: 600; color: var(--ink); transition: background-color .2s, color .2s, gap .2s; }
.stack-card__meta + .stack-card__cta { margin-top: 28px; }
@supports (margin-top: auto) { .stack-card__meta { margin-bottom: 28px; } .stack-card__meta + .stack-card__cta { margin-top: auto; } }
.stack-card__cta .icon { width: 18px; height: 18px; transition: transform .2s; }
.stack-card__cta:hover { background: var(--ink); color: #fff; }
.stack-card__cta:hover .icon { transform: translate(2px, -2px); }

/* Visual panel */
.stack-card__visual {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px;
  padding: clamp(24px, 3vw, 44px); border-radius: 20px; color: #fff; isolation: isolate;
  background: radial-gradient(70% 60% at 85% 10%, rgba(145, 246, 117, .35), transparent 60%), linear-gradient(155deg, #0a5b2d 0%, #043b20 55%, #022614 100%);
}
.stack-card__visual::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 36px 36px; -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent); mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent); }
.stack-card__visual--b { background: radial-gradient(70% 60% at 10% 90%, rgba(145, 246, 117, .3), transparent 60%), linear-gradient(200deg, #0a5b2d 0%, #043b20 55%, #022614 100%); }
.stack-card__visual--c { background: radial-gradient(60% 50% at 90% 85%, rgba(255, 196, 82, .22), transparent 60%), radial-gradient(60% 60% at 10% 10%, rgba(145, 246, 117, .22), transparent 60%), linear-gradient(160deg, #0a5b2d, #043b20 55%, #022614); }
.stack-card__visual--d { background: radial-gradient(70% 60% at 50% 0%, rgba(145, 246, 117, .32), transparent 60%), linear-gradient(180deg, #0a5b2d, #043b20 60%, #022614); }

.av-panel { width: 100%; max-width: 400px; padding: 18px; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .55); }
.av-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.av-head strong { display: block; font-size: 15px; } .av-head small { display: block; font-size: 12px; color: var(--muted); }
.av-badge { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--green-600); color: #fff; }
.av-badge .icon { width: 17px; height: 17px; }
.av-badge--warn { background: #fff3d6; color: #c77700; }
/* 1: summary */
.av-notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 420px; }
.av-note { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 13px; color: rgba(255, 255, 255, .92); animation: avNote 6s ease-in-out infinite; }
.av-note .icon { width: 15px; height: 15px; color: var(--lime); }
.av-note--b { animation-delay: -2s; } .av-note--c { animation-delay: -4s; }
@keyframes avNote { 50% { transform: translateY(-4px); } }
.av-bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.av-bullets li { display: flex; gap: 10px; align-items: baseline; font-size: 14px; line-height: 1.45; color: var(--text); }
.av-bullets i { flex: none; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-1px); }
.av-bullets i.ok { background: var(--green-500); } .av-bullets i.warn { background: #f0a020; }
.av-progress { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.av-progress b { color: var(--ink); }
.av-progress em { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: #e8eee9; overflow: hidden; }
.av-progress em i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green-500), var(--lime)); }
.av-foot { margin-top: 12px; font-size: 12px; color: #9aa29d; }
/* 2: tasks */
.av-quote { padding: 16px 18px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.av-quote p { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .9); }
.av-who { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; color: rgba(255, 255, 255, .65); }
.av-who i, .av-av { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #ffcf8a; color: #5a3200; font-size: 10px; font-style: normal; font-weight: 700; }
.av-arrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 13px; font-weight: 700; }
.av-arrow .icon { width: 15px; height: 15px; }
.av-tasks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.av-tasks li { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; }
.av-tasks li:nth-child(odd) { background: var(--surface); }
.av-tasks li > span:nth-child(2) { flex: 1; }
.av-tasks strong { display: block; font-size: 14px; } .av-tasks small { display: block; font-size: 12px; color: var(--muted); }
.av-check { flex: none; width: 18px; height: 18px; border-radius: 6px; border: 2px solid #c7d0c9; }
.av-av { background: var(--mint); color: var(--green-600); }
.av-av--b { background: #e8eefb; color: #2b4a9a; } .av-av--c { background: #fff0e3; color: #b25a12; }
.av-actions { display: flex; gap: 8px; margin-top: 14px; }
.av-btn { flex: 1; padding: 9px; border-radius: 9px; background: var(--green-600); color: #fff; text-align: center; font-size: 13px; font-weight: 600; }
.av-btn--ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
/* 3: alerts */
.av-alert { position: relative; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); display: grid; gap: 4px; }
.av-alert + .av-alert { margin-top: 8px; }
.av-alert strong { font-size: 14px; } .av-alert small { font-size: 12px; color: var(--muted); }
.av-pill { justify-self: start; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); font-size: 11px; font-weight: 700; color: var(--muted); }
.av-pill--warn { background: #fff3d6; color: #a86400; } .av-pill--risk { background: #ffe4e0; color: #b3261e; }
.av-budget { display: grid; gap: 6px; margin-top: 4px; }
.av-budget em { position: relative; display: block; height: 6px; border-radius: 6px; background: #f1ece9; }
.av-budget em i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f0a020, #e5533d); }
.av-budget em b { position: absolute; top: -3px; width: 2px; height: 12px; border-radius: 2px; background: var(--ink); }
/* 4: chat */
.av-msg { font-size: 14px; line-height: 1.5; }
.av-msg--me { margin-left: auto; max-width: 85%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--forest-800); color: #fff; width: fit-content; }
.av-msg--ai { margin-top: 10px; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: var(--surface); color: var(--text); }
.av-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.av-sources span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 11px; font-weight: 600; color: var(--green-600); }
.av-sources .icon { width: 12px; height: 12px; }
.av-input { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 8px 8px 8px 14px; border-radius: 12px; border: 1px solid var(--line); font-size: 13px; color: #9aa29d; }
.av-input i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--green-600); color: #fff; }
.av-input .icon { width: 15px; height: 15px; }

/* Sticky stacking on roomy screens */
@media (min-width: 900px) and (min-height: 680px) {
  .ai-stack { gap: 0; }
  .stack-card { position: sticky; top: calc(96px + var(--i) * 18px); padding-bottom: 40px; }
  .stack-card:last-child { padding-bottom: 0; }
}
@media (max-width: 899px) {
  .stack-card__inner { grid-template-columns: 1fr; min-height: 0; border-radius: 22px; }
  .stack-card__visual { min-height: 360px; border-radius: 16px; }
  .stack-card__meta > div { grid-template-columns: 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .stack-card__inner { transform: none; } .av-note { animation: none; } }

/* Stacked AI cards, v2: smaller cards; the stack works on every
   screen and holds in place until the section scrolls past. */
.ai-stack { --stack-top: 92px; --stack-step: 14px; }
.stack-card__inner { height: auto; min-height: clamp(360px, 52vh, 430px); gap: 10px; padding: 10px; border-radius: 24px; }
.stack-card__body { padding: clamp(20px, 2.4vw, 32px) clamp(18px, 2.4vw, 32px) clamp(18px, 2vw, 26px); }
.stack-card__top { margin-bottom: 18px; }
.stack-card__icon { width: 40px; height: 40px; border-radius: 12px; }
.stack-card__icon .icon { width: 19px; height: 19px; }
.stack-card h3 { font-size: clamp(21px, 1.9vw, 26px); margin-bottom: 10px; }
.stack-card__desc { font-size: 16px; line-height: 1.55; }
.stack-card__meta { margin-top: 18px; }
.stack-card__meta > div { padding: 11px 0; grid-template-columns: 96px 1fr; }
.stack-card__meta li { font-size: 16px; }
.stack-card__cta { padding: 10px 18px; font-size: 16px; }
.stack-card__visual { padding: 16px; border-radius: 16px; }
.av-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; zoom: .82; }
@media (max-height: 760px) { .av-stage { zoom: .72; } }

/* Sticky stack everywhere there's room; extra space after the last card
   keeps the full stack pinned for a beat before the section scrolls away. */
.ai-stack { gap: 0; padding-bottom: 28vh; }
.stack-card { position: sticky; top: calc(var(--stack-top) + var(--i) * var(--stack-step)); padding-bottom: 28px; }
.stack-card:last-child { padding-bottom: 0; }
@media (max-width: 899px) {
  .ai-stack { --stack-top: 76px; --stack-step: 10px; padding-bottom: 20vh; }
  .stack-card__inner { height: auto; min-height: 0; max-height: calc(100vh - 100px); grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
  .stack-card__body { padding: 18px 16px 6px; }
  .stack-card__top { margin-bottom: 12px; }
  .stack-card__meta, .stack-card__cta { display: none; }
  .stack-card__visual { min-height: 0; height: 260px; order: 0; }
  .av-stage { zoom: .6; }
}
@media (max-height: 560px) {
  .ai-stack { padding-bottom: 0; gap: 20px; }
  .stack-card { position: static; padding-bottom: 0; }
  .stack-card__inner { height: auto; max-height: none; }
}

/* Stacked AI cards, v3: roomier spacing, taller, narrower */
.ai-stack { --stack-top: 96px; --stack-step: 24px; max-width: 1100px; margin-inline: auto; padding-bottom: 32vh; }
.stack-card { padding-bottom: 72px; }
.stack-card__inner { min-height: clamp(420px, 60vh, 510px); gap: 12px; padding: 12px; }
.stack-card__body { padding: clamp(24px, 2.8vw, 40px) clamp(20px, 2.8vw, 38px) clamp(20px, 2.4vw, 30px); }
.stack-card__visual { padding: 20px; }
.av-stage { zoom: .86; }
@media (max-height: 760px) { .ai-stack { --stack-step: 16px; } .stack-card__inner { min-height: clamp(380px, 58vh, 440px); } .av-stage { zoom: .74; } }
@media (max-width: 899px) {
  .ai-stack { --stack-top: 76px; --stack-step: 14px; padding-bottom: 22vh; }
  .stack-card { padding-bottom: 48px; }
  .stack-card__inner { min-height: 0; }
  .stack-card__visual { padding: 16px; }
  .av-stage { zoom: .6; }
}
@media (max-height: 560px) { .stack-card { padding-bottom: 0; } }

/* =========================================================
   HOME hero motion graphic (hm): "how FieldGrid works" loop
   4 scenes x 4s = 16s. Every timed element uses
   animation-delay: d + o - 16s, so all of them share one
   clock from first paint (no fill-mode jumps).
   Sizes are in cqw so the whole piece scales with the frame.
   ========================================================= */
@media (min-width: 961px) {
  .hero-home__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 4vw, 56px); }
  .hero-shot { min-height: 560px; }
  .hero-shot__frame { width: 104%; top: -24px; }
}
.hero-shot__frame { padding: clamp(8px, 1.2vw, 16px); border-radius: 16px; }

.hm { --T: 16s; position: relative; container-type: inline-size; aspect-ratio: 600 / 470; overflow: hidden; border-radius: 10px; background: linear-gradient(180deg, #ffffff 0%, #f3faf4 100%); font-family: Inter, system-ui, sans-serif; color: var(--ink); }
.hm::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(31, 138, 60, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 138, 60, .06) 1px, transparent 1px); background-size: 4cqw 4cqw; -webkit-mask-image: linear-gradient(180deg, transparent 8%, #000 30%, #000 80%, transparent); mask-image: linear-gradient(180deg, transparent 8%, #000 30%, #000 80%, transparent); }
.hm__bar { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 2.4cqw; height: 9cqw; padding: 0 3cqw; background: rgba(255, 255, 255, .92); border-bottom: 1px solid #e6ebe7; }
.hm__logo { width: 3.6cqw; height: 3.6cqw; flex: none; }
.hm__steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.2cqw; }
.hm__step { display: inline-flex; align-items: center; gap: 1cqw; padding: .9cqw 1.8cqw .9cqw 1cqw; border-radius: 99px; font-size: 2.1cqw; font-weight: 600; color: #8a948d; background: transparent; animation: hmStep var(--T) infinite; animation-delay: calc(var(--d) - var(--T)); }
.hm__step b { display: grid; place-items: center; width: 3cqw; height: 3cqw; border-radius: 50%; background: #eef2ef; font-size: 1.7cqw; color: #6b756e; animation: hmStepB var(--T) infinite; animation-delay: calc(var(--d) - var(--T)); }
@keyframes hmStep { 0%, 24.5% { background: var(--mint); color: var(--green-600); } 25%, 100% { background: transparent; color: #8a948d; } }
@keyframes hmStepB { 0%, 24.5% { background: var(--green-600); color: #fff; } 25%, 100% { background: #eef2ef; color: #6b756e; } }
.hm__track { position: absolute; left: 0; right: 0; bottom: -1px; height: .5cqw; background: transparent; }
.hm__track i { display: block; height: 100%; background: linear-gradient(90deg, var(--green-500), var(--lime)); transform-origin: 0 50%; animation: hmTrack var(--T) linear infinite; animation-delay: calc(0s - var(--T)); }
@keyframes hmTrack { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hm__scenes { position: absolute; inset: 0; }
.hm__scene { position: absolute; inset: 0; margin: 0; opacity: 0; animation: hmScene var(--T) infinite; animation-delay: calc(var(--d) - var(--T)); }
@keyframes hmScene { 0% { opacity: 0; transform: translateY(1.6cqw); } 2.5%, 23% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-1.2cqw); } }
.hm-pop { animation: hmPop var(--T) infinite; animation-delay: calc(var(--d) + var(--o, 0s) - var(--T)); }
@keyframes hmPop { 0% { opacity: 0; transform: translateY(2.4cqw) scale(.97); } 4%, 24% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; } }

.hm__cap { position: absolute; left: 4cqw; top: 12.5cqw; margin: 0; max-width: 70cqw; }
.hm__cap strong { display: block; font-size: 3.6cqw; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); }
.hm__cap span { display: block; margin-top: .6cqw; font-size: 2.1cqw; color: var(--muted); }

.hm-shot { position: absolute; margin: 0; overflow: hidden; border-radius: 1.4cqw; background: #fff; border: 1px solid #e3e8e4; box-shadow: 0 2.4cqw 5cqw -2cqw rgba(6, 30, 18, .28); }
.hm-shot img { display: block; width: 100%; height: auto; }
.hm-card { position: absolute; padding: 2.2cqw; border-radius: 1.8cqw; background: #fff; border: 1px solid #e3e8e4; box-shadow: 0 3cqw 6cqw -2.4cqw rgba(6, 30, 18, .35); }
.hm-chip { position: absolute; display: inline-flex; align-items: center; gap: 1.2cqw; padding: 1cqw 1.8cqw 1cqw 1cqw; border-radius: 99px; background: #fff; border: 1px solid #e3e8e4; box-shadow: 0 1.6cqw 3.2cqw -1.4cqw rgba(6, 30, 18, .35); font-size: 1.9cqw; font-weight: 600; white-space: nowrap; }
.hm-chip i { display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: var(--mint); color: var(--green-600); }
.hm-chip i.warn { background: #fff3d6; color: #c77700; }
.hm-chip i .icon { width: 2cqw; height: 2cqw; }
.hm-chip i.live { width: 1.6cqw; height: 1.6cqw; margin-left: .6cqw; background: var(--green-500); box-shadow: 0 0 0 .7cqw rgba(47, 191, 74, .2); animation: hmLive 1.4s ease-in-out infinite; }
@keyframes hmLive { 50% { box-shadow: 0 0 0 1.2cqw rgba(47, 191, 74, .08); } }

/* 1 · capture */
.hm-phone { position: absolute; left: 6cqw; top: 25cqw; width: 24cqw; height: auto; overflow: visible; filter: drop-shadow(0 3cqw 4cqw rgba(6, 30, 18, .3)); }
.hp-device { fill: #10201a; } .hp-screen { fill: #fff; } .hp-notch { fill: #2a3b31; }
.hp-kicker { font-size: 6px; font-weight: 700; letter-spacing: .12em; fill: var(--green-600); }
.hp-title { font-size: 9px; font-weight: 700; fill: var(--ink); }
.hp-photo { fill: #cfe9d4; } .hp-hill { fill: #5fbf6e; } .hp-sun { fill: #ffd25e; }
.hp-row { fill: var(--mint-50); } .hp-meta { font-size: 7px; fill: var(--muted); }
.hp-wave rect { fill: var(--green-500); transform-box: fill-box; transform-origin: center; animation: ill-wave 1s ease-in-out infinite; }
.hp-wave rect:nth-child(2n) { animation-delay: -.25s; } .hp-wave rect:nth-child(3n) { animation-delay: -.5s; }
.hp-box { fill: var(--green-500); } .hp-tick { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hp-line { fill: #dbe2dc; } .hp-btn { fill: var(--green-600); } .hp-btn-t { font-size: 7px; font-weight: 600; fill: #fff; }
.hm-shot--photos { left: 35cqw; top: 26cqw; width: 61cqw; }
.hm-chip--1 { left: 37cqw; top: 43cqw; }
.hm-chip--2 { left: 61cqw; top: 51cqw; }
.hm-chip--3 { left: 40cqw; top: 61cqw; }

/* 2 · organize */
.hm-shot--checklist { left: 4cqw; top: 25cqw; width: 58cqw; }
.hm-ai { left: 47cqw; top: 41cqw; width: 49cqw; }
.hm-ai__head { display: flex; align-items: center; gap: 1.4cqw; margin: 0 0 1.6cqw; }
.hm-ai__head i { display: grid; place-items: center; width: 4.4cqw; height: 4.4cqw; border-radius: 1.2cqw; background: var(--green-600); color: #fff; }
.hm-ai__head .icon { width: 2.4cqw; height: 2.4cqw; }
.hm-ai__head strong { display: block; font-size: 2.3cqw; } .hm-ai__head small { display: block; font-size: 1.7cqw; color: var(--muted); }
.hm-ai ul { list-style: none; margin: 0; padding: 1.4cqw 0 0; border-top: 1px solid #eef1ef; display: grid; gap: 1.2cqw; }
.hm-ai li { display: flex; align-items: center; gap: 1.2cqw; font-size: 2cqw; color: var(--text); }
.hm-ai li b { flex: none; width: 1.3cqw; height: 1.3cqw; border-radius: 50%; }
.hm-ai li b.ok { background: var(--green-500); } .hm-ai li b.bad { background: #e5533d; } .hm-ai li b.warn { background: #f0a020; }
.hm-type { display: inline-block; overflow: hidden; white-space: nowrap; width: var(--w); animation: hmType var(--T) infinite steps(28, end); animation-delay: calc(var(--d) + var(--o, 0s) - var(--T)); }
@keyframes hmType { 0% { width: 0; } 5%, 24% { width: var(--w); } 25%, 100% { width: 0; } }

/* 3 · act */
.hm-shot--attention { left: 4cqw; top: 25cqw; width: 54cqw; }
.hm-tasks { left: 46cqw; top: 31cqw; width: 50cqw; }
.hm-tasks__head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 1.2cqw; }
.hm-tasks__head strong { font-size: 2.4cqw; } .hm-tasks__head small { font-size: 1.7cqw; color: var(--muted); }
.hm-tasks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6cqw; }
.hm-tasks li { display: flex; align-items: center; gap: 1.2cqw; padding: 1.1cqw 1.2cqw; border-radius: 1cqw; background: var(--surface); font-size: 1.95cqw; font-weight: 600; }
.hm-tasks li em { margin-left: auto; font-size: 1.6cqw; font-style: normal; font-weight: 500; color: var(--muted); }
.hm-box { flex: none; width: 2.2cqw; height: 2.2cqw; border-radius: .6cqw; border: 2px solid #c7d0c9; }
.hm-approve { position: relative; display: block; height: 5cqw; margin-top: 1.4cqw; border-radius: 1cqw; overflow: hidden; font-size: 2cqw; font-weight: 600; }
.hm-approve span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .8cqw; color: #fff; }
.hm-approve .a { background: var(--green-600); animation: hmApA var(--T) infinite; animation-delay: calc(var(--d) - var(--T)); }
.hm-approve .b { background: var(--lime); color: var(--ink); opacity: 0; animation: hmApB var(--T) infinite; animation-delay: calc(var(--d) - var(--T)); }
.hm-approve .icon { width: 2.2cqw; height: 2.2cqw; stroke-width: 3; }
@keyframes hmApA { 0%, 13.5% { opacity: 1; } 14%, 100% { opacity: 0; } }
@keyframes hmApB { 0%, 13.5% { opacity: 0; } 14%, 24% { opacity: 1; } 25%, 100% { opacity: 0; } }
.hm-cursor { position: absolute; z-index: 4; left: 0; top: 0; width: 4cqw; height: 4cqw; fill: var(--ink); stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 .6cqw 1cqw rgba(0, 0, 0, .3)); animation: hmCursor var(--T) infinite; animation-delay: calc(var(--d) - var(--T)); }
@keyframes hmCursor {
  0%, 5% { opacity: 0; transform: translate(88cqw, 74cqw); }
  7% { opacity: 1; transform: translate(86cqw, 72cqw); }
  12.5% { opacity: 1; transform: translate(72cqw, var(--cy, 60cqw)); }
  13.3% { transform: translate(72cqw, var(--cy, 60cqw)) scale(.82); }
  14.2%, 22% { opacity: 1; transform: translate(72cqw, var(--cy, 60cqw)); }
  24%, 100% { opacity: 0; transform: translate(74cqw, var(--cy, 60cqw)); }
}
.hm-chip--toast { left: 6cqw; top: 64cqw; }

/* 4 · track */
.hm-shot--kpis { left: 4cqw; top: 24cqw; width: 58cqw; }
.hm-shot--budget { left: 4cqw; top: 34cqw; width: 46cqw; }
.hm-shot--delivery { left: 53cqw; top: 28cqw; width: 43cqw; }
.hm-shot--progress { left: 29cqw; top: 52cqw; width: 40cqw; }
.hm-chip--live { right: 4cqw; top: 13.5cqw; }

@media (prefers-reduced-motion: reduce) {
  .hm *, .hm *::before { animation: none !important; }
  .hm__scene:first-child { opacity: 1; }
  .hm__step:first-child { background: var(--mint); color: var(--green-600); }
  .hm__step:first-child b { background: var(--green-600); color: #fff; }
  .hm__track i { transform: scaleX(.25); }
  .hm-cursor { display: none; }
}
@media (max-width: 960px) {
  .hero-shot { min-height: 0; aspect-ratio: auto; padding-bottom: 34%; margin-top: 8px; }
  .hero-shot__frame { position: relative; width: 100%; top: 0; }
  .hero-shot__crew { top: 55%; left: 34%; }
}
/* hm v2 layout tweaks: larger pieces, fuller frame */
.hm-phone { left: 5cqw; top: 26cqw; width: 26cqw; }
.hm-shot--photos { left: 35cqw; top: 26cqw; width: 61cqw; }
.hm-chip--1 { left: 37cqw; top: 50cqw; }
.hm-chip--2 { left: 63cqw; top: 57cqw; }
.hm-chip--3 { left: 41cqw; top: 65cqw; }
.hm-shot--checklist { left: 4cqw; top: 26cqw; width: 62cqw; }
.hm-ai { left: 44cqw; top: 46cqw; width: 52cqw; }
.hm-shot--attention { left: 4cqw; top: 26cqw; width: 60cqw; }
.hm-tasks { left: 44cqw; top: 35cqw; width: 52cqw; }
.hm-chip--toast { left: 5cqw; top: 66cqw; }
.hm-shot--kpis { left: 4cqw; top: 25cqw; width: 60cqw; }
.hm-shot--budget { left: 4cqw; top: 35.5cqw; width: 47cqw; }
.hm-shot--delivery { left: 53cqw; top: 28cqw; width: 43cqw; }
.hm-shot--progress { left: 30cqw; top: 54cqw; width: 42cqw; }
@media (min-width: 961px) { .hero-shot__crew { top: 62%; left: 50%; } }
/* hm v3: smaller hero graphic */
.hm { aspect-ratio: 600 / 452; }
@media (min-width: 961px) {
  .hero-home__grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .hero-shot { min-height: 500px; }
  .hero-shot__frame { width: 90%; top: 0; }
  .hero-shot__crew { top: 58%; left: 44%; }
}
@media (min-width: 961px) { .hero-shot__frame { width: 100%; } }
/* Product: anchor bar removed, so the tour screen sits closer to the header */
.tour__sticky { top: calc(var(--header-h) + 40px); }
@media (max-width: 960px) { .tour__sticky { top: calc(var(--header-h) + 8px); } }

/* Final CTA v2: photo under a plain dark overlay, no logo/glow/grid */
.final-cta { padding: clamp(64px, 8vw, 104px) 0; background: #0b1410; }
.final-cta::before { background: rgba(6, 12, 9, .72); }
.final-cta__photo { filter: none; }
.final-cta__title { font-size: clamp(44px, 6.4vw, 88px); line-height: 1.02; letter-spacing: -.03em; color: #fff; margin-bottom: 32px; }

/* Footer: app store badges + credit */
.store-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.store-badge { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px 16px 7px 12px; border-radius: 10px; background: #000; border: 1px solid rgba(255, 255, 255, .28); color: #fff; line-height: 1.1; transition: border-color .2s, transform .2s; }
.store-badge:hover { border-color: rgba(255, 255, 255, .7); transform: translateY(-1px); }
.store-badge svg { width: 24px; height: 24px; flex: none; }
.store-badge span { display: grid; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.store-badge small { font-size: 16px; font-weight: 500; letter-spacing: .02em; color: rgba(255, 255, 255, .8); }
.footer__legal { flex-wrap: wrap; align-items: center; }
.footer__credit { padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .2); }
.footer__credit strong { font-weight: 700; letter-spacing: .04em; color: #fff; }
.footer__credit:hover strong { color: var(--lime); }
@media (max-width: 560px) { .footer__credit { padding-left: 0; border-left: 0; flex-basis: 100%; } }
/* CTA heading matches the other home section headings; credit matches the legal links */
.final-cta__title { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 28px; }
.footer__credit, .footer__credit strong { font-size: inherit; }
.footer__credit { color: rgba(255, 255, 255, .7); }
.footer__credit strong { font-weight: 500; letter-spacing: 0; color: rgba(255, 255, 255, .7); }
.footer__credit:hover, .footer__credit:hover strong { color: #fff; }

/* =========================================================
   Alex chat widget (all pages)
   ========================================================= */
.alex-widget { position: fixed; right: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px); z-index: 150; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; font-family: Inter, system-ui, sans-serif; pointer-events: none; }
.alex-widget > * { pointer-events: auto; }
.alex-widget [hidden] { display: none !important; }

/* launcher */
.alex-launcher { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 6px 20px 6px 6px; border: 0; border-radius: 999px; background: var(--forest-800); color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: 0 16px 40px -14px rgba(4, 30, 16, .7), 0 0 0 1px rgba(255, 255, 255, .08) inset; transition: transform .25s cubic-bezier(.2, .8, .2, 1), background-color .2s, padding .25s; }
.alex-launcher:hover { transform: translateY(-2px); background: #064a28; }
.alex-avatar { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #1c7a43, #0a3f22 70%); box-shadow: inset 0 0 0 1.5px rgba(145, 246, 117, .45); }
.alex-avatar svg { width: 22px; height: 22px; }
.alex-avatar::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(145, 246, 117, .55); opacity: 0; animation: alexPing 3s ease-out infinite; }
@keyframes alexPing { 0% { transform: scale(.85); opacity: .9; } 70%, 100% { transform: scale(1.25); opacity: 0; } }
.alex-avatar__dot { position: absolute; right: 1px; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2.5px var(--forest-800); }
.alex-launcher__close { display: none; }
.alex-widget.is-open .alex-launcher { padding-right: 6px; }
.alex-widget.is-open .alex-launcher__label, .alex-widget.is-open .alex-launcher .alex-avatar { display: none; }
.alex-widget.is-open .alex-launcher__close { display: grid; place-items: center; width: 44px; height: 44px; }
.alex-launcher__close .icon { width: 22px; height: 22px; }

/* teaser */
.alex-teaser { position: relative; width: 300px; overflow: hidden; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -24px rgba(6, 30, 18, .45); transform-origin: 100% 100%; animation: alexIn .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes alexIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.alex-x { position: absolute; z-index: 2; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm); }
.alex-x .icon { width: 16px; height: 16px; transform: rotate(45deg); }
.alex-teaser__art { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; height: 128px; padding: 16px; background: radial-gradient(80% 90% at 80% 0%, rgba(145, 246, 117, .3), transparent 60%), linear-gradient(160deg, #0a5b2d, #043b20); }
.at-note { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); animation: atFloat 4s ease-in-out infinite; }
.at-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lime); color: var(--ink); }
.at-ic .icon { width: 14px; height: 14px; }
.at-lines { display: grid; gap: 5px; } .at-lines i { display: block; width: 46px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .55); } .at-lines i + i { width: 30px; }
.at-arrow { display: flex; gap: 4px; } .at-arrow span { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); opacity: .3; animation: atDots 1.2s infinite; } .at-arrow span:nth-child(2) { animation-delay: .2s; } .at-arrow span:nth-child(3) { animation-delay: .4s; }
@keyframes atDots { 50% { opacity: 1; } }
.at-sum { display: grid; gap: 7px; width: 112px; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 14px 24px -12px rgba(0, 0, 0, .5); animation: atFloat 4s ease-in-out -2s infinite; }
.at-sum__head { display: flex; align-items: center; gap: 6px; } .at-sum__head svg { width: 12px; height: 12px; } .at-sum__head b { width: 50px; height: 6px; border-radius: 3px; background: var(--ink); }
.at-row { display: flex; align-items: center; gap: 6px; } .at-row i { width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); } .at-row.warn i { background: #f0a020; }
.at-row b { height: 5px; flex: 1; border-radius: 3px; background: #dfe5e0; transform-origin: 0 50%; animation: atType 3.2s ease-in-out infinite; } .at-row:nth-child(3) b { animation-delay: .3s; } .at-row:nth-child(4) b { animation-delay: .6s; }
@keyframes atType { 0% { transform: scaleX(0); } 40%, 100% { transform: scaleX(1); } }
@keyframes atFloat { 50% { transform: translateY(-4px); } }
.alex-teaser__body { padding: 18px 20px 20px; }
.alex-teaser__kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--green-600); }
.alex-teaser__kicker .icon { width: 14px; height: 14px; }
.alex-teaser h2 { font-size: 20px; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); margin: 0 0 6px; }
.alex-teaser p:not(.alex-teaser__kicker) { font-size: 16px; line-height: 1.5; color: var(--muted); margin: 0 0 16px; }
.alex-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; border: 0; border-radius: 12px; background: var(--ink); color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color .2s; }
.alex-btn:hover { background: var(--forest-800); }
.alex-btn .icon { width: 16px; height: 16px; }

/* panel */
.alex-panel { display: flex; flex-direction: column; width: 380px; max-height: min(640px, calc(100vh - 110px)); overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 80px -28px rgba(6, 30, 18, .5); transform-origin: 100% 100%; animation: alexIn .4s cubic-bezier(.2, .8, .2, 1) both; }
.alex-panel__head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; border-bottom: 1px solid var(--line); }
.alex-avatar--sm { width: 38px; height: 38px; } .alex-avatar--sm svg { width: 18px; height: 18px; } .alex-avatar--sm::after { display: none; }
.alex-panel__who { flex: 1; display: grid; }
.alex-panel__who strong { font-size: 16px; color: var(--ink); }
.alex-panel__who small { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; color: var(--muted); }
.alex-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); box-shadow: 0 0 0 3px var(--mint); }
.alex-icon-btn { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer; }
.alex-icon-btn .icon { width: 18px; height: 18px; }
.alex-panel__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 6px; }
.alex-stage { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 10px; padding: 22px 14px 14px; border-radius: 16px; background: radial-gradient(60% 70% at 50% 0%, rgba(145, 246, 117, .3), transparent 65%), linear-gradient(170deg, #0a5b2d, #043b20 60%, #022614); }
.alex-stage::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(70% 80% at 50% 40%, #000, transparent); mask-image: radial-gradient(70% 80% at 50% 40%, #000, transparent); }
.alex-orb { position: relative; display: grid; place-items: center; width: 72px; height: 72px; }
.alex-orb__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(145, 246, 117, .5); animation: alexRing 2.8s ease-out infinite; }
.alex-orb__ring--2 { animation-delay: 1.4s; }
@keyframes alexRing { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.alex-orb__core { position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #ffffff, #e9f8ec); box-shadow: 0 12px 30px -8px rgba(145, 246, 117, .6); }
.alex-orb__core svg { width: 28px; height: 28px; }
.alex-eq { position: relative; display: flex; align-items: center; gap: 4px; height: 22px; }
.alex-eq i { width: 4px; height: 30%; border-radius: 2px; background: var(--lime); animation: alexEq 1.1s ease-in-out infinite; }
.alex-eq i:nth-child(2n) { animation-delay: -.3s; } .alex-eq i:nth-child(3n) { animation-delay: -.6s; } .alex-eq i:nth-child(4n) { animation-delay: -.15s; }
@keyframes alexEq { 50% { height: 100%; } }
.alex-stage__chips { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.alex-stage__chips span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .9); font-size: 16px; font-weight: 600; }
.alex-stage__chips .icon { width: 12px; height: 12px; color: var(--lime); }
.alex-log { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.alex-msg { display: flex; animation: alexMsg .3s ease-out both; }
@keyframes alexMsg { from { opacity: 0; transform: translateY(6px); } }
.alex-msg p { max-width: 86%; margin: 0; padding: 10px 14px; font-size: 16px; line-height: 1.5; }
.alex-msg--bot p { border-radius: 16px 16px 16px 4px; background: var(--surface); color: var(--ink); }
.alex-msg--me { justify-content: flex-end; }
.alex-msg--me p { border-radius: 16px 16px 4px 16px; background: var(--forest-800); color: #fff; }
.alex-msg a { color: var(--green-600); font-weight: 600; text-decoration: underline; }
.alex-typing p { display: inline-flex; gap: 4px; padding: 13px 14px; }
.alex-typing i { width: 6px; height: 6px; border-radius: 50%; background: #9aa29d; animation: atDots 1s infinite; } .alex-typing i:nth-child(2) { animation-delay: .15s; } .alex-typing i:nth-child(3) { animation-delay: .3s; }
.alex-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 6px; }
.alex-quick button { padding: 7px 12px; border-radius: 999px; border: 1px solid #cfe0d2; background: #fff; color: var(--green-600); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s; }
.alex-quick button:hover { background: var(--mint-50); border-color: var(--green-500); }
.alex-panel__foot { padding: 10px 14px 12px; border-top: 1px solid var(--line); background: #fff; }
.alex-sales { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; margin-bottom: 8px; border-radius: 12px; border: 1.5px solid var(--ink); font-size: 16px; font-weight: 600; color: var(--ink); transition: background-color .2s, color .2s; }
.alex-sales:hover { background: var(--ink); color: #fff; }
.alex-sales .icon { width: 16px; height: 16px; }
.alex-input { display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 14px; border-radius: 14px; border: 1px solid #d8dfda; background: #fff; transition: border-color .2s, box-shadow .2s; }
.alex-input:focus-within { border-color: var(--green-500); box-shadow: 0 0 0 3px var(--mint); }
.alex-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); }
.alex-input button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--green-600); color: #fff; cursor: pointer; }
.alex-input button .icon { width: 17px; height: 17px; }
.alex-legal { margin: 8px 2px 0; font-size: 16px; line-height: 1.45; color: #8a938d; text-align: center; }
.alex-legal a { color: inherit; text-decoration: underline; }

@media (max-width: 560px) {
  .alex-launcher__label { display: none; }
  .alex-launcher { padding: 6px; }
  .alex-teaser { width: min(300px, calc(100vw - 28px)); }
  .alex-widget.is-open { left: 10px; right: 10px; bottom: 10px; }
  .alex-panel { width: 100%; max-height: calc(100vh - 90px); }
}
@media (prefers-reduced-motion: reduce) {
  .alex-widget *, .alex-widget *::after { animation: none !important; }
}
@media print { .alex-widget { display: none; } }

/* Alex widget v2: compact cards, real rounded clipping, pill only when collapsed */
.alex-teaser, .alex-panel { isolation: isolate; clip-path: inset(0 round 18px); border-radius: 18px; }
.alex-stage { isolation: isolate; clip-path: inset(0 round 14px); }
.alex-widget.is-open .alex-launcher, .alex-widget.has-teaser .alex-launcher { display: none; }
.alex-launcher { height: 48px; padding: 5px 16px 5px 5px; font-size: 16px; animation: alexIn .35s cubic-bezier(.2, .8, .2, 1) both; }
.alex-launcher .alex-avatar { width: 38px; height: 38px; } .alex-launcher .alex-avatar svg { width: 19px; height: 19px; }
/* teaser: smaller */
.alex-teaser { width: 260px; }
.alex-teaser__art { height: 92px; padding: 12px; gap: 8px; }
.at-note { padding: 8px; } .at-ic { width: 22px; height: 22px; } .at-lines i { width: 38px; } .at-lines i + i { width: 24px; }
.at-sum { width: 96px; padding: 8px; gap: 6px; }
.alex-teaser__body { padding: 14px 16px 16px; }
.alex-teaser__kicker { font-size: 16px; margin-bottom: 6px; }
.alex-teaser h2 { font-size: 17px; }
.alex-teaser p:not(.alex-teaser__kicker) { font-size: 16px; margin-bottom: 12px; }
.alex-btn { min-height: 40px; font-size: 16px; border-radius: 10px; }
.alex-x { top: 8px; right: 8px; width: 26px; height: 26px; }
/* panel: smaller */
.alex-panel { width: 340px; max-height: min(520px, calc(100vh - 40px)); }
.alex-panel__head { padding: 10px 10px 10px 12px; gap: 10px; }
.alex-avatar--sm { width: 32px; height: 32px; } .alex-avatar--sm svg { width: 16px; height: 16px; }
.alex-panel__who strong { font-size: 16px; } .alex-panel__who small { font-size: 16px; }
.alex-icon-btn { width: 30px; height: 30px; }
.alex-panel__scroll { padding: 10px 12px 4px; }
.alex-stage { padding: 14px 10px 10px; gap: 8px; border-radius: 14px; }
.alex-orb { width: 52px; height: 52px; } .alex-orb__core { width: 44px; height: 44px; } .alex-orb__core svg { width: 21px; height: 21px; }
.alex-eq { height: 16px; } .alex-eq i { width: 3px; }
.alex-stage__chips span { font-size: 16px; padding: 3px 8px; }
.alex-log { margin-top: 10px; gap: 8px; }
.alex-msg p { font-size: 16px; padding: 9px 12px; }
.alex-quick { margin: 10px 0 4px; gap: 5px; } .alex-quick button { font-size: 16px; padding: 6px 10px; }
.alex-panel__foot { padding: 8px 12px 10px; }
.alex-sales { min-height: 36px; font-size: 16px; border-radius: 10px; margin-bottom: 6px; }
.alex-input { padding: 4px 4px 4px 12px; border-radius: 12px; } .alex-input input { font-size: 16px; } .alex-input button { width: 32px; height: 32px; }
.alex-legal { font-size: 16px; margin-top: 6px; }
@media (max-width: 560px) {
  .alex-widget.is-open { left: auto; right: 12px; bottom: 12px; }
  .alex-panel { width: min(340px, calc(100vw - 24px)); max-height: calc(100vh - 24px); }
  .alex-launcher { padding: 5px; }
}
/* Alex widget v3: static portrait illustration instead of motion */
.alex-teaser__art { display: block; height: 104px; padding: 0; background: #dcf6e1; }
.alex-portrait { display: block; width: 100%; height: 100%; }
.alex-stage--portrait { display: block; height: 128px; padding: 0; background: #dcf6e1; }
.alex-stage--portrait::before { display: none; }
.channels dd small { display: block; margin-top: 4px; font-size: 16px; color: var(--muted); }
.form-note a { text-decoration: underline; }

/* =========================================================
   Unified brand green for buttons and CTA bands (2026-10-27)
   One medium green (the Alex avatar's shirt) replaces the
   lime / strong-lime / mixed greens on actions and CTA bands.
   ========================================================= */
:root { --brand: #1f8a3c; --brand-hover: #18772f; --brand-ink: #fff; }
.btn--primary, .btn--accent, .btn--green { --btn-bg: var(--brand); --btn-fg: var(--brand-ink); font-weight: 600; }
.btn--primary:hover, .btn--accent:hover, .btn--green:hover { --btn-bg: var(--brand-hover); box-shadow: 0 10px 24px -12px rgba(31, 138, 60, .8); }
.btn--shine::after { background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); }
/* on dark green surfaces, a hairline keeps the green button distinct */
.hero-home .btn--primary, .final-cta .btn--primary, .hero-product .btn--primary, .nf .btn--primary, .plan-card--featured .btn--primary, .form-panel .btn--accent { box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset; }
/* CTA bands */
.cta-band--lime, .cta-band--green { background: var(--brand); }
.cta-band--lime h2, .cta-band--green h2 { color: #fff; }
.cta-band--lime .btn, .cta-band--green .btn { --btn-bg: #fff; --btn-fg: var(--ink); box-shadow: none; }
.cta-band--lime .btn:hover, .cta-band--green .btn:hover { --btn-bg: #eef7f0; }
/* Resources "Need help?" band */
.help-band { background: var(--brand); color: rgba(255, 255, 255, .9); }
.help-band h2, .help-band .link-arrow { color: #fff; }
.help-band .deco, .help-band .deco--book { stroke: rgba(255, 255, 255, .75); }
/* Pricing highlight + compare buttons follow the same green */
.plan-card--featured .btn--primary { --btn-bg: var(--brand); --btn-fg: #fff; }

/* Inner-page hero headings ~15% smaller (home hero unchanged); shorter Industries hero */
.hero-product h1 { font-size: clamp(34px, 4vw, 54px); }
.hero-photo h1, .hero-resources h1, .page-hero h1 { font-size: clamp(34px, 4.4vw, 60px); }
.contact h1 { font-size: clamp(34px, 4vw, 54px); }
.hero-photo { min-height: 460px; }
.hero-photo__body { padding-block: 64px; }
.hero-photo h1 { margin-bottom: 24px; }
.hero-photo .lead { margin-bottom: 32px; }
.hero-photo .btn--primary, .hero-resources .btn--primary { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset; }

/* Contact v2: light form panel with rounded corners */
.form-panel { border-radius: 10px; background: #fff; color: var(--text); border: 1px solid var(--line); box-shadow: 0 24px 50px -30px rgba(6, 30, 18, .3); }
.form-panel h2 { color: var(--ink); }
.field label { color: var(--ink-2); font-weight: 500; }
.field input, .field textarea, .field select { border-radius: 8px; border: 1px solid #d5ddd7; background: #f8faf8; color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: #9aa29d; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--mint); }
.field.has-error input, .field.has-error textarea { border-color: #e5533d; }
.field__error { color: #c0392b; }
.form-panel .btn { border-radius: 8px; }
.form-panel .btn--accent { box-shadow: none; }
.form-note { color: var(--muted); }
.form-success .icon { color: var(--brand); }
.form-success h3 { color: var(--ink); }

/* Contact: what happens next */
.next-steps { background: var(--surface); }
.next-steps__head { max-width: 640px; margin-bottom: 40px; }
.next-steps__head .eyebrow { color: var(--green-600); }
.next-steps__head .h2 { margin-top: 10px; }
.next-steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: none; }
.next-steps__list li { position: relative; padding: 28px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.next-steps__num { position: absolute; top: 24px; right: 24px; font-size: 16px; font-weight: 700; color: #b8c0ba; }
.next-steps__ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 12px; background: var(--mint); color: var(--brand); }
.next-steps__ic .icon { width: 22px; height: 22px; }
.next-steps__list h3 { font-size: 19px; color: var(--ink); margin-bottom: 8px; }
.next-steps__list p { font-size: 16px; line-height: 1.55; color: var(--muted); }
@media (max-width: 860px) { .next-steps__list { grid-template-columns: 1fr; } }

/* Industries hero: white Book a demo button */
.hero-photo .btn--primary { --btn-bg: #fff; --btn-fg: var(--ink); box-shadow: none; }
.hero-photo .btn--primary:hover { --btn-bg: #eef7f0; }

/* =========================================================
   INDUSTRIES page v2
   ========================================================= */
.trades__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px 64px; align-items: end; margin-bottom: 40px; }
.trades__head .eyebrow, .roles-intro .eyebrow, .role .eyebrow { color: var(--green-600); }
.trades__head .h2 { margin-top: 10px; }
.trades__head p { font-size: 17px; line-height: 1.6; color: var(--muted); }
.trades__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.trade { display: flex; flex-direction: column; padding: 26px; border-radius: 14px; background: #fff; border: 1px solid var(--line); transition: border-color .25s, transform .25s, box-shadow .25s; }
.trade:hover { border-color: #b9dcc0; transform: translateY(-3px); box-shadow: 0 20px 40px -28px rgba(6, 30, 18, .35); }
.trade__ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 12px; background: var(--mint); color: var(--brand); }
.trade__ic .icon { width: 22px; height: 22px; }
.trade h3 { font-size: 19px; color: var(--ink); margin-bottom: 8px; }
.trade p { font-size: 16px; line-height: 1.55; color: var(--muted); margin-bottom: 18px; }
.trade__tags { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.trade__tags li { padding: 4px 10px; border-radius: 999px; background: var(--surface); font-size: 16px; font-weight: 600; color: var(--ink-2); }
.trade--lg { grid-row: span 2; justify-content: flex-end; min-height: 320px; color: #fff; border: 0; background: radial-gradient(80% 70% at 90% 0%, rgba(145, 246, 117, .28), transparent 60%), linear-gradient(160deg, #1f8a3c, #0e5a28); }
.trade--lg .trade__ic { margin-bottom: auto; background: rgba(255, 255, 255, .14); color: #fff; }
.trade--lg h3 { margin-top: 28px; font-size: 26px; color: #fff; }
.trade--lg p { font-size: 16px; color: rgba(255, 255, 255, .85); }
.trade--lg .trade__tags { margin-top: 0; }
.trade--lg .trade__tags li { background: rgba(255, 255, 255, .14); color: #fff; }
.trades__grid > .trade:nth-child(2), .trades__grid > .trade:nth-child(3) { }
@media (max-width: 960px) { .trades__head { grid-template-columns: 1fr; } .trades__grid { grid-template-columns: 1fr 1fr; } .trade--lg { grid-column: 1 / -1; grid-row: auto; min-height: 260px; } }
@media (max-width: 600px) { .trades__grid { grid-template-columns: 1fr; } }

.roles-intro { padding-top: clamp(24px, 4vw, 48px); text-align: center; }
.roles-intro .h2 { margin-top: 10px; }
.role { padding-block: clamp(48px, 6vw, 88px); }
.role h2 { margin-bottom: 18px; }
.role__problem { margin-bottom: 14px; padding: 12px 16px; border-left: 3px solid #f0a020; border-radius: 0 8px 8px 0; background: #fff8ea; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.role__problem strong { color: #a86400; }
.role .lead { font-size: 17px; line-height: 1.6; }
.role__points { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.role__points li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; font-weight: 500; color: var(--ink); }
.role__points .icon { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--mint); color: var(--brand); stroke-width: 3; }

.every-trade { background: var(--surface); }
.every-trade__title { font-size: clamp(22px, 2vw, 28px); letter-spacing: -.01em; color: var(--ink); text-align: center; margin-bottom: 28px; }
.every-trade__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.every-trade__list li { display: grid; gap: 4px; justify-items: start; padding: 22px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.every-trade__list .icon { width: 24px; height: 24px; margin-bottom: 10px; color: var(--brand); }
.every-trade__list strong { font-size: 16px; color: var(--ink); }
.every-trade__list span { font-size: 16px; color: var(--muted); }
@media (max-width: 900px) { .every-trade__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .every-trade__list { grid-template-columns: 1fr; } }
/* Industries: Mechanical & HVAC card uses a photo under a dark overlay */
.trade--lg { position: relative; isolation: isolate; overflow: hidden; background: #0b1410 url("../img/photos/field-techs.webp") 62% 30% / cover no-repeat; }
.trade--lg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 12, 9, .45) 0%, rgba(6, 12, 9, .7) 50%, rgba(6, 12, 9, .9) 100%); }
/* New photography framing */
.case-banner__img { object-position: 30% 35%; }
.sync__photo { object-position: 58% 30%; }
.final-cta__photo { object-position: 50% 30%; }
.page-solutions .hero-photo__bg { object-position: 75% 30%; }

/* =========================================================
   RESOURCES hero v2: light, editorial featured layout
   ========================================================= */
.res-hero { padding-block: clamp(48px, 6vw, 80px) clamp(40px, 5vw, 64px); background: linear-gradient(180deg, var(--mint-50) 0%, #fff 70%); }
.res-hero__head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 20px 64px; align-items: end; margin-bottom: 40px; }
.res-hero .eyebrow { color: var(--green-600); }
.res-hero h1 { margin-top: 12px; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.06; letter-spacing: -.025em; color: var(--ink); }
.res-hero__head p { font-size: 17px; line-height: 1.6; color: var(--muted); }
.res-hero__grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.res-spot { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); overflow: hidden; border-radius: 16px; background: #fff; border: 1px solid var(--line); color: inherit; transition: box-shadow .3s, transform .3s; }
.res-spot:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -36px rgba(6, 30, 18, .4); }
.res-spot__media { position: relative; display: block; overflow: hidden; min-height: 320px; }
.res-spot__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.res-spot:hover .res-spot__media img { transform: scale(1.04); }
.res-spot__badge { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94); font-size: 16px; font-weight: 700; color: var(--ink); }
.res-spot__badge .icon { width: 14px; height: 14px; color: var(--brand); }
.res-spot__body { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.6vw, 34px); }
.res-spot__meta { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--muted); }
.res-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--mint); color: var(--brand); font-size: 16px; font-weight: 700; }
.res-tag--alt { background: var(--surface); color: var(--ink-2); margin-bottom: 6px; }
.res-spot__title { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.15; letter-spacing: -.02em; color: var(--ink); }
.res-spot__text { font-size: 16px; line-height: 1.6; color: var(--muted); }
.res-spot__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.res-author { display: inline-flex; align-items: center; gap: 10px; }
.res-author__av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--forest-800); }
.res-author__av svg { width: 16px; height: 16px; }
.res-author b { display: block; font-size: 16px; color: var(--ink); } .res-author small { display: block; font-size: 16px; color: var(--muted); }
.res-spot__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; color: var(--brand); }
.res-spot__cta .icon { width: 16px; height: 16px; transition: transform .2s; }
.res-spot:hover .res-spot__cta .icon { transform: translateX(3px); }
.res-side { display: flex; flex-direction: column; padding: 24px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.res-side__title { font-size: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.res-side__list { list-style: none; margin: 0; padding: 0; }
.res-side__list li + li { border-top: 1px solid var(--line); }
.res-side__list a { display: flex; gap: 14px; padding: 16px 0; color: inherit; }
.res-side__n { font-size: 16px; font-weight: 700; color: #b8c0ba; font-variant-numeric: tabular-nums; padding-top: 3px; }
.res-side__list strong { display: block; font-size: 16px; line-height: 1.35; color: var(--ink); transition: color .2s; }
.res-side__list a:hover strong { color: var(--brand); }
.res-side__all { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-size: 16px; font-weight: 600; color: var(--brand); }
.res-side__all .icon { width: 16px; height: 16px; }
@media (max-width: 1080px) { .res-hero__grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .res-hero__head { grid-template-columns: 1fr; } .res-spot { grid-template-columns: 1fr; } .res-spot__media { min-height: 220px; } }

/* Home stats v2: its own full-width section, square, single colour */
.stats { margin-top: 0; background: #fff; border-bottom: 1px solid var(--line); padding-block: clamp(36px, 4.5vw, 56px); }
.stats__grid { background: transparent; border-radius: 0; box-shadow: none; padding-block: 0; padding-inline: var(--gutter); }
.stat { padding: 4px clamp(16px, 2.4vw, 32px); }
.stat:first-child { padding-left: 0; }
.stat strong, .stat strong span { color: var(--brand); }
@media (max-width: 860px) { .stats { margin-top: 0; } .stat { padding: 18px 16px; } .stat:nth-child(odd) { padding-left: 0; } }
.stats .stats__grid { max-width: calc(var(--container) + var(--gutter) * 2); }
.footer__brand .store-badges { margin-top: 24px; }
.footer__legal, .footer__legal a, .footer__credit, .footer__credit strong { font-size: 16px; }

/* =========================================================
   INTEGRATIONS page
   ========================================================= */
.intg-hero { padding-block: clamp(48px, 6vw, 88px); background: linear-gradient(180deg, var(--mint-50), #fff 80%); overflow: hidden; }
.intg-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.intg-hero .eyebrow { color: var(--green-600); }
.intg-hero h1 { margin: 12px 0 20px; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.06; letter-spacing: -.025em; color: var(--ink); }
.intg-hero .lead { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 560px; margin-bottom: 32px; }
.intg-orbit { position: relative; justify-self: center; width: min(100%, 420px); aspect-ratio: 1; container-type: inline-size; }
.intg-orbit__ring { position: absolute; inset: 4%; border-radius: 50%; border: 1.5px dashed #cfe0d2; animation: spin 60s linear infinite; }
.intg-orbit__ring--2 { inset: 26%; animation-direction: reverse; animation-duration: 45s; }
.intg-orbit__core { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 24%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 28%; background: #fff; box-shadow: 0 20px 40px -14px rgba(6, 30, 18, .3), 0 0 0 10px var(--mint-50); }
.intg-orbit__core svg { width: 50%; height: 50%; }
.intg-orbit ul { list-style: none; margin: 0; padding: 0; }
.intg-orbit li { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 15cqw; height: 15cqw; margin: -7.5cqw 0 0 -7.5cqw; border-radius: 26%; background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 24px -12px rgba(6, 30, 18, .3); animation: float 6s ease-in-out infinite; }
.intg-orbit li svg { width: 55%; height: 55%; }
.intg-orbit li:nth-child(1) { left: calc(50% + 0cqw); top: calc(50% - 46cqw); transform: none; }
.intg-orbit li:nth-child(2) { left: calc(50% + 40cqw); top: calc(50% - 23cqw); transform: none; animation-delay: -1s; }
.intg-orbit li:nth-child(3) { left: calc(50% + 40cqw); top: calc(50% + 23cqw); transform: none; animation-delay: -2s; }
.intg-orbit li:nth-child(4) { left: calc(50% + 0cqw); top: calc(50% + 46cqw); transform: none; animation-delay: -3s; }
.intg-orbit li:nth-child(5) { left: calc(50% - 40cqw); top: calc(50% + 23cqw); transform: none; animation-delay: -4s; }
.intg-orbit li:nth-child(6) { left: calc(50% - 40cqw); top: calc(50% - 23cqw); transform: none; animation-delay: -5s; }

.intg-dir__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 32px; margin-bottom: 28px; }
.intg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.intg-chips .chip { padding: 8px 16px; border: 0; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.intg-chips .chip[aria-pressed="true"] { background: var(--brand); color: #fff; }
.intg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.intg-card { display: flex; flex-direction: column; padding: 24px; border-radius: 14px; background: #fff; border: 1px solid var(--line); transition: border-color .25s, transform .25s, box-shadow .25s; }
.intg-card:hover { border-color: #b9dcc0; transform: translateY(-3px); box-shadow: 0 20px 40px -28px rgba(6, 30, 18, .35); }
.intg-card__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.intg-logo { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.intg-logo svg { width: 28px; height: 28px; }
.intg-status { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: 16px; font-weight: 700; color: var(--muted); }
.intg-status--live { background: var(--mint); color: var(--brand); }
.intg-card h3 { font-size: 19px; color: var(--ink); }
.intg-card__cat { margin: 2px 0 10px; font-size: 16px; color: var(--muted); }
.intg-card p:not(.intg-card__cat) { font-size: 16px; line-height: 1.55; color: var(--text); }
.intg-card__syncs { list-style: none; margin: auto 0 0; padding: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--line); }
.intg-card p + .intg-card__syncs { margin-top: 18px; }
.intg-card__syncs li { padding: 3px 10px; border-radius: 999px; background: var(--surface); font-size: 16px; font-weight: 600; color: var(--ink-2); }
.intg-card.is-soon .intg-logo { filter: grayscale(.6); opacity: .75; }
.intg-dir .res-empty { margin-top: 24px; color: var(--muted); }

.intg-how { background: var(--surface); }
.intg-how .h2 { margin-bottom: 32px; }
.intg-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.intg-steps li { padding: 26px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.intg-steps span { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: 16px; border-radius: 10px; background: var(--mint); color: var(--brand); font-size: 16px; font-weight: 700; }
.intg-steps h3 { font-size: 18px; color: var(--ink); margin-bottom: 6px; }
.intg-steps p { font-size: 16px; line-height: 1.55; color: var(--muted); }
.intg-cta__sub { margin-top: 10px; font-size: 17px; color: rgba(255, 255, 255, .85); max-width: 560px; }
@media (max-width: 960px) { .intg-hero__grid { grid-template-columns: 1fr; } .intg-orbit { width: min(80%, 360px); } .intg-grid { grid-template-columns: 1fr 1fr; } .intg-steps { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .intg-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .intg-orbit__ring, .intg-orbit li { animation: none; } }

/* CTA bands on inner pages: photo under a slightly dark overlay */
.cta-band--lime, .cta-band--green { position: relative; isolation: isolate; overflow: hidden; background: #0b1410 url("../img/photos/rooftop-hvac.webp") 50% 35% / cover no-repeat; }
.page-solutions .cta-band, .page-integrations .cta-band { background-image: url("../img/photos/pipeline-engineers.webp"); background-position: 35% 35%; }
.cta-band--lime::before, .cta-band--green::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 14, 10, .78) 0%, rgba(6, 14, 10, .55) 60%, rgba(6, 14, 10, .45) 100%); }

/* =========================================================
   ARTICLE pages (blog-*.html)
   ========================================================= */
.art-head { padding-block: clamp(36px, 5vw, 64px) 32px; background: linear-gradient(180deg, var(--mint-50), #fff); }
.art-head__inner { max-width: 880px; }
.art-crumbs { display: flex; align-items: center; gap: 6px; margin-bottom: 22px; font-size: 16px; color: var(--muted); }
.art-crumbs a:hover { color: var(--brand); }
.art-crumbs__sep { width: 14px; height: 14px; transform: rotate(-90deg); }
.art-head h1 { margin: 14px 0 16px; font-size: clamp(32px, 4vw, 52px); line-height: 1.08; letter-spacing: -.025em; color: var(--ink); }
.art-dek { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--muted); max-width: 760px; }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.art-share { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color .2s, color .2s; }
.art-share:hover { border-color: var(--brand); color: var(--brand); }
.art-share .icon { width: 15px; height: 15px; }
.art-share.is-copied { border-color: var(--brand); color: var(--brand); }
.art-hero { margin: 0 0 clamp(32px, 4vw, 56px); overflow: hidden; border-radius: 16px; aspect-ratio: 21 / 9; background: var(--surface); }
.art-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.art-layout { display: grid; grid-template-columns: 260px minmax(0, 720px); justify-content: center; gap: clamp(32px, 5vw, 80px); padding-bottom: clamp(48px, 6vw, 88px); }
.art-side__sticky { position: sticky; top: 96px; }
.art-side__title { font-size: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.art-toc { list-style: none; margin: 0 0 28px; padding: 0; border-left: 2px solid var(--line); }
.art-toc a { display: block; margin-left: -2px; padding: 7px 0 7px 14px; border-left: 2px solid transparent; font-size: 16px; line-height: 1.4; color: var(--muted); transition: color .15s, border-color .15s; }
.art-toc a:hover, .art-toc a.is-active { color: var(--ink); border-left-color: var(--brand); }
.art-side__cta { padding: 20px; border-radius: 14px; background: var(--forest-800); color: rgba(255, 255, 255, .8); }
.art-side__cta strong { display: block; font-size: 16px; color: #fff; margin-bottom: 6px; }
.art-side__cta p { font-size: 16px; margin-bottom: 14px; }
.prose-art { font-size: 18px; line-height: 1.75; color: #2c332e; }
.prose-art h2 { margin: 44px 0 14px; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; letter-spacing: -.015em; color: var(--ink); scroll-margin-top: 110px; }
.prose-art h2:first-of-type { margin-top: 0; }
.prose-art p { margin: 0 0 18px; }
.prose-art ul { margin: 0 0 20px; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.prose-art ul li { position: relative; padding-left: 26px; }
.prose-art ul li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--mint); }
.prose-art a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose-art blockquote { margin: 28px 0; padding: 20px 24px; border-left: 4px solid var(--brand); border-radius: 0 12px 12px 0; background: var(--mint-50); font-size: 20px; line-height: 1.5; font-weight: 500; color: var(--ink); }
.art-take { margin: 0 0 40px; padding: 22px 24px; border-radius: 14px; border: 1px solid #cfe7d4; background: #f6fcf7; }
.art-take__title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px !important; font-size: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); }
.art-take__title .icon { width: 16px; height: 16px; }
.art-take ul { margin: 0; font-size: 16.5px; }
.art-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 40px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.art-stats div { padding: 20px; border-right: 1px solid var(--line); }
.art-stats div:last-child { border-right: 0; }
.art-stats dt { font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.02em; color: var(--brand); line-height: 1.1; }
.art-stats dd { margin: 6px 0 0; font-size: 16px; line-height: 1.4; color: var(--muted); }
.art-end { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.art-end .link-arrow { font-size: 16px; text-decoration: none; }
.art-back { transform: rotate(180deg); }
.art-related { background: var(--surface); }
.art-related .h2 { margin-bottom: 28px; }
.art-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.art-rel { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 12px 20px; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: inherit; transition: transform .25s, box-shadow .25s; }
.art-rel:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -30px rgba(6, 30, 18, .4); }
.art-rel__img { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; margin-bottom: 4px; }
.art-rel__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.art-rel .res-tag, .art-rel strong, .art-rel small { margin-inline: 8px; }
.art-rel strong { font-size: 17px; line-height: 1.3; color: var(--ink); }
.art-rel small { font-size: 16px; color: var(--muted); }
@media (max-width: 960px) {
  .art-layout { grid-template-columns: 1fr; }
  .art-side { order: 2; }
  .art-side__sticky { position: static; }
  .art-toc { display: none; } .art-side__title { display: none; }
  .art-related__grid { grid-template-columns: 1fr; }
  .art-hero { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) { .prose-art { font-size: 17px; } .art-stats { grid-template-columns: 1fr; } .art-stats div { border-right: 0; border-bottom: 1px solid var(--line); } .art-stats div:last-child { border-bottom: 0; } }
.cmp-no { display: inline-block; width: 12px; height: 2px; border-radius: 2px; background: #c3cac5; vertical-align: middle; }
/* Pricing without figures */
.plan-card__price .amount--text { font-size: clamp(28px, 2.6vw, 34px); letter-spacing: -.02em; }
.plan-card__billed a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.plan-card--featured .plan-card__billed a { color: var(--lime); }
.compare-head p a { color: var(--brand); font-weight: 600; text-decoration: underline; }
.pricing-hero .lead { margin-bottom: 0; }

/* =========================================================
   Simple pages: About, Careers, Security, Help center
   ========================================================= */
.sp-hero { padding-block: clamp(56px, 7vw, 104px) clamp(44px, 5vw, 72px); background: linear-gradient(180deg, var(--mint-50), #fff); }
.sp-hero__inner { max-width: 860px; }
.sp-hero--center .sp-hero__inner { margin-inline: auto; text-align: center; }
.sp-hero .eyebrow, .about-story .eyebrow, .about-values .eyebrow, .about-who .eyebrow, .careers-roles .eyebrow, .about-values__head .eyebrow, .careers-roles__inner .eyebrow { color: var(--green-600); }
.sp-hero h1 { margin: 12px 0 18px; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.06; letter-spacing: -.025em; color: var(--ink); }
.sp-hero .lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--muted); max-width: 720px; }
.sp-hero--center .lead { margin-inline: auto; }
.sp-hero .btn-row { margin-top: 28px; }
.about-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--mint); color: var(--brand); flex: none; }
.about-ic .icon { width: 22px; height: 22px; }
.about-story__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.about-story__img { margin: 0; overflow: hidden; border-radius: 16px; aspect-ratio: 5 / 4; }
.about-story__img img { width: 100%; height: 100%; object-fit: cover; object-position: 35% 40%; }
.about-story .h2 { margin: 10px 0 18px; }
.about-story p { font-size: 17px; line-height: 1.7; color: var(--text); margin-bottom: 14px; }
.about-values { background: var(--surface); }
.about-values__head { margin-bottom: 32px; }
.about-values__head .h2 { margin-top: 10px; }
.about-values__grid, .sec-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.about-values__grid li, .sec-grid li { padding: 26px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.about-values__grid h3, .sec-grid h3 { margin: 18px 0 6px; font-size: 18px; color: var(--ink); }
.about-values__grid p, .sec-grid p { font-size: 16px; line-height: 1.55; color: var(--muted); }
.about-who__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.about-who .h2 { margin: 10px 0 16px; }
.about-who .lead { font-size: 17px; line-height: 1.65; color: var(--muted); margin-bottom: 28px; }
.about-who__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.about-who__list li { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.about-who__list strong { font-size: 17px; color: var(--ink); }
.about-who__list span { font-size: 16px; color: var(--muted); }
.careers-roles { background: var(--surface); }
.careers-roles__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.careers-roles__inner .h2 { margin: 10px 0 14px; }
.careers-roles__inner .lead { font-size: 17px; line-height: 1.6; color: var(--muted); }
.careers-card { display: grid; gap: 10px; justify-items: start; padding: 28px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.careers-card strong { font-size: 18px; color: var(--ink); margin-top: 6px; }
.careers-card p { font-size: 16px; color: var(--muted); margin-bottom: 8px; }
.sec-ai__inner { display: flex; gap: 24px; align-items: flex-start; padding: clamp(28px, 4vw, 44px); border-radius: 16px; background: var(--forest-800); color: rgba(255, 255, 255, .85); }
.sec-ai__inner .about-ic { background: rgba(255, 255, 255, .12); color: var(--lime); }
.sec-ai__inner .h2 { color: #fff; margin-bottom: 10px; }
.sec-ai__inner .lead { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.help-search { position: relative; max-width: 620px; margin: 32px auto 0; }
.help-search__ic { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--muted); }
.help-search input { width: 100%; min-height: 58px; padding: 0 20px 0 50px; border-radius: 14px; border: 1px solid #d5ddd7; background: #fff; font: inherit; font-size: 16px; color: var(--ink); box-shadow: 0 16px 40px -28px rgba(6, 30, 18, .4); }
.help-search input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 4px var(--mint); }
.help-topics { padding-bottom: 0; }
.help-topics__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.help-topics__grid a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 20px; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: inherit; transition: border-color .2s, transform .2s; }
.help-topics__grid a:hover { border-color: #b9dcc0; transform: translateY(-2px); }
.help-topics__grid .about-ic { grid-row: span 2; }
.help-topics__grid strong { font-size: 16px; color: var(--ink); }
.help-topics__grid small { font-size: 16px; color: var(--muted); }
.help-faq__inner { max-width: 860px; }
.help-group { margin-bottom: 40px; scroll-margin-top: 100px; }
.help-group h2 { font-size: 22px; letter-spacing: -.01em; color: var(--ink); margin-bottom: 8px; }
.help-faq .faq-item summary { font-size: 17px; padding: 18px 0 12px; }
.help-faq .faq-item:first-of-type summary { padding-top: 18px; }
.help-faq .faq-item__body { font-size: 16px; line-height: 1.6; }
.help-faq .faq-item__body a { color: var(--brand); text-decoration: underline; }
.help-empty { color: var(--muted); }
.help-support { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: clamp(24px, 3vw, 40px); border-radius: 16px; background: var(--mint-50); border: 1px solid #cfe7d4; }
.help-support h2 { font-size: clamp(22px, 2vw, 28px); color: var(--ink); margin-bottom: 6px; }
.help-support p { color: var(--muted); }
@media (max-width: 960px) {
  .about-story__grid, .about-who__grid, .careers-roles__inner { grid-template-columns: 1fr; }
  .about-values__grid { grid-template-columns: 1fr 1fr; }
  .sec-grid, .help-topics__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) { .about-values__grid, .sec-grid, .help-topics__grid { grid-template-columns: 1fr; } .sec-ai__inner { flex-direction: column; } }
.sp-hero__inner { max-width: calc(var(--container) + var(--gutter) * 2); }
.sp-hero h1 { max-width: 860px; }
.sp-hero--center h1 { margin-inline: auto; }

/* =========================================================
   Mini motion graphics on detail-page cards (mg-*)
   ========================================================= */
.mg { display: block; overflow: hidden; border-radius: 12px; background: #dff3e4; aspect-ratio: 200 / 110; margin-bottom: 18px; }
.mg svg { display: block; width: 100%; height: 100%; font-family: Inter, system-ui, sans-serif; }
.mg-t { font-size: 8.5px; font-weight: 600; fill: #3f4a43; }
.mg-t-w { fill: #fff; }
.mg-ink { fill: #1b2a21; }
.mg-line { fill: #dbe2dc; }
.mg-dot { fill: #2fbf4a; }
.mg-tick { fill: none; stroke: #1f8a3c; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mg-tick-w { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mg-stroke-warn { fill: none; stroke: #c77700; stroke-width: 1.8; stroke-linecap: round; }
.mg-flow { fill: none; stroke: #9fd3aa; stroke-width: 2; stroke-dasharray: 5 6; animation: dash 1.2s linear infinite; }
.mg-float { animation: ill-float 4s ease-in-out infinite; }
.mg-fill { transform-box: fill-box; transform-origin: left; animation: mgFill 3.2s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes mgFill { 0% { transform: scaleX(0); } 30%, 100% { transform: scaleX(1); } }
.mg-pop { transform-box: fill-box; transform-origin: center; animation: mgPop 3.2s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes mgPop { 0%, 8% { transform: scale(0); opacity: 0; } 18%, 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.mg-draw { stroke-dasharray: 40; animation: mgDraw 3s ease-out infinite; }
@keyframes mgDraw { 0% { stroke-dashoffset: 40; } 35%, 100% { stroke-dashoffset: 0; } }
.mg-sig rect { fill: #1f8a3c; animation: mgSig 3.2s infinite; }
@keyframes mgSig { 0%, 40% { fill: #1f8a3c; } 45%, 100% { fill: #d5dbd6; } }
.mg-off { fill: #c77700; opacity: 0; animation: mgOff 3.2s infinite; }
@keyframes mgOff { 0%, 44% { opacity: 0; } 50%, 100% { opacity: 1; } }
.mg-bar { fill: #2fbf4a; transform-box: fill-box; transform-origin: left; animation: mgFill 2s ease-out infinite; }
.mg-approve { fill: #1f8a3c; animation: mgApprove 3.2s infinite; }
@keyframes mgApprove { 0%, 34% { fill: #1f8a3c; } 38%, 70% { fill: #18702f; } 74%, 100% { fill: #1f8a3c; } }
.mg-cursor { fill: #141a16; stroke: #fff; stroke-width: 1; animation: mgCursor 3.2s ease-in-out infinite; }
@keyframes mgCursor { 0% { transform: translate(150px, 100px); opacity: 0; } 10% { opacity: 1; } 32% { transform: translate(66px, 54px); } 36% { transform: translate(66px, 54px) scale(.85); } 40%, 80% { transform: translate(66px, 54px); opacity: 1; } 100% { transform: translate(66px, 54px); opacity: 0; } }
.mg-ring { fill: none; stroke: #9fd3aa; stroke-width: 2; stroke-dasharray: 6 8; transform-origin: 100px 55px; animation: spin 14s linear infinite; }
.mg-msg { opacity: 0; animation: mgMsg 3.6s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes mgMsg { 0% { opacity: 0; transform: translateY(6px); } 10%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.mg-blink { animation: atDots 1s infinite; }
.mg-orbit { transform-origin: 100px 55px; animation: spin 9s linear infinite; }
.mg-progress { stroke: #1f8a3c; stroke-dasharray: 152; animation: mgProg 3.6s ease-in-out infinite; }
@keyframes mgProg { 0% { stroke-dashoffset: 152; } 70%, 100% { stroke-dashoffset: 0; } }
.mg-runner { animation: mgRun 3.6s ease-in-out infinite; }
@keyframes mgRun { 0% { transform: translate(24px, 62px); } 70%, 100% { transform: translate(176px, 62px); } }
.mg-spark { transform-box: fill-box; transform-origin: center; animation: mgSpark 2.4s ease-in-out infinite; }
@keyframes mgSpark { 0%, 100% { transform: scale(.7) rotate(0); opacity: .6; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
.mg-spark-big { transform-box: fill-box; transform-origin: center; animation: mgSpark 3s ease-in-out infinite; }
.mg-letter { animation: mgLetter 3.2s ease-in-out infinite; }
@keyframes mgLetter { 0% { transform: translateY(26px); } 35%, 75% { transform: translateY(0); } 100% { transform: translateY(26px); } }
.mg-packet { animation: mgPacket 2.6s ease-in-out infinite; }
@keyframes mgPacket { 0% { transform: translate(64px, 56px); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate(136px, 56px); opacity: 0; } }
.mg-scramble { letter-spacing: .08em; animation: mgScr .5s steps(2) infinite; }
@keyframes mgScr { 50% { opacity: .55; } }
.mg-av { fill: #fff; stroke: #cfe0d2; stroke-width: 1.5; animation: mgAv 3s infinite; animation-delay: var(--d, 0s); }
@keyframes mgAv { 0%, 30% { fill: #e1ffe7; stroke: #1f8a3c; stroke-width: 2.5; } 34%, 100% { fill: #fff; stroke: #cfe0d2; stroke-width: 1.5; } }
.mg-tag rect { animation: mgTag 3s infinite; animation-delay: var(--d, 0s); }
@keyframes mgTag { 0%, 30% { fill: #1f8a3c; stroke: #1f8a3c; } 34%, 100% { fill: #fff; stroke: #cfe0d2; } }
.mg-tag text { animation: mgTagT 3s infinite; animation-delay: var(--d, 0s); }
@keyframes mgTagT { 0%, 30% { fill: #fff; } 34%, 100% { fill: #3f4a43; } }
.mg-key { animation: mgKey 3.2s ease-in-out infinite; }
@keyframes mgKey { 0% { transform: translate(20px, 30px) rotate(-20deg); opacity: 0; } 15% { opacity: 1; } 45%, 75% { transform: translate(40px, 81px) rotate(0); opacity: 1; } 100% { transform: translate(40px, 81px); opacity: 0; } }
.mg-row { opacity: 0; animation: mgMsg 3.6s ease-out infinite; animation-delay: var(--d, 0s); }
.mg-copy { animation: mgCopy 3s ease-in-out infinite; }
@keyframes mgCopy { 0%, 20% { opacity: .25; } 50%, 100% { opacity: 1; } }
.mg-spin-c { transform-origin: 146px 58px; animation: spin 1.6s linear infinite; }
.mg-wifi { stroke: #c0392b; fill: #c0392b; animation: mgWifi 3.6s infinite; }
@keyframes mgWifi { 0%, 45% { stroke: #c8cfca; fill: #c8cfca; } 50%, 100% { stroke: #2fbf4a; fill: #2fbf4a; } }
.mg-queue rect { animation: mgQueue 3.6s infinite; }
@keyframes mgQueue { 0%, 50% { fill: #cfe9d4; } 60%, 100% { fill: #2fbf4a; } }
.mg-up { opacity: 0; animation: mgUp 3.6s ease-in infinite; }
@keyframes mgUp { 0%, 52% { opacity: 0; transform: translate(56px, 54px); } 58% { opacity: 1; } 90% { opacity: 1; transform: translate(150px, 46px); } 100% { opacity: 0; transform: translate(150px, 46px); } }
@media (prefers-reduced-motion: reduce) { .mg *, .mg svg * { animation: none !important; opacity: 1 !important; } }

/* Cards: tinted fill instead of plain white + border (no shadows, no glow) */
.about-values__grid li, .sec-grid li { padding: 14px 14px 24px; border: 0; border-radius: 16px; background: #f1f8f2; }
.about-values .about-values__grid li { background: #fff; }
.about-values__grid li h3, .sec-grid li h3, .about-values__grid li p, .sec-grid li p { padding-inline: 10px; }
.about-values__grid li h3, .sec-grid li h3 { margin-top: 4px; }
.careers-card { border: 0; background: #f1f8f2; padding: 16px 16px 24px; }
.careers-roles .careers-card { background: #fff; }
.careers-card .mg { width: 100%; }
.careers-card strong, .careers-card p, .careers-card .btn { margin-inline: 8px; width: calc(100% - 16px); }
.sec-ai__inner .mg { flex: none; width: 200px; margin: 0; background: rgba(255, 255, 255, .06); }
.help-topics__grid a { grid-template-columns: 92px 1fr; border: 0; background: #f1f8f2; padding: 12px; column-gap: 16px; }
.help-topics__grid a:hover { background: #e6f4e9; }
.help-topics__grid .mg { grid-row: span 2; margin: 0; width: 92px; aspect-ratio: 1; }
.help-topics__grid .mg svg { width: 180%; height: 100%; margin-left: -40%; }
@media (max-width: 600px) { .sec-ai__inner .mg { width: 100%; } }
/* Help topic tiles: art on top, text below */
.help-topics__grid a { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px 12px 20px; }
.help-topics__grid .mg { width: 100%; aspect-ratio: 200 / 96; margin: 0 0 12px; }
.help-topics__grid .mg svg { width: 100%; margin: 0; }
.help-topics__grid strong, .help-topics__grid small { padding-inline: 8px; }

/* Security: Alex on your data (split panel with looping product animation) */
.sec-ai2__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(28px, 4.5vw, 64px); border-radius: 22px; color: rgba(255, 255, 255, .82); background: radial-gradient(70% 90% at 100% 0%, rgba(145, 246, 117, .18), transparent 60%), linear-gradient(160deg, #0a4a27, #043b20 55%, #022614); }
.sec-ai2__tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(145, 246, 117, .14); color: var(--lime); font-size: 16px; font-weight: 700; }
.sec-ai2__tag .icon { width: 14px; height: 14px; }
.sec-ai2 .h2 { margin: 18px 0 14px; color: #fff; }
.sec-ai2 .lead { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.sec-ai2__list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
.sec-ai2__list li { display: flex; gap: 14px; align-items: flex-start; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); }
.sec-ai2__list .icon { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: var(--lime); }
.sec-ai2__list strong { display: block; font-size: 16px; color: #fff; margin-bottom: 2px; }
.sec-ai2__list span { font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .7); }
.sa-ws { --T: 6s; position: relative; display: grid; justify-items: center; gap: 14px; padding: 44px 22px 24px; border-radius: 18px; border: 1.5px dashed rgba(145, 246, 117, .45); background: rgba(255, 255, 255, .04); }
.sa-ws__label { position: absolute; top: -13px; left: 20px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #0b4024; border: 1px solid rgba(145, 246, 117, .4); font-size: 12px; font-weight: 600; color: var(--lime); }
.sa-ws__label .icon { width: 12px; height: 12px; }
.sa-src { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sa-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; animation: saChip var(--T) infinite; animation-delay: var(--d); }
.sa-chip .icon { width: 14px; height: 14px; color: var(--brand); }
@keyframes saChip { 0%, 4% { transform: translateY(6px); opacity: .4; } 10%, 30% { transform: none; opacity: 1; box-shadow: 0 0 0 3px rgba(145, 246, 117, .5); } 36%, 100% { box-shadow: none; opacity: 1; } }
.sa-flow { display: flex; gap: 30px; height: 26px; }
.sa-flow i { width: 2px; height: 100%; border-radius: 2px; background: linear-gradient(180deg, transparent, var(--lime), transparent); background-size: 100% 200%; animation: saFlow 1.2s linear infinite; }
.sa-flow i:nth-child(2) { animation-delay: .2s; } .sa-flow i:nth-child(3) { animation-delay: .4s; }
@keyframes saFlow { from { background-position: 0 100%; } to { background-position: 0 -100%; } }
.sa-alex { display: grid; justify-items: center; gap: 2px; text-align: center; }
.sa-alex__core { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(145, 246, 117, .18); animation: corepulse 3s ease-in-out infinite; }
.sa-alex__core svg { width: 26px; height: 26px; }
.sa-alex b { margin-top: 8px; font-size: 15px; color: #fff; } .sa-alex small { font-size: 12px; color: rgba(255, 255, 255, .6); }
.sa-card { position: relative; width: 100%; max-width: 360px; padding: 16px; border-radius: 14px; background: #fff; color: var(--ink); animation: saCard var(--T) infinite; }
@keyframes saCard { 0%, 30% { opacity: 0; transform: translateY(10px); } 38%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.sa-card__head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); }
.sa-card__head .icon { width: 14px; height: 14px; }
.sa-card__body { margin: 6px 0 4px; font-size: 15.5px; font-weight: 600; }
.sa-card__src { font-size: 12.5px; color: var(--muted); }
.sa-card__btns { display: flex; gap: 8px; margin-top: 12px; }
.sa-approve { position: relative; flex: 1; height: 36px; border-radius: 9px; overflow: hidden; font-size: 13.5px; font-weight: 600; }
.sa-approve span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.sa-approve .a { background: var(--brand); color: #fff; animation: saA var(--T) infinite; }
.sa-approve .b { background: var(--lime); color: var(--ink); opacity: 0; animation: saB var(--T) infinite; }
.sa-approve .icon { width: 15px; height: 15px; stroke-width: 3; }
@keyframes saA { 0%, 66% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes saB { 0%, 66% { opacity: 0; } 68%, 100% { opacity: 1; } }
.sa-review { display: grid; place-items: center; padding: 0 16px; border-radius: 9px; border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; }
.sa-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; fill: var(--ink); stroke: #fff; stroke-width: 1.5; animation: saCursor var(--T) ease-in-out infinite; }
@keyframes saCursor { 0%, 40% { transform: translate(300px, 140px); opacity: 0; } 46% { opacity: 1; } 62% { transform: translate(110px, 112px); } 65% { transform: translate(110px, 112px) scale(.85); } 68%, 90% { transform: translate(110px, 112px); opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 960px) { .sec-ai2__panel { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sa-ws *, .sa-ws { animation: none !important; } .sa-card { opacity: 1; } .sa-cursor { display: none; } }
@media (max-width: 960px) { .sa-cursor { display: none; } }
/* Product tour v2: even step spacing so each step gets its own scroll window */
.tour__step { min-height: 0; height: 52vh; display: flex; flex-direction: column; justify-content: center; padding-block: 0; }
.tour__step:first-child { height: 40vh; justify-content: flex-start; padding-top: 24px; }
.tour__step:last-child { height: 60vh; }
.tour__steps { padding-bottom: 8vh; }
.browser__views img { transition: opacity .35s ease, transform .5s var(--ease-out); }
@media (max-width: 960px) {
  .tour__step, .tour__step:first-child, .tour__step:last-child { height: auto; min-height: 42vh; justify-content: flex-start; padding-block: 22px; opacity: .45; }
  .tour__step.is-active { opacity: 1; }
  .tour__sticky { background: var(--forest-800); padding-bottom: 10px; }
}
@media (min-width: 961px) { .hero-home__grid { min-height: 760px; padding-block: 104px 112px; } }
@media (min-width: 961px) { .hero-shot__crew { bottom: -112px; } }

/* =========================================================
   Alex stack cards: looping motion graphics (9s timeline).
   .mt-N appears at N% of the loop; everything resets at ~94%.
   ========================================================= */
.stack-card__visual { --T: 9s; }
.mt { opacity: 0; }
.mt-0 { animation: mt0 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt0 { 0%, 0% { opacity: 0; transform: translateY(10px); } 4%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-0 { transform-origin: 0 50%; animation: mf0 var(--T) ease-out infinite; }
@keyframes mf0 { 0%, 0% { transform: scaleX(0); } 10%, 100% { transform: scaleX(1); } }
.mk-0 { animation: mk0 var(--T) infinite; }
@keyframes mk0 { 0%, 0% { opacity: 0; transform: scale(.4); } 3%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-0.swap-a { animation: swa0 var(--T) infinite; } .sw-0.swap-b { animation: swb0 var(--T) infinite; }
@keyframes swa0 { 0%, 0% { opacity: 1; } 2%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb0 { 0%, 0% { opacity: 0; } 2%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-0 { animation: ty0 var(--T) infinite; }
@keyframes ty0 { 0%, 0% { opacity: 0; max-height: 0; } 2%, 11% { opacity: 1; max-height: 40px; } 12%, 100% { opacity: 0; max-height: 0; } }
.mt-2 { animation: mt2 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt2 { 0%, 2% { opacity: 0; transform: translateY(10px); } 6%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-2 { transform-origin: 0 50%; animation: mf2 var(--T) ease-out infinite; }
@keyframes mf2 { 0%, 2% { transform: scaleX(0); } 12%, 100% { transform: scaleX(1); } }
.mk-2 { animation: mk2 var(--T) infinite; }
@keyframes mk2 { 0%, 2% { opacity: 0; transform: scale(.4); } 5%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-2.swap-a { animation: swa2 var(--T) infinite; } .sw-2.swap-b { animation: swb2 var(--T) infinite; }
@keyframes swa2 { 0%, 2% { opacity: 1; } 4%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb2 { 0%, 2% { opacity: 0; } 4%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-2 { animation: ty2 var(--T) infinite; }
@keyframes ty2 { 0%, 2% { opacity: 0; max-height: 0; } 4%, 13% { opacity: 1; max-height: 40px; } 14%, 100% { opacity: 0; max-height: 0; } }
.mt-4 { animation: mt4 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt4 { 0%, 4% { opacity: 0; transform: translateY(10px); } 8%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-4 { transform-origin: 0 50%; animation: mf4 var(--T) ease-out infinite; }
@keyframes mf4 { 0%, 4% { transform: scaleX(0); } 14%, 100% { transform: scaleX(1); } }
.mk-4 { animation: mk4 var(--T) infinite; }
@keyframes mk4 { 0%, 4% { opacity: 0; transform: scale(.4); } 7%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-4.swap-a { animation: swa4 var(--T) infinite; } .sw-4.swap-b { animation: swb4 var(--T) infinite; }
@keyframes swa4 { 0%, 4% { opacity: 1; } 6%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb4 { 0%, 4% { opacity: 0; } 6%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-4 { animation: ty4 var(--T) infinite; }
@keyframes ty4 { 0%, 4% { opacity: 0; max-height: 0; } 6%, 15% { opacity: 1; max-height: 40px; } 16%, 100% { opacity: 0; max-height: 0; } }
.mt-6 { animation: mt6 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt6 { 0%, 6% { opacity: 0; transform: translateY(10px); } 10%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-6 { transform-origin: 0 50%; animation: mf6 var(--T) ease-out infinite; }
@keyframes mf6 { 0%, 6% { transform: scaleX(0); } 16%, 100% { transform: scaleX(1); } }
.mk-6 { animation: mk6 var(--T) infinite; }
@keyframes mk6 { 0%, 6% { opacity: 0; transform: scale(.4); } 9%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-6.swap-a { animation: swa6 var(--T) infinite; } .sw-6.swap-b { animation: swb6 var(--T) infinite; }
@keyframes swa6 { 0%, 6% { opacity: 1; } 8%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb6 { 0%, 6% { opacity: 0; } 8%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-6 { animation: ty6 var(--T) infinite; }
@keyframes ty6 { 0%, 6% { opacity: 0; max-height: 0; } 8%, 17% { opacity: 1; max-height: 40px; } 18%, 100% { opacity: 0; max-height: 0; } }
.mt-8 { animation: mt8 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt8 { 0%, 8% { opacity: 0; transform: translateY(10px); } 12%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-8 { transform-origin: 0 50%; animation: mf8 var(--T) ease-out infinite; }
@keyframes mf8 { 0%, 8% { transform: scaleX(0); } 18%, 100% { transform: scaleX(1); } }
.mk-8 { animation: mk8 var(--T) infinite; }
@keyframes mk8 { 0%, 8% { opacity: 0; transform: scale(.4); } 11%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-8.swap-a { animation: swa8 var(--T) infinite; } .sw-8.swap-b { animation: swb8 var(--T) infinite; }
@keyframes swa8 { 0%, 8% { opacity: 1; } 10%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb8 { 0%, 8% { opacity: 0; } 10%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-8 { animation: ty8 var(--T) infinite; }
@keyframes ty8 { 0%, 8% { opacity: 0; max-height: 0; } 10%, 19% { opacity: 1; max-height: 40px; } 20%, 100% { opacity: 0; max-height: 0; } }
.mt-10 { animation: mt10 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt10 { 0%, 10% { opacity: 0; transform: translateY(10px); } 14%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-10 { transform-origin: 0 50%; animation: mf10 var(--T) ease-out infinite; }
@keyframes mf10 { 0%, 10% { transform: scaleX(0); } 20%, 100% { transform: scaleX(1); } }
.mk-10 { animation: mk10 var(--T) infinite; }
@keyframes mk10 { 0%, 10% { opacity: 0; transform: scale(.4); } 13%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-10.swap-a { animation: swa10 var(--T) infinite; } .sw-10.swap-b { animation: swb10 var(--T) infinite; }
@keyframes swa10 { 0%, 10% { opacity: 1; } 12%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb10 { 0%, 10% { opacity: 0; } 12%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-10 { animation: ty10 var(--T) infinite; }
@keyframes ty10 { 0%, 10% { opacity: 0; max-height: 0; } 12%, 21% { opacity: 1; max-height: 40px; } 22%, 100% { opacity: 0; max-height: 0; } }
.mt-12 { animation: mt12 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt12 { 0%, 12% { opacity: 0; transform: translateY(10px); } 16%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-12 { transform-origin: 0 50%; animation: mf12 var(--T) ease-out infinite; }
@keyframes mf12 { 0%, 12% { transform: scaleX(0); } 22%, 100% { transform: scaleX(1); } }
.mk-12 { animation: mk12 var(--T) infinite; }
@keyframes mk12 { 0%, 12% { opacity: 0; transform: scale(.4); } 15%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-12.swap-a { animation: swa12 var(--T) infinite; } .sw-12.swap-b { animation: swb12 var(--T) infinite; }
@keyframes swa12 { 0%, 12% { opacity: 1; } 14%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb12 { 0%, 12% { opacity: 0; } 14%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-12 { animation: ty12 var(--T) infinite; }
@keyframes ty12 { 0%, 12% { opacity: 0; max-height: 0; } 14%, 23% { opacity: 1; max-height: 40px; } 24%, 100% { opacity: 0; max-height: 0; } }
.mt-14 { animation: mt14 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt14 { 0%, 14% { opacity: 0; transform: translateY(10px); } 18%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-14 { transform-origin: 0 50%; animation: mf14 var(--T) ease-out infinite; }
@keyframes mf14 { 0%, 14% { transform: scaleX(0); } 24%, 100% { transform: scaleX(1); } }
.mk-14 { animation: mk14 var(--T) infinite; }
@keyframes mk14 { 0%, 14% { opacity: 0; transform: scale(.4); } 17%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-14.swap-a { animation: swa14 var(--T) infinite; } .sw-14.swap-b { animation: swb14 var(--T) infinite; }
@keyframes swa14 { 0%, 14% { opacity: 1; } 16%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb14 { 0%, 14% { opacity: 0; } 16%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-14 { animation: ty14 var(--T) infinite; }
@keyframes ty14 { 0%, 14% { opacity: 0; max-height: 0; } 16%, 25% { opacity: 1; max-height: 40px; } 26%, 100% { opacity: 0; max-height: 0; } }
.mt-16 { animation: mt16 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt16 { 0%, 16% { opacity: 0; transform: translateY(10px); } 20%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-16 { transform-origin: 0 50%; animation: mf16 var(--T) ease-out infinite; }
@keyframes mf16 { 0%, 16% { transform: scaleX(0); } 26%, 100% { transform: scaleX(1); } }
.mk-16 { animation: mk16 var(--T) infinite; }
@keyframes mk16 { 0%, 16% { opacity: 0; transform: scale(.4); } 19%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-16.swap-a { animation: swa16 var(--T) infinite; } .sw-16.swap-b { animation: swb16 var(--T) infinite; }
@keyframes swa16 { 0%, 16% { opacity: 1; } 18%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb16 { 0%, 16% { opacity: 0; } 18%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-16 { animation: ty16 var(--T) infinite; }
@keyframes ty16 { 0%, 16% { opacity: 0; max-height: 0; } 18%, 27% { opacity: 1; max-height: 40px; } 28%, 100% { opacity: 0; max-height: 0; } }
.mt-18 { animation: mt18 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt18 { 0%, 18% { opacity: 0; transform: translateY(10px); } 22%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-18 { transform-origin: 0 50%; animation: mf18 var(--T) ease-out infinite; }
@keyframes mf18 { 0%, 18% { transform: scaleX(0); } 28%, 100% { transform: scaleX(1); } }
.mk-18 { animation: mk18 var(--T) infinite; }
@keyframes mk18 { 0%, 18% { opacity: 0; transform: scale(.4); } 21%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-18.swap-a { animation: swa18 var(--T) infinite; } .sw-18.swap-b { animation: swb18 var(--T) infinite; }
@keyframes swa18 { 0%, 18% { opacity: 1; } 20%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb18 { 0%, 18% { opacity: 0; } 20%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-18 { animation: ty18 var(--T) infinite; }
@keyframes ty18 { 0%, 18% { opacity: 0; max-height: 0; } 20%, 29% { opacity: 1; max-height: 40px; } 30%, 100% { opacity: 0; max-height: 0; } }
.mt-20 { animation: mt20 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt20 { 0%, 20% { opacity: 0; transform: translateY(10px); } 24%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-20 { transform-origin: 0 50%; animation: mf20 var(--T) ease-out infinite; }
@keyframes mf20 { 0%, 20% { transform: scaleX(0); } 30%, 100% { transform: scaleX(1); } }
.mk-20 { animation: mk20 var(--T) infinite; }
@keyframes mk20 { 0%, 20% { opacity: 0; transform: scale(.4); } 23%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-20.swap-a { animation: swa20 var(--T) infinite; } .sw-20.swap-b { animation: swb20 var(--T) infinite; }
@keyframes swa20 { 0%, 20% { opacity: 1; } 22%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb20 { 0%, 20% { opacity: 0; } 22%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-20 { animation: ty20 var(--T) infinite; }
@keyframes ty20 { 0%, 20% { opacity: 0; max-height: 0; } 22%, 31% { opacity: 1; max-height: 40px; } 32%, 100% { opacity: 0; max-height: 0; } }
.mt-22 { animation: mt22 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt22 { 0%, 22% { opacity: 0; transform: translateY(10px); } 26%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-22 { transform-origin: 0 50%; animation: mf22 var(--T) ease-out infinite; }
@keyframes mf22 { 0%, 22% { transform: scaleX(0); } 32%, 100% { transform: scaleX(1); } }
.mk-22 { animation: mk22 var(--T) infinite; }
@keyframes mk22 { 0%, 22% { opacity: 0; transform: scale(.4); } 25%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-22.swap-a { animation: swa22 var(--T) infinite; } .sw-22.swap-b { animation: swb22 var(--T) infinite; }
@keyframes swa22 { 0%, 22% { opacity: 1; } 24%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb22 { 0%, 22% { opacity: 0; } 24%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-22 { animation: ty22 var(--T) infinite; }
@keyframes ty22 { 0%, 22% { opacity: 0; max-height: 0; } 24%, 33% { opacity: 1; max-height: 40px; } 34%, 100% { opacity: 0; max-height: 0; } }
.mt-24 { animation: mt24 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt24 { 0%, 24% { opacity: 0; transform: translateY(10px); } 28%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-24 { transform-origin: 0 50%; animation: mf24 var(--T) ease-out infinite; }
@keyframes mf24 { 0%, 24% { transform: scaleX(0); } 34%, 100% { transform: scaleX(1); } }
.mk-24 { animation: mk24 var(--T) infinite; }
@keyframes mk24 { 0%, 24% { opacity: 0; transform: scale(.4); } 27%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-24.swap-a { animation: swa24 var(--T) infinite; } .sw-24.swap-b { animation: swb24 var(--T) infinite; }
@keyframes swa24 { 0%, 24% { opacity: 1; } 26%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb24 { 0%, 24% { opacity: 0; } 26%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-24 { animation: ty24 var(--T) infinite; }
@keyframes ty24 { 0%, 24% { opacity: 0; max-height: 0; } 26%, 35% { opacity: 1; max-height: 40px; } 36%, 100% { opacity: 0; max-height: 0; } }
.mt-26 { animation: mt26 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt26 { 0%, 26% { opacity: 0; transform: translateY(10px); } 30%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-26 { transform-origin: 0 50%; animation: mf26 var(--T) ease-out infinite; }
@keyframes mf26 { 0%, 26% { transform: scaleX(0); } 36%, 100% { transform: scaleX(1); } }
.mk-26 { animation: mk26 var(--T) infinite; }
@keyframes mk26 { 0%, 26% { opacity: 0; transform: scale(.4); } 29%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-26.swap-a { animation: swa26 var(--T) infinite; } .sw-26.swap-b { animation: swb26 var(--T) infinite; }
@keyframes swa26 { 0%, 26% { opacity: 1; } 28%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb26 { 0%, 26% { opacity: 0; } 28%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-26 { animation: ty26 var(--T) infinite; }
@keyframes ty26 { 0%, 26% { opacity: 0; max-height: 0; } 28%, 37% { opacity: 1; max-height: 40px; } 38%, 100% { opacity: 0; max-height: 0; } }
.mt-28 { animation: mt28 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt28 { 0%, 28% { opacity: 0; transform: translateY(10px); } 32%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-28 { transform-origin: 0 50%; animation: mf28 var(--T) ease-out infinite; }
@keyframes mf28 { 0%, 28% { transform: scaleX(0); } 38%, 100% { transform: scaleX(1); } }
.mk-28 { animation: mk28 var(--T) infinite; }
@keyframes mk28 { 0%, 28% { opacity: 0; transform: scale(.4); } 31%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-28.swap-a { animation: swa28 var(--T) infinite; } .sw-28.swap-b { animation: swb28 var(--T) infinite; }
@keyframes swa28 { 0%, 28% { opacity: 1; } 30%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb28 { 0%, 28% { opacity: 0; } 30%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-28 { animation: ty28 var(--T) infinite; }
@keyframes ty28 { 0%, 28% { opacity: 0; max-height: 0; } 30%, 39% { opacity: 1; max-height: 40px; } 40%, 100% { opacity: 0; max-height: 0; } }
.mt-30 { animation: mt30 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt30 { 0%, 30% { opacity: 0; transform: translateY(10px); } 34%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-30 { transform-origin: 0 50%; animation: mf30 var(--T) ease-out infinite; }
@keyframes mf30 { 0%, 30% { transform: scaleX(0); } 40%, 100% { transform: scaleX(1); } }
.mk-30 { animation: mk30 var(--T) infinite; }
@keyframes mk30 { 0%, 30% { opacity: 0; transform: scale(.4); } 33%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-30.swap-a { animation: swa30 var(--T) infinite; } .sw-30.swap-b { animation: swb30 var(--T) infinite; }
@keyframes swa30 { 0%, 30% { opacity: 1; } 32%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb30 { 0%, 30% { opacity: 0; } 32%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-30 { animation: ty30 var(--T) infinite; }
@keyframes ty30 { 0%, 30% { opacity: 0; max-height: 0; } 32%, 41% { opacity: 1; max-height: 40px; } 42%, 100% { opacity: 0; max-height: 0; } }
.mt-32 { animation: mt32 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt32 { 0%, 32% { opacity: 0; transform: translateY(10px); } 36%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-32 { transform-origin: 0 50%; animation: mf32 var(--T) ease-out infinite; }
@keyframes mf32 { 0%, 32% { transform: scaleX(0); } 42%, 100% { transform: scaleX(1); } }
.mk-32 { animation: mk32 var(--T) infinite; }
@keyframes mk32 { 0%, 32% { opacity: 0; transform: scale(.4); } 35%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-32.swap-a { animation: swa32 var(--T) infinite; } .sw-32.swap-b { animation: swb32 var(--T) infinite; }
@keyframes swa32 { 0%, 32% { opacity: 1; } 34%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb32 { 0%, 32% { opacity: 0; } 34%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-32 { animation: ty32 var(--T) infinite; }
@keyframes ty32 { 0%, 32% { opacity: 0; max-height: 0; } 34%, 43% { opacity: 1; max-height: 40px; } 44%, 100% { opacity: 0; max-height: 0; } }
.mt-34 { animation: mt34 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt34 { 0%, 34% { opacity: 0; transform: translateY(10px); } 38%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-34 { transform-origin: 0 50%; animation: mf34 var(--T) ease-out infinite; }
@keyframes mf34 { 0%, 34% { transform: scaleX(0); } 44%, 100% { transform: scaleX(1); } }
.mk-34 { animation: mk34 var(--T) infinite; }
@keyframes mk34 { 0%, 34% { opacity: 0; transform: scale(.4); } 37%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-34.swap-a { animation: swa34 var(--T) infinite; } .sw-34.swap-b { animation: swb34 var(--T) infinite; }
@keyframes swa34 { 0%, 34% { opacity: 1; } 36%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb34 { 0%, 34% { opacity: 0; } 36%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-34 { animation: ty34 var(--T) infinite; }
@keyframes ty34 { 0%, 34% { opacity: 0; max-height: 0; } 36%, 45% { opacity: 1; max-height: 40px; } 46%, 100% { opacity: 0; max-height: 0; } }
.mt-36 { animation: mt36 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt36 { 0%, 36% { opacity: 0; transform: translateY(10px); } 40%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-36 { transform-origin: 0 50%; animation: mf36 var(--T) ease-out infinite; }
@keyframes mf36 { 0%, 36% { transform: scaleX(0); } 46%, 100% { transform: scaleX(1); } }
.mk-36 { animation: mk36 var(--T) infinite; }
@keyframes mk36 { 0%, 36% { opacity: 0; transform: scale(.4); } 39%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-36.swap-a { animation: swa36 var(--T) infinite; } .sw-36.swap-b { animation: swb36 var(--T) infinite; }
@keyframes swa36 { 0%, 36% { opacity: 1; } 38%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb36 { 0%, 36% { opacity: 0; } 38%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-36 { animation: ty36 var(--T) infinite; }
@keyframes ty36 { 0%, 36% { opacity: 0; max-height: 0; } 38%, 47% { opacity: 1; max-height: 40px; } 48%, 100% { opacity: 0; max-height: 0; } }
.mt-38 { animation: mt38 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt38 { 0%, 38% { opacity: 0; transform: translateY(10px); } 42%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-38 { transform-origin: 0 50%; animation: mf38 var(--T) ease-out infinite; }
@keyframes mf38 { 0%, 38% { transform: scaleX(0); } 48%, 100% { transform: scaleX(1); } }
.mk-38 { animation: mk38 var(--T) infinite; }
@keyframes mk38 { 0%, 38% { opacity: 0; transform: scale(.4); } 41%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-38.swap-a { animation: swa38 var(--T) infinite; } .sw-38.swap-b { animation: swb38 var(--T) infinite; }
@keyframes swa38 { 0%, 38% { opacity: 1; } 40%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb38 { 0%, 38% { opacity: 0; } 40%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-38 { animation: ty38 var(--T) infinite; }
@keyframes ty38 { 0%, 38% { opacity: 0; max-height: 0; } 40%, 49% { opacity: 1; max-height: 40px; } 50%, 100% { opacity: 0; max-height: 0; } }
.mt-40 { animation: mt40 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt40 { 0%, 40% { opacity: 0; transform: translateY(10px); } 44%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-40 { transform-origin: 0 50%; animation: mf40 var(--T) ease-out infinite; }
@keyframes mf40 { 0%, 40% { transform: scaleX(0); } 50%, 100% { transform: scaleX(1); } }
.mk-40 { animation: mk40 var(--T) infinite; }
@keyframes mk40 { 0%, 40% { opacity: 0; transform: scale(.4); } 43%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-40.swap-a { animation: swa40 var(--T) infinite; } .sw-40.swap-b { animation: swb40 var(--T) infinite; }
@keyframes swa40 { 0%, 40% { opacity: 1; } 42%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb40 { 0%, 40% { opacity: 0; } 42%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-40 { animation: ty40 var(--T) infinite; }
@keyframes ty40 { 0%, 40% { opacity: 0; max-height: 0; } 42%, 51% { opacity: 1; max-height: 40px; } 52%, 100% { opacity: 0; max-height: 0; } }
.mt-42 { animation: mt42 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt42 { 0%, 42% { opacity: 0; transform: translateY(10px); } 46%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-42 { transform-origin: 0 50%; animation: mf42 var(--T) ease-out infinite; }
@keyframes mf42 { 0%, 42% { transform: scaleX(0); } 52%, 100% { transform: scaleX(1); } }
.mk-42 { animation: mk42 var(--T) infinite; }
@keyframes mk42 { 0%, 42% { opacity: 0; transform: scale(.4); } 45%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-42.swap-a { animation: swa42 var(--T) infinite; } .sw-42.swap-b { animation: swb42 var(--T) infinite; }
@keyframes swa42 { 0%, 42% { opacity: 1; } 44%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb42 { 0%, 42% { opacity: 0; } 44%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-42 { animation: ty42 var(--T) infinite; }
@keyframes ty42 { 0%, 42% { opacity: 0; max-height: 0; } 44%, 53% { opacity: 1; max-height: 40px; } 54%, 100% { opacity: 0; max-height: 0; } }
.mt-44 { animation: mt44 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt44 { 0%, 44% { opacity: 0; transform: translateY(10px); } 48%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-44 { transform-origin: 0 50%; animation: mf44 var(--T) ease-out infinite; }
@keyframes mf44 { 0%, 44% { transform: scaleX(0); } 54%, 100% { transform: scaleX(1); } }
.mk-44 { animation: mk44 var(--T) infinite; }
@keyframes mk44 { 0%, 44% { opacity: 0; transform: scale(.4); } 47%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-44.swap-a { animation: swa44 var(--T) infinite; } .sw-44.swap-b { animation: swb44 var(--T) infinite; }
@keyframes swa44 { 0%, 44% { opacity: 1; } 46%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb44 { 0%, 44% { opacity: 0; } 46%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-44 { animation: ty44 var(--T) infinite; }
@keyframes ty44 { 0%, 44% { opacity: 0; max-height: 0; } 46%, 55% { opacity: 1; max-height: 40px; } 56%, 100% { opacity: 0; max-height: 0; } }
.mt-46 { animation: mt46 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt46 { 0%, 46% { opacity: 0; transform: translateY(10px); } 50%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-46 { transform-origin: 0 50%; animation: mf46 var(--T) ease-out infinite; }
@keyframes mf46 { 0%, 46% { transform: scaleX(0); } 56%, 100% { transform: scaleX(1); } }
.mk-46 { animation: mk46 var(--T) infinite; }
@keyframes mk46 { 0%, 46% { opacity: 0; transform: scale(.4); } 49%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-46.swap-a { animation: swa46 var(--T) infinite; } .sw-46.swap-b { animation: swb46 var(--T) infinite; }
@keyframes swa46 { 0%, 46% { opacity: 1; } 48%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb46 { 0%, 46% { opacity: 0; } 48%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-46 { animation: ty46 var(--T) infinite; }
@keyframes ty46 { 0%, 46% { opacity: 0; max-height: 0; } 48%, 57% { opacity: 1; max-height: 40px; } 58%, 100% { opacity: 0; max-height: 0; } }
.mt-48 { animation: mt48 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt48 { 0%, 48% { opacity: 0; transform: translateY(10px); } 52%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-48 { transform-origin: 0 50%; animation: mf48 var(--T) ease-out infinite; }
@keyframes mf48 { 0%, 48% { transform: scaleX(0); } 58%, 100% { transform: scaleX(1); } }
.mk-48 { animation: mk48 var(--T) infinite; }
@keyframes mk48 { 0%, 48% { opacity: 0; transform: scale(.4); } 51%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-48.swap-a { animation: swa48 var(--T) infinite; } .sw-48.swap-b { animation: swb48 var(--T) infinite; }
@keyframes swa48 { 0%, 48% { opacity: 1; } 50%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb48 { 0%, 48% { opacity: 0; } 50%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-48 { animation: ty48 var(--T) infinite; }
@keyframes ty48 { 0%, 48% { opacity: 0; max-height: 0; } 50%, 59% { opacity: 1; max-height: 40px; } 60%, 100% { opacity: 0; max-height: 0; } }
.mt-50 { animation: mt50 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt50 { 0%, 50% { opacity: 0; transform: translateY(10px); } 54%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-50 { transform-origin: 0 50%; animation: mf50 var(--T) ease-out infinite; }
@keyframes mf50 { 0%, 50% { transform: scaleX(0); } 60%, 100% { transform: scaleX(1); } }
.mk-50 { animation: mk50 var(--T) infinite; }
@keyframes mk50 { 0%, 50% { opacity: 0; transform: scale(.4); } 53%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-50.swap-a { animation: swa50 var(--T) infinite; } .sw-50.swap-b { animation: swb50 var(--T) infinite; }
@keyframes swa50 { 0%, 50% { opacity: 1; } 52%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb50 { 0%, 50% { opacity: 0; } 52%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-50 { animation: ty50 var(--T) infinite; }
@keyframes ty50 { 0%, 50% { opacity: 0; max-height: 0; } 52%, 61% { opacity: 1; max-height: 40px; } 62%, 100% { opacity: 0; max-height: 0; } }
.mt-52 { animation: mt52 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt52 { 0%, 52% { opacity: 0; transform: translateY(10px); } 56%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-52 { transform-origin: 0 50%; animation: mf52 var(--T) ease-out infinite; }
@keyframes mf52 { 0%, 52% { transform: scaleX(0); } 62%, 100% { transform: scaleX(1); } }
.mk-52 { animation: mk52 var(--T) infinite; }
@keyframes mk52 { 0%, 52% { opacity: 0; transform: scale(.4); } 55%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-52.swap-a { animation: swa52 var(--T) infinite; } .sw-52.swap-b { animation: swb52 var(--T) infinite; }
@keyframes swa52 { 0%, 52% { opacity: 1; } 54%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb52 { 0%, 52% { opacity: 0; } 54%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-52 { animation: ty52 var(--T) infinite; }
@keyframes ty52 { 0%, 52% { opacity: 0; max-height: 0; } 54%, 63% { opacity: 1; max-height: 40px; } 64%, 100% { opacity: 0; max-height: 0; } }
.mt-54 { animation: mt54 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt54 { 0%, 54% { opacity: 0; transform: translateY(10px); } 58%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-54 { transform-origin: 0 50%; animation: mf54 var(--T) ease-out infinite; }
@keyframes mf54 { 0%, 54% { transform: scaleX(0); } 64%, 100% { transform: scaleX(1); } }
.mk-54 { animation: mk54 var(--T) infinite; }
@keyframes mk54 { 0%, 54% { opacity: 0; transform: scale(.4); } 57%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-54.swap-a { animation: swa54 var(--T) infinite; } .sw-54.swap-b { animation: swb54 var(--T) infinite; }
@keyframes swa54 { 0%, 54% { opacity: 1; } 56%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb54 { 0%, 54% { opacity: 0; } 56%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-54 { animation: ty54 var(--T) infinite; }
@keyframes ty54 { 0%, 54% { opacity: 0; max-height: 0; } 56%, 65% { opacity: 1; max-height: 40px; } 66%, 100% { opacity: 0; max-height: 0; } }
.mt-56 { animation: mt56 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt56 { 0%, 56% { opacity: 0; transform: translateY(10px); } 60%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-56 { transform-origin: 0 50%; animation: mf56 var(--T) ease-out infinite; }
@keyframes mf56 { 0%, 56% { transform: scaleX(0); } 66%, 100% { transform: scaleX(1); } }
.mk-56 { animation: mk56 var(--T) infinite; }
@keyframes mk56 { 0%, 56% { opacity: 0; transform: scale(.4); } 59%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-56.swap-a { animation: swa56 var(--T) infinite; } .sw-56.swap-b { animation: swb56 var(--T) infinite; }
@keyframes swa56 { 0%, 56% { opacity: 1; } 58%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb56 { 0%, 56% { opacity: 0; } 58%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-56 { animation: ty56 var(--T) infinite; }
@keyframes ty56 { 0%, 56% { opacity: 0; max-height: 0; } 58%, 67% { opacity: 1; max-height: 40px; } 68%, 100% { opacity: 0; max-height: 0; } }
.mt-58 { animation: mt58 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt58 { 0%, 58% { opacity: 0; transform: translateY(10px); } 62%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-58 { transform-origin: 0 50%; animation: mf58 var(--T) ease-out infinite; }
@keyframes mf58 { 0%, 58% { transform: scaleX(0); } 68%, 100% { transform: scaleX(1); } }
.mk-58 { animation: mk58 var(--T) infinite; }
@keyframes mk58 { 0%, 58% { opacity: 0; transform: scale(.4); } 61%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-58.swap-a { animation: swa58 var(--T) infinite; } .sw-58.swap-b { animation: swb58 var(--T) infinite; }
@keyframes swa58 { 0%, 58% { opacity: 1; } 60%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb58 { 0%, 58% { opacity: 0; } 60%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-58 { animation: ty58 var(--T) infinite; }
@keyframes ty58 { 0%, 58% { opacity: 0; max-height: 0; } 60%, 69% { opacity: 1; max-height: 40px; } 70%, 100% { opacity: 0; max-height: 0; } }
.mt-60 { animation: mt60 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt60 { 0%, 60% { opacity: 0; transform: translateY(10px); } 64%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-60 { transform-origin: 0 50%; animation: mf60 var(--T) ease-out infinite; }
@keyframes mf60 { 0%, 60% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
.mk-60 { animation: mk60 var(--T) infinite; }
@keyframes mk60 { 0%, 60% { opacity: 0; transform: scale(.4); } 63%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-60.swap-a { animation: swa60 var(--T) infinite; } .sw-60.swap-b { animation: swb60 var(--T) infinite; }
@keyframes swa60 { 0%, 60% { opacity: 1; } 62%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb60 { 0%, 60% { opacity: 0; } 62%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-60 { animation: ty60 var(--T) infinite; }
@keyframes ty60 { 0%, 60% { opacity: 0; max-height: 0; } 62%, 71% { opacity: 1; max-height: 40px; } 72%, 100% { opacity: 0; max-height: 0; } }
.mt-62 { animation: mt62 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt62 { 0%, 62% { opacity: 0; transform: translateY(10px); } 66%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-62 { transform-origin: 0 50%; animation: mf62 var(--T) ease-out infinite; }
@keyframes mf62 { 0%, 62% { transform: scaleX(0); } 72%, 100% { transform: scaleX(1); } }
.mk-62 { animation: mk62 var(--T) infinite; }
@keyframes mk62 { 0%, 62% { opacity: 0; transform: scale(.4); } 65%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-62.swap-a { animation: swa62 var(--T) infinite; } .sw-62.swap-b { animation: swb62 var(--T) infinite; }
@keyframes swa62 { 0%, 62% { opacity: 1; } 64%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb62 { 0%, 62% { opacity: 0; } 64%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-62 { animation: ty62 var(--T) infinite; }
@keyframes ty62 { 0%, 62% { opacity: 0; max-height: 0; } 64%, 73% { opacity: 1; max-height: 40px; } 74%, 100% { opacity: 0; max-height: 0; } }
.mt-64 { animation: mt64 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt64 { 0%, 64% { opacity: 0; transform: translateY(10px); } 68%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-64 { transform-origin: 0 50%; animation: mf64 var(--T) ease-out infinite; }
@keyframes mf64 { 0%, 64% { transform: scaleX(0); } 74%, 100% { transform: scaleX(1); } }
.mk-64 { animation: mk64 var(--T) infinite; }
@keyframes mk64 { 0%, 64% { opacity: 0; transform: scale(.4); } 67%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-64.swap-a { animation: swa64 var(--T) infinite; } .sw-64.swap-b { animation: swb64 var(--T) infinite; }
@keyframes swa64 { 0%, 64% { opacity: 1; } 66%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb64 { 0%, 64% { opacity: 0; } 66%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-64 { animation: ty64 var(--T) infinite; }
@keyframes ty64 { 0%, 64% { opacity: 0; max-height: 0; } 66%, 75% { opacity: 1; max-height: 40px; } 76%, 100% { opacity: 0; max-height: 0; } }
.mt-66 { animation: mt66 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt66 { 0%, 66% { opacity: 0; transform: translateY(10px); } 70%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-66 { transform-origin: 0 50%; animation: mf66 var(--T) ease-out infinite; }
@keyframes mf66 { 0%, 66% { transform: scaleX(0); } 76%, 100% { transform: scaleX(1); } }
.mk-66 { animation: mk66 var(--T) infinite; }
@keyframes mk66 { 0%, 66% { opacity: 0; transform: scale(.4); } 69%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-66.swap-a { animation: swa66 var(--T) infinite; } .sw-66.swap-b { animation: swb66 var(--T) infinite; }
@keyframes swa66 { 0%, 66% { opacity: 1; } 68%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb66 { 0%, 66% { opacity: 0; } 68%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-66 { animation: ty66 var(--T) infinite; }
@keyframes ty66 { 0%, 66% { opacity: 0; max-height: 0; } 68%, 77% { opacity: 1; max-height: 40px; } 78%, 100% { opacity: 0; max-height: 0; } }
.mt-68 { animation: mt68 var(--T) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mt68 { 0%, 68% { opacity: 0; transform: translateY(10px); } 72%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.mf-68 { transform-origin: 0 50%; animation: mf68 var(--T) ease-out infinite; }
@keyframes mf68 { 0%, 68% { transform: scaleX(0); } 78%, 100% { transform: scaleX(1); } }
.mk-68 { animation: mk68 var(--T) infinite; }
@keyframes mk68 { 0%, 68% { opacity: 0; transform: scale(.4); } 71%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sw-68.swap-a { animation: swa68 var(--T) infinite; } .sw-68.swap-b { animation: swb68 var(--T) infinite; }
@keyframes swa68 { 0%, 68% { opacity: 1; } 70%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swb68 { 0%, 68% { opacity: 0; } 70%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
.ty-68 { animation: ty68 var(--T) infinite; }
@keyframes ty68 { 0%, 68% { opacity: 0; max-height: 0; } 70%, 79% { opacity: 1; max-height: 40px; } 80%, 100% { opacity: 0; max-height: 0; } }

.swap { display: inline-flex; align-items: center; gap: 6px; }
.av-arrow, .av-btn--swap, .av-input__txt { display: inline-grid; }
.av-arrow > .swap, .av-btn--swap > .swap, .av-input__txt > .swap { grid-area: 1 / 1; justify-content: center; }
.av-input__txt > .swap { justify-content: flex-start; }
.av-arrow { padding: 6px 14px; }
.av-arrow .icon { width: 15px; height: 15px; }
.av-btn--swap { display: grid; }
.av-btn--swap .swap-b { color: var(--ink); background: var(--lime); margin: -9px; padding: 9px; border-radius: 9px; }
.av-btn--swap .icon { width: 14px; height: 14px; stroke-width: 3; }
.av-typed { color: var(--ink); white-space: nowrap; overflow: hidden; }
.av-input__txt { min-width: 0; overflow: hidden; }
.av-check { position: relative; display: grid; place-items: center; }
.mtick { position: absolute; inset: -2px; display: grid; place-items: center; border-radius: 6px; background: var(--brand); color: #fff; }
.mtick .icon { width: 12px; height: 12px; stroke-width: 3.5; }
.av-merge { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 13px; font-weight: 700; }
.av-merge__a { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; }
.av-merge .icon { width: 15px; height: 15px; }
.av-merge > i { width: 4px; height: 4px; border-radius: 50%; background: var(--ink); animation: atDots 1s infinite; }
.av-merge > i:nth-of-type(2) { animation-delay: .15s; } .av-merge > i:nth-of-type(3) { animation-delay: .3s; }
.av-alerts { position: relative; overflow: hidden; }
.av-scan { position: absolute; left: 0; right: 0; top: 0; height: 40px; background: linear-gradient(180deg, transparent, rgba(47, 191, 74, .12), transparent); animation: avScan var(--T) linear infinite; pointer-events: none; }
@keyframes avScan { 0% { transform: translateY(-40px); } 60%, 100% { transform: translateY(420px); } }
.av-alert { position: relative; }
.av-ping { position: absolute; right: 12px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: #e5533d; box-shadow: 0 0 0 0 rgba(229, 83, 61, .5); animation: avPing 1.6s ease-out infinite; }
.av-alerts .av-alert:nth-of-type(2) .av-ping { background: #f0a020; }
.av-alerts .av-alert:nth-of-type(4) .av-ping { background: #9aa29d; animation: none; }
@keyframes avPing { 0% { box-shadow: 0 0 0 0 rgba(229, 83, 61, .45); } 100% { box-shadow: 0 0 0 10px rgba(229, 83, 61, 0); } }
.av-typing { display: inline-flex; gap: 4px; align-self: flex-start; margin-top: 10px; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--surface); overflow: hidden; }
.av-typing i { width: 6px; height: 6px; border-radius: 50%; background: #9aa29d; animation: atDots 1s infinite; }
.av-typing i:nth-child(2) { animation-delay: .15s; } .av-typing i:nth-child(3) { animation-delay: .3s; }
.av-chat { display: flex; flex-direction: column; }
.av-msg--me { align-self: flex-end; }
@media (prefers-reduced-motion: reduce) {
  .stack-card__visual .mt, .stack-card__visual .mtick { animation: none !important; opacity: 1 !important; transform: none !important; }
  .stack-card__visual .mfill { animation: none !important; transform: none !important; }
  .stack-card__visual .swap-a, .stack-card__visual .av-typing { display: none; }
  .stack-card__visual .swap-b { animation: none !important; opacity: 1 !important; }
  .av-scan { display: none; }
}

/* Ask Alex: question types into the box, sends, box clears */
.av-input__txt .swap-a.sw-6 { animation: avPh var(--T) infinite; }
.av-input__txt .swap-b.sw-6 { animation: avQ var(--T) infinite; }
@keyframes avPh { 0%, 5% { opacity: 1; } 6%, 25% { opacity: 0; } 26%, 100% { opacity: 1; } }
@keyframes avQ { 0%, 5% { opacity: 0; clip-path: inset(0 100% 0 0); } 6% { opacity: 1; clip-path: inset(0 100% 0 0); } 22% { clip-path: inset(0 0 0 0); } 25% { opacity: 1; } 26%, 100% { opacity: 0; } }

/* Pricing v3: four per-seat plans */
.plan-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.plan-cards--4 .plan-card { padding: 26px 22px; }
.plan-cards--4 .plan-card--featured { padding: 26px 22px; }
.plan-cards--4 .plan-card__price .amount { font-size: 40px; }
.plan-cards--4 .plan-card__price .amount--text { font-size: 40px; letter-spacing: -.03em; }
.plan-cards--4 .plan-card__desc { min-height: 4.5em; font-size: 16px; }
.plan-cards--4 .plan-card__billed { margin-bottom: 2px; }
.plan-card__save { margin: 0 0 20px; font-size: 16px; font-weight: 600; color: var(--brand); min-height: 1.5em; }
.plan-card--featured .plan-card__save { color: var(--lime); }
.plan-cards--4 .plan-card__list li { font-size: 16px; }
.compare--4 .cmp-col-label { width: 24%; }
.compare--4 thead th { white-space: normal; }
.compare--4 .cmp-price { float: none; display: block; margin-top: 2px; font-size: 16px; }
@media (max-width: 1180px) { .plan-cards--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .plan-cards--4 { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } .plan-cards--4 .plan-card__desc { min-height: 0; } }
@media (max-width: 900px) { .compare--4 table { min-width: 760px; } }

/* ---------- Contact: Calendly booking panel ---------- */
.booking-panel { border-radius: 10px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 50px -30px rgba(6, 30, 18, .3); overflow: hidden; }
.booking-panel__head { display: flex; gap: 14px; align-items: flex-start; padding: 24px 24px 18px; border-bottom: 1px solid var(--line); }
.booking-panel__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: #e8f4ea; color: var(--brand); }
.booking-panel__ic svg { width: 20px; height: 20px; }
.booking-panel__head h2 { font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; margin: 0 0 4px; }
.booking-panel__head p { font-size: 16px; color: var(--muted); margin: 0; }
.booking-panel__frame { height: 700px; background: #fff; }
.booking-panel__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.booking-panel__alt { margin: 0; padding: 12px 24px 16px; border-top: 1px solid var(--line); font-size: 16px; color: var(--muted); }
.booking-panel__alt a { color: var(--brand); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.booking-panel__alt svg { width: 14px; height: 14px; }
@media (max-width: 900px) { .booking-panel__frame { height: 1000px; } }
@media (max-width: 480px) { .booking-panel__head { padding: 20px 18px 16px; } .booking-panel__alt { padding-inline: 18px; } }

/* ---------- Product: Alex section v2 (interactive chat) ---------- */
.alex2 { position: relative; overflow: hidden; background: radial-gradient(60% 50% at 85% 20%, rgba(47, 191, 74, .18), transparent 70%), var(--forest-800); }
.alex2::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(70% 60% at 75% 35%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 75% 35%, #000, transparent 75%); }
.alex2 .container { position: relative; }
.alex2__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.alex2 h2 { color: #fff; margin: 12px 0 18px; }
.alex2 .lead { color: rgba(255, 255, 255, .86); margin-bottom: 14px; }
.alex2__sub { font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .66); margin: 0 0 30px; }
.alex2__caps { list-style: none; padding: 0; margin: 0 0 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; }
.alex2__caps li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .68); }
.alex2__caps .ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: rgba(145, 246, 117, .12); color: var(--lime); }
.alex2__caps .ic svg { width: 18px; height: 18px; }
.alex2__caps strong { display: block; color: #fff; font-weight: 600; font-size: 16px; margin-bottom: 2px; }
.alex2 .btn--accent { box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset; }
.btn--ghost-light { --btn-bg: transparent; --btn-fg: #fff; font-weight: 600; box-shadow: 0 0 0 1px rgba(255, 255, 255, .28) inset; }
.btn--ghost-light:hover { --btn-bg: rgba(255, 255, 255, .08); }
.btn--ghost-light svg { width: 16px; height: 16px; }

/* chat card */
.ax { position: relative; }
.ax__glow { position: absolute; inset: 8% -6% -4% 6%; border-radius: 40px; background: radial-gradient(closest-side, rgba(47, 191, 74, .45), transparent); filter: blur(30px); animation: axGlow 6s ease-in-out infinite; }
@keyframes axGlow { 50% { opacity: .55; transform: scale(.96); } }
.ax__card { position: relative; display: flex; flex-direction: column; border-radius: 18px; background: #fff; color: var(--ink); overflow: hidden; box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .12); }
.ax__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.ax-av { position: relative; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #0f6a35, #03301a 75%); box-shadow: inset 0 0 0 1.5px rgba(145, 246, 117, .4); }
.ax-av svg { width: 16px; height: 16px; }
.ax__head .ax-av { width: 42px; height: 42px; }
.ax__head .ax-av svg { width: 20px; height: 20px; }
.ax__head .ax-av::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(47, 191, 74, .5); animation: alexPing 3s ease-out infinite; opacity: 0; }
.ax__who { flex: 1; display: grid; min-width: 0; }
.ax__who strong { font-size: 15px; }
.ax__who small { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax__live { width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); box-shadow: 0 0 0 3px var(--mint); }
.ax__badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; background: var(--mint-50); color: var(--green-600); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.ax__badge svg { width: 12px; height: 12px; }

.ax__log { height: 400px; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 18px; background: linear-gradient(#fbfdfb, #fff); scroll-behavior: smooth; }
.ax__log > :first-child { margin-top: auto; }
.ax__log .msg { max-width: 88%; }
.ax__log .msg--user { align-self: flex-end; background: var(--forest-800); }
.ax-row { display: flex; gap: 10px; align-items: flex-end; max-width: 94%; }
.ax-row .msg--ai { max-width: none; flex: 1; background: var(--surface); }
.ax-in { animation: axIn .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes axIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.ax-typing { display: inline-flex; gap: 4px; padding: 14px 16px !important; flex: none !important; }
.ax-typing i { width: 6px; height: 6px; border-radius: 50%; background: #9aa8a0; animation: axDot 1s ease-in-out infinite; }
.ax-typing i:nth-child(2) { animation-delay: .15s; } .ax-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes axDot { 40% { transform: translateY(-4px); background: var(--green-600); } }

/* reading sources */
.ax-read { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding-left: 44px; }
.ax-read__lbl { display: inline-flex; align-items: center; gap: 6px; margin-right: 2px; }
.ax-read__lbl::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--green-600); animation: axSpin .7s linear infinite; }
.ax-read.is-done .ax-read__lbl::before { animation: none; border-color: var(--green-500); background: var(--green-500); box-shadow: inset 0 0 0 2px #fff; }
@keyframes axSpin { to { transform: rotate(360deg); } }
.ax-src { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 500; animation: axIn .35s ease both; }
.ax-src svg { width: 12px; height: 12px; color: var(--green-600); }
.ax-src::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(145, 246, 117, .5), transparent); transform: translateX(-100%); animation: axScan 1s ease .2s 1 both; }
@keyframes axScan { to { transform: translateX(100%); } }

/* answer parts */
.ax-ans { display: grid; gap: 10px; }
.ax-ans p { margin: 0; }
.ax-ans .ax-legend { margin-top: -4px; }
.ax-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ax-steps li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-size: 13px; animation: axIn .4s ease both; }
.ax-steps li::before { content: ""; flex: none; width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid #c3cec7; transition: background-color .25s, border-color .25s; background: center / 11px no-repeat; }
.ax-steps li.is-on::before { border-color: var(--green-600); background-color: var(--green-600); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.ax-bars { display: grid; gap: 8px; }
.ax-bar { display: grid; grid-template-columns: 52px 1fr 40px; align-items: center; gap: 8px; font-size: 12.5px; animation: axIn .4s ease both; }
.ax-bar b { font-weight: 600; }
.ax-bar__t { height: 7px; border-radius: 99px; background: #e4ebe6; overflow: hidden; }
.ax-bar__t i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--green-500); transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.ax-bar--warn .ax-bar__t i { background: #e9a23b; }
.ax-bar--risk .ax-bar__t i { background: #e0564a; }
.ax-bar span:last-child { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.ax-note { font-size: 12.5px; color: var(--muted); }
.ax-chart { display: flex; align-items: flex-end; gap: 10px; height: 74px; padding: 8px 10px 0; border-radius: 8px; background: #fff; border: 1px solid var(--line); }
.ax-chart div { flex: 1; display: flex; align-items: flex-end; gap: 3px; height: 100%; position: relative; }
.ax-chart i { flex: 1; height: 0; border-radius: 3px 3px 0 0; background: #cfe9d5; transition: height .9s cubic-bezier(.2, .8, .2, 1); }
.ax-chart i + i { background: var(--green-500); }
.ax-chart .is-over i + i { background: #e0564a; }
.ax-chart small { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: 10.5px; color: var(--muted); }
.ax-chart-wrap { padding-bottom: 18px; }
.ax-legend { display: flex; gap: 12px; font-size: 11px; color: var(--muted); }
.ax-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; background: #cfe9d5; }
.ax-legend span + span::before { background: var(--green-500); }
.ax-cite { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--green-600); font-weight: 600; }
.ax-cite svg { width: 12px; height: 12px; }
.ax-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ax-approve { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: 8px; background: var(--brand); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: transform .15s, background-color .25s; }
.ax-approve:hover { background: var(--brand-hover); }
.ax-approve.is-press { transform: scale(.94); }
.ax-approve svg { width: 14px; height: 14px; }
.ax-approve[disabled] { cursor: default; background: var(--mint-50); color: var(--green-600); }
.ax-edit { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 500; }

/* prompts + input */
.ax__prompts { display: flex; gap: 8px; padding: 12px 18px 0; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line); }
.ax__prompts::-webkit-scrollbar { display: none; }
.ax__prompts button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.ax__prompts button svg { width: 14px; height: 14px; color: var(--green-600); }
.ax__prompts button:hover { border-color: var(--green-500); }
.ax__prompts button[aria-pressed="true"] { background: var(--forest-800); border-color: var(--forest-800); color: #fff; }
.ax__prompts button[aria-pressed="true"] svg { color: var(--lime); }
.ax__input { display: flex; align-items: center; margin: 12px 18px 18px; padding: 11px 12px 11px 14px; border-radius: 12px; border: 1px solid var(--line); font-size: 14px; color: var(--muted); transition: border-color .2s, box-shadow .2s; }
.ax__input.is-typing { color: var(--ink); border-color: var(--green-500); box-shadow: 0 0 0 4px rgba(47, 191, 74, .12); }
.ax__caret { width: 1.5px; height: 16px; margin-left: 1px; background: var(--green-600); opacity: 0; }
.ax__input.is-typing .ax__caret { opacity: 1; animation: axBlink .8s steps(1) infinite; }
@keyframes axBlink { 50% { opacity: 0; } }
.ax__send { margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--surface); color: var(--green-600); transition: background-color .2s, color .2s; }
.ax__input.is-typing .ax__send { background: var(--brand); color: #fff; }
.ax__send svg { width: 15px; height: 15px; }

/* toast */
.ax__toast { position: absolute; z-index: 2; top: 74px; right: 18px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: var(--forest-800); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6), 0 0 0 1px rgba(145, 246, 117, .25); opacity: 0; transform: translateY(-8px) scale(.96); transition: opacity .35s, transform .35s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.ax__toast svg { width: 16px; height: 16px; color: var(--lime); }
.ax__toast.is-show { opacity: 1; transform: none; }

/* how it works */
.alex2__how { list-style: none; padding: 0; margin: clamp(56px, 7vw, 88px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255, 255, 255, .12); position: relative; }
.alex2__how::before { content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 33.33%; background: linear-gradient(90deg, transparent, var(--lime), transparent); animation: axTrack 6s ease-in-out infinite; }
@keyframes axTrack { 0% { transform: translateX(-50%); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(250%); opacity: 0; } }
.alex2__how li { padding: 28px 28px 0 0; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-content: start; }
.alex2__how li + li { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, .12); }
.alex2__n { grid-column: 1 / -1; font-size: 16px; font-weight: 700; letter-spacing: .08em; color: var(--lime); margin-bottom: 14px; }
.alex2__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(255, 255, 255, .08); color: #fff; }
.alex2__ic svg { width: 16px; height: 16px; }
.alex2__how h3 { align-self: center; font-size: 17px; color: #fff; font-weight: 600; margin: 0; }
.alex2__how p { grid-column: 1 / -1; margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .66); }

@media (max-width: 960px) {
  .alex2__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .alex2__how { grid-template-columns: 1fr; }
  .alex2__how li, .alex2__how li + li { padding: 22px 0; border-left: 0; }
  .alex2__how li + li { border-top: 1px solid rgba(255, 255, 255, .12); }
  .alex2__how::before { display: none; }
}
@media (max-width: 560px) {
  .alex2__caps { grid-template-columns: 1fr; }
  .ax__badge { display: none; }
  .ax__log { height: 430px; padding: 14px; }
  .ax-read { padding-left: 0; }
  .ax-row { max-width: 100%; }
  .ax-row > .ax-av { display: none; }
  .ax__prompts { padding-inline: 14px; } .ax__input { margin-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ax__glow, .ax__head .ax-av::after, .alex2__how::before, .ax-src::after { animation: none; }
}

/* =====================================================================
   MOBILE CENTERING (phones only, ≤ 640px)
   Centers headings, copy, buttons and card content. Reading text
   (articles, legal, FAQ answers), tables, checklists, forms and the
   chat demos stay left-aligned. Desktop and tablet are untouched.
   ===================================================================== */
@media (max-width: 640px) {
  main { text-align: center; }

  /* keep these left-aligned */
  main .art-body, main .prose, main .prose-art, main .art-side, main .faq-item, main .help-faq,
  main .compare, main .ax, main .chat, main .booking-panel__frame, main form, main .ax-ans,
  main .res-side__list, main .blog-list, main .tour__browser, main .browser, main .sa-ws,
  main .hm, main .hero-shot, main .workspace__screen, main table { text-align: left; }

  /* flex rows: center their items */
  main .btn-row, main .cta-band__inner, main .billing, main .trade__tags, main .intg-card__syncs,
  main .intg-chips, main .filters, main .res-filter, main .chips-scroll, main .plan-includes,
  main .art-meta, main .res-author, main .stack-card__top, main .hero-home__copy .btn-row,
  main .help-support .btn-row, main .final-cta__body .btn-row, main .art-crumbs { justify-content: center; }
  main .cta-band__inner { flex-direction: column; align-items: center; }
  main .btn-row { flex-wrap: wrap; }

  /* centered icons / badges inside cards */
  main .ic, main .module__icon, main .trade__ic, main .plan-card__icon, main .next-steps__ic,
  main .stack-card__icon, main .alex2__ic, main .intg-logo, main .float-card .sq, main .sync__ic,
  main .booking-panel__ic { margin-inline: auto; }
  main .pain-card .icon:first-child, main .trust .icon, main .every-trade__list .icon,
  main .module > svg, main .sec-grid li > svg { margin-inline: auto; }
  main .pain-card { align-items: center; }
  main .pain-card p { margin-inline: auto; }
  main .pain-card .arrow { align-self: center; }
  main .every-trade__list li, main .about-who__list li { justify-items: center; }
  main .trade, main .intg-card, main .step, main .res-card, main .res-card__body { align-items: center; }
  main .intg-card__top { flex-direction: column; align-items: center; gap: 12px; }

  /* checklists: centered block, left-aligned lines */
  main .module ul, main .role__points, main .plan-card__list, main .sec-ai2__list,
  main .art-take ul { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }
  main .plan-card__list { width: 100%; }

  /* icon + text list rows → stacked and centered */
  main .alex2__caps li, main .alex__list li { grid-template-columns: 1fr; justify-items: center; }
  main .alex2__how li { grid-template-columns: 1fr; justify-items: center; row-gap: 10px; }
  main .alex2__how h3 { align-self: auto; }
  main .alex2__n { margin-bottom: 0; }
  main .tour__step { padding-left: 0; border-left: 0; align-items: center; }
  main .tour__step::before { left: 50%; top: 0; width: 60px; height: 2px; transform: translateX(-50%) scaleX(0); transition: transform .5s; }
  main .tour__step.is-active::before { height: 2px; transform: translateX(-50%) scaleX(1); }
  main .tour__step p { margin-inline: auto; }

  /* stats */
  main .stat { text-align: center; }

  /* contact */
  main .channels > div { text-align: center; }
  main .booking-panel__head { flex-direction: column; align-items: center; text-align: center; }

  /* plan cards: center the header area, keep lists readable */
  main .plan-card__head, main .plan-card__price, main .plan-card__billed, main .plan-card__save,
  main .plan-card__list-title { text-align: center; justify-content: center; }
  main .plan-card__price { display: flex; align-items: baseline; }

  /* hero / section copy blocks that were width-limited */
  main .lead, main .hero-home__copy p, main .section-head p, main .alex2__sub, main .pain-card p { margin-inline: auto; }
  main .section-head { justify-items: center; align-items: center; }

  /* articles: center the header only */
  main .art-head, main .art-head__inner { text-align: center; }
  main .art-end { text-align: center; }

  /* footer */
  .footer__grid { text-align: center; }
  .footer__brand p { margin-inline: auto; }
  .footer__brand .logo { display: inline-flex; }
  .footer__brand .store-badges { justify-content: center; }
  .footer__bottom { flex-direction: column; justify-content: center; text-align: center; }
  .footer__legal { justify-content: center; }

  /* home */
  .hero-home__grid { min-height: 0; padding-block: 48px 56px; }
  main .ws-tab { text-align: center; }
  main .ws-tab .sq { margin-inline: auto; }
  main .workspace__foot { flex-direction: column; justify-content: center; text-align: center; }
  main .feature-grid .icon { margin-inline: auto; display: block; }

  /* horizontally scrolling chip rows: center when they fit, never clip */
  main .filters, main .chips-scroll, main .res-filter { justify-content: flex-start; }
  main .filters > :first-child, main .chips-scroll > :first-child { margin-left: auto; }
  main .filters > :last-child, main .chips-scroll > :last-child { margin-right: auto; }

  /* resources */
  main .res-spot__meta, main .res-spot__foot { justify-content: center; }
  main .res-spot__foot { flex-direction: column; }
  main .help-band { justify-items: center; text-align: center; }
  main .help-band .deco { margin-inline: auto; }

  /* articles */
  main .art-rel { align-items: center; text-align: center; }
  main .art-side__cta { text-align: center; }
}

/* Tablet: pricing cards use the full width (2 x 2) */
@media (min-width: 681px) and (max-width: 1024px) { .plan-cards--4 { max-width: none; } }

/* Phones: a more compact Alex teaser so it doesn't cover the page */
@media (max-width: 640px) {
  .alex-teaser { width: min(272px, calc(100vw - 28px)); border-radius: 16px; }
  .alex-teaser__art { height: 92px; padding: 10px; }
  .alex-teaser__body { padding: 14px 16px 16px; }
  .alex-teaser h2 { font-size: 17px; }
  .alex-teaser p:not(.alex-teaser__kicker) { font-size: 16px; margin-bottom: 12px; }
  .alex-teaser .alex-btn { min-height: 40px; font-size: 16px; }
}

/* Integration brand logos (raster app icons) */
.brand-logo { display: block; object-fit: contain; }
.hub__ring li .brand-logo { width: 62%; height: 62%; animation: spin 60s linear infinite reverse; }
.intg-orbit li .brand-logo { width: 64%; height: 64%; }
.intg-logo .brand-logo { width: 34px; height: 34px; }
@media (prefers-reduced-motion: reduce) { .hub__ring li .brand-logo { animation: none !important; } }

/* ---------- Contact form page (contact.html) ---------- */
.msg-page { padding-block: clamp(48px, 6vw, 88px) clamp(64px, 8vw, 112px); background: linear-gradient(180deg, var(--mint-50), #fff 420px); }
.msg-page__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.msg-page__intro { position: sticky; top: 112px; }
.msg-page__intro h1 { margin: 12px 0 18px; }
.msg-page__intro .eyebrow { color: var(--green-600); }
.msg-page__intro .lead { color: var(--muted); margin-bottom: 32px; }
.msg-page__points { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 18px; }
.msg-page__points li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.msg-page__points .ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--mint); color: var(--brand); }
.msg-page__points .ic svg { width: 19px; height: 19px; }
.msg-page__points strong { display: block; color: var(--ink); font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.msg-page__points a { color: var(--brand); text-decoration: underline; }
.msg-page__direct { margin: 0; padding-top: 24px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 36px; }
.msg-page__direct dt { font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.msg-page__direct dd { margin: 0; font-size: 16px; font-weight: 600; }
.msg-page__direct a { color: var(--ink); display: inline-flex; align-items: center; gap: 4px; }
.msg-page__direct a:hover { color: var(--brand); }
.msg-page__direct svg { width: 15px; height: 15px; }
.msg-form { padding: clamp(24px, 3vw, 40px); }
.msg-form h2 { font-size: 22px; margin-bottom: 24px; }
.msg-form .field { margin-bottom: 18px; }
.msg-form select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6660' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.msg-form .form-note { margin-top: 14px; font-size: 16px; }

/* SMS consent checkbox */
.consent { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; margin: 6px 0 22px; padding: 16px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; }
.consent input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.consent__box { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid #b9c4bd; background: #fff; color: #fff; transition: background-color .15s, border-color .15s; }
.consent__box svg { width: 14px; height: 14px; stroke-width: 3; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.consent input:checked + .consent__box { background: var(--brand); border-color: var(--brand); }
.consent input:checked + .consent__box svg { opacity: 1; transform: none; }
.consent input:focus-visible + .consent__box { box-shadow: 0 0 0 3px var(--mint); border-color: var(--brand); }
.consent__text { font-size: 16px; line-height: 1.6; color: var(--muted); }
.consent__text a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 960px) {
  .msg-page__grid { grid-template-columns: 1fr; }
  .msg-page__intro { position: static; }
}
@media (max-width: 640px) {
  .msg-page .field-row { grid-template-columns: 1fr; gap: 0; }
  .msg-page__direct { grid-template-columns: 1fr; justify-items: center; }
  .msg-page__points li { grid-template-columns: 1fr; justify-items: center; }
  .msg-form, .consent { text-align: left; }
}

/* ---------- Legal pages (privacy.html, terms.html) ---------- */
.legal-hero { padding-block: clamp(48px, 6vw, 80px) clamp(32px, 4vw, 48px); background: linear-gradient(180deg, var(--mint-50), #fff); border-bottom: 1px solid var(--line); }
.legal-hero .eyebrow { color: var(--green-600); }
.legal-hero h1 { margin: 12px 0 10px; font-size: clamp(34px, 4.4vw, 52px); }
.legal-hero__meta { font-size: 16px; color: var(--muted); }
.legal { padding-top: clamp(32px, 4vw, 56px); }
.legal__body h2 { scroll-margin-top: 110px; font-size: 22px; }
.legal__body h3 { font-size: 17px; margin: 26px 0 8px; color: var(--ink); }
.legal__body ol { padding-left: 22px; }
.legal__body ol li + li { margin-top: 8px; }
.legal-caps { font-size: 16px; letter-spacing: .01em; }
.legal-addr { font-style: normal; padding: 18px 20px; border-radius: 12px; background: var(--surface); line-height: 1.8; }
.legal-toc a { font-size: 16px; padding-block: 5px; }
.legal-side__card { margin-top: 8px; padding: 18px; border-radius: 12px; background: var(--surface); font-size: 16px; color: var(--muted); }
.legal-side__card strong { display: block; color: var(--ink); margin-bottom: 4px; }
.legal-side__card a { color: var(--brand); text-decoration: underline; }
@media (max-width: 640px) { main .legal-hero { text-align: center; } }
.text-link { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.legal-hero__inner { max-width: calc(260px + clamp(32px, 5vw, 80px) + 720px + 2 * var(--gutter)); }
@media (max-width: 960px) { .legal-hero__inner { max-width: none; } }
.msg-page__intro h1 { font-size: clamp(36px, 4.2vw, 54px); color: var(--ink); letter-spacing: -.03em; line-height: 1.05; }

/* ---------- Legal pages: plain document layout ---------- */
.legal-doc { padding-block: clamp(48px, 6vw, 80px) clamp(64px, 8vw, 104px); background: #fff; }
.legal-doc__inner { max-width: calc(760px + 2 * var(--gutter)); color: var(--text); font-size: 16px; line-height: 1.7; }
.legal-doc h1 { font-size: clamp(30px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -.02em; color: var(--ink); margin: 0 0 8px; }
.legal-doc__meta { font-size: 16px; color: var(--muted); margin: 0 0 36px; }
.legal-doc h2 { font-size: 20px; line-height: 1.3; color: var(--ink); margin: 36px 0 10px; scroll-margin-top: 110px; }
.legal-doc h3 { font-size: 16px; color: var(--ink); margin: 22px 0 6px; }
.legal-doc p { margin: 0 0 12px; }
.legal-doc ul, .legal-doc ol { margin: 0 0 14px; padding-left: 22px; }
.legal-doc ul { list-style: disc; }
.legal-doc ol { list-style: decimal; }
.legal-doc li { margin: 0 0 6px; padding: 0; }
.legal-doc li::before, .legal-doc li::marker { color: inherit; }
.legal-doc a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.legal-doc .legal-caps { font-size: 16px; }
@media (max-width: 640px) { main .legal-doc, main .legal-doc__inner { text-align: left; } }

/* ---------- Book a demo page: just the calendar ---------- */
.book-page { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 96px); background: #fff; }
.book-page__inner { max-width: calc(1060px + 2 * var(--gutter)); text-align: center; }
.book-page h1 { font-size: clamp(32px, 3.8vw, 46px); line-height: 1.1; letter-spacing: -.02em; color: var(--ink); margin: 0 0 10px; }
.book-page__lead { font-size: 17px; color: var(--muted); margin: 0 auto 28px; max-width: 560px; }
.book-page__cal { height: 720px; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; background: #fff; }
.book-page__cal iframe { display: block; width: 100%; height: 100%; border: 0; }
.book-page__alt { margin-top: 16px; font-size: 16px; color: var(--muted); }
.book-page__alt a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 960px) { .book-page__cal { height: 1080px; } }
@media (max-width: 640px) { .book-page__cal { border: 0; border-radius: 0; margin-inline: calc(var(--gutter) * -1); } }

/* =====================================================================
   HOME · Alex stack cards: key-moment motion graphics (v2)
   Default = finished state (reduced motion / no JS).
   JS adds .kv-armed (start state) and .kv-play when the card scrolls
   into view. Each graphic plays once; it resets when scrolled back above.
   ===================================================================== */
.kv { max-width: 420px; }
.kv .av-head { position: relative; }
.kv-status { margin-left: auto; position: relative; display: grid; font-size: 11.5px; font-weight: 700; }
.kv-status > span { grid-area: 1 / 1; justify-self: end; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.kv-status__a { background: #eef3ef; color: var(--muted); opacity: 0; }
.kv-status__b { background: var(--mint); color: var(--brand); }
.kv-status .icon { width: 12px; height: 12px; stroke-width: 3; }
.kv-src { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.kv-chip { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.kv-chip .icon { width: 12px; height: 12px; color: var(--brand); }
.kv-chip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(145, 246, 117, .55), transparent); transform: translateX(-110%); }
.kv-lines li span b { font-weight: 600; color: var(--ink); }
.kv-fill { transform-origin: 0 50%; }

/* card 2 */
.kv-note { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; box-shadow: none; padding: 16px 18px; }
.kv-note p { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.kv-hl { color: #fff; padding: 1px 2px; border-radius: 4px; background: linear-gradient(rgba(145, 246, 117, .38), rgba(145, 246, 117, .38)) no-repeat 0 0 / 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.kv-tasks { padding: 14px; }
.kv-tasks__title { display: flex; align-items: center; gap: 6px; margin: 2px 4px 10px; font-size: 12px; font-weight: 700; color: var(--brand); }
.kv-tasks__title .icon { width: 13px; height: 13px; }
.kv-tasks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kv-tasks li { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; background: var(--surface); }
.kv-tasks li > span:nth-child(2) { flex: 1; }
.kv-tasks strong { display: block; font-size: 13.5px; } .kv-tasks small { display: block; font-size: 11.5px; color: var(--muted); }
.kv-box { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--brand); background: var(--brand); color: #fff; }
.kv-box .icon { width: 11px; height: 11px; stroke-width: 3.5; }
.kv-approve { position: relative; display: grid; }
.kv-approve > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.kv-approve__a { opacity: 0; }
.kv-approve .icon { width: 13px; height: 13px; stroke-width: 3; }

/* card 3 */
.kv-warn .av-alert { gap: 5px; }
.kv-date { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.kv-date .icon { width: 12px; height: 12px; }
.kv-date__old { position: relative; text-decoration: none; color: #9aa29d; }
.kv-date__old::after { content: ""; position: absolute; left: -1px; right: -1px; top: 52%; height: 1.5px; background: #c0392b; transform-origin: 0 50%; }
.kv-date__new { padding: 1px 8px; border-radius: 6px; background: #fff3d6; color: #a86400; font-weight: 700; }
.kv-sent { display: inline-flex; align-items: center; gap: 5px; color: var(--brand) !important; font-weight: 600; }
.kv-sent .icon { width: 12px; height: 12px; stroke-width: 3; }
.kv-ping { position: relative; }
.kv-ping::after { content: ""; position: absolute; inset: -3px; border-radius: 12px; border: 2px solid #f0a020; opacity: 0; }

/* card 4 */
.kv-chat .av-msg--me { margin-bottom: 0; }
.kv-a { position: relative; }
.kv-dots { position: absolute; left: 14px; top: 14px; display: inline-flex; gap: 4px; opacity: 0; }
.kv-dots i { width: 6px; height: 6px; border-radius: 50%; background: #9aa29d; animation: axDot 1s ease-in-out infinite; }
.kv-dots i:nth-child(2) { animation-delay: .15s; } .kv-dots i:nth-child(3) { animation-delay: .3s; }
.kv-a__txt b { font-weight: 600; color: var(--ink); }
.kv-input { position: relative; }
.kv-input__ph { color: #9aa29d; }
.kv-input__typed { position: absolute; left: 14px; right: 48px; top: 50%; transform: translateY(-50%); white-space: nowrap; overflow: hidden; text-overflow: clip; color: var(--ink); opacity: 0; }
.kv-input i { transition: none; }

/* ---------- armed: start state ---------- */
.kv-armed .kv-status__a { opacity: 1; } .kv-armed .kv-status__b { opacity: 0; }
.kv-armed .kv-in, .kv-armed .kv-srcin, .kv-armed .kv-q, .kv-armed .kv-a, .kv-armed .kv-sent, .kv-armed .kv-a__txt, .kv-armed .kv-date__new { opacity: 0; }
.kv-armed .kv-fill { transform: scaleX(0); }
.kv-armed .kv-hl { background-size: 0% 100%; }
.kv-armed .kv-box { background: #fff; border-color: #c7d0c9; color: transparent; }
.kv-armed .kv-approve__a { opacity: 1; } .kv-armed .kv-approve__b { opacity: 0; }
.kv-armed .kv-date__old { color: var(--ink-2); } .kv-armed .kv-date__old::after { transform: scaleX(0); }

/* ---------- play: only the key moments move ---------- */
.kv-play .kv-chip::after { animation: kvScan .7s ease var(--d) 1 both; }
.kv-play .kv-status__a { animation: kvOut .25s ease 3.2s both; }
.kv-play .kv-status__b { animation: kvIn .35s ease 3.25s both; }
.kv-play .kv-in, .kv-play .kv-srcin { animation: kvIn .5s cubic-bezier(.2, .8, .2, 1) var(--d) both; }
.kv-play .kv-fill { animation: kvFill 1.3s cubic-bezier(.3, .7, .2, 1) var(--d) both; }
.kv-play .kv-hl { animation: kvHl .55s ease var(--d) both; }
.kv-play .kv-box { animation: kvTick .3s ease var(--t) both; }
.kv-play .kv-approve { animation: kvPress .3s ease 3.55s both; }
.kv-play .kv-approve__a { animation: kvOut .2s ease 3.75s both; }
.kv-play .kv-approve__b { animation: kvIn .3s ease 3.8s both; }
.kv-play .kv-date__old { animation: kvDim .4s ease .9s both; }
.kv-play .kv-date__old::after { animation: kvStrike .4s ease .6s both; }
.kv-play .kv-date__new { animation: kvIn .45s cubic-bezier(.2, .8, .2, 1) 1s both; }
.kv-play .kv-sent { animation: kvIn .45s ease 3.3s both; }
.kv-play .kv-ping::after { animation: kvPing 1.4s ease-out .2s 2 both; }
.kv-play .kv-input__ph { animation: kvPh 2.1s linear both; }
.kv-play .kv-input__typed { animation: kvType 1.5s steps(44, end) .35s both, kvOut .15s ease 2s forwards; }
.kv-play .kv-input i { animation: kvPress .3s ease 1.9s both; }
.kv-play .kv-q { animation: kvIn .45s cubic-bezier(.2, .8, .2, 1) 2.05s both; }
.kv-play .kv-a { animation: kvIn .45s cubic-bezier(.2, .8, .2, 1) 2.45s both; }
.kv-play .kv-dots { animation: kvDots 1.2s linear 2.45s both; }
.kv-play .kv-a__txt { animation: kvIn .5s ease 3.55s both; }

@keyframes kvIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes kvOut { to { opacity: 0; } }
@keyframes kvFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes kvHl { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes kvTick { 0% { background: #fff; border-color: #c7d0c9; color: transparent; transform: scale(.85); } 60% { transform: scale(1.12); } 100% { background: var(--brand); border-color: var(--brand); color: #fff; transform: none; } }
@keyframes kvPress { 50% { transform: scale(.94); } }
@keyframes kvScan { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@keyframes kvStrike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes kvDim { from { color: var(--ink-2); } to { color: #9aa29d; } }
@keyframes kvPing { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes kvPh { 0% { opacity: 1; } 12%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes kvType { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes kvDots { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .kv-play *, .kv-play *::after { animation: none !important; }
}
@media (max-width: 640px) {
  main .stack-card__visual { text-align: left; }
  .stack-card__visual--b .av-stage, .stack-card__visual--c .av-stage { zoom: .5; gap: 8px; }
  .kv-warn .av-alert + .av-alert { margin-top: 6px; }
}
[data-kv] .av-stage { transition: opacity .3s ease; }
[data-kv].kv-fade .av-stage { opacity: 0; }
.av-badge--fg { background: radial-gradient(circle at 30% 25%, #0f6a35, #03301a 75%); box-shadow: inset 0 0 0 1.5px rgba(145, 246, 117, .4); }
.av-badge--fg svg { width: 17px; height: 17px; }

/* ---------- Card 1: sources → Alex → summary (lively) ---------- */
.kv1 { display: flex; flex-direction: column; align-items: center; width: 420px; max-width: 100%; }
.kv1-src { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.kv1-card { display: grid; justify-items: center; gap: 7px; padding: 12px 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; backdrop-filter: blur(4px); }
.kv1-card small { font-size: 11px; color: rgba(255, 255, 255, .72); white-space: nowrap; }
.kv1-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(145, 246, 117, .18); color: var(--lime); }
.kv1-ic .icon { width: 16px; height: 16px; }
.kv1-wave { display: flex; align-items: center; gap: 3px; height: 22px; }
.kv1-wave i { width: 3px; height: 30%; border-radius: 3px; background: var(--lime); }
.kv1-wave i:nth-child(3n+1) { height: 55%; } .kv1-wave i:nth-child(4n+2) { height: 85%; } .kv1-wave i:nth-child(5n) { height: 40%; }
.kv1-thumbs { display: flex; gap: 4px; height: 22px; }
.kv1-thumbs i { width: 26px; border-radius: 5px; background: linear-gradient(160deg, #9fd4ff, #5ea36b 70%); position: relative; overflow: hidden; }
.kv1-thumbs i:nth-child(2) { background: linear-gradient(160deg, #ffe0a8, #b98a52 75%); }
.kv1-thumbs i:nth-child(3) { background: linear-gradient(160deg, #c9d6e3, #6b7f92 75%); }
.kv1-thumbs i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); transform: translateX(-120%); }
.kv1-count { display: inline-flex; align-items: baseline; height: 22px; font-size: 17px; font-weight: 700; color: #fff; line-height: 22px; }
.kv1-count__n { display: inline-grid; height: 22px; overflow: hidden; text-align: right; }
.kv1-count__n b { grid-area: 1 / 1; transform: translateY(0); }
.kv1-count__n b:not(:last-child) { opacity: 0; }
.kv1-flow { display: block; width: 100%; height: 54px; overflow: visible; }
.kv1-line { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.kv1-pulse { fill: none; stroke: var(--lime); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 18 400; stroke-dashoffset: 18; opacity: 0; filter: drop-shadow(0 0 4px rgba(145, 246, 117, .9)); }
.kv1-core { position: relative; display: grid; justify-items: center; gap: 8px; margin: 2px 0 12px; }
.kv1-orb { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #138a43, #03301a 75%); box-shadow: 0 0 0 1.5px rgba(145, 246, 117, .55), 0 10px 30px -8px rgba(145, 246, 117, .6); }
.kv1-orb svg { width: 24px; height: 24px; }
.kv1-ring { position: absolute; top: 0; left: 50%; width: 52px; height: 52px; margin-left: -26px; border-radius: 50%; border: 2px solid rgba(145, 246, 117, .6); opacity: 0; }
.kv1-core__lbl { display: inline-flex; padding: 4px 11px; border-radius: 999px; background: rgba(145, 246, 117, .16); color: var(--lime); font-size: 11.5px; font-weight: 700; }
.kv1-sum { width: 100%; max-width: none; }
.kv1-type span { display: inline-block; }

/* armed (start) state */
.kv-armed .kv1-type { opacity: 0; }
.kv-armed .kv1-count__n b { opacity: 0; } .kv-armed .kv1-count__n b:first-child { opacity: 1; }

/* play */
.kv-play .kv1-wave i { animation: kv1Wave .9s ease-in-out infinite; }
.kv-play .kv1-wave i:nth-child(2n) { animation-delay: -.3s; } .kv-play .kv1-wave i:nth-child(3n) { animation-delay: -.55s; }
.kv-play .kv1-thumbs i::after { animation: kvScan 1.1s ease .2s 2; }
.kv-play .kv1-thumbs i:nth-child(2)::after { animation-delay: .4s; } .kv-play .kv1-thumbs i:nth-child(3)::after { animation-delay: .6s; }
.kv-play .kv1-count__n b:nth-child(1) { animation: kv1N1 1.6s steps(1) .2s both; }
.kv-play .kv1-count__n b:nth-child(2) { animation: kv1N2 1.6s steps(1) .2s both; }
.kv-play .kv1-count__n b:nth-child(3) { animation: kv1N3 1.6s steps(1) .2s both; }
.kv-play .kv1-pulse { animation: kv1Pulse 1.1s ease-in var(--d) 2 both; }
.kv-play .kv1-ring { animation: kv1Ring 1.6s ease-out 1.1s 2 both; }
.kv-play .kv1-ring--2 { animation-delay: 1.5s; }
.kv-play .kv1-orb { animation: kv1Orb 1.6s ease-in-out 1s 2; }
.kv-play .kv1-type { animation: kv1Type .65s steps(28, end) var(--d) both; }
.kv1-sum .kv-status__a, .kv1-sum .kv-status__b { }
.kv-play .kv1-sum .kv-status__a { animation: kvOut .25s ease 4.6s both; }
.kv-play .kv1-sum .kv-status__b { animation: kvIn .35s ease 4.65s both; }

@keyframes kv1Wave { 50% { transform: scaleY(.35); } }
@keyframes kv1N1 { 0%, 33% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes kv1N2 { 0%, 33% { opacity: 0; } 34%, 66% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes kv1N3 { 0%, 66% { opacity: 0; } 67%, 100% { opacity: 1; } }
@keyframes kv1Pulse { 0% { stroke-dashoffset: 18; opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: -400; opacity: 0; } }
@keyframes kv1Ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes kv1Orb { 50% { box-shadow: 0 0 0 1.5px rgba(145, 246, 117, .9), 0 0 36px 4px rgba(145, 246, 117, .55); transform: scale(1.06); } }
@keyframes kv1Type { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@media (max-width: 640px) { .kv1-card small { font-size: 10px; } }
/* card 1: tighter vertical rhythm */
.kv1-src { gap: 8px; }
.kv1-card { padding: 10px 8px 9px; gap: 6px; }
.kv1-flow { height: 40px; }
.kv1-core { margin: 0 0 10px; gap: 6px; }
.kv1-orb, .kv1-ring { width: 46px; height: 46px; } .kv1-ring { margin-left: -23px; }
.kv1-orb svg { width: 21px; height: 21px; }
.kv1-sum { padding: 16px; } .kv1-sum .av-head { margin-bottom: 12px; } .kv1-sum .av-bullets { gap: 8px; }
.kv1-sum .av-progress { margin-top: 12px; padding-top: 12px; }
[data-kv] .av-stage { flex: none; }
@media (max-width: 640px) { .kv1-core__lbl { display: none; } .kv1-flow { height: 28px; } }
@media (max-width: 640px) { .stack-card__visual { height: 300px; } }
.av-face { flex: none; display: block; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7); }
.av-face--task { width: 26px; height: 26px; box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(6, 30, 18, .25); }
.av-who .av-face { width: 26px; height: 26px; }
.av-face--task { width: 32px; height: 32px; }

/* =====================================================================
   HOME · Field & office before / after (v2)
   ===================================================================== */
.ba__grid { gap: clamp(40px, 5vw, 72px); }
.ba__grid .lead { font-size: 18px; line-height: 1.6; max-width: 460px; }
.ba__cards { gap: 28px; }
.ba-card { position: relative; overflow: hidden; min-height: 420px; padding: 22px; border-radius: 22px; }
.ba-card > p { margin-top: auto; font-size: 16px; line-height: 1.5; font-weight: 500; }
.ba-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ba-tag i { width: 7px; height: 7px; border-radius: 50%; }

/* before: dark glass, notification chaos */
.ba-card--before { background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .7); }
.ba-tag--before { background: rgba(255, 120, 100, .14); color: #ffb3a6; }
.ba-tag--before i { background: #ff7a66; box-shadow: 0 0 0 3px rgba(255, 122, 102, .25); }
.ba-chaos { position: relative; flex: 1; min-height: 270px; margin: 14px 0 16px; }
.ba-msg { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 10px; width: 74%; padding: 9px 12px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .6); transform: rotate(var(--r)); animation: baFloat 5s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
.ba-msg__ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #fff; }
.ba-msg__ic .icon { width: 16px; height: 16px; }
.ba-ic--sms { background: #34c759; } .ba-ic--wa { background: #25a35a; } .ba-ic--call { background: #e5533d; } .ba-ic--paper { background: #c9a46a; } .ba-ic--mail { background: #3b7bf0; }
.ba-msg__t { min-width: 0; display: grid; }
.ba-msg__t b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-msg__t small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-badge { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: #ff3b30; color: #fff; font-size: 11px; font-style: normal; font-weight: 700; box-shadow: 0 0 0 2px #0a3d22; }
.ba-msg--paper { background: #fbf4e4; }
.ba-msg--paper .ba-msg__t b { text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .35); }

/* after: light card, hub + live feed */
.ba-card--after { background: linear-gradient(170deg, #ffffff, #e9f8ec); color: var(--muted); }
.ba-tag--after { background: var(--mint); color: var(--brand); }
.ba-tag--after i { background: var(--green-500); box-shadow: 0 0 0 3px rgba(47, 191, 74, .25); }
.ba-hub2 { position: relative; height: 160px; margin: 16px 6px 12px; }
.ba-hub2__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ba-hub2__lines path { fill: none; stroke: rgba(31, 138, 60, .28); stroke-width: 1.5; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.ba-hub2__lines path.p { stroke: var(--green-500); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 14 400; stroke-dashoffset: 14; filter: drop-shadow(0 0 3px rgba(47, 191, 74, .7)); animation: baPulse 2.5s ease-in infinite; animation-delay: var(--d); }
.ba-node { position: absolute; display: grid; place-items: center; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 12px; background: #fff; color: var(--brand); box-shadow: 0 6px 16px -6px rgba(6, 30, 18, .35), 0 0 0 1px rgba(31, 138, 60, .12); }
.ba-node .icon { width: 17px; height: 17px; }
.ba-core { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 18px; background: #fff; box-shadow: 0 14px 30px -10px rgba(6, 30, 18, .45), 0 0 0 1px rgba(31, 138, 60, .15); }
.ba-core svg { position: relative; z-index: 1; width: 34px; height: 34px; }
.ba-core__ring { position: absolute; inset: 0; border-radius: 18px; border: 2px solid rgba(47, 191, 74, .5); animation: baRing 2.5s ease-out infinite; }
.ba-core__ring--2 { animation-delay: 1.25s; }
.ba-feed { height: 108px; overflow: hidden; margin-bottom: 14px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
.ba-feed ul { list-style: none; margin: 0; padding: 0; animation: baFeed 10s cubic-bezier(.6, 0, .3, 1) infinite; }
.ba-feed li { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 4px; }
.ba-feed__ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--mint); color: var(--brand); }
.ba-feed__ic .icon { width: 16px; height: 16px; }
.ba-feed li b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.ba-feed li small { display: block; font-size: 12px; color: var(--muted); }

.ba-arrow { width: 44px; height: 44px; margin: -22px 0 0 -22px; z-index: 2; background: var(--brand); border: 4px solid var(--forest-800); }
.ba-arrow svg { width: 18px; height: 18px; }

@keyframes baFloat { 0%, 100% { transform: rotate(var(--r)) translateY(0); } 50% { transform: rotate(calc(var(--r) * -1)) translateY(-4px); } }
@keyframes baPulse { 0% { stroke-dashoffset: 14; opacity: 1; } 60% { opacity: 1; } 70%, 100% { stroke-dashoffset: -150; opacity: 0; } }
@keyframes baRing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes baFeed { 0%, 18% { transform: translateY(0); } 25%, 43% { transform: translateY(-54px); } 50%, 68% { transform: translateY(-108px); } 75%, 93% { transform: translateY(-162px); } 100% { transform: translateY(-216px); } }
@keyframes baBuzz { 0%, 100% { translate: 0 0; } 20% { translate: -3px 0; } 40% { translate: 3px 0; } 60% { translate: -2px 0; } 80% { translate: 2px 0; } }
@keyframes baBadge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@keyframes baLost { 0%, 55% { opacity: 1; filter: none; } 70%, 85% { opacity: .35; filter: blur(.5px); } 100% { opacity: 1; filter: none; } }
@keyframes baBuzzCycle { 0%, 9%, 100% { translate: 0 0; } 1.5% { translate: -4px 0; } 3% { translate: 4px 0; } 4.5% { translate: -3px 0; } 6% { translate: 3px 0; } 7.5% { translate: -1px 0; } }
@keyframes baBadgeCycle { 0%, 12%, 100% { transform: scale(1); } 5% { transform: scale(1.3); } }
.ba-msg { animation: baFloat 5s ease-in-out infinite, baBuzzCycle 6s ease-in-out infinite; animation-delay: calc(var(--d) * -1), var(--d); }
.ba-msg .ba-badge { animation: baBadgeCycle 6s ease-in-out infinite; animation-delay: var(--d); }
.ba-msg--paper { animation: baFloat 5s ease-in-out infinite, baLost 6s ease-in-out infinite; animation-delay: calc(var(--d) * -1), 0s; }

@media (max-width: 960px) { .ba-card { min-height: 400px; } }
@media (max-width: 560px) { .ba-card { min-height: 0; } .ba-chaos { min-height: 280px; } .ba-msg { width: 82%; } }
@media (prefers-reduced-motion: reduce) { .ba-msg, .ba-msg .ba-badge, .ba-feed ul, .ba-hub2__lines path.p, .ba-core__ring { animation: none !important; } .ba-hub2__lines path.p { opacity: 0; } }
@media (max-width: 1180px) and (min-width: 961px) { .ba__grid { grid-template-columns: 1fr; } .ba__grid > .reveal:first-child { max-width: 640px; } }
@media (max-width: 640px) { main .ba-msg, main .ba-feed { text-align: left; } }
@media (max-width: 560px) { .ba-msg { width: 78%; left: calc(var(--x) * .7); } }
.ba-ic--wa { background: #fff; box-shadow: inset 0 0 0 1px #e3e8e4; } .ba-ic--wa img { width: 22px; height: 22px; display: block; }
.ba-msg { animation: baFloat 5s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
.ba-msg--paper { animation: baFloat 5s ease-in-out infinite, baLost 6s ease-in-out infinite; animation-delay: calc(var(--d) * -1), 0s; }
.nf__path { padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, .1); color: #fff; font-size: .92em; word-break: break-all; }
.nf__redirect { margin: -8px 0 26px; font-size: 16px; color: rgba(255, 255, 255, .7); }
.nf__redirect b { color: var(--lime); font-variant-numeric: tabular-nums; }
.nf__redirect button { margin-left: 6px; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* =====================================================================
   HOME · Jobsite: realistic phone mockup (v2)
   ===================================================================== */
@media (min-width: 861px) { .sync { min-height: 540px; } }
.sync__panel { grid-template-columns: auto auto 1fr; gap: 18px; padding: 32px clamp(20px, 3vw, 36px); }
.ph { width: 232px; padding: 7px; border-radius: 40px; background: linear-gradient(145deg, #2a2f2c, #0b0f0d 60%); box-shadow: 0 0 0 1.5px #3b423e inset, 0 30px 60px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06); }
.ph__screen { position: relative; overflow: hidden; border-radius: 33px; background: #f6f8f6; color: var(--ink); }
.ph__status { position: relative; display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 18px 0 22px; font-size: 11.5px; }
.ph__status b { font-weight: 700; letter-spacing: -.01em; }
.ph__island { position: absolute; left: 50%; top: 8px; width: 70px; height: 20px; margin-left: -35px; border-radius: 12px; background: #0b0f0d; }
.ph__sys { display: inline-flex; align-items: center; gap: 4px; }
.ph__bars { display: flex; align-items: flex-end; gap: 1.5px; height: 9px; }
.ph__bars i { width: 2.5px; border-radius: 1px; background: #c3cbc5; }
.ph__bars i:nth-child(1) { height: 30%; } .ph__bars i:nth-child(2) { height: 55%; } .ph__bars i:nth-child(3) { height: 78%; } .ph__bars i:nth-child(4) { height: 100%; }
.ph__wifi { width: 13px; height: 10px; fill: #c3cbc5; }
.ph__batt { position: relative; width: 21px; height: 10px; border-radius: 3px; border: 1px solid rgba(17, 24, 20, .4); padding: 1px; }
.ph__batt::after { content: ""; position: absolute; right: -3px; top: 3px; width: 1.5px; height: 3px; border-radius: 0 1px 1px 0; background: rgba(17, 24, 20, .4); }
.ph__batt i { display: block; width: 72%; height: 100%; border-radius: 1.5px; background: var(--ink); }
.ph__app { padding: 4px 12px 14px; }
.ph__nav { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ph__back { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.ph__back .icon { width: 13px; height: 13px; transform: rotate(90deg); }
.ph__ttl { flex: 1; display: grid; line-height: 1.2; }
.ph__ttl strong { font-size: 13.5px; } .ph__ttl small { font-size: 10.5px; color: var(--muted); }
.ph__logo { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--forest-800); }
.ph__logo svg { width: 14px; height: 14px; }
.ph__banner { position: relative; display: grid; margin-bottom: 10px; font-size: 10.5px; font-weight: 700; }
.ph__banner > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 10px; }
.ph__banner .icon { width: 12px; height: 12px; flex: none; }
.ph__banner-a { background: #fff3d6; color: #8a5300; }
.ph__banner-b { background: var(--mint); color: var(--brand); opacity: 0; }
.ph__lbl { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ph__lbl em { font-style: normal; padding: 0 6px; border-radius: 999px; background: #e7ece8; color: var(--ink-2); letter-spacing: 0; }
.ph__photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 10px; }
.ph__photos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; }
.ph__more { position: relative; }
.ph__more b { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 9px; background: rgba(4, 30, 16, .55); color: #fff; font-size: 12px; }
.ph__row { display: flex; align-items: center; gap: 8px; padding: 8px; margin-bottom: 6px; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px #e5ebe6; }
.ph__row small { font-size: 10.5px; color: var(--muted); }
.ph__ic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--mint); color: var(--brand); }
.ph__ic .icon { width: 14px; height: 14px; }
.ph__voice, .ph__chk { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ph__voice b, .ph__chk b { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph__chk small { line-height: 1; }
.ph__wave { display: flex; align-items: center; gap: 2px; height: 12px; }
.ph__wave i { flex: 1; max-width: 3px; height: 40%; border-radius: 2px; background: var(--green-500); }
.ph__wave i:nth-child(3n) { height: 90%; } .ph__wave i:nth-child(4n+1) { height: 65%; } .ph__wave i:nth-child(5n+2) { height: 100%; } .ph__wave i:nth-child(n+10) { background: #cfdcd2; }
.ph__prog { height: 5px; border-radius: 5px; background: #e7ece8; overflow: hidden; }
.ph__prog i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--green-500); }
.ph__st { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #d3dad5; border-top-color: #e0a12a; animation: spin 1s linear infinite; }
.ph__btn { display: block; margin-top: 10px; padding: 10px; border-radius: 12px; background: var(--brand); color: #fff; text-align: center; font-size: 12.5px; font-weight: 700; }
.ph__home { display: block; width: 84px; height: 4px; margin: 2px auto 7px; border-radius: 4px; background: #111814; opacity: .85; }

/* the one moment that moves: offline → back online (6s cycle, shared with the beam and cloud) */
.ph__banner-a { animation: phA 6s ease infinite; }
.ph__banner-b { animation: phB 6s ease infinite; }
.ph__bars i, .ph__wifi { animation: phSig 6s ease infinite; }
.ph__st { animation: spin 1s linear infinite, phDone 6s ease infinite; }
.ph__row:nth-of-type(2) .ph__st { animation-delay: 0s, .15s; } .ph__row:nth-of-type(3) .ph__st { animation-delay: 0s, .3s; }
@keyframes phA { 0%, 50% { opacity: 1; } 55%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes phB { 0%, 50% { opacity: 0; } 55%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes phSig { 0%, 50% { background: #c3cbc5; fill: #c3cbc5; } 55%, 95% { background: var(--ink); fill: var(--ink); } }
@keyframes phDone { 0%, 56% { border-color: #d3dad5; border-top-color: #e0a12a; background: transparent; box-shadow: none; } 62%, 95% { border-color: var(--green-500); background: var(--green-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat; transform: rotate(0); } }
.sync__cloud { justify-self: start; min-width: 150px; }

@media (max-width: 1100px) and (min-width: 861px) { .ph { width: 212px; } }
@media (max-width: 560px) {
  .sync { min-height: 0; }
  .sync__panel { position: relative; grid-template-columns: 1fr; justify-items: center; padding: 24px 16px; }
  .sync__cloud { justify-self: center; }
  main .ph { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .ph__banner-a, .ph__banner-b, .ph__bars i, .ph__wifi, .ph__st { animation: none !important; } .ph__banner-a { opacity: 0; } .ph__banner-b { opacity: 1; } }
@media (max-width: 1180px) and (min-width: 861px) {
  .sync__panel { grid-template-columns: 1fr; justify-items: center; }
  .sync__beam { display: none; }
  .sync__cloud { position: absolute; right: 16px; bottom: 16px; min-width: 0; grid-auto-flow: column; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; text-align: left; }
  .sync__cloud svg { width: 26px; height: 26px; margin: 0; grid-row: span 2; }
  .sync__cloud strong { font-size: 13px; } .sync__cloud small { font-size: 11px; }
  .ph__ttl small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.pain__media .pain__img[src*="hvac-tech-tablet"] { object-position: 60% 35%; }
@media (max-width: 960px) { .pain__media .pain__img[src*="hvac-tech-tablet"] { object-position: 34% 30%; } }
.trade--lg { background: #0b1410 url("../img/photos/hvac-crew-rooftop.webp") 50% 28% / cover no-repeat; }
.trade--lg::before { background: linear-gradient(180deg, rgba(6, 12, 9, .05) 0%, rgba(6, 12, 9, .25) 40%, rgba(6, 12, 9, .88) 100%); }
.trade--lg h3 { margin-top: auto; }
@media (max-width: 960px) { .trade--lg { min-height: 420px; background-position: 50% 38%; } .trade--lg h3 { margin-top: auto; } }
@media (max-width: 640px) { .trade--lg { min-height: 460px; } }

/* FieldGrid support escalation */
.alex-escalation { padding: 14px; margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: #f5faf6; }
.alex-escalation[hidden] { display: none; }
.alex-escalation h3 { margin: 0 0 8px; font-size: 16px; }
.alex-escalation p { font-size: 16px; line-height: 1.5; margin: 6px 0 10px; }
.alex-escalation label { display: block; margin: 8px 0 4px; font-size: 16px; font-weight: 600; }
.alex-escalation input, .alex-escalation textarea { display: block; width: 100%; box-sizing: border-box; border: 1px solid #c7d6cb; border-radius: 8px; padding: 9px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; }
.alex-escalation button { margin-top: 8px; }
.alex-cancel { padding: 8px 12px; margin-left: 5px; border: 1px solid #c7d6cb; border-radius: 8px; background: white; color: var(--ink); cursor: pointer; }
.alex-honey { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.alex-panel__foot button.alex-sales { width: 100%; background: #eff8f1; cursor: pointer; }
.alex-escalation [data-alex-escalation-status] { font-weight: 600; }

/* Guided contact flow */
[data-contact-wizard] [hidden] { display:none !important; }
.contact-progress { display:flex; justify-content:space-between; gap:16px; font-size:14px; color:var(--muted); }
.contact-progress__track { height:4px; background:#e9eee9; border-radius:4px; margin:16px 0 32px; overflow:hidden; }
.contact-progress__track span { display:block; height:100%; width:25%; background:var(--green-600,#20873e); transition:width .2s ease; }
[data-contact-step] h2 { font-size:clamp(24px,3vw,30px); margin:0 0 12px; line-height:1.2; }
[data-contact-step] > p { color:var(--muted); margin-bottom:24px; }
.contact-options { display:grid; gap:12px; }
.contact-option { display:flex; align-items:center; gap:14px; padding:18px; border:1px solid var(--line); border-radius:12px; cursor:pointer; text-align:left; }
.contact-option:has(input:checked) { border-color:var(--brand); background:#f0faf1; box-shadow:0 0 0 1px var(--brand); }
.contact-option:focus-within { outline:2px solid var(--brand); outline-offset:3px; }
.contact-option input { width:20px; height:20px; flex:0 0 20px; accent-color:var(--brand); }
.contact-option strong { display:block; font-size:16px; }
.contact-option small { display:block; font-size:14px; line-height:1.5; color:var(--muted); margin-top:4px; }
.contact-actions { display:flex; justify-content:space-between; gap:16px; margin-top:28px; }
.contact-actions [data-contact-next] { margin-left:auto; }
.contact-sms-consent { display:flex; gap:12px; font-size:14px; line-height:1.6; text-align:left; }
.contact-sms-consent input { width:20px; height:20px; flex:0 0 20px; margin-top:3px; accent-color:var(--brand); }
.contact-error { color:#a32828; margin-top:16px; }
@media(max-width:640px) { .contact-progress { font-size:13px; } .contact-progress > span:last-child { display:none; } .contact-option { padding:16px; } .contact-actions .btn { min-height:48px; } .msg-page__intro .msg-page__points, .msg-page__intro .msg-page__direct { display:none; } .msg-page__grid { gap:24px; } }
@media(prefers-reduced-motion:reduce) { .contact-progress__track span { transition:none; } }