@font-face{font-family:'Plus Jakarta Sans';font-style:italic;font-weight:200 800;font-display:swap;src:url(../fonts/PlusJakartaSans-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:italic;font-weight:200 800;font-display:swap;src:url(../fonts/PlusJakartaSans-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/PlusJakartaSans-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/PlusJakartaSans-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ==========================================================================
   EarnFlow marketing site — site.css
   Plain CSS, no build step required. Tokens first, then layout, then components.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand: forest green on white; black surfaces where the site goes dark */
  --ink-950: #0A0A0A;
  --ink-900: #121212;
  --ink-800: #1C1C1C;
  --ink-700: #262626;
  --green-900: #14532D;            /* the logo green */
  --green-800: #166534;
  --green-700: #15803D;
  --green-600: #16A34A;
  --green-400: #4ADE80;
  --green-200: #BBF7D0;
  --green-50: #F0FDF4;

  /* Neutrals */
  --gray-900: #171717;
  --gray-700: #404040;
  --gray-600: #525252;
  --gray-500: #737373;
  --gray-400: #A3A3A3;
  --gray-300: #D4D4D4;
  --gray-200: #E5E5E5;
  --gray-100: #F5F5F5;
  --gray-50: #FAFAFA;

  /* Semantic */
  --bg: #FFFFFF;
  --bg-soft: #FAFAFA;
  --bg-muted: var(--gray-100);
  --text: var(--gray-900);
  --text-2: var(--gray-600);
  --text-3: #5C5C5C;              /* 4.5:1 or better on every light background */
  --line: var(--gray-200);
  --accent: var(--green-700);
  --accent-strong: var(--green-800); /* text-safe accent, 7.5:1 on white */
  --accent-soft: var(--green-50);
  --success: #16A34A;
  --warning: #D97706;
  --danger: #DC2626;

  /* Shape */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .06);
  --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, .45), 0 10px 24px -12px rgba(0, 0, 0, .25);

  /* Type */
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: clamp(.75rem, .72rem + .15vw, .8125rem);
  --fs-sm: clamp(.875rem, .85rem + .15vw, .9375rem);
  --fs-md: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --fs-lg: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --fs-xl: clamp(1.375rem, 1.2rem + .8vw, 1.875rem);
  --fs-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-3xl: clamp(2.25rem, 1.3rem + 3.6vw, 4rem);
  --fs-4xl: clamp(2.5rem, 1.75rem + 3.3vw, 4.5rem);

  /* Layout */
  --container: 1200px;
  --gutter: clamp(16px, 5vw, 40px);
  --section: clamp(80px, 10vw, 140px);
  --header-h: 72px;

  color-scheme: light;
}
@media (max-width: 1023px) { :root { --header-h: 64px; } }

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
h1 { font-size: var(--fs-4xl); letter-spacing: -0.045em; font-weight: 800; }
h2 { font-size: var(--fs-3xl); letter-spacing: -0.045em; line-height: 1.04; color: var(--ink-950); }
h3 { font-size: var(--fs-xl); line-height: 1.25; }
h4 { font-size: var(--fs-lg); line-height: 1.3; }
p { margin: 0; }
p + p { margin-top: 1em; }
ul, ol { margin: 0; padding: 0; }
.lead { font-size: var(--fs-lg); color: var(--text-2); line-height: 1.6; text-wrap: pretty; }
.muted { color: var(--text-2); }
.small { font-size: var(--fs-sm); }
/* Links inside running text are underlined so they don't rely on colour alone. */
main :is(p, .contact-card span, .callout) a:not([class]) { color: var(--accent-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
main :is(p, .contact-card span, .callout) a:not([class]):hover { text-decoration-thickness: 2px; }
.cta p a:not([class]) { color: var(--green-400); }
.eyebrow { display: inline-block; font-size: var(--fs-md); font-weight: 700; color: var(--accent-strong); }

:focus-visible { outline: 3px solid var(--green-400); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--green-200); color: var(--ink-950); }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 1000;
  padding: 10px 14px; background: var(--ink-900); color: #fff; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: 820px; }
.container-wide { max-width: 1360px; }
.section { padding-block: var(--section); position: relative; }
.section-tight { padding-block: calc(var(--section) * .6); }
.section-head { max-width: 920px; margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; }
.section-head h2 { margin-top: 12px; }
.section-head h2:first-child { margin-top: 0; }
.section-head h2 > span { display: block; }
.section-head .lead { max-width: 680px; margin: 18px auto 0; text-wrap: balance; }
.grid { display: grid; gap: clamp(16px, 2.5vw, 28px); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.split { display: grid; gap: clamp(32px, 6vw, 80px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split.split-wide { grid-template-columns: 5fr 7fr; } .split.split-wide-r { grid-template-columns: 7fr 5fr; } }
/* Headlines in a two-column layout are a step smaller than centred section headlines. */
.split h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); }
.split.reverse > :first-child { order: 2; }
@media (max-width: 899px) { .split.reverse > :first-child { order: 0; } }
/* Grid children may shrink below their content's width, so wide tables scroll instead of widening the page. */
:is(.grid, .split, .legal-layout, .tour) > * { min-width: 0; }
.stack > * + * { margin-top: var(--stack, 16px); }
.cluster { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.bg-soft { background: var(--bg-soft); }
.bg-muted { background: var(--bg-muted); }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--ink-900); --btn-fg: #fff; --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; font-size: var(--fs-sm);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { --btn-bg: var(--green-800); --btn-fg: #fff; }
.btn-primary:hover { --btn-bg: var(--green-900); }
.btn-dark { --btn-bg: var(--ink-900); --btn-fg: #fff; }
.btn-light { --btn-bg: #fff; --btn-fg: var(--ink-900); --btn-bd: var(--line); }
.btn-outline { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--gray-300); }
.btn-outline:hover { --btn-bd: var(--text); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--text); min-height: 44px; padding-inline: 14px; }
.btn-ghost:hover { box-shadow: none; background: var(--bg-muted); }
.cta .btn-outline { --btn-fg: #fff; --btn-bd: rgba(255,255,255,.3); }
.cta .btn-outline:hover { --btn-bd: #fff; }
.cta .btn-ghost { --btn-fg: #fff; }
.cta .btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-lg { min-height: 56px; padding-inline: 28px; font-size: var(--fs-md); }
.btn-sm { min-height: 38px; padding-inline: 16px; font-size: var(--fs-xs); }
.link { color: var(--accent-strong); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.link::after { content: "→"; transition: transform .2s ease; }
.link:hover::after { transform: translateX(4px); }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background-color .25s ease;
}
.header.is-scrolled { border-bottom-color: var(--line); background: rgba(255,255,255,.9); }
.header-inner { display: flex; align-items: center; gap: 12px; min-height: var(--header-h); }
@media (min-width: 1024px) { .header-inner { gap: 24px; } }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--green-900); }
.brand img { width: 34px; height: 34px; }
.nav { display: none; align-items: center; gap: 4px; margin-left: 12px; }
.nav details { position: relative; }
.nav summary, .nav > a {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 999px; font-weight: 600; font-size: var(--fs-sm); color: var(--text-2);
  transition: background-color .2s ease, color .2s ease;
}
.nav summary::-webkit-details-marker { display: none; }
.nav summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.nav details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.nav summary:hover, .nav > a:hover, .nav details[open] summary, .nav > a[aria-current="page"] { background: var(--bg-muted); color: var(--text); }
.menu {
  position: absolute; left: 0; top: calc(100% + 10px); min-width: 300px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 10px; display: grid; gap: 2px;
  animation: menu-in .18s ease both;
}
.menu.menu-wide { min-width: 560px; grid-template-columns: 1fr 1fr; }
/* The two right-hand menus open leftwards so they stay on screen at laptop widths. */
.nav details:nth-last-of-type(-n+2) .menu { left: auto; right: 0; }
/* Invisible bridge over the gap so moving the pointer from the trigger to the menu doesn't close it. */
.nav .menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
.menu a { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; padding: 10px 12px; border-radius: 12px; transition: background-color .15s ease; }
.menu a:hover, .menu a[aria-current="page"] { background: var(--bg-muted); }
.menu a[aria-current="page"] strong { color: var(--accent-strong); }
/* The menu that contains the current page reads as the active section. */
.nav details:has([aria-current="page"]) > summary { color: var(--text); }
.menu .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-strong); display: grid; place-items: center; }
.menu .ic svg { width: 20px; height: 20px; }
.menu strong { display: block; font-size: var(--fs-sm); font-weight: 700; }
.menu span { display: block; font-size: var(--fs-xs); color: var(--text-3); line-height: 1.45; margin-top: 2px; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.header-actions .btn-ghost { display: none; }
@media (max-width: 359px) { .header-cta { display: none; } }
.nav-toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; cursor: pointer;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink-900); border-radius: 2px; position: relative; transition: transform .2s ease, background-color .2s ease; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink-900); border-radius: 2px; transition: transform .2s ease, top .2s ease; }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }
@media (min-width: 1024px) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
  .header-actions .btn-ghost { display: inline-flex; }
}
/* Mobile drawer */
.mobile-nav {
  display: none; position: fixed; inset: var(--header-h) 0 0 0; z-index: 90; background: #fff; overflow-y: auto; padding: 16px var(--gutter) 40px;
  border-top: 1px solid var(--line);
}
body.nav-open .mobile-nav { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .mobile-nav { transition: opacity .2s ease, translate .2s ease; }
  @starting-style { body.nav-open .mobile-nav { opacity: 0; translate: 0 -8px; } }
}
body.nav-open { overflow: hidden; }
.mobile-nav details { border-bottom: 1px solid var(--line); }
.mobile-nav summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 8px 0; font-weight: 700; font-size: var(--fs-lg); }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary::after { content: "+"; font-weight: 400; font-size: 1.4em; line-height: 1; color: var(--text-3); }
.mobile-nav details[open] summary::after { content: "–"; }
.mobile-nav .menu { position: static; min-width: 0; box-shadow: none; border: 0; padding: 0 0 12px; animation: none; grid-template-columns: 1fr; }
.mobile-nav > a { display: flex; align-items: center; min-height: 56px; padding: 8px 0; font-weight: 700; font-size: var(--fs-lg); border-bottom: 1px solid var(--line); }
.mobile-nav .cluster { margin-top: 24px; }
.mobile-nav .cluster .btn { flex: 1 1 100%; }
.mobile-nav a[aria-current="page"] { color: var(--accent-strong); }
@media (min-width: 1024px) { .mobile-nav { display: none !important; } }

