/* ===========================================================================
   Airtally marketing site

   Palette is lifted directly from the product stylesheet (static/style.css):
   navy #133557 (--button-primary / --bg-primary), slate #3d565e (--sidebar-bg),
   green #10b981, blue #3b82f6.

   The neutrals, however, are NOT the app's flat greys. Every rule, divider,
   and secondary text colour here is navy at a fixed opacity, so the whole
   page tints toward the brand instead of toward Bootstrap grey. That single
   decision is what makes a site read as designed rather than assembled.
   =========================================================================== */

/* ---------- tokens ---------- */
:root {
  /* brand — straight from the app */
  --navy:        #133557;   /* --button-primary */
  --navy-700:    #1b4a7c;   /* hover / secondary navy */
  --navy-deep:   #0c2744;   /* dark bands + footer */
  --navy-ink:    #0e2c4a;   /* headline ink — a touch deeper than --navy */
  --slate:       #3d565e;   /* --sidebar-bg */

  --blue:        #3b82f6;
  --blue-600:    #2563eb;
  --blue-50:     #f1f6fe;
  --blue-100:    #dbe8fb;

  --green:       #10b981;
  --green-600:   #059669;
  --green-50:    #edfbf5;
  --green-100:   #cdf0e1;

  --amber:       #f59e0b;
  --amber-50:    #fffaef;
  --amber-100:   #fbeac6;
  --rose:        #ef4444;
  --rose-50:     #fef4f3;
  --rose-100:    #fbdedb;

  /* neutrals — navy at opacity, never flat grey */
  --ink:         #15283c;
  --body:        rgba(19, 45, 72, .76);
  --muted:       rgba(19, 45, 72, .56);
  --faint:       rgba(19, 45, 72, .40);
  --line:        rgba(19, 45, 72, .11);
  --line-strong: rgba(19, 45, 72, .20);
  --line-soft:   rgba(19, 45, 72, .055);
  --surface:     #f5f7fa;
  --surface-2:   #eef2f7;
  --white:       #ffffff;

  --on-dark:       rgba(255,255,255,.72);
  --on-dark-dim:   rgba(255,255,255,.50);
  --on-dark-line:  rgba(255,255,255,.13);
  --on-dark-fill:  rgba(255,255,255,.06);

  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-pill: 100px;

  /* shadows are navy-tinted and wide rather than black and tight */
  --shadow-xs: 0 1px 2px rgba(12, 39, 68, .05);
  --shadow-sm: 0 1px 2px rgba(12, 39, 68, .04), 0 6px 16px -8px rgba(12, 39, 68, .12);
  --shadow-md: 0 1px 3px rgba(12, 39, 68, .04), 0 18px 40px -20px rgba(12, 39, 68, .22);
  --shadow-lg: 0 2px 8px rgba(12, 39, 68, .04), 0 48px 90px -40px rgba(12, 39, 68, .36);

  --nav-h: 74px;
  --maxw: 1200px;
  --gutter: 28px;

  /* Google Sans is what the app asks for; Inter is the closest widely
     available fallback, so the two stacks land in the same place visually. */
  --font-body: "Google Sans Flex", "Google Sans", 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-head: "Google Sans Flex", "Google Sans", 'Inter Tight', 'Inter', system-ui, sans-serif;

  /* headings sit at a light-ish weight and large size — the editorial cut.
     Heavy + small is what makes a marketing page look like a dashboard. */
  --w-head: 480;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); }
body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1, "cv11" 1;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy-ink);
  margin: 0;
  font-weight: var(--w-head);
  letter-spacing: -0.028em;
  line-height: 1.08;
  text-wrap: balance;
}
h1 { font-size: clamp(2.85rem, 5.6vw, 4.3rem); letter-spacing: -0.042em; line-height: .98; }
h2 { font-size: clamp(2.05rem, 3.9vw, 3.1rem); letter-spacing: -0.036em; line-height: 1.04; }
h3 { font-size: clamp(1.14rem, 1.5vw, 1.3rem); font-weight: 550; letter-spacing: -0.022em; line-height: 1.25; }
h4 { font-size: .96rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.012em; }
p  { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--blue-100); color: var(--navy); }

/* ---------- layout primitives ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 860px; }
.section { padding-block: clamp(76px, 8.5vw, 128px); position: relative; }
.section--tight { padding-block: clamp(40px, 4.2vw, 58px); }
.section--surface { background: var(--surface); border-block: 1px solid var(--line); }
.section--blue    { background: linear-gradient(180deg, #f3f8ff, #f7fbff); border-block: 1px solid rgba(37,99,235,.10); }
.section--navy    { background: var(--navy-deep); color: var(--on-dark); }
.section--navy::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 500px at 10% -20%, rgba(16,185,129,.12), transparent 60%),
    radial-gradient(900px 500px at 92% 118%, rgba(59,130,246,.14), transparent 60%);
}
.section--navy > * { position: relative; }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }

/* eyebrow: a quiet uppercase label with a single brand dot. No rules, no
   green shouting — the heading underneath is meant to carry the section. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .715rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 20px;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--green); box-shadow: 0 0 0 3px rgba(16,185,129,.16);
}
.section--navy .eyebrow { color: rgba(255,255,255,.62); }
.section--navy .eyebrow::before { background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.18); }

.lede { font-size: clamp(1.04rem, 1.25vw, 1.18rem); line-height: 1.62; color: var(--body); font-weight: 400; }
.section--navy .lede { color: var(--on-dark); }
.stack > * + * { margin-top: 22px; }
.center { text-align: center; }
.center .eyebrow { margin-inline: auto; }
.center .lede { margin-inline: auto; max-width: 62ch; }
.section__head { max-width: 760px; margin-inline: auto; margin-bottom: clamp(44px, 5vw, 68px); }

/* editorial two-column head: heading left, lede right, hairline underneath.
   Breaks up a page that would otherwise be nine centred headings in a row. */
.head-split {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(24px, 4vw, 64px); align-items: end;
  padding-bottom: clamp(28px, 3vw, 40px); border-bottom: 1px solid var(--line);
  margin-bottom: clamp(40px, 4.5vw, 62px);
}
.head-split h2 { max-width: 16ch; }
.head-split .lede { max-width: 48ch; }
.section--navy .head-split { border-bottom-color: var(--on-dark-line); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: var(--r-pill); border: 1px solid transparent;
  font-family: var(--font-body); font-size: .94rem; font-weight: 600; letter-spacing: -0.008em;
  cursor: pointer; white-space: nowrap;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--navy); color: #fff; box-shadow: 0 1px 2px rgba(12,39,68,.18), 0 8px 20px -10px rgba(12,39,68,.45); }