/* Page hero (interior pages) */
.page-hero {
  position: relative; overflow: hidden; text-align: center; padding-block: clamp(48px, 7vw, 104px) clamp(56px, 7vw, 96px);
  background: radial-gradient(55% 70% at 50% 0%, rgba(74, 222, 128, .16), transparent 70%), linear-gradient(180deg, #EAF1F6 0%, #F5F8FB 60%, #fff 100%);
}
.page-hero h1 { max-width: 20ch; margin: 12px auto 0; font-size: clamp(2.5rem, 1.6rem + 3.3vw, 4.25rem); line-height: 1.04; color: var(--ink-950); }
.page-hero .lead { max-width: 680px; margin: 20px auto 0; text-wrap: balance; }
.page-hero .actions { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.breadcrumb { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: var(--fs-xs); color: var(--text-3); margin-bottom: 20px; }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb li { list-style: none; display: flex; gap: 8px; }
.breadcrumb li + li::before { content: "/"; color: var(--gray-300); }

/* ---------- Device frames ---------- */
.device-browser {
  position: relative; border-radius: var(--r-lg); background: var(--ink-950); box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.08); overflow: hidden;
}
.device-browser .bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #0E1A33; border-bottom: 1px solid rgba(255,255,255,.06); }
.device-browser .bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.14); }
.device-browser .bar i:nth-child(1) { background: #FF5F57; } .device-browser .bar i:nth-child(2) { background: #FEBC2E; } .device-browser .bar i:nth-child(3) { background: #28C840; }
.device-browser .url { margin-left: 10px; flex: 1; max-width: 360px; height: 20px; border-radius: 6px; background: rgba(255,255,255,.08); font-size: 11px; color: rgba(255,255,255,.5); display: flex; align-items: center; padding-inline: 10px; }
.device-browser img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.device-browser.light { background: #fff; border-color: var(--line); }
.device-browser.light .bar { background: var(--gray-100); border-bottom-color: var(--line); }
.device-browser.light .url { background: #fff; color: var(--text-3); border: 1px solid var(--line); }
/* iPhone 17 Pro frame. The screenshots (1206 × 2622) already include the status bar and the
   Dynamic Island, so the frame only adds the bezel, titanium edge and side buttons.
   Every measurement is a percentage of the frame so it scales cleanly from 110px to 300px wide:
   - screen corners: 62pt radius on a 402 × 874pt display = 15.4% / 7.1% of the screenshot
   - bezel: 3.4% of the frame width on each side. Padding percentages resolve against the parent,
     not the frame, so the bezel is computed from --phone-w (the frame's width expression).
   - frame corners: screen radius + bezel, so the two curves stay concentric (17.8% / 8.5%) */
.device-phone {
  --phone-w: min(100%, 300px);
  position: relative; flex: none; width: var(--phone-w); padding: calc(var(--phone-w) * .034); border-radius: 17.8% / 8.5%;
  background: #0A0B0E;
  box-shadow:
    inset 0 0 0 1.5px #5B606B,            /* titanium edge */
    inset 0 0 0 3px #22252B,              /* inner rim */
    0 0 0 1px rgba(7, 14, 28, .35),
    var(--shadow-lg);
}
.device-phone img { display: block; width: 100%; height: auto; aspect-ratio: 1206 / 2622; object-fit: cover; border-radius: 15.4% / 7.1%; background: #F2F2F7; }
/* Side buttons: action button and volume on the left, side button on the right. */
.device-phone::before, .device-phone::after {
  content: ""; position: absolute; width: 1.3%; border-radius: 2px; pointer-events: none;
}
.device-phone::before {
  left: -1.1%; top: 17%; height: 21%;
  background: linear-gradient(180deg, #4A4E57 0 16%, transparent 16% 33%, #4A4E57 33% 63%, transparent 63% 71%, #4A4E57 71% 100%);
}
.device-phone::after { right: -1.1%; top: 26%; height: 10%; background: #4A4E57; }
/* Phones stay side by side and scale down instead of wrapping into a tall stack. */
.phone-row { --gap: clamp(12px, 3vw, 32px); display: flex; gap: var(--gap); justify-content: center; align-items: flex-end; }
.phone-row .device-phone { --phone-w: min(calc((100% - var(--gap)) / 2), 280px); }
.phone-row .device-phone:nth-child(2) { margin-bottom: 8%; }
.phone-row .device-phone:only-child { --phone-w: min(100%, 300px); margin-bottom: 0; }
.section-head + .phone-row { margin-inline: auto; max-width: 640px; }

/* ---------- Cards ---------- */
.card {
  background: var(--bg-soft); border: 0; border-radius: var(--r-xl); padding: clamp(24px, 3vw, 32px);
  transition: transform .25s ease, box-shadow .25s ease; position: relative;
}
.bg-soft :is(.card, .stat, .step, .contact-card, .faq details) { background: #fff; }
/* Cards with one "learn more" link become a single large click target; the link stays the accessible name. */
.card:has(> .link):not(:has(> .link ~ .link, p a)) > .link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
:is(a.card, .card:has(> .link)):hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
:is(a.card, .card:has(> .link)):hover .link::after { transform: translateX(4px); }
.card h3, .card h4 { margin-top: 14px; }
.card p { margin-top: 10px; color: var(--text-2); font-size: var(--fs-md); line-height: 1.55; }
.card > .card-icon + p { margin-top: 18px; }
.card strong { color: var(--text); }
.card .link { margin-top: 16px; font-size: var(--fs-sm); }
.card.flat:hover { transform: none; box-shadow: none; }
.card-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: #fff; border: 1px solid var(--green-200); color: var(--accent-strong); }
.bg-soft .card-icon { background: var(--green-50); }
.card-icon svg { width: 22px; height: 22px; }
@media (max-width: 559px) {
  :is(.grid-3, .grid-4) > .card:has(> .card-icon) { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; align-content: start; }
  :is(.grid-3, .grid-4) > .card:has(> .card-icon) > .card-icon { grid-row: span 4; width: 40px; height: 40px; border-radius: 11px; }
  :is(.grid-3, .grid-4) > .card:has(> .card-icon) > :not(.card-icon) { grid-column: 2; }
  :is(.grid-3, .grid-4) > .card:has(> .card-icon) > :is(h3, h4):nth-child(2) { margin-top: 6px; }
  :is(.grid-3, .grid-4) > .card:has(> .card-icon) > h3 { font-size: var(--fs-lg); }
}
:is(a.card, .card:has(> .link)).dark:hover { border-color: rgba(255,255,255,.25); box-shadow: none; }
.card-img { border-radius: var(--r-xl) var(--r-xl) 0 0; overflow: hidden; padding: 18px 18px 0; background: radial-gradient(80% 90% at 50% 0%, rgba(74, 222, 128, .14), transparent 70%), #E6EDF3; }
.card-img img { border-radius: 8px 8px 0 0; }
.card-img img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; width: 100%; }
.card.has-img { padding: 0; }
.card.has-img .card-body { padding: clamp(18px, 3vw, 24px); }
.feature-list { display: grid; gap: 18px; }
.feature-list li { list-style: none; display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.feature-list .chk { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); flex: none; }
.feature-list .chk svg { width: 14px; height: 14px; }
.feature-list strong { display: block; font-weight: 700; }
.feature-list span { color: var(--text-2); font-size: var(--fs-sm); display: block; margin-top: 2px; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.stat { padding: clamp(24px, 3vw, 32px); border-radius: var(--r-xl); background: var(--bg-soft); }
.stat strong { display: block; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--ink-950); }
.stat span { display: block; margin-top: 10px; color: var(--text-2); font-size: var(--fs-sm); }

/* ---------- Bands ---------- */
.cta {
  position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(36px, 6vw, 72px);
  background: radial-gradient(90% 120% at 100% 0%, rgba(74, 222, 128,.35), transparent 60%), linear-gradient(160deg, var(--ink-800), var(--ink-950));
  color: #fff; text-align: center;
}
.cta h2 { max-width: 20ch; margin-inline: auto; color: #fff; }
.cta .lead { color: rgba(255,255,255,.75); max-width: 620px; margin: 16px auto 0; }
.cta .actions { margin-top: 28px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(60% 80% at 50% 50%, #000 20%, transparent 100%); -webkit-mask-image: radial-gradient(60% 80% at 50% 50%, #000 20%, transparent 100%); }

/* ---------- Pricing ---------- */
.price-card { border-radius: var(--r-xl); padding: clamp(28px, 4vw, 44px); background: #fff; box-shadow: 0 30px 60px -30px rgba(7, 14, 28, .3), 0 0 0 1px rgba(15, 23, 42, .05); position: relative; overflow: hidden; }
.price-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--green-700), var(--green-200)); }
.price { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.price strong { font-size: var(--fs-4xl); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.price span { color: var(--text-2); font-size: var(--fs-sm); }
.price-rows { display: grid; gap: 10px; margin-top: 20px; }
.price-rows div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.price-rows strong { font-weight: 700; }
.calc { background: var(--ink-900); color: #fff; border-radius: var(--r-xl); padding: clamp(24px, 4vw, 40px); }
.calc label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: var(--fs-sm); margin-bottom: 14px; }
.calc label output { font-size: var(--fs-md); font-weight: 700; color: var(--green-400); font-variant-numeric: tabular-nums; }
.calc > output { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -0.03em; display: block; margin-top: 18px; font-variant-numeric: tabular-nums; }
/* Range: 8px track filled up to the thumb (--fill is set by site.js), 26px thumb for easy dragging. */
.calc input[type="range"] {
  --fill: 8%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer;
}
.calc input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--green-400) var(--fill), rgba(255,255,255,.16) var(--fill)); }
.calc input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.16); }
.calc input[type="range"]::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--green-400); }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 6px rgba(74, 222, 128,.35), 0 2px 6px rgba(0,0,0,.4); }
.calc input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 6px rgba(74, 222, 128,.35), 0 2px 6px rgba(0,0,0,.4); }
.calc input[type="range"]:focus-visible { outline: none; }
.calc input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--ink-900), 0 0 0 7px var(--green-400); }
.calc input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--ink-900), 0 0 0 7px var(--green-400); }
.calc .scale { display: flex; justify-content: space-between; margin-top: 6px; font-size: var(--fs-xs); color: rgba(255,255,255,.5); }
@media (min-width: 900px) {
  .split:has(.calc) { align-items: start; }
  .split > :has(> .calc) { align-self: stretch; }
  .calc { position: sticky; top: calc(var(--header-h) + 24px); }
}
.calc .per { color: rgba(255,255,255,.6); font-size: var(--fs-sm); }
.calc .rows { margin-top: 18px; display: grid; gap: 8px; font-size: var(--fs-sm); color: rgba(255,255,255,.7); }
.calc .rows div { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.1); padding-top: 8px; }
.compare { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--fs-sm); }
.compare th, .compare td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare th { font-weight: 700; color: var(--text); }
.compare thead th { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.compare td:first-child { font-weight: 600; }
.yes { color: #15803D; font-weight: 700; }  /* green-700: 5:1 on white */

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq { max-width: 860px; margin-inline: auto; }
.faq details { border-radius: var(--r-lg); background: var(--bg-soft); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 64px; padding: 18px 24px; font-size: var(--fs-md); font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 1.5em; line-height: 1; color: var(--text-3); flex: none; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 24px 24px; color: var(--text-2); font-size: var(--fs-md); line-height: 1.6; }
.faq .answer p + p { margin-top: .75em; }

/* ---------- Timeline / steps ---------- */
.steps { display: grid; gap: 24px; counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding: clamp(24px, 3vw, 32px); border-radius: var(--r-xl); background: var(--bg-soft); }
.step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink-900); color: #fff; font-weight: 800; font-size: var(--fs-sm); }
.step h3 { margin-top: 18px; font-size: var(--fs-lg); }
.step p { margin-top: 8px; color: var(--text-2); font-size: var(--fs-md); }

/* ---------- Tabs (module tour) ---------- */
/* A row of chips above one large product shot. The row wraps and centres on desktop and
   scrolls sideways on phones and tablets, so the shot stays near the top. */
.tour { display: grid; gap: clamp(24px, 3vw, 36px); }
.tour-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tour-list button { flex: none; padding: 10px 18px; border-radius: 999px; border: 0; background: var(--bg-muted); color: var(--text); cursor: pointer; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.tour-list button strong { font-weight: 600; font-size: var(--fs-sm); }
.tour-list button span { display: none; }
.tour-list button:hover { background: var(--gray-200); }
.tour-list button[aria-selected="true"] { background: var(--ink-900); color: #fff; }
@media (max-width: 1023px) {
  .tour-list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter); }
  .tour-list::-webkit-scrollbar { display: none; }
  .tour-list button { scroll-snap-align: start; }
}
.tour-panel { display: none; }
.tour-panel.is-active { display: block; animation: fade-up .4s ease both; }
.tour-panel p { max-width: 640px; margin: 24px auto 0; text-align: center; font-size: var(--fs-md); color: var(--text-2); text-wrap: balance; }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Prose (legal, articles) ---------- */
.prose { max-width: 760px; font-size: var(--fs-md); line-height: 1.75; color: var(--gray-700); }
.prose h2 { font-size: var(--fs-xl); margin-top: 2.4em; margin-bottom: .6em; color: var(--text); scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h3 { font-size: var(--fs-lg); margin-top: 1.8em; margin-bottom: .5em; color: var(--text); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 1em; }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .4em; }
.prose a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.prose table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--fs-sm); }
/* build.js wraps every table in .table-scroll. Edge shadows hint that a wide table scrolls sideways. */
.table-scroll {
  --table-bg: var(--bg);
  overflow-x: auto; overscroll-behavior-x: contain; border-radius: 4px;
  background:
    linear-gradient(90deg, var(--table-bg) 30%, transparent) left / 40px 100% no-repeat local,
    linear-gradient(270deg, var(--table-bg) 30%, transparent) right / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.16), transparent) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.16), transparent) right / 14px 100% no-repeat scroll;
}
.bg-soft .table-scroll { --table-bg: var(--bg-soft); }
.table-scroll:focus-visible { outline-offset: 2px; }
.prose .table-scroll { margin: 1.2em 0 1.6em; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 700; background: var(--bg-soft); }
.prose blockquote { margin: 1.4em 0; padding: 16px 20px; border-left: 3px solid var(--green-400); background: var(--bg-soft); border-radius: 0 12px 12px 0; }
.prose .meta { font-size: var(--fs-sm); color: var(--text-3); margin-bottom: 2em; }
.prose strong { color: var(--text); }
.legal-layout { display: grid; gap: 48px; }
@media (min-width: 1024px) { .legal-layout { grid-template-columns: 260px 1fr; align-items: start; } }
.toc { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; font-size: var(--fs-sm); }
.toc summary { list-style: none; display: block; margin-bottom: 8px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.toc summary::-webkit-details-marker { display: none; }
.toc-links { display: grid; gap: 2px; }
.toc a { padding: 6px 10px; border-radius: 8px; color: var(--text-2); display: block; border-left: 2px solid transparent; transition: background-color .15s ease, color .15s ease; }
.toc a:hover { background: var(--bg-muted); color: var(--text); }
/* Section currently being read (set by site.js). */
.toc a[aria-current="true"] { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; border-left-color: var(--accent); border-radius: 0 8px 8px 0; }
/* Phones and tablets: the contents list collapses into a single row above the text. */
@media (max-width: 1023px) {
  .toc { position: static; max-height: none; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
  .toc summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 52px; margin: 0; padding: 0 16px; font-size: var(--fs-sm); letter-spacing: 0; text-transform: none; color: var(--text); }
  .toc summary::after { content: "+"; font-size: 1.4em; font-weight: 400; line-height: 1; color: var(--text-3); }
  .toc details[open] summary::after { content: "–"; }
  .toc-links { padding: 0 8px 12px; }
}
.callout { padding: 20px 24px; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--green-200); font-size: var(--fs-sm); color: var(--gray-700); }
.callout strong { color: var(--ink-900); }