.btn--primary:hover { background: var(--navy-700); box-shadow: 0 2px 4px rgba(12,39,68,.2), 0 14px 28px -12px rgba(12,39,68,.5); }
.btn--accent { background: var(--green); color: #04291f; box-shadow: 0 8px 20px -10px rgba(16,185,129,.7); }
.btn--accent:hover { background: #0ca878; }
.btn--ghost { background: #fff; color: var(--navy); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--navy); background: #fff; box-shadow: var(--shadow-sm); }
.btn--onnavy { background: #fff; color: var(--navy); }
.btn--onnavy:hover { background: #e8eef5; }
.btn--sm { padding: 9px 18px; font-size: .875rem; }
.btn--lg { padding: 16px 32px; font-size: 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.center .btn-row { justify-content: center; }

.textlink {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .94rem;
  color: var(--navy); transition: gap .16s ease, color .16s ease;
}
.textlink i { font-size: 1.05em; transition: transform .16s ease; }
.textlink:hover { color: var(--blue-600); gap: 10px; }
.section--navy .textlink { color: #fff; }
.section--navy .textlink:hover { color: #6ee7b7; }

/* =======================================================================
   Announcement bar
   ======================================================================= */
.topbar {
  background: var(--navy-deep); color: var(--on-dark);
  font-size: .83rem; text-align: center; padding: 10px var(--gutter);
  letter-spacing: -.005em;
}
.topbar a { color: #fff; font-weight: 600; margin-left: 8px; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 1px; }
.topbar a:hover { color: #6ee7b7; border-bottom-color: #6ee7b7; }
.topbar .pill {
  display: inline-block; background: rgba(16,185,129,.18); color: #6ee7b7;
  font-weight: 700; font-size: .63rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--r-pill); margin-right: 11px; vertical-align: 1px;
}

/* =======================================================================
   Navigation
   ======================================================================= */
.nav {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.80);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.nav.is-stuck { background: rgba(255,255,255,.92); border-bottom-color: var(--line); box-shadow: 0 1px 24px -12px rgba(12,39,68,.3); }
.nav__inner {
  height: var(--nav-h); display: flex; align-items: center; gap: 24px;
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
}
.nav__logo img { height: 25px; width: auto; }
.nav__menu { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
.nav__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.nav__item { position: relative; }
.nav__trigger {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 8px 13px; border-radius: var(--r-xs);
  font-family: var(--font-body); font-size: .925rem; font-weight: 500; color: var(--navy);
  letter-spacing: -.008em;
  transition: background-color .15s ease, color .15s ease;
}
.nav__trigger:hover, .nav__item.is-open .nav__trigger { background: rgba(19,45,72,.055); color: var(--navy-ink); }
.nav__trigger svg { width: 10px; height: 10px; opacity: .45; transition: transform .2s ease; }
.nav__item.is-open .nav__trigger svg { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + 10px); left: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-2xl);
  box-shadow: var(--shadow-lg); padding: 24px;
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 5;
}
.nav__item.is-open .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega--center { left: 50%; transform: translate(-50%, -5px); }
.nav__item.is-open .mega--center { transform: translate(-50%, 0); }
.mega__grid { display: grid; gap: 22px 30px; }
.mega__col-title {
  font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 10px; padding-left: 11px;
}
.mega__link {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 9px 11px; border-radius: var(--r-md);
  transition: background-color .14s ease;
}
.mega__link:hover { background: var(--surface); }
.mega__link .ico {
  flex: none; width: 32px; height: 32px; border-radius: var(--r-xs); display: grid; place-items: center;
  background: var(--green-50); color: var(--green-600); font-size: .92rem;
}
.mega__link .ico--blue  { background: var(--blue-50);  color: var(--blue-600); }
.mega__link .ico--slate { background: rgba(61,86,94,.09); color: var(--slate); }
.mega__name { display: block; font-size: .91rem; font-weight: 600; color: var(--navy-ink); line-height: 1.3; letter-spacing: -.012em; }
.mega__desc { display: block; font-size: .79rem; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.mega__plain {
  display: block; padding: 8px 11px; border-radius: var(--r-xs);
  font-size: .89rem; color: var(--body); transition: background-color .14s, color .14s;
}
.mega__plain:hover { background: var(--surface); color: var(--navy); }
.tag {
  display: inline-block; font-size: .56rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  background: var(--green-100); color: var(--green-600); padding: 2px 6px; border-radius: var(--r-pill); margin-left: 7px; vertical-align: 2px;
}
.mega__foot {
  margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: .85rem; color: var(--muted);
}

.nav__burger {
  display: none; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-xs);
  width: 40px; height: 40px; cursor: pointer; padding: 0; place-items: center;
}
.nav__burger span { display: block; width: 16px; height: 1.5px; background: var(--navy); margin: 3.5px auto; transition: transform .2s, opacity .2s; }
.nav.is-mobile-open .nav__burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav.is-mobile-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-mobile-open .nav__burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* =======================================================================
   Hero
   ======================================================================= */
.hero {
  position: relative; overflow: hidden; text-align: center;
  padding-top: clamp(64px, 7.5vw, 108px); padding-bottom: 0;
  background: var(--white);
}
/* faint engineering grid plus a single warm-navy bloom behind the headline —
   enough structure that the white space reads as composed, not empty */
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 640px; pointer-events: none;
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(820px 460px at 50% 20%, #000, transparent 70%);
  mask-image: radial-gradient(820px 460px at 50% 20%, #000, transparent 70%);
}
.hero::after {
  content: ""; position: absolute; inset: -140px 0 auto; height: 620px; pointer-events: none;
  background:
    radial-gradient(520px 300px at 32% 30%, rgba(59,130,246,.10), transparent 68%),
    radial-gradient(520px 300px at 70% 22%, rgba(16,185,129,.09), transparent 68%);
  filter: blur(10px);
}
.hero > * { position: relative; z-index: 1; }

.hero__kicker {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 28px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 6px 16px 6px 12px; font-size: .81rem; font-weight: 500; color: var(--body);
  box-shadow: var(--shadow-sm); letter-spacing: -.008em;
}
.hero__kicker .dot {
  order: -1; width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px rgba(16,185,129,.18); flex: none;
}
.hero h1 { max-width: 16ch; margin-inline: auto; }
/* the accent word is set in brand green rather than underlined — an underline
   under a 4rem headline reads as a hyperlink at a glance */
.hero h1 em { font-style: normal; color: var(--green-600); white-space: nowrap; }
.hero__sub { max-width: 58ch; margin: 26px auto 0; font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.6; color: var(--body); }

.leadform { display: flex; gap: 9px; max-width: 480px; margin: 34px auto 0; }
.leadform input[type="email"] {
  flex: 1; min-width: 0; padding: 13px 18px; font-family: var(--font-body); font-size: .95rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-pill); box-shadow: var(--shadow-xs);
  transition: border-color .15s, box-shadow .15s;
}
.leadform input::placeholder { color: var(--faint); }
.leadform input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(19,53,87,.10); }
.hero__note { margin-top: 15px; font-size: .83rem; color: var(--muted); }

.hero__shot { margin-top: clamp(52px, 5.5vw, 76px); position: relative; }
/* soft halo so the screenshot sits on the page rather than floating on it */
.hero__shot::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 10%; bottom: 12%;
  background: radial-gradient(62% 60% at 50% 50%, rgba(12,39,68,.22), transparent 72%);
  filter: blur(54px); z-index: -1;
}
.hero__shot::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 24%;
  background: linear-gradient(to bottom, transparent, var(--white) 76%); pointer-events: none; z-index: 2;
}
.hero__shot .shot { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(12,39,68,.06); }

/* =======================================================================
   Product mockups (CSS "screenshots")
   ======================================================================= */
.shot {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-2xl);
  box-shadow: var(--shadow-md); overflow: hidden; text-align: left;
}
.shot--flat { box-shadow: var(--shadow-sm); }
.shot__bar {
  display: flex; align-items: center; gap: 9px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.shot__dots { display: flex; gap: 5px; }
.shot__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(19,45,72,.16); display: block; }
.shot__crumb {
  margin-left: 8px; font-size: .72rem; color: var(--muted); background: #fff;
  border: 1px solid var(--line); padding: 3px 12px; border-radius: var(--r-pill);
}
.shot__body { display: grid; grid-template-columns: 188px 1fr; min-height: 320px; }
.shot__side { border-right: 1px solid var(--line); padding: 15px 11px; background: var(--navy); }
.shot__side .s-logo { height: 13px; width: 70px; background: rgba(255,255,255,.88); border-radius: 3px; margin: 6px 8px 18px; }
.shot__side span {
  display: flex; align-items: center; gap: 10px; padding: 7px 11px; border-radius: var(--r-xs);
  font-size: .76rem; color: rgba(255,255,255,.58);
}
.shot__side .on { background: rgba(255,255,255,.13); color: #fff; font-weight: 600; }
.shot__side i { width: 13px; text-align: center; font-size: .82rem; font-style: normal; }
.shot__main { padding: 18px 20px; display: grid; gap: 14px; align-content: start; background: #fff; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kpi { border: 1px solid var(--line); border-radius: var(--r-md); padding: 11px 13px; background: #fff; }
.kpi span { display: block; font-size: .61rem; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.kpi b { display: block; font-family: var(--font-head); font-weight: 500; font-size: 1.16rem; color: var(--navy-ink); margin-top: 4px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi em { font-style: normal; font-size: .66rem; font-weight: 600; color: var(--green-600); }
.kpi em.dn { color: var(--rose); }

.rows { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.rows header {
  display: grid; grid-template-columns: 1.6fr 1fr .85fr .9fr; gap: 10px; padding: 9px 14px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  font-size: .6rem; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); font-weight: 600;
}
.rows .row {
  display: grid; grid-template-columns: 1.6fr 1fr .85fr .9fr; gap: 10px; align-items: center;
  padding: 10px 14px; font-size: .775rem; color: var(--ink); border-bottom: 1px solid var(--line-soft);
}
.rows .row:last-child { border-bottom: 0; }
.rows .row .muted { color: var(--muted); }
.rows .row .amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--navy-ink); }
.chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: .67rem; font-weight: 600;
  padding: 3px 10px; border-radius: var(--r-pill); background: var(--green-50); color: var(--green-600);
  white-space: nowrap; width: fit-content;
}
.chip--blue  { background: var(--blue-50);  color: var(--blue-600); }
.chip--amber { background: var(--amber-50); color: #b45309; }
.chip--grey  { background: rgba(19,45,72,.06); color: var(--muted); }

.bars { display: flex; align-items: flex-end; gap: 7px; height: 104px; padding-top: 6px; }
.bars div { flex: 1; border-radius: 4px 4px 2px 2px; background: rgba(19,53,87,.12); }
.bars div.hi { background: var(--navy); }
.bars div.ac { background: var(--green); }

.floatcard {
  position: absolute; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); padding: 12px 14px; display: flex; gap: 11px; align-items: center;
  font-size: .8rem; color: var(--ink); max-width: 270px; z-index: 3;
}
.floatcard .ico {
  width: 32px; height: 32px; flex: none; border-radius: var(--r-xs); display: grid; place-items: center;
  background: var(--green-50); color: var(--green-600);
}
.floatcard .ico--blue { background: var(--blue-50); color: var(--blue-600); }
.floatcard b { display: block; font-size: .82rem; color: var(--navy-ink); font-weight: 600; }
.floatcard small { color: var(--muted); font-size: .72rem; }

/* =======================================================================
   Logo marquee — flat monochrome marks. Bordered pills around every logo
   made the strip read as eight buttons; a quiet row reads as a client list.
   ======================================================================= */
.trustline {
  text-align: center; font-size: .78rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 30px;
}
.trustline b { color: var(--muted); font-weight: 600; }
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: slide 52s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: 46px; padding-right: 46px; }
.lockup {
  display: flex; align-items: center; gap: 11px; flex: none;
  background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none;
  filter: grayscale(1); opacity: .62;
  transition: filter .25s ease, opacity .25s ease;
}
.lockup:hover { filter: grayscale(0); opacity: 1; }
.lockup img { width: 25px; height: 25px; object-fit: contain; flex: none; }
.lockup span {
  font-family: var(--font-head); font-size: 1.06rem; font-weight: 550; color: var(--navy-ink);
  white-space: nowrap; letter-spacing: -.028em;
}
/* Source artwork that is a wide wordmark rather than a square mark: show it
   on its own at a matched cap height instead of squashing it into the icon box. */
.lockup--wordmark img { width: auto; height: 19px; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =======================================================================
   Split feature bands
   ======================================================================= */
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 5.5vw, 88px); align-items: center; }
.split--flip { grid-template-columns: 1.1fr 1fr; }
.split--flip .split__media { order: -1; }
.split__copy { max-width: 47ch; }
.split__media { position: relative; }

.checklist { display: grid; gap: 16px; margin-top: 30px; }
.checklist li { display: flex; gap: 13px; align-items: flex-start; font-size: .955rem; line-height: 1.58; }
.checklist .tick {
  flex: none; width: 19px; height: 19px; border-radius: 50%; background: var(--green);
  color: #fff; display: grid; place-items: center; font-size: .56rem; margin-top: 4px;
}
.section--navy .checklist .tick { background: var(--green); color: #04291f; }
.checklist b { color: var(--navy-ink); font-weight: 600; }
.section--navy .checklist b { color: #fff; }

/* stat strip — hairlines and oversized light numerals, no boxes */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  border-top: 1px solid var(--line); background: none; border-radius: 0; overflow: visible;
}
.stats > div { padding: 36px 36px 8px 0; border-right: 1px solid var(--line); }
.stats > div + div { padding-left: 36px; }
.stats > div:last-child { border-right: 0; }
.stats i {
  display: inline-grid; place-items: center; width: auto; height: auto; margin-bottom: 18px;
  font-size: 1.12rem; color: var(--green-600); background: none; border: 0; border-radius: 0;
}
.stats b {
  display: block; font-family: var(--font-head); font-weight: 450;
  font-size: clamp(2.6rem, 4.4vw, 3.6rem);
  color: var(--navy-ink); letter-spacing: -.048em; line-height: .95;
}
.stats span { display: block; margin-top: 14px; font-size: .9rem; color: var(--muted); line-height: 1.55; max-width: 30ch; }

/* =======================================================================
   Card grids
   ======================================================================= */
.cards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-2xl); overflow: hidden; }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
/* one hairline grid rather than four floating cards — cleaner, and it stops
   the 4-up row from looking like a pricing table */
.card {
  background: #fff; border: 0; border-radius: 0; padding: 32px 28px 34px;
  display: flex; flex-direction: column; gap: 12px;
  transition: background-color .2s ease;
}
.card:hover { background: var(--surface); transform: none; box-shadow: none; }
.card__ico {
  width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--green-50); border: 0; color: var(--green-600);
  font-size: 1.06rem; margin-bottom: 10px;
}
.card__ico--blue  { background: var(--blue-50);  color: var(--blue-600); }
.card__ico--slate { background: rgba(61,86,94,.09); color: var(--slate); }
.card__ico--amber { background: var(--amber-50); color: #b45309; }
.card p { font-size: .92rem; line-height: 1.6; color: var(--muted); }
/* a card used on its own, outside the hairline grid, keeps its own frame */
.card--solo { border: 1px solid var(--line); border-radius: var(--r-xl); padding: 24px; }
.card--solo:hover { background: #fff; }

/* evidence tiles used in the margin-recovery band — uniform, not staggered */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.tile {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 20px;
  display: flex; flex-direction: column; gap: 10px; min-height: 180px; box-shadow: var(--shadow-xs);
}
.tile__head { display: flex; align-items: center; gap: 10px; }
.tile__ico {
  width: 30px; height: 30px; flex: none; border-radius: var(--r-xs); display: grid; place-items: center;
  font-size: .85rem; background: rgba(19,45,72,.06); border: 0; color: var(--slate);
}
.tile__ico--green { background: var(--green-50); color: var(--green-600); }
.tile__ico--blue  { background: var(--blue-50);  color: var(--blue-600); }
.tile__ico--amber { background: var(--amber-50); color: #b45309; }
.tile__ico--rose  { background: var(--rose-50);  color: #b91c1c; }
.tile h4 { font-size: .88rem; color: var(--navy-ink); }
.tile__fig {
  font-family: var(--font-head); font-weight: 500; font-size: 1.5rem; color: var(--navy-ink);
  letter-spacing: -.038em; font-variant-numeric: tabular-nums; line-height: 1;
}
.tile__meta { font-size: .79rem; color: var(--muted); line-height: 1.5; }
.tile .chip { margin-top: auto; }

/* =======================================================================
   Integrations
   ======================================================================= */
.intgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.intcol { background: #fff; border: 1px solid var(--line); border-radius: var(--r-2xl); padding: 24px; box-shadow: var(--shadow-xs); }
.intcol h4 {
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
  padding-bottom: 15px; margin-bottom: 8px; border-bottom: 1px solid var(--line);
}
.intcol li a {
  display: flex; align-items: center; gap: 13px; padding: 10px 11px; margin-inline: -11px;
  border-radius: var(--r-md); font-size: .92rem; color: var(--navy-ink); font-weight: 500;
  letter-spacing: -.01em; transition: background-color .14s;
}
.intcol li a:hover { background: var(--surface); }
.intcol .logo {
  width: 32px; height: 32px; flex: none; border-radius: var(--r-xs); background: var(--surface);
  border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden;
}
.intcol .logo img { width: 19px; height: 19px; object-fit: contain; }
.intcol .logo span { font-size: .65rem; font-weight: 700; color: var(--slate); letter-spacing: -.02em; }
.intcol .logo i { color: var(--slate); font-size: .95rem; }
.intcol .status {
  margin-left: auto; font-size: .64rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--green-600); display: inline-flex; align-items: center; gap: 6px;
}
.intcol .status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.intcol .status--soft { color: var(--faint); }
.intcol .status--beta { color: var(--amber); }

/* =======================================================================
   Testimonials
   ======================================================================= */
.rail__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 40px; flex-wrap: wrap; }
.rail { position: relative; }
.rail__viewport { overflow: hidden; }
.rail__track { display: flex; gap: 20px; transition: transform .5s cubic-bezier(.33, 1, .68, 1); }
.quote {
  flex: 0 0 calc((100% - 40px) / 3); background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-2xl); padding: 30px 28px; display: flex; flex-direction: column; gap: 18px; margin: 0;
  box-shadow: var(--shadow-xs);
}
.quote__stars { color: var(--amber); font-size: .76rem; letter-spacing: 3px; }
.quote p {
  font-family: var(--font-head); font-weight: 450; font-size: 1.18rem; line-height: 1.42;
  color: var(--navy-ink); letter-spacing: -.028em;
}
.quote footer { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.quote .avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--navy); color: #fff; font-weight: 600; font-size: .78rem; letter-spacing: .02em;
}
.quote .who b { display: block; font-size: .86rem; color: var(--navy-ink); font-weight: 600; }
.quote .who span { display: block; font-size: .79rem; color: var(--muted); }
.rail__nav { display: flex; gap: 8px; }
.rail__btn {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-strong); background: #fff;
  cursor: pointer; display: grid; place-items: center; color: var(--navy);
  transition: background-color .15s, border-color .15s, opacity .15s;
}
.rail__btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.rail__btn[disabled] { opacity: .3; cursor: default; }
.rail__btn[disabled]:hover { background: #fff; border-color: var(--line-strong); color: var(--navy); }

/* =======================================================================
   ROI calculator
   ======================================================================= */
.roi { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.roi__panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-2xl);
  padding: clamp(26px, 3.2vw, 38px); display: flex; flex-direction: column; box-shadow: var(--shadow-xs);
}
.roi__panel--out {
  background: var(--navy-deep); border-color: transparent; color: var(--on-dark);
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  box-shadow: var(--shadow-md);
}
.roi__panel--out::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 340px at 100% 0%, rgba(16,185,129,.16), transparent 62%);
}
.roi__panel--out > * { position: relative; }
.roi__field { display: grid; gap: 10px; margin-bottom: 26px; }
.roi__field:last-of-type { margin-bottom: 0; }
.roi__hint {
  margin-top: auto; padding-top: 28px; font-size: .79rem; color: var(--muted); line-height: 1.55;
  display: flex; gap: 10px; align-items: flex-start;
}
.roi__hint i { color: var(--blue-600); font-size: .95rem; margin-top: 1px; }
.roi__field label {
  font-size: .87rem; font-weight: 600; color: var(--navy-ink);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.roi__field label output {
  font-family: var(--font-head); font-weight: 550; font-size: 1.05rem; color: var(--navy-ink); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xs); padding: 2px 11px; min-width: 78px; text-align: right;
}
.roi__field input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: var(--r-pill);
  background: rgba(19,45,72,.12); outline: none; cursor: pointer;
}
.roi__field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--navy);
  border: 3px solid #fff; box-shadow: 0 1px 6px rgba(12,39,68,.4); cursor: pointer;
}
.roi__field input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--navy); border: 3px solid #fff; cursor: pointer;
}
.roi__scale { display: flex; justify-content: space-between; font-size: .72rem; color: var(--faint); }
.roi__out { padding: 22px 0; border-bottom: 1px solid var(--on-dark-line); }
.roi__out:first-child { padding-top: 0; }
.roi__out > span { display: block; font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--on-dark-dim); font-weight: 600; }
.roi__out b {
  display: block; font-family: var(--font-head); font-weight: 450; font-size: clamp(2.1rem, 3.8vw, 3rem); color: #fff;
  letter-spacing: -.048em; line-height: 1.05; margin-top: 8px; font-variant-numeric: tabular-nums;
}
.roi__out--hero b { color: #34d399; }
.roi__out b { white-space: nowrap; }
.roi__out b .unit {
  display: inline; font-size: .8rem; color: var(--on-dark-dim);
  letter-spacing: 0; text-transform: none; font-weight: 500;
}
.roi__foot { margin-top: auto; padding-top: 24px; font-size: .77rem; color: var(--on-dark-dim); line-height: 1.55; }

/* =======================================================================
   Footer
   ======================================================================= */
.footer { background: var(--navy-deep); color: var(--on-dark-dim); padding-top: clamp(60px, 6.5vw, 86px); font-size: .87rem; }
.footer__top { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 36px; padding-bottom: 54px; }
.footer__brand img { height: 23px; filter: brightness(0) invert(1); opacity: .92; }
.footer__brand p { margin-top: 17px; max-width: 32ch; line-height: 1.65; color: var(--on-dark-dim); }
.footer h4 { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: 17px; }
.footer li { margin-bottom: 10px; }
.footer li a { color: var(--on-dark); transition: color .14s; }
.footer li a:hover { color: #fff; }
.social { display: flex; gap: 9px; margin-top: 24px; }
.social a {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--on-dark-fill); color: var(--on-dark); transition: background-color .15s, color .15s;
}
.social a:hover { background: rgba(255,255,255,.16); color: #fff; }

.footer__contact {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px;
  padding: 34px 0; border-top: 1px solid var(--on-dark-line);
}
.footer__contact h4 { margin-bottom: 12px; }
.footer__contact p { line-height: 1.7; color: var(--on-dark); }
.footer__contact a { color: #fff; }
.footer__contact a:hover { color: #6ee7b7; }

.footer__legal { border-top: 1px solid var(--on-dark-line); padding: 28px 0 40px; font-size: .74rem; line-height: 1.7; color: rgba(255,255,255,.38); }
.footer__legal p + p { margin-top: 12px; }
.footer__bar { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; padding-bottom: 20px; }
.footer__bar nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__bar a:hover { color: #fff; }

/* placeholder markers for content the team still needs to supply */
.todo { color: var(--amber); font-style: normal; }

/* =======================================================================
   Scroll reveal
   ======================================================================= */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* =======================================================================
   Demo page
   ======================================================================= */
.demo { display: grid; grid-template-columns: 1fr 1.02fr; gap: clamp(40px, 5vw, 76px); align-items: start; }
.formcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-2xl); padding: clamp(28px, 3vw, 38px); box-shadow: var(--shadow-md); }
.field { display: grid; gap: 7px; margin-bottom: 17px; }
.field label { font-size: .84rem; font-weight: 600; color: var(--navy-ink); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; font-family: var(--font-body); font-size: .93rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(19,53,87,.10);
}
.field--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formnote { font-size: .78rem; color: var(--muted); margin-top: 12px; text-align: center; }
.formok {
  display: none; background: var(--green-50); border: 1px solid var(--green-100);
  color: #065f46; border-radius: var(--r-md); padding: 16px 18px; font-size: .9rem; margin-bottom: 18px;
}
.formok.is-on { display: block; }

/* =======================================================================
   Responsive
   ======================================================================= */
@media (max-width: 1080px) {
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .quote { flex: 0 0 calc((100% - 20px) / 2); }
  .footer__top { grid-template-columns: repeat(3, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
  .stats > div:nth-child(2) { border-right: 0; }
}
@media (max-width: 900px) {
  :root { --gutter: 22px; }
  .nav__menu { display: none; }
  .nav__burger { display: grid; }
  .nav__actions .btn--ghost { display: none; }

  .nav.is-mobile-open .nav__menu {
    display: block; position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0;
    background: #fff; overflow-y: auto; padding: 14px var(--gutter) 60px; margin: 0;
    border-top: 1px solid var(--line);
  }
  .nav.is-mobile-open .nav__item { display: block; border-bottom: 1px solid var(--line); }
  .nav.is-mobile-open .nav__trigger { width: 100%; justify-content: space-between; padding: 15px 0; font-size: 1.02rem; border-radius: 0; }
  .nav.is-mobile-open .nav__trigger:hover { background: none; }
  .nav.is-mobile-open .mega {
    position: static; opacity: 1; visibility: visible; transform: none; display: none;
    border: 0; box-shadow: none; padding: 0 0 16px; border-radius: 0;
  }
  .nav.is-mobile-open .nav__item.is-open .mega { display: block; }
  .nav.is-mobile-open .mega--center { transform: none; }
  .nav.is-mobile-open .mega__grid { grid-template-columns: 1fr !important; width: auto !important; }
  .nav.is-mobile-open .mega__col-title { padding-left: 0; }
  .nav.is-mobile-open .mega__link, .nav.is-mobile-open .mega__plain { margin-inline: -10px; }

  .split, .roi, .demo, .head-split { grid-template-columns: 1fr; }
  .head-split { align-items: start; gap: 20px; }
  .head-split h2 { max-width: none; }
  .split--flip .split__media { order: 0; }
  .intgrid { grid-template-columns: 1fr; }
  .shot__body { grid-template-columns: 1fr; }
  .shot__side { display: none; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .stats > div { border-right: 0; border-bottom: 1px solid var(--line); padding: 28px 0; }
  .stats > div + div { padding-left: 0; }
  .stats > div:last-child { border-bottom: 0; }
  .floatcard { position: static; max-width: none; margin-top: 16px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .cards--4, .cards--3, .cards--2 { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .quote { flex: 0 0 100%; }
  .leadform { flex-direction: column; }
  .leadform .btn { width: 100%; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .field--2 { grid-template-columns: 1fr; }
  .rows header, .rows .row { grid-template-columns: 1.4fr .9fr .9fr; }
  .rows header span:nth-child(3), .rows .row > :nth-child(3) { display: none; }
  .hero::before { background-size: 48px 48px; }
  .marquee__group { gap: 32px; padding-right: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ===========================================================================
   Topkey-shaped layer
   ---------------------------------------------------------------------------
   The reference site's structural signatures, rebuilt in Airtally's palette:
   a rounded hero media card, pale tinted panels behind every product shot,
   an orbit diagram for integrations, a table-style calculator, and a pale
   (not dark) closing CTA. Where topkey uses mint ice + neon lime, this uses
   Airtally's green at low alpha and solid green respectively.
   =========================================================================== */
:root {
  --ice:        #e6f5ef;   /* pale green tint — stands in for topkey's mint   */
  --ice-line:   #cfeade;
  --ice-blue:   #e9f1fb;   /* alternate tint so bands don't all read the same */
  --ice-blue-line: #d6e6f8;

  /* Drop a property photograph in here and the hero picks it up; until then
     it falls back to the navy mesh below. See README. */
  --hero-photo: none;
}

/* ---------------- hero media card ---------------- */
.hero { padding-top: clamp(18px, 2vw, 30px); padding-bottom: clamp(44px, 5vw, 76px); text-align: left; }
.hero::before, .hero::after { display: none; }

.herocard {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-2xl);
  min-height: clamp(420px, 46vw, 560px);
  display: grid; place-items: center;
  padding: clamp(48px, 6vw, 88px) clamp(24px, 4vw, 56px) clamp(96px, 9vw, 136px);
  background-color: var(--navy-deep);
  background-image: var(--hero-photo);
  background-size: cover; background-position: center 62%;
  text-align: center;
}
/* mesh that reads as depth when no photo is set, and as a legibility scrim
   when one is */
.herocard::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(1100px 620px at 16% 8%,  rgba(16,185,129,.30), transparent 62%),
    radial-gradient(1000px 600px at 86% 96%, rgba(59,130,246,.34), transparent 62%),
    linear-gradient(185deg, rgba(12,39,68,.58), rgba(12,39,68,.86));
}
.herocard::after {
  content: ""; position: absolute; inset: 0; z-index: -1; 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: 76px 76px;
  -webkit-mask-image: radial-gradient(760px 460px at 50% 44%, #000, transparent 74%);
  mask-image: radial-gradient(760px 460px at 50% 44%, #000, transparent 74%);
}
.herocard__body { max-width: 940px; width: 100%; }

.hero h1 { color: #fff; max-width: 14ch; font-size: clamp(2.6rem, 5vw, 4rem); }
.hero h1 em { color: #6ee7b7; }
.hero__sub { color: rgba(255,255,255,.80); }
.hero__note { color: rgba(255,255,255,.62); }
.hero__kicker {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22);
  color: #fff; box-shadow: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero .leadform input[type="email"] {
  background: rgba(255,255,255,.95); border-color: transparent; color: var(--ink);
  box-shadow: 0 10px 30px -14px rgba(0,0,0,.5);
}
.hero .leadform input[type="email"]:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(16,185,129,.35); }

/* the product shot rides up over the bottom edge of the card */
.hero__shot { margin-top: clamp(-116px, -8vw, -72px); }
.hero__shot::before, .hero__shot::after { display: none; }
.hero__shot .shot {
  max-width: 1020px; margin-inline: auto;
  box-shadow: 0 2px 8px rgba(12,39,68,.06), 0 44px 80px -36px rgba(12,39,68,.42);
}

/* ---------------- tinted media panels ---------------- */
/* topkey's most recognisable move: the product art never floats on white, it
   sits inside a large flat tinted block */
.split__media--tint {
  background: var(--ice); border: 1px solid var(--ice-line);
  border-radius: var(--r-2xl); padding: clamp(26px, 3.4vw, 48px);
}
.split__media--blue { background: var(--ice-blue); border-color: var(--ice-blue-line); }
.split__media--tint .shot { box-shadow: var(--shadow-sm); }
.split__media--tint .tile { box-shadow: var(--shadow-sm); border-color: transparent; }
.split__media--tint .floatcard { box-shadow: var(--shadow-md); }
.split { align-items: center; }

/* ---------------- logo strip, quieter ---------------- */
.lockup { opacity: .48; }
.lockup img { width: 22px; height: 22px; }
.lockup--wordmark img { height: 17px; }
.lockup span { font-size: .98rem; }

/* ---------------- integrations orbit ---------------- */
/* A radar fan: the hub sits on the baseline and every connector is placed on
   one of three rings by angle alone, so adding a logo is one span. The rings'
   lower halves are clipped by the container, which is what gives the fan. */
.orbit {
  --r1: clamp(84px, 12vw, 134px);
  --r2: clamp(146px, 21vw, 234px);
  --r3: clamp(204px, 29vw, 328px);
  --base: 62px;
  position: relative; overflow: hidden;
  width: min(100%, 780px);
  height: calc(var(--r3) + var(--base) + 24px);
  margin: clamp(14px, 2.4vw, 32px) auto 0;
}
.orbit__ring, .orbit__core, .orbit__node {
  position: absolute; left: 50%; bottom: var(--base);
}
.orbit__ring {
  border: 1px solid rgba(19,53,87,.13); border-radius: 50%;
  transform: translate(-50%, 50%);
}
.orbit__ring--1 { width: calc(var(--r1) * 2); height: calc(var(--r1) * 2); }
.orbit__ring--2 { width: calc(var(--r2) * 2); height: calc(var(--r2) * 2); }
.orbit__ring--3 {
  width: calc(var(--r3) * 2); height: calc(var(--r3) * 2);
  border-style: dashed; border-color: rgba(19,53,87,.10);
}

.orbit__core {
  width: 76px; height: 76px; border-radius: 50%;
  transform: translate(-50%, 50%);
  box-shadow: 0 18px 44px -16px rgba(12,39,68,.6), 0 0 0 8px rgba(255,255,255,.7);
  z-index: 2;
}
.orbit__core img { width: 100%; height: 100%; border-radius: 50%; }

.orbit__node {
  --size: 54px; --rad: var(--r1);
  width: var(--size); height: var(--size);
  border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 10px 26px -14px rgba(12,39,68,.45);
  transform: translate(-50%, 50%) rotate(var(--a)) translateY(calc(-1 * var(--rad))) rotate(calc(-1 * var(--a)));
  z-index: 1;
}
.orbit__node--r2 { --rad: var(--r2); }
.orbit__node--r3 { --rad: var(--r3); --size: 42px; }
.orbit__node img { width: 25px; height: 25px; object-fit: contain; }
.orbit__node img.wide { width: 34px; height: auto; }
.orbit__node--r3 img { width: 19px; height: 19px; }
.orbit__node i { color: var(--slate); font-size: 1.04rem; }
.orbit__node--r3 i { font-size: .9rem; color: var(--muted); }

.orbit__cap {
  text-align: center; max-width: 52ch; margin: clamp(20px, 2.6vw, 32px) auto 0;
  font-size: .93rem; color: var(--muted);
}

/* ---------------- calculator, as a table ---------------- */
.roi { grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 76px); align-items: center; }
.roi__intro { max-width: 42ch; }
.roi__intro h2 { max-width: 15ch; }
.roi__panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-2xl);
  padding: clamp(10px, 1.4vw, 18px) clamp(18px, 2.4vw, 30px);
  box-shadow: var(--shadow-sm);
}
.roi__row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 18px;
  padding: 17px 0; border-bottom: 1px solid var(--line-soft);
}
.roi__row:last-of-type { border-bottom: 0; }
.roi__row label, .roi__row > span { font-size: .93rem; color: var(--body); letter-spacing: -.01em; }
.roi__row output, .roi__row b {
  font-family: var(--font-head); font-weight: 550; font-size: 1.04rem; color: var(--navy-ink);
  letter-spacing: -.028em; font-variant-numeric: tabular-nums; text-align: right;
}
.roi__row input[type="range"] { grid-column: 1 / -1; margin-top: 2px; }
.roi__row--derived { background: linear-gradient(90deg, transparent, transparent); }
.roi__row--derived > span { color: var(--muted); }
.roi__row--derived:first-of-type { border-top: 1px solid var(--line); }
.roi__row--total {
  border-top: 1px solid var(--line); border-bottom: 0; padding: 22px 0 20px;
}
.roi__row--total > span { font-weight: 600; color: var(--navy-ink); }
.roi__row--total b { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 450; color: var(--green-600); letter-spacing: -.042em; }
.roi__row b .unit { font-size: .74rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.roi__foot { padding: 4px 0 20px; font-size: .74rem; color: var(--faint); line-height: 1.6; }
.roi__hint { margin-top: 26px; padding-top: 0; }

/* ---------------- closing CTA, pale not dark ---------------- */

/* ---------------- responsive for the new pieces ---------------- */
@media (max-width: 900px) {
  .roi { grid-template-columns: 1fr; }
  .roi__intro, .roi__intro h2 { max-width: none; }
  .hero__shot { margin-top: -56px; }
  .orbit { width: 100%; --base: 34px; }
  .orbit__node { --size: 46px; }
  .orbit__node--r3 { --size: 36px; }
  .orbit__core { width: 60px; height: 60px; }
}
@media (max-width: 640px) {
  .herocard { padding-bottom: clamp(64px, 16vw, 96px); min-height: 0; }
  .hero__shot { margin-top: -40px; }
  .orbit__node img { width: 19px; height: 19px; }
  .orbit__node--r3, .orbit__ring--3 { display: none; }
  .orbit { height: calc(var(--r2) + var(--base) + 30px); }
}

/* the calculator moved from .roi__field to .roi__row markup — carry the
   slider styling across, or the UA's default blue track shows through */
.roi__row input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 5px;
  border-radius: var(--r-pill); background: rgba(19,45,72,.12);
  outline: none; cursor: pointer; accent-color: var(--navy);
}
.roi__row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--navy); border: 3px solid #fff;
  box-shadow: 0 1px 6px rgba(12,39,68,.4); cursor: pointer;
}
.roi__row input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--navy);
  border: 3px solid #fff; cursor: pointer;
}
.roi__row input[type="range"]::-moz-range-track {
  height: 5px; border-radius: var(--r-pill); background: rgba(19,45,72,.12);
}

/* the CTA is pale now, so its links can no longer be white */

/* OwnerRez ships a light-grey wordmark; at the strip's opacity it disappears,
   so wordmark lockups get a little more weight than the icon lockups */
.lockup--wordmark { opacity: .72; }

/* ===========================================================================
   Past the reference
   ---------------------------------------------------------------------------
   Where the benchmark is thin: its feature bands are unconnected ads with no
   order, its tinted panels are flat fills, its orbit has no spokes, and its
   calculator states the payoff in the same weight as its inputs. These rules
   fix each of those rather than copying them.
   =========================================================================== */

/* ---------- numbered bands: three ads become one sequence ---------- */
.eyebrow--step { gap: 12px; }
.eyebrow--step::before {
  content: attr(data-step) " / 03";
  width: auto; height: auto; border-radius: 0; background: none; box-shadow: none;
  font-family: var(--font-head); font-size: .78rem; font-weight: 600;
  letter-spacing: .02em; color: var(--navy-ink); font-variant-numeric: tabular-nums;
  padding-right: 12px; border-right: 1px solid var(--line-strong);
}

/* ---------- tinted panels get light in them, not just colour ---------- */
.split__media--tint {
  background-image: radial-gradient(130% 110% at 18% -6%, rgba(255,255,255,.92), rgba(255,255,255,0) 58%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

/* ---------- orbit: spokes, and a node that answers the pointer ---------- */
/* the line runs from each node back to the hub. A node sits at bearing --a
   from the hub, so from the node the hub lies at --a + 180deg; a box that
   hangs downward from its own top edge is already at 180deg, which is why
   rotating it by exactly --a aims it home. */
.orbit__node::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 1px; height: calc(var(--rad) - 54px);
  background: linear-gradient(to bottom, rgba(19,53,87,0), rgba(19,53,87,.16));
  transform-origin: top center; transform: rotate(var(--a));
}
.orbit__node { transition: border-color .2s ease, box-shadow .2s ease, scale .2s ease; }
.orbit__node:hover {
  border-color: var(--green); scale: 1.1;
  box-shadow: 0 10px 26px -12px rgba(16,185,129,.55), 0 0 0 4px rgba(16,185,129,.12);
}
.orbit__core::after {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  border: 1px solid rgba(16,185,129,.35);
}

/* ---------- the calculator's payoff reads as the payoff ---------- */
.roi__row--total {
  margin: 4px -12px 0; padding: 20px 20px 18px; border-radius: var(--r-lg);
  background: linear-gradient(100deg, var(--ice), rgba(230,245,239,.35));
  border-top: 0; align-items: center;
}
.roi__row--total > span { display: grid; gap: 2px; }
.roi__row--total > span em { font-style: normal; font-size: .74rem; font-weight: 400; color: var(--muted); }
.roi__row--total b { font-size: clamp(1.8rem, 3vw, 2.4rem); }

/* ---------- quotes carry a mark ---------- */
.quote { position: relative; }
/* set as a watermark on the right so it never fights the star row */
.quote::before {
  content: "\201C"; position: absolute; top: 16px; right: 26px;
  font-family: var(--font-head); font-size: 4.6rem; line-height: 1; font-weight: 500;
  color: var(--green); opacity: .15; pointer-events: none;
}
.quote__stars { position: relative; z-index: 1; }

/* ---------- 4-up cards answer the pointer with an accent, not a lift ---------- */
.card { position: relative; }
.card::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: var(--green); opacity: 0; transition: opacity .2s ease;
}
.card:hover::after { opacity: 1; }

/* ---------- stat marks stop being three of the same green ---------- */
.stats > div:nth-child(2) i { color: var(--blue-600); }
.stats > div:nth-child(3) i { color: var(--slate); }

@media (max-width: 900px) { .roi__row--total { margin-inline: 0; } }

/* ===========================================================================
   Wider canvas, redesigned banner, motion
   =========================================================================== */

/* ---------- the page gets room to breathe ---------- */
:root { --maxw: 1380px; --gutter: 34px; }
.wrap--narrow { max-width: 900px; }
.hero__shot .shot { max-width: 1180px; }
.split__copy { max-width: 50ch; }
.head-split h2 { max-width: 17ch; }
.orbit { width: min(100%, 860px); }
.section__head { max-width: 820px; }
.shot__body { grid-template-columns: 210px 1fr; }

/* ---------- announcement banner ---------- */
.topbar {
  position: relative; padding: 0; text-align: left; overflow: hidden;
  background:
    radial-gradient(620px 120px at 18% 50%, rgba(16,185,129,.22), transparent 70%),
    radial-gradient(620px 120px at 82% 50%, rgba(59,130,246,.22), transparent 70%),
    var(--navy-deep);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.topbar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.10) 50%, transparent 62%);
  transform: translateX(-100%);
  animation: sheen 7s ease-in-out 1.4s infinite;
}
.topbar__inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: 11px calc(var(--gutter) + 26px) 11px var(--gutter);
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  font-size: .845rem; color: var(--on-dark); letter-spacing: -.005em;
}
.topbar__msg { margin: 0; }
.topbar__fade { color: #fff; font-weight: 500; }
.topbar .pill {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  background: rgba(16,185,129,.18); color: #6ee7b7;
  border: 1px solid rgba(16,185,129,.28);
  font-weight: 700; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 11px; border-radius: var(--r-pill); vertical-align: 0;
}
.pill__dot {
  width: 5px; height: 5px; border-radius: 50%; background: #34d399;
  animation: beacon 2.4s ease-in-out infinite;
}
.topbar__cta {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  color: #fff; font-weight: 600; border-bottom: 0; padding: 0;
  transition: color .16s ease, gap .16s ease;
}
.topbar__cta i { transition: transform .16s ease; }
.topbar__cta:hover { color: #6ee7b7; gap: 9px; border-bottom: 0; }
.topbar__cta:hover i { transform: translateX(2px); }
.topbar__x {
  position: absolute; top: 50%; right: calc(var(--gutter) - 6px); translate: 0 -50%;
  width: 26px; height: 26px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--on-dark-dim); font-size: .95rem;
  transition: background-color .16s ease, color .16s ease;
}
.topbar__x:hover { background: rgba(255,255,255,.12); color: #fff; }
.topbar.is-gone { display: none; }

/* ===========================================================================
   Motion
   Three jobs only: carry the hero in, bring sections up as they arrive, and
   show the integrations actually flowing into the ledger. Everything here is
   transform/opacity so it stays off the main thread, and the reduced-motion
   block at the end of this file switches all of it off.
   =========================================================================== */
@keyframes rise     { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes riseSoft { from { opacity: 0; transform: translateY(34px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes pop      { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: none; } }
@keyframes growbar  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes beacon   { 0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,.6); } 60% { box-shadow: 0 0 0 6px rgba(52,211,153,0); } }
@keyframes sheen    { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
@keyframes bob      { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes haloPulse{ 0%, 100% { transform: scale(1); opacity: .45; } 50% { transform: scale(1.14); opacity: .12; } }

/* hero arrives in sequence rather than all at once */
.hero__kicker { animation: rise .7s cubic-bezier(.22,1,.36,1) .05s backwards; }
.hero h1      { animation: rise .8s cubic-bezier(.22,1,.36,1) .14s backwards; }
.hero__sub    { animation: rise .8s cubic-bezier(.22,1,.36,1) .24s backwards; }
.hero .leadform { animation: rise .8s cubic-bezier(.22,1,.36,1) .32s backwards; }
.hero .hero__note { animation: rise .8s cubic-bezier(.22,1,.36,1) .38s backwards; }
.hero__shot   { animation: riseSoft 1.05s cubic-bezier(.22,1,.36,1) .42s backwards; }
.topbar__inner { animation: rise .6s ease-out backwards; }

/* children of a staggered block come up one after another; main.js numbers
   them with --i and flips .is-in from the same observer the reveals use */
.js [data-stagger] > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-stagger].is-in > * { opacity: 1; transform: none; }

/* the bar chart draws itself */
.reveal.is-in .bars div { transform-origin: bottom; animation: growbar .85s cubic-bezier(.22,1,.36,1) backwards; }
.bars div:nth-child(1){animation-delay:.04s} .bars div:nth-child(2){animation-delay:.09s}
.bars div:nth-child(3){animation-delay:.14s} .bars div:nth-child(4){animation-delay:.19s}
.bars div:nth-child(5){animation-delay:.24s} .bars div:nth-child(6){animation-delay:.29s}
.bars div:nth-child(7){animation-delay:.34s} .bars div:nth-child(8){animation-delay:.39s}
.bars div:nth-child(9){animation-delay:.44s} .bars div:nth-child(10){animation-delay:.49s}
.bars div:nth-child(11){animation-delay:.54s} .bars div:nth-child(12){animation-delay:.59s}

/* the notification cards drift, so the mockups don't read as a flat image */
.floatcard { animation: bob 6s ease-in-out infinite; }
.split__media--blue .floatcard { animation-duration: 7s; animation-delay: -2s; }

/* ---------- orbit: connectors land, then data flows down the spokes ---------- */
.reveal.is-in .orbit__node { animation: pop .55s cubic-bezier(.34,1.3,.64,1) backwards; }
.orbit__node:nth-of-type(4n+1) { animation-delay: .10s; }
.orbit__node:nth-of-type(4n+2) { animation-delay: .18s; }
.orbit__node:nth-of-type(4n+3) { animation-delay: .26s; }
.orbit__node:nth-of-type(4n+4) { animation-delay: .34s; }

/* a pulse travels from each connector back to the hub — the one thing the
   benchmark's diagram never shows: direction */
.orbit__node::after {
  content: ""; position: absolute; left: 50%; top: 50%; margin: -3px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px rgba(16,185,129,.8);
  transform: rotate(var(--a)) translateY(10px); opacity: 0;
  animation: flow 3.6s linear var(--d, 0s) infinite;
}
@keyframes flow {
  0%        { transform: rotate(var(--a)) translateY(10px);  opacity: 0; }
  14%       { opacity: .95; }
  86%       { opacity: .95; }
  100%      { transform: rotate(var(--a)) translateY(calc(var(--rad) - 44px)); opacity: 0; }
}
.orbit__node:nth-of-type(5n+1) { --d: 0s; }
.orbit__node:nth-of-type(5n+2) { --d: .7s; }
.orbit__node:nth-of-type(5n+3) { --d: 1.4s; }
.orbit__node:nth-of-type(5n+4) { --d: 2.1s; }
.orbit__node:nth-of-type(5n+5) { --d: 2.8s; }

.orbit__core::after { animation: haloPulse 3.2s ease-in-out infinite; }

@media (max-width: 1080px) { :root { --maxw: 1200px; } }
@media (max-width: 900px)  { :root { --gutter: 22px; } .shot__body { grid-template-columns: 1fr; } }
@media (max-width: 640px)  {
  .topbar__inner { padding-right: calc(var(--gutter) + 22px); gap: 8px 10px; font-size: .8rem; }
  .topbar__cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  /* the stagger's hidden state lives outside .reveal, so it needs its own
     opt-out or a reduced-motion visitor could be left with blank grids */
  [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .topbar::after, .pill__dot, .floatcard, .orbit__node::after, .orbit__core::after { animation: none !important; }
  .orbit__node::after { opacity: 0 !important; }
}

/* ===========================================================================
   Accent restored
   ---------------------------------------------------------------------------
   Back to the app's emerald: #10b981 on primary actions, the hero accent word,
   the calculator total, and the mint tints behind the product art. The hero
   card's edge highlight stayed — that one was about depth, not colour.
   =========================================================================== */
.herocard { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 40px 90px -50px rgba(9,30,53,.55); }

/* ===========================================================================
   Tighter vertical rhythm
   ---------------------------------------------------------------------------
   The page was set at a magazine's pace — generous, but it put a screenful of
   white between bands on a laptop and made the story feel padded. Roughly a
   third comes out of every seam. The proportions are kept: section gaps stay
   the largest interval, then head-to-body, then body internals, so the
   hierarchy still reads — there is just less air inside each step.
   =========================================================================== */
.section        { padding-block: clamp(54px, 5.4vw, 86px); }
.section--tight { padding-block: clamp(30px, 2.8vw, 42px); }

.section__head  { margin-bottom: clamp(30px, 3.2vw, 46px); }
.head-split     { padding-bottom: clamp(20px, 2.1vw, 28px); margin-bottom: clamp(26px, 2.8vw, 40px); }
.eyebrow        { margin-bottom: 16px; }
.stack > * + *  { margin-top: 18px; }

/* hero: the screenshot already overlaps the card, so the run-out under it was
   doing nothing but adding height */
.hero           { padding-bottom: clamp(26px, 2.8vw, 44px); }
.hero__sub      { margin-top: 20px; }
.leadform       { margin-top: 26px; }
.hero__shot     { margin-top: clamp(-116px, -8vw, -72px); }

/* bands */
.split          { gap: clamp(34px, 4.2vw, 68px); }
.checklist      { gap: 13px; margin-top: 24px; }
.stats > div    { padding: 26px 36px 4px 0; }
.stats span     { margin-top: 11px; }
.rail__head     { margin-bottom: 30px; }
.orbit          { margin-top: clamp(8px, 1.4vw, 20px); }
.orbit__cap     { margin-top: clamp(14px, 1.8vw, 24px); }
.card           { padding: 26px 26px 28px; }
.intcol         { padding: 20px 22px; }

/* closing block and footer */
.footer         { padding-top: clamp(46px, 4.8vw, 64px); }
.footer__top    { padding-bottom: 40px; gap: 30px; }
.footer__contact{ padding: 26px 0; }
.footer__legal  { padding: 22px 0 32px; }

@media (max-width: 900px) {
  .section      { padding-block: clamp(44px, 7vw, 62px); }
  .split        { gap: 30px; }
}

/* ---------- footer, decluttered ---------- */
/* four link columns became three: Platform and Features were two lists of the
   same product, and Company was carrying links the nav and the legal bar
   already own. */
.footer__top { grid-template-columns: 1.7fr repeat(3, 1fr); gap: 34px; }
.footer__more {
  display: inline-flex; align-items: center; gap: 6px;
  color: #fff !important; font-weight: 600;
  transition: gap .16s ease;
}
.footer__more:hover { gap: 9px; color: #6ee7b7 !important; }

@media (max-width: 1080px) {
  .footer__top { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
}

/* the legal block is now the copyright bar alone — the padding that held two
   paragraphs of disclaimer below it leaves a gap with nothing in it */
.footer__legal { padding: 20px 0 26px; }
.footer__bar   { padding-bottom: 0; }

/* the features grid gained a fifth card (client messaging). A 5-up row is too
   thin to read and 3-up leaves a hole, so it runs on six columns: three cards
   of two, then two cards of three. No empty cell, no orphan. */
.cards--4 { grid-template-columns: repeat(6, 1fr); }
.cards--4 > .card { grid-column: span 2; }
.cards--4 > .card:nth-child(4),
.cards--4 > .card:nth-child(5) { grid-column: span 3; }
@media (max-width: 1080px) {
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .cards--4 > .card,
  .cards--4 > .card:nth-child(4),
  .cards--4 > .card:nth-child(5) { grid-column: auto; }
}
@media (max-width: 640px) { .cards--4 { grid-template-columns: 1fr; } }

/* ===========================================================================
   Second motion pass
   Each of these is tied to something the interface is already saying — the
   nav getting out of the way, a tick being earned, a row being scanned — so
   the movement carries meaning rather than just proving the page is alive.
   =========================================================================== */

/* the bar tightens once you have left the hero, giving the content more room */
.nav { transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, height .25s ease; }
.nav__inner { transition: height .28s cubic-bezier(.22,1,.36,1); }
.nav__logo img { transition: height .28s cubic-bezier(.22,1,.36,1); }
.nav.is-condensed .nav__inner { height: 62px; }
.nav.is-condensed .nav__logo img { height: 22px; }

/* ticks draw themselves in behind the stagger, so a checklist reads as being
   completed rather than arriving pre-ticked */
.js [data-stagger] > li .tick {
  transform: scale(.4); opacity: 0;
  transition: transform .42s cubic-bezier(.34,1.4,.64,1), opacity .3s ease;
  transition-delay: calc(var(--i, 0) * 70ms + 120ms);
}
.js [data-stagger].is-in > li .tick { transform: none; opacity: 1; }

/* one soft sweep down the mockup rows when a band arrives — the review queue
   being read, which is exactly what the copy next to it claims */
.reveal.is-in .rows { position: relative; overflow: hidden; }
.reveal.is-in .rows::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(16,185,129,.10) 42%, transparent);
  animation: scanRows 1.5s cubic-bezier(.4,0,.2,1) .35s 1 backwards;
}
@keyframes scanRows { from { transform: translateY(-105%); } to { transform: translateY(105%); } }

/* buttons catch a light as the pointer crosses them */
.btn--primary, .btn--accent { position: relative; overflow: hidden; }
.btn--primary::after, .btn--accent::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.22) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.btn--primary:hover::after, .btn--accent:hover::after { transform: translateX(120%); }

/* connector rows lead with their mark on hover */
.intcol li a .logo { transition: transform .18s cubic-bezier(.34,1.3,.64,1); }
.intcol li a:hover .logo { transform: translateX(3px) scale(1.06); }

/* the counting numerals must not reflow the layout as digits change */
.stats b { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .js [data-stagger] > li .tick { transform: none !important; opacity: 1 !important; }
  .reveal.is-in .rows::after,
  .btn--primary::after, .btn--accent::after { display: none !important; }
  .nav.is-condensed .nav__inner, .nav.is-condensed .nav__logo img { transition: none !important; }
}

/* ===========================================================================
   Greens (and blues) pinned to the app's own tokens
   ---------------------------------------------------------------------------
   The base #10b981 and #059669 were already the app's, but the tints around
   them were hand-mixed. Every value below is lifted verbatim from
   static/style.css or from a hex the React styles actually render, so the
   marketing site and the product cannot drift apart:

     --success        #10b981    --info         #3b82f6
     --success-ink    #059669    --info-strong  #2563eb
     --success-bg     #ecfdf5    --info-bg      #f1f6fb
     --success-bg-3   #eaf7f1    (app renders)  #dbeafe / #eff6ff
     (app renders)    #d1fae5 / #a7f3d0
     --success-strong #0f7a5a    dark: #34d399 / #6ee7b7
   =========================================================================== */
:root {
  --green:       #10b981;   /* --success */
  --green-600:   #059669;   /* --success-ink */
  --green-50:    #ecfdf5;   /* --success-bg */
  --green-100:   #d1fae5;   /* rendered across the app's status pills */
  --green-200:   #a7f3d0;   /* rendered on success borders */
  --green-deep:  #0f7a5a;   /* --success-strong, the app's success text */

  --blue:        #3b82f6;   /* --info */
  --blue-600:    #2563eb;   /* --info-strong */
  --blue-50:     #f1f6fb;   /* --info-bg */
  --blue-100:    #dbeafe;   /* rendered across the app's info pills */

  /* the big tinted panels use the app's success/info wash, not a mixed mint */
  --ice:            #eaf7f1;   /* --success-bg-3 */
  --ice-line:       #cdeadd;
  --ice-blue:       #eef3f9;   /* --info-bg-2 */
  --ice-blue-line:  #d8e4f1;
}

/* success text in the app is --success-ink on light and --success-strong when
   it needs more weight; the calculator total is the one place that wants it */
.roi__row--total b { color: var(--green-deep); }
.roi__row--total { background: linear-gradient(100deg, var(--ice), #f2faf6); }
.chip { border: 1px solid var(--green-200); }
.chip--blue  { border-color: var(--blue-100); }
.chip--amber { border-color: var(--amber-100); }
.chip--grey  { border-color: var(--line); }

/* ===========================================================================
   Accent moves to the app's blue
   ---------------------------------------------------------------------------
   Green is the app's *success* colour, not its accent — in the product it
   means "this reconciled", not "click here". So it keeps exactly that job:
   the status chips and ticks inside the product mockups, where it is
   depicting real UI. Everything that is page chrome — buttons, eyebrow dots,
   the hero accent word, the calculator total, the orbit pulses, the tinted
   panels — moves to --info / --info-strong.

     --info        #3b82f6      --info-bg     #f1f6fb
     --info-strong #2563eb      --info-bg-2   #eef3f9
     dark: --info #60a5fa, --info-strong #93c5fd
     --surface-4   #eef2f6      --brand       #133557
   =========================================================================== */

/* ---------- primary actions ---------- */
.btn--accent { background: var(--blue-600); color: #fff; box-shadow: 0 8px 20px -10px rgba(37,99,235,.55); }
.btn--accent:hover { background: #1d4ed8; box-shadow: 0 12px 26px -10px rgba(37,99,235,.6); }
.hero .btn--accent { background: var(--blue); }
.hero .btn--accent:hover { background: var(--blue-600); }

/* ---------- hero ---------- */
.hero h1 em { color: #93c5fd; }                      /* --info-strong, dark */
.hero__kicker .dot { background: #60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,.20); }
.herocard::before {
  background:
    radial-gradient(1100px 620px at 14% 4%,  rgba(59,130,246,.30), transparent 62%),
    radial-gradient(1000px 600px at 88% 96%, rgba(37,99,235,.34), transparent 62%),
    linear-gradient(185deg, rgba(12,39,68,.60), rgba(9,30,53,.92));
}
.hero .leadform input[type="email"]:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(59,130,246,.3); }

/* ---------- section marks ---------- */
.eyebrow::before { background: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,.16); }
.section--navy .eyebrow::before { background: #60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,.18); }
.section--navy .textlink:hover { color: #93c5fd; }
.stats > div:nth-child(1) i { color: var(--blue-600); }
.stats > div:nth-child(2) i { color: var(--blue); }

/* ---------- checklists: page copy, so blue; the mockups keep success green -- */
.checklist .tick { background: var(--blue-600); }
.section--navy .checklist .tick { background: #60a5fa; color: #06203f; }

/* ---------- tinted panels and the closing block ---------- */
:root { --ice: #eef3f9; --ice-line: #d8e4f1; --ice-blue: #eef2f6; --ice-blue-line: #dde4ec; }

/* ---------- calculator ---------- */
.roi__row--total { background: linear-gradient(100deg, #eef3f9, #f5f8fc); }
.roi__row--total b { color: var(--blue-600); }

/* ---------- orbit, cards, banner ---------- */
.orbit__node::after { background: var(--blue); box-shadow: 0 0 8px rgba(59,130,246,.75); }
.orbit__core::after { border-color: rgba(59,130,246,.35); }
.orbit__node:hover {
  border-color: var(--blue);
  box-shadow: 0 10px 26px -12px rgba(59,130,246,.5), 0 0 0 4px rgba(59,130,246,.12);
}
.card::after { background: var(--blue-600); }
.quote::before { color: var(--blue); opacity: .16; }
.topbar .pill { background: rgba(96,165,250,.16); border-color: rgba(96,165,250,.28); color: #bfdbfe; }
.pill__dot { background: #60a5fa; }
@keyframes beacon { 0%, 100% { box-shadow: 0 0 0 0 rgba(96,165,250,.6); } 60% { box-shadow: 0 0 0 6px rgba(96,165,250,0); } }
.topbar__cta:hover, .topbar a:hover { color: #93c5fd; }
.footer__more:hover { color: #93c5fd !important; }
.reveal.is-in .rows::after {
  background: linear-gradient(to bottom, transparent, rgba(59,130,246,.10) 42%, transparent);
}
::selection { background: #dbeafe; color: var(--navy); }

/* the step marker replaces the dot entirely, so it has to re-opt-out of the
   dot styling that the blue accent rules above re-assert at equal specificity */
.eyebrow--step::before {
  background: none; box-shadow: none; border-radius: 0;
  width: auto; height: auto;
}

/* ===========================================================================
   Polish pass
   ---------------------------------------------------------------------------
   Looser heading tracking (the old -0.04em made letters touch at display
   sizes), a clearer logo strip, a source -> Airtally -> ledger flow in place
   of the orbit, a four-step "how it works", and a closing CTA.
   =========================================================================== */
h1, h2, h3 { letter-spacing: -0.024em; }
h1 { letter-spacing: -0.032em; line-height: 1.02; }
h2 { letter-spacing: -0.028em; line-height: 1.08; }
.hero h1 { max-width: 15ch; }
.stats b { letter-spacing: -0.035em; }

/* ---------- logo strip ---------- */
.trustline {
  text-transform: none; letter-spacing: -.005em; font-size: .92rem;
  font-weight: 500; color: var(--muted); margin-bottom: 26px;
}
.lockup { opacity: .7; }
.lockup--wordmark { opacity: 1; }
.lockup--wordmark img { filter: grayscale(1) brightness(.45); opacity: .75; height: 18px; }
.lockup--wordmark:hover img { filter: none; opacity: 1; }

/* ---------- floating notification cards stay inside their panel ---------- */
.floatcard--br { right: 18px; bottom: -30px; }
.floatcard--bl { left: 18px; bottom: -30px; }
.split__media--tint { margin-bottom: 30px; }

/* ---------- integrations flow ---------- */
.flow {
  display: grid; grid-template-columns: 1fr 64px minmax(250px, .9fr) 64px 1fr;
  align-items: center; gap: 0;
  margin: clamp(8px, 1.4vw, 20px) 0 clamp(30px, 3.4vw, 48px);
}
.flow__label {
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 14px;
}
.flow__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.flow__chips li {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 7px 14px 7px 8px; font-size: .86rem; font-weight: 500; color: var(--navy-ink);
  box-shadow: var(--shadow-xs); transition: border-color .16s, transform .16s;
}
.flow__chips li:hover { border-color: var(--blue-100); transform: translateY(-1px); }
.flow__chips img { width: 22px; height: 22px; border-radius: 50%; object-fit: contain; }
.flow__chips img.wordmark { width: auto; height: 14px; border-radius: 0; margin-left: 6px; }
.flow__chips i {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--slate); font-size: .78rem;
}
.flow__chips small {
  font-size: .62rem; font-weight: 600; letter-spacing: .06em; color: var(--faint);
  border: 1px solid var(--line); border-radius: 4px; padding: 0 5px;
}
.flow__chips--dst { flex-direction: column; align-items: flex-start; }

.flow__pipe {
  position: relative; height: 2px; margin: 0 10px; overflow: hidden;
  background: repeating-linear-gradient(90deg, rgba(37,99,235,.28) 0 6px, transparent 6px 11px);
}
.flow__pipe span {
  position: absolute; top: -2px; left: -8px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 8px rgba(59,130,246,.7);
  animation: flowDot 2.4s linear infinite;
}
.flow__pipe span:nth-child(2) { animation-delay: .8s; }
.flow__pipe span:nth-child(3) { animation-delay: 1.6s; }
@keyframes flowDot { from { left: -8px; } to { left: 100%; } }

.flow__hub {
  background: var(--navy-deep); color: var(--on-dark); border-radius: var(--r-2xl);
  padding: 24px 24px 22px; position: relative; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(12,39,68,.55);
}
.flow__hub::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 220px at 0% 0%, rgba(59,130,246,.28), transparent 65%);
}
.flow__hub > * { position: relative; }
.flow__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.flow__brand img { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,.08); }
.flow__brand span { font-family: var(--font-head); font-size: 1.2rem; font-weight: 550; color: #fff; letter-spacing: -.02em; }
.flow__hub ul { display: grid; gap: 11px; }
.flow__hub li { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; line-height: 1.45; }
.flow__hub li i { color: #93c5fd; margin-top: 2px; }

/* ---------- how it works ---------- */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  counter-reset: none; list-style: none; padding: 0; margin: 0;
}
.step {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-2xl);
  padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow-xs); transition: box-shadow .2s, transform .2s, border-color .2s;
}
.step:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--blue-100); }
.step__num {
  position: absolute; top: 22px; right: 24px;
  font-family: var(--font-head); font-size: .8rem; font-weight: 600; color: var(--faint);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.step__ico {
  width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--blue-50); color: var(--blue-600); font-size: 1.1rem; margin-bottom: 8px;
}
.step p { font-size: .92rem; line-height: 1.6; color: var(--muted); }
/* a connector between cards on wide screens */
@media (min-width: 1081px) {
  .step + .step::before {
    content: ""; position: absolute; left: -17px; top: 44px; width: 16px; height: 1px;
    background: var(--line-strong);
  }
}

/* ---------- closing CTA ---------- */
.cta-close { padding-top: 0; }
.section--surface + .cta-close { padding-top: clamp(54px, 5.4vw, 86px); }
.cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center;
  background: var(--navy-deep); color: var(--on-dark);
  border-radius: var(--r-2xl); padding: clamp(36px, 5vw, 64px);
}
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(700px 360px at 0% 0%, rgba(59,130,246,.30), transparent 62%),
    radial-gradient(600px 320px at 100% 100%, rgba(37,99,235,.26), transparent 62%);
}
.cta h2 { color: #fff; max-width: 16ch; }
.cta .lede { color: var(--on-dark); margin-top: 16px; max-width: 48ch; }
.leadform--cta { margin: 0; max-width: none; }
.leadform--cta input[type="email"] { background: rgba(255,255,255,.96); border-color: transparent; }
.leadform--cta input[type="email"]:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(59,130,246,.3); }
.cta .btn--accent { background: var(--blue); }
.cta .btn--accent:hover { background: var(--blue-600); }
.cta__note { margin-top: 14px; font-size: .84rem; color: var(--on-dark-dim); display: flex; gap: 8px; align-items: center; }

/* the footer now follows a dark CTA, so give it a hairline to separate */
.cta-close + * , main + .footer { border-top: 1px solid rgba(255,255,255,.04); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: 1fr; gap: 0; }
  .flow__pipe {
    width: 2px; height: 44px; margin: 14px auto;
    background: repeating-linear-gradient(180deg, rgba(37,99,235,.28) 0 6px, transparent 6px 11px);
  }
  .flow__pipe span { left: -2px; top: -8px; animation-name: flowDotY; }
  @keyframes flowDotY { from { top: -8px; } to { top: 100%; } }
  .flow__col { text-align: center; }
  .flow__chips, .flow__chips--dst { justify-content: center; flex-direction: row; }
  .flow__hub { max-width: 420px; margin-inline: auto; width: 100%; }
}
@media (max-width: 900px) {
  .cta { grid-template-columns: 1fr; }
  .floatcard--br, .floatcard--bl { position: static; }
  .split__media--tint { margin-bottom: 0; }
}
@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .flow__pipe span { animation: none !important; display: none; }
}
/* wordmark lockups were being squashed to the 22px icon width */
.lockup--wordmark img, .lockup.lockup--wordmark img { width: auto; height: 18px; }
@media (min-width: 1081px) { .flow { grid-template-columns: 1fr 88px minmax(260px, .9fr) 88px 1fr; } }
.formnote .textlink { font-size: inherit; }
.formok { background: var(--blue-50); border-color: var(--blue-100); color: var(--navy-ink); }
.lockup--wordmark img, .lockup.lockup--wordmark img { height: 15px; }

/* ===========================================================================
   Motion, round two
   Each piece is tied to something the page is saying: the headline arrives
   word by word, the product screenshot settles flat as you scroll to it, the
   mock data fills in row by row, numbers count up to their real value, the
   flow diagram fills from left to right, and cards answer the pointer.
   All of it switches off under prefers-reduced-motion.
   =========================================================================== */

/* ---------- headline, word by word ---------- */
@keyframes wordIn {
  from { opacity: 0; transform: translateY(.38em); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.hero h1.h1-words { animation: none; }
.h1-words .w {
  display: inline-block;
  animation: wordIn .9s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay: calc(.12s + var(--wi, 0) * .07s);
}
.hero__sub    { animation-delay: .62s; }
.hero .leadform { animation-delay: .72s; }
.hero .hero__note { animation-delay: .8s; }
.hero__shot   { animation-delay: .78s; }

/* ---------- hero background drifts slowly ---------- */
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3%, 2.5%, 0) scale(1.07); }
  100% { transform: translate3d(2.5%, -2%, 0) scale(1.03); }
}
.herocard::before, .cta::before { inset: -12%; animation: drift 22s ease-in-out infinite alternate; }
.cta::before { animation-duration: 26s; }
.flow__hub::before { inset: -20%; animation: drift 18s ease-in-out infinite alternate; }

/* ---------- hero screenshot tilt (set by main.js) ---------- */
.hero__shot .shot { transform-origin: 50% 0; will-change: transform; transition: transform .12s linear; }

/* ---------- hero mockup fills in ---------- */
@keyframes rowIn  { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes kpiIn  { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes chipPop{ from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.hero .kpi { animation: kpiIn .6s cubic-bezier(.22,1,.36,1) backwards; }
.hero .kpi:nth-child(1) { animation-delay: 1.05s; }
.hero .kpi:nth-child(2) { animation-delay: 1.12s; }
.hero .kpi:nth-child(3) { animation-delay: 1.19s; }
.hero .kpi:nth-child(4) { animation-delay: 1.26s; }
.hero .rows .row { animation: rowIn .55s cubic-bezier(.22,1,.36,1) backwards; }
.hero .rows .row .chip { animation: chipPop .45s cubic-bezier(.34,1.5,.64,1) backwards; }
.hero .rows .row:nth-child(2) { animation-delay: 1.35s; } .hero .rows .row:nth-child(2) .chip { animation-delay: 1.55s; }
.hero .rows .row:nth-child(3) { animation-delay: 1.43s; } .hero .rows .row:nth-child(3) .chip { animation-delay: 1.63s; }
.hero .rows .row:nth-child(4) { animation-delay: 1.51s; } .hero .rows .row:nth-child(4) .chip { animation-delay: 1.71s; }
.hero .rows .row:nth-child(5) { animation-delay: 1.59s; } .hero .rows .row:nth-child(5) .chip { animation-delay: 1.79s; }
.hero .rows .row:nth-child(6) { animation-delay: 1.67s; } .hero .rows .row:nth-child(6) .chip { animation-delay: 1.87s; }
.hero .shot__side span { animation: rowIn .5s ease backwards; animation-delay: calc(1s + var(--si, 0) * .04s); }

/* ---------- mockups further down fill in when their band arrives ---------- */
.js .reveal .rows .row { opacity: 0; }
.js .reveal.is-in .rows .row { opacity: 1; animation: rowIn .55s cubic-bezier(.22,1,.36,1) backwards; }
.reveal.is-in .rows .row:nth-child(2) { animation-delay: .25s; }
.reveal.is-in .rows .row:nth-child(3) { animation-delay: .33s; }
.reveal.is-in .rows .row:nth-child(4) { animation-delay: .41s; }
.reveal.is-in .rows .row:nth-child(5) { animation-delay: .49s; }
.reveal.is-in .rows .row:nth-child(6) { animation-delay: .57s; }
.js .reveal .kpi { opacity: 0; }
.js .reveal.is-in .kpi { opacity: 1; animation: kpiIn .6s cubic-bezier(.22,1,.36,1) backwards; }
.reveal.is-in .kpi:nth-child(2) { animation-delay: .07s; }
.reveal.is-in .kpi:nth-child(3) { animation-delay: .14s; }
.reveal.is-in .kpi:nth-child(4) { animation-delay: .21s; }

/* the one row that needs a human gets a gentle, repeating nudge */
@keyframes nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.45); } 50% { box-shadow: 0 0 0 5px rgba(245,158,11,0); } }
#close .reveal.is-in .chip--amber, #close .is-in .chip--amber { animation: nudge 2.4s ease-in-out 1.2s infinite; }

/* ---------- steps: icons pop as each card lands ---------- */
@keyframes iconPop { 0% { transform: scale(.5) rotate(-12deg); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: none; } }
.js .steps .step__ico { opacity: 0; }
.js .steps.is-in .step__ico { opacity: 1; animation: iconPop .6s cubic-bezier(.34,1.4,.64,1) backwards; animation-delay: calc(var(--i, 0) * 90ms + 220ms); }
.step:hover .step__ico { transform: translateY(-2px); transition: transform .2s; }
/* number and icon read as one sequence: the number fills blue on hover */
.step:hover .step__num { color: var(--blue-600); }
.step__num { transition: color .2s; }

/* ---------- flow: hub glows as data arrives ---------- */
@keyframes hubGlow {
  0%, 100% { box-shadow: 0 30px 60px -30px rgba(12,39,68,.55), 0 0 0 0 rgba(59,130,246,0); }
  50%      { box-shadow: 0 30px 60px -30px rgba(12,39,68,.55), 0 0 0 6px rgba(59,130,246,.12); }
}
.flow__hub { animation: hubGlow 3.2s ease-in-out infinite; }
.flow__brand img { animation: haloPulse2 3.2s ease-in-out infinite; }
@keyframes haloPulse2 { 0%, 100% { box-shadow: 0 0 0 4px rgba(255,255,255,.08); } 50% { box-shadow: 0 0 0 8px rgba(147,197,253,.16); } }

/* ---------- pointer spotlight on cards ---------- */
.spot { --mx: 50%; --my: 0%; }
.spot:hover {
  background-image: radial-gradient(420px circle at var(--mx) var(--my), rgba(59,130,246,.075), transparent 45%);
}
.tile.spot, .intcol.spot { transition: transform .2s ease, box-shadow .2s ease; }
.tile.spot:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* ---------- scroll progress along the bottom of the nav ---------- */
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--blue), #60a5fa);
  transform-origin: 0 50%; transform: scaleX(var(--progress, 0));
  pointer-events: none;
}

/* ---------- headings settle in from a slight blur ---------- */
.js .reveal h2 { filter: blur(6px); transition: filter .8s ease .05s; }
.js .reveal.is-in h2 { filter: blur(0); }

/* ---------- buttons: arrow nudges on hover ---------- */
.btn i, .textlink i { transition: transform .18s ease; }
.btn:hover i.ri-arrow-right-line, .textlink:hover i.ri-arrow-right-line { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .h1-words .w, .hero .kpi, .hero .rows .row, .hero .rows .row .chip, .hero .shot__side span,
  .herocard::before, .cta::before, .flow__hub::before, .flow__hub, .flow__brand img,
  .js .reveal.is-in .rows .row, .js .reveal.is-in .kpi, .js .steps.is-in .step__ico,
  #close .chip--amber { animation: none !important; }
  .js .reveal .rows .row, .js .reveal .kpi, .js .steps .step__ico { opacity: 1 !important; }
  .js .reveal h2 { filter: none !important; }
  .hero__shot .shot { transform: none !important; }
}

/* ---------- hero and CTA buttons (replaced the email capture) ---------- */
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; animation: rise .8s cubic-bezier(.22,1,.36,1) .72s backwards; }
.btn--glass {
  background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn--glass:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }
.cta__act .btn-row { gap: 12px; }
.cta__note a, .cta__note { color: var(--on-dark-dim); }
@media (max-width: 640px) {
  .hero__actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .hero__actions { animation: none !important; } }

/* ===========================================================================
   Closing CTA as a single-row banner: badge, copy, actions
   =========================================================================== */
.cta-close { padding-block: clamp(48px, 5vw, 76px); }
.cta.cta--bar {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(20px, 2.6vw, 36px);
  padding: clamp(26px, 2.8vw, 38px) clamp(26px, 3.2vw, 48px);
  background: linear-gradient(110deg, #123459 0%, #0c2744 48%, #091d33 100%);
  border-radius: 32px;
  box-shadow: 0 40px 70px -40px rgba(9,29,51,.6), 0 2px 6px rgba(9,29,51,.12);
}
/* dot grid plus a soft blue glow along the bottom edge */
.cta.cta--bar::before {
  inset: 0; animation: none;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.cta.cta--bar::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 30%; right: 30%; bottom: -60%; height: 120%;
  background: radial-gradient(closest-side, rgba(59,130,246,.30), transparent);
  filter: blur(10px);
  animation: glowDrift 9s ease-in-out infinite alternate;
}
@keyframes glowDrift { from { transform: translateX(-12%); } to { transform: translateX(12%); } }

.cta__badge {
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: rgba(255,255,255,.04);
  box-shadow: 0 0 0 1px rgba(147,197,253,.35), 0 0 0 9px rgba(255,255,255,.03);
}
.cta__badge img { width: 66px; height: 66px; border-radius: 50%; }

.cta--bar .cta__copy h2 {
  max-width: none; color: #fff;
  font-size: clamp(1.5rem, 2.4vw, 2.05rem); font-weight: 560; letter-spacing: -0.02em; line-height: 1.15;
}
.cta--bar .cta__copy p { margin-top: 8px; color: rgba(255,255,255,.66); font-size: .98rem; line-height: 1.5; max-width: 60ch; }
.cta--bar .cta__act { display: flex; gap: 12px; flex-wrap: nowrap; }
.cta--bar .btn { padding: 15px 26px; font-size: .98rem; }
.cta--bar .btn--accent { background: var(--blue); box-shadow: 0 14px 30px -12px rgba(59,130,246,.75); }
.cta--bar .btn--accent:hover { background: var(--blue-600); }
.cta--bar .btn--glass { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }

@media (max-width: 1080px) {
  .cta.cta--bar { grid-template-columns: auto 1fr; }
  .cta--bar .cta__act { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .cta.cta--bar { grid-template-columns: 1fr; text-align: left; }
  .cta__badge { width: 64px; height: 64px; }
  .cta__badge img { width: 50px; height: 50px; }
  .cta--bar .cta__act { flex-direction: column; }
  .cta--bar .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .cta.cta--bar::after { animation: none !important; } }