/* ---------- Badges / tags ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; background: var(--bg-muted); color: var(--text-2); }
.badge-accent { background: var(--accent-soft); color: var(--accent-strong); }
.badge-soon { background: #FEF3C7; color: #92400E; }
.badge-live { background: #DCFCE7; color: #166534; }
.badge-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }

/* ---------- Lists: news, events, jobs ---------- */
.list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.list-item { display: grid; gap: 8px; padding: 24px 0; border-bottom: 1px solid var(--line); position: relative; }
@media (min-width: 760px) { .list-item { grid-template-columns: 160px 1fr auto; gap: 24px; align-items: center; } }
.list-item .date { font-size: var(--fs-sm); color: var(--text-3); font-weight: 600; }
.list-item h3 { font-size: var(--fs-lg); }
.list-item p { color: var(--text-2); font-size: var(--fs-sm); margin-top: 4px; }
.list-item:hover h3 { color: var(--accent-strong); }
.event-date { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 16px; background: var(--ink-900); color: #fff; text-align: center; line-height: 1; }
.event-date strong { font-size: 1.5rem; font-weight: 800; display: block; }
.event-date span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--green-400); margin-top: 4px; display: block; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 16px; }
.form .row { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form .row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: var(--fs-sm); }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--fs-sm); padding: 12px 14px; border-radius: 10px; border: 1px solid var(--gray-300); background: #fff; color: var(--text); width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green-700); box-shadow: 0 0 0 4px rgba(74, 222, 128,.25); }
.field textarea { min-height: 130px; resize: vertical; }
.field:has(:required) > label::after { content: " *"; content: " *" / ""; color: var(--danger); }
/* Errors appear only after the visitor has interacted with a field or tried to submit. */
.field :is(input, select, textarea):user-invalid { border-color: var(--danger); background: #FEF2F2; }
.field :is(input, select, textarea):user-invalid:focus { box-shadow: 0 0 0 4px rgba(220,38,38,.18); }
.field-error { display: none; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--danger); }
.field-error svg { width: 14px; height: 14px; flex: none; }
.field :user-invalid ~ .field-error { display: flex; }
.form-sent { padding: 12px 14px; border-radius: 10px; background: #DCFCE7; color: #166534; font-weight: 600; }
.field .hint { font-size: var(--fs-xs); color: var(--text-3); }
.form-note { font-size: var(--fs-xs); color: var(--text-3); }
.contact-card { display: grid; gap: 6px; align-content: start; padding: clamp(24px, 3vw, 32px); border-radius: var(--r-xl); background: var(--bg-soft); }
.contact-card strong { font-weight: 700; }
.contact-card a { color: var(--accent-strong); font-weight: 600; }
.contact-card span { color: var(--text-2); font-size: var(--fs-sm); }

/* ---------- Store badges ---------- */
.store-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.store-badge { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 14px; border-radius: 12px; background: var(--ink-900); color: #fff; min-height: 56px; position: relative; }
.store-badge svg { width: 26px; height: 26px; }
.store-badge small { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.65); line-height: 1; }
.store-badge strong { display: block; font-size: 1rem; font-weight: 700; line-height: 1.2; }
.store-badge.soon { opacity: .9; }
.store-badge .badge-soon { position: absolute; top: -10px; right: -8px; }

/* ---------- Footer ---------- */
/* Three bands: brand and contact, four even link columns, then the legal line. */
.footer { background: var(--ink-950); color: rgba(255,255,255,.6); padding-block: clamp(56px, 7vw, 88px) 32px; font-size: var(--fs-sm); line-height: 1.6; }
.footer p { margin: 0; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer a { color: rgba(255,255,255,.6); transition: color .15s ease; }
.footer a:hover { color: #fff; }
.footer .brand { color: #fff; }
.footer-heading { margin: 0 0 14px; color: #fff; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; line-height: 1.4; }
.footer-top { display: grid; gap: 40px 32px; padding-bottom: clamp(40px, 5vw, 56px); border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-intro p { margin-top: 18px; max-width: 44ch; text-wrap: pretty; }
.footer-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; font-style: normal; }
/* On wide screens the top band shares the link grid's four columns, so Office and Get in touch sit over Company and Resources. */
@media (min-width: 900px) {
  .footer-top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-intro { grid-column: span 2; }
  .footer-contact { grid-column: span 2; gap: 32px; }
}
.footer-contact ul { display: grid; gap: 2px; }
.footer-grid { display: grid; gap: 40px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: clamp(40px, 5vw, 56px); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; } }
.footer-grid ul { display: grid; gap: 2px; }
.footer-grid ul a { display: inline-block; padding-block: 5px; }
.footer-bottom { padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; align-items: center; font-size: var(--fs-xs); color: rgba(255,255,255,.5); }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-bottom a { color: rgba(255,255,255,.55); }

/* ==========================================================================
   Product story components (home page and every product / solution page).
   Large product shots on soft stages, centred headlines, few words per idea.
   ========================================================================== */
/* Stage hero: the product first (web app with the iPhone app in front), then the headline and actions.
   It fills exactly the first screen below the header, so the headline and buttons always sit at the
   bottom of the window whatever its size. The shot sits in .stage-area, a size container that takes
   the height left over, and scales itself (with container units) to fit that space. */
.stage-hero {
  position: relative; overflow: hidden;
  background: radial-gradient(55% 50% at 50% 34%, rgba(74, 222, 128, .18), transparent 70%), linear-gradient(180deg, #EAF1F6 0%, #F5F8FB 55%, #fff 100%);
}
.stage-hero > .container {
  --pad-top: clamp(16px, 2.5vh, 32px); --pad-bottom: clamp(24px, 5vh, 56px);
  display: flex; flex-direction: column;
  min-height: calc(100vh - var(--header-h) - 1px);    /* 1px: the header's bottom border */
  min-height: calc(100svh - var(--header-h) - 1px);
  padding-block: var(--pad-top) var(--pad-bottom);
}
.stage-hero .breadcrumb { margin-bottom: clamp(12px, 2vh, 24px); }
.stage-area { flex: 1 1 0; min-height: clamp(200px, 40svh, 280px); container-type: size; display: flex; align-items: center; justify-content: center; }
/* Big screens: the shot may use a wider area than the text (up to 1360px), centred on the page. */
@media (min-width: 1440px) and (orientation: landscape) { .stage-area { align-self: center; width: min(calc(100vw - 2 * var(--gutter)), 1360px); } }
/* --ratio is the hero image's width / height. The browser bar is 44px tall; the phone overhangs the
   browser by 5% of the stage width; the browser takes 90% of the stage width. */
.stage {
  --ratio: 2.301;
  --w: min(100cqw, calc((100cqh - 44px) / (0.9 / var(--ratio) + 0.05)));
  position: relative; flex: none; width: var(--w); padding: 0 calc(var(--w) * .1) calc(var(--w) * .05) 0;
}
.stage-browser { border-color: rgba(15, 23, 42, .08); box-shadow: 0 50px 90px -40px rgba(7, 14, 28, .45), 0 16px 36px -18px rgba(7, 14, 28, .25); }
.stage-browser img { aspect-ratio: auto; height: auto; object-fit: fill; }
.stage-phone { --phone-w: calc(var(--w) * .19); position: absolute; right: 0; bottom: 0; }
/* A browser-only stage (a wide, short crop) uses the full width and needs no room for a phone. */
.stage.no-phone { --w: min(100cqw, calc((100cqh - 44px) * var(--ratio))); padding: 0; }
/* Phones-only stage: three phones sized by whichever runs out first, width or height. */
.stage.phones-only { width: 100%; padding: 0; }
.stage.phones-only .phones-3 .device-phone { --phone-w: min(calc((100cqw - 2 * var(--gap)) / 3), calc(100cqh / 2.32), 260px); }
.stage-cta .store-badges { gap: 10px; }
.stage-bar { flex: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; margin-top: clamp(20px, 3vh, 36px); }
.stage-bar h1 { font-size: clamp(2rem, min(1.6rem + 3.3vw, 8.5svh), 4.25rem); letter-spacing: -0.045em; line-height: 1.02; color: var(--ink-950); }
.stage-bar h1 .accent { color: var(--green-700); }  /* large text: the brighter cyan passes 3:1 */
/* Each headline line is its own block so it balances on its own when it wraps. */
.stage-bar h1 > span { display: block; }
.stage-bar .eyebrow { display: block; margin-bottom: 12px; }
.stage-sub { margin-top: 14px; max-width: 36em; font-size: var(--fs-lg); color: var(--text-2); }
.stage-cta { display: grid; justify-items: start; gap: 12px; }
.stage-cta .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.stage-cta .note { font-size: var(--fs-sm); color: var(--text-3); }
/* Desktop: the buttons always stay beside the headline (the headline wraps instead), so the bar stays short. */
@media (min-width: 1024px) {
  .stage-bar { flex-wrap: nowrap; }
  .stage-bar > :first-child { flex: 1 1 auto; min-width: 0; }
  .stage-cta { flex: none; }
}
/* Phones, tablets and any portrait screen: the web app keeps a readable width and runs off the right edge;
   the phone stays in view. The browser's width (--bw) follows the height available, between 400px and 1400px. */
@media (max-width: 1023px), (orientation: portrait) {
  .stage-area { justify-content: flex-start; margin-right: calc(var(--gutter) * -1); min-height: clamp(200px, 36svh, 240px); }
  .stage { --bw: clamp(400px, calc((100cqh - 44px) / (1 / var(--ratio) + 0.05)), 1400px); width: 100%;  /* the full visible width, so the phone (right: gutter) stays on screen */ padding: 0 0 calc(var(--bw) * .05) 0; }
  .stage-browser { width: var(--bw); max-width: none; border-top-right-radius: 0; border-bottom-right-radius: 0; }
  .stage-phone { --phone-w: min(34cqw, 260px, calc(100cqh * .44)); right: var(--gutter); }
  .stage.no-phone { --bw: clamp(400px, calc((100cqh - 44px) * var(--ratio)), 1000px); padding: 0; }  /* a wide crop: 1000px shows about two agent cards */
  .stage.phones-only { margin-right: var(--gutter); }
  .stage.phones-only .phones-3 .device-phone { --phone-w: min(calc((100cqw - var(--gutter) - 2 * var(--gap)) / 3), calc(100cqh / 2.32), 240px); }
}
/* Very short windows (a phone held sideways): there is no room for a shot above the text, so the headline
   and buttons come first and the shot follows straight after. */
@media (max-height: 520px) {
  .stage-hero .breadcrumb { order: -2; }
  .stage-bar { order: -1; margin: 0 0 clamp(20px, 4vh, 32px); }
  .stage-area { flex: none; height: max(260px, 75svh); }
}
/* Short phone and tablet screens: drop the small print so the headline and buttons fit above the fold. */
@media (max-width: 1023px) and (max-height: 760px) {
  .stage-cta .note { display: none; }
}
@media (max-width: 479px) {
  .stage-hero .breadcrumb { display: none; }
  .stage-cta .btn-lg { min-height: 48px; font-size: var(--fs-sm); }
  .stage.phones-only .phones-3 .device-phone { --phone-w: min(calc((100cqw - var(--gutter) - var(--gap)) / 2), calc(100cqh / 2.32), 240px); }
  .stage-sub { font-size: var(--fs-md); margin-top: 10px; }
}

/* Statement: one sentence at a time darkens as it scrolls through the screen. */
.statement { padding-block: clamp(88px, 12vw, 168px); }
.statement .eyebrow { display: block; max-width: none; margin-bottom: clamp(16px, 2vw, 24px); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0; line-height: 1.4; color: var(--accent-strong); text-align: center; }
.statement .eyebrow + p { margin-top: 0; }

/* Status list: plain rows that say what is on today and what is coming. */
.status-list { max-width: 880px; margin-inline: auto; display: grid; gap: 10px; list-style: none; }
.status-list li { display: grid; grid-template-columns: 1fr; gap: 10px 18px; align-items: start; padding: clamp(16px, 2.5vw, 22px) clamp(18px, 3vw, 26px); border-radius: var(--r-lg); background: #fff; }
.section:not(.bg-soft) .status-list li { background: var(--bg-soft); }
@media (min-width: 640px) { .status-list li { grid-template-columns: 132px 1fr; } .status-list .badge { margin-top: 3px; } }
.status-list .badge { justify-self: start; white-space: nowrap; }
.status-list strong { display: block; font-weight: 700; color: var(--text); }
.status-list li > div > span { display: block; margin-top: 4px; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.55; }

/* A badge after a card heading (e.g. "Texts  Coming soon"). */
.card :is(h3, h4) .badge { vertical-align: middle; margin-left: 8px; }
.statement p { max-width: 21em; margin-inline: auto; text-align: center; font-size: clamp(1.75rem, 1.05rem + 2.8vw, 3.25rem); font-weight: 700; line-height: 1.16; letter-spacing: -0.035em; color: var(--ink-900); text-wrap: balance; }

/* Media stage: a large product shot on a soft panel, sitting on the panel's bottom edge. */
.media-stage {
  margin: 0; overflow: hidden; border-radius: var(--r-xl); padding: clamp(20px, 5vw, 64px) clamp(20px, 5vw, 64px) 0;
  background: radial-gradient(80% 90% at 50% 0%, rgba(74, 222, 128, .16), transparent 70%), #E6EDF3;
}
.bg-soft .media-stage { background-color: #E1E9F0; }
.media-stage img { display: block; width: 100%; height: auto; border-radius: 14px 14px 0 0; box-shadow: 0 30px 60px -24px rgba(7, 14, 28, .35), 0 0 0 1px rgba(15, 23, 42, .06); }
@media (max-width: 767px) { .media-stage img { width: 800px; max-width: none; } }
/* Inside a two-column split the stage is smaller, so it shows the top-left of the screen at a readable size. */
.split .media-stage { padding: clamp(16px, 2.5vw, 28px) clamp(16px, 2.5vw, 28px) 0; }
.split .media-stage img { width: 165%; max-width: none; }
/* Short points under a shot: bold lead phrase, one sentence. */
.points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px 40px; margin-top: clamp(32px, 5vw, 56px); }
.points p { margin: 0; font-size: var(--fs-md); line-height: 1.55; color: var(--text-2); }
.points strong, .gallery-card strong { font-weight: 700; color: var(--text); }
.more { margin-top: clamp(24px, 4vw, 40px); text-align: center; }
.more.cluster { justify-content: center; }
/* Three phones, the middle one raised. Two on small phones so they stay legible. */
.phones-3 { --gap: clamp(12px, 3vw, 40px); display: flex; justify-content: center; align-items: flex-end; gap: var(--gap); }
.phones-3 .device-phone { --phone-w: min(calc((100% - 2 * var(--gap)) / 3), 270px); }
.phones-3 .device-phone:nth-child(2) { margin-bottom: calc(var(--phone-w) * .2); }
@media (max-width: 479px) {
  .phones-3 .device-phone { --phone-w: calc((100% - var(--gap)) / 2); }
  .phones-3 .device-phone:nth-child(3) { display: none; }
}

/* Gallery: a sideways row of app screens that lines up with the page content. */
.gallery-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: clamp(28px, 4vw, 48px); }
.gallery-nav { display: flex; gap: 10px; }
.gallery-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--bg-muted); color: var(--text); cursor: pointer; transition: background-color .2s ease, opacity .2s ease; }
.bg-soft .gallery-btn { background: #fff; }
.gallery-btn:hover { background: var(--gray-200); }
.gallery-btn:disabled { opacity: .35; cursor: default; }
.gallery-btn svg { width: 20px; height: 20px; }
.gallery {
  --inset: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  display: flex; gap: clamp(14px, 2vw, 24px); margin: 0; padding: 4px var(--inset) 24px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--inset); scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery-card { flex: none; width: min(80vw, 560px); scroll-snap-align: start; }
.gallery-img { display: flex; align-items: flex-start; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-xl); padding: clamp(16px, 2.5vw, 28px) clamp(16px, 2.5vw, 28px) 0; background: radial-gradient(80% 90% at 50% 0%, rgba(74, 222, 128, .14), transparent 70%), #E6EDF3; }
.gallery-img img { display: block; width: 100%; height: auto; border-radius: 10px 10px 0 0; box-shadow: 0 20px 40px -18px rgba(7, 14, 28, .35), 0 0 0 1px rgba(15, 23, 42, .06); }
/* Small screens: show the top-left of each screen, larger, instead of the whole screen shrunk. */
@media (max-width: 767px) {
  .gallery-img { aspect-ratio: 4 / 3; }
  .gallery-img img { width: 170%; max-width: none; }
}
.gallery-card p { max-width: 30em; margin-top: 18px; font-size: var(--fs-md); line-height: 1.55; color: var(--text-2); }

/* Big price */
.price-hero { text-align: center; }
.price-hero-amount { display: flex; justify-content: center; align-items: baseline; gap: 12px; }
.price-hero-amount strong { font-size: clamp(4rem, 2.4rem + 6vw, 7.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: var(--ink-950); }
.price-hero-amount span { font-size: var(--fs-xl); font-weight: 600; color: var(--text-2); }
.price-hero-detail { margin-top: 20px; font-size: var(--fs-lg); color: var(--text-2); text-wrap: balance; }
.price-hero .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.price-hero-note { margin-top: 14px; font-size: var(--fs-sm); color: var(--text-3); }
.section.flush-top { padding-top: 0; }
.section.short-bottom { padding-bottom: clamp(48px, 6vw, 80px); }
@media (max-width: 479px) {
  .stage-cta { width: 100%; justify-items: stretch; }
  :is(.price-hero, .more) .actions .btn, .more.cluster .btn { flex: 1 1 100%; }
  /* Hero buttons sit side by side so the bar at the bottom of the screen stays short. */
  .stage-cta .actions { flex-wrap: nowrap; gap: 10px; }
  .stage-cta .actions .btn { flex: 1 1 0; min-width: 0; padding-inline: 10px; }
  .stage-cta .btn-primary { order: -1; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .statement p span { animation: statement-ink linear both; animation-timeline: view(); animation-range: cover 12% cover 38%; }
    @keyframes statement-ink { from { color: var(--gray-300); } }
  }
}

/* ---------- Reveal on scroll (progressive enhancement) ---------- */
.reveal { --d: 0ms; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--d), transform .7s cubic-bezier(.2,.7,.2,1) var(--d); }
  .reveal.is-visible { opacity: 1; transform: none; }
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .reveal { opacity: 1; transform: none; transition: none; animation: reveal-in linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    @keyframes reveal-in { from { opacity: 0; transform: translateY(26px); } }
  }
  .reveal-stagger > * { --d: 0ms; }
  .reveal-stagger > :nth-child(2) { --d: 80ms; }
  .reveal-stagger > :nth-child(3) { --d: 160ms; }
  .reveal-stagger > :nth-child(4) { --d: 240ms; }
  .reveal-stagger > :nth-child(5) { --d: 320ms; }
  .reveal-stagger > :nth-child(6) { --d: 400ms; }
  
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: .22s ease-in both vt-out; }
  ::view-transition-new(root) { animation: .32s ease-out both vt-in; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
  .header { view-transition-name: site-header; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; } .mt-5 { margin-top: 48px; } .mt-6 { margin-top: 64px; }
.mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 32px; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.max-w { max-width: 680px; }
.mx-auto { margin-inline: auto; }
.w-full { width: 100%; }
/* Hide below 760px without overriding the element's own display (a .btn must stay inline-flex). */
@media (max-width: 759px) { .hide-sm { display: none !important; } }
@media (max-width: 479px) { :is(.page-hero, .cta) .actions .btn { flex: 1 1 100%; } }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-list li { list-style: none; }
.num { font-variant-numeric: tabular-nums; }
.print-only { display: none; }
@media print {
  .header, .footer, .mobile-nav, .cta, .nav-toggle { display: none !important; }
  .page-hero { border: 0; }
  body { color: #000; }
}

/* ---------- Contact details, founder card (Oct 15, 2026) ---------- */
.address-block { font-style: normal; line-height: 1.7; color: var(--text-2); }
.person-card { display: grid; gap: 16px; }
.person-head { display: flex; align-items: center; gap: 14px; }
.person-head strong { display: block; font-size: var(--fs-lg); }
.person-head div span { color: var(--text-2); font-size: var(--fs-sm); }
.person-head .avatar-initials { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--green-900); color: #fff; font-size: var(--fs-md); font-weight: 700; letter-spacing: .04em; }
.contact-list { display: grid; gap: 10px; margin: 0; }
.contact-list > div { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.contact-list dt { color: var(--text-3); font-weight: 600; }
.contact-list dd { margin: 0; }
.contact-list a { color: var(--accent-strong); font-weight: 600; }

/* ---------- Pricing: billing period switch, numbered steps ---------- */
.calc-period { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 22px; border: 0; border-radius: 999px; background: rgba(255,255,255,.08); }
.calc-period label { display: block; margin: 0; cursor: pointer; }
.calc-period input { position: absolute; opacity: 0; pointer-events: none; }
.calc-period span { display: flex; justify-content: center; align-items: baseline; gap: 6px; padding: 9px 12px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; color: rgba(255,255,255,.75); }
.calc-period em { font-style: normal; font-size: var(--fs-xs); color: var(--green-400); }
.calc-period input:checked + span { background: #fff; color: var(--ink-900); }
.calc-period input:checked + span em { color: var(--green-800); }
.calc-period input:focus-visible + span { outline: 2px solid var(--green-400); outline-offset: 2px; }
.steps-list { margin: 12px 0 0; padding-left: 1.3em; display: grid; gap: 10px; color: var(--text-2); }
.steps-list li::marker { color: var(--accent-strong); font-weight: 700; }

/* ---------- Demo request form ---------- */
.optional { font-weight: 400; color: var(--text-3); }
.form-error { margin: 0; padding: 12px 14px; border-radius: var(--r-sm); background: #FEF2F2; color: #991B1B; font-size: var(--fs-sm); }
.form-error a { color: inherit; font-weight: 600; }
.check { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--green-700); margin: 0; }
.choice-group { border: 0; padding: 0; margin: 0; }
.choice-group legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: var(--fs-sm); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--gray-300); border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); background: #fff; }
.chips input:checked + span { border-color: var(--green-700); background: var(--accent-soft); color: var(--accent-strong); }
.chips input:focus-visible + span { outline: 2px solid var(--green-700); outline-offset: 2px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.demo-form button[disabled] { opacity: .7; cursor: progress; }

/* ---------- Industry pages ---------- */
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }