/* Edvantis Payments landing.
   Order: tokens, base, layout, shared components, page sections (top to bottom), responsive.
   The SoftPOS demo has its own stylesheet (softpos/softpos-embed.css), scoped under .spx. */

/* ---------- tokens ---------- */
:root {
  --brand: #00BF63;
  --brand-ink: #00874A;
  --mint: #E8FFF4;
  --mint-soft: #F6FFFA;
  --mint-faint: #F3FFF9;

  --black: #000;
  --ink: #1d1d1d;
  --text: #474747;
  --muted: #565c7c;
  --faint: #9aa1b4;

  --line: #e4e6ee;
  --line-strong: #cdd2df;
  --line-dashed: #d5d9e3;
  --hairline: rgba(0, 0, 0, .08);
  --hairline-strong: rgba(0, 0, 0, .10);

  --ground: #f7f7f7;
  --white: #fff;
  --clutch: #f0643c; /* Clutch review stars and labels, as on edvantis.com */
  --error: #d3294a; /* form errors, declines */
  --warn: #d99a00; /* a reroute: handled, but worth a look */

  --font-display: 'Century Gothic', 'Questrial', sans-serif;
  --font-body: 'Open Sans', Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;

  --header-h: 68px;
  --content-w: 1280px;
  --gutter: clamp(20px, 4vw, 32px);
  --section-y: clamp(44px, 5vw, 64px);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- fonts ---------- */
/* Century Gothic is edvantis.com's licensed web font, loaded from its own server (which allows other sites to use
   it), so Mac and phone visitors see it too, not only Windows machines that happen to have it. Regular for headings
   and big numbers, bold for amounts. Questrial (Google Fonts) stands in until it arrives. */
@font-face {
  font-family: "Century Gothic";
  font-weight: 400;
  font-display: swap;
  src: url("https://www.edvantis.com/wp-content/themes/edvantis/fonts/century/6005230/f511511a-63a8-45a4-8f43-959006da1991.woff2") format("woff2");
}
@font-face {
  font-family: "Century Gothic";
  font-weight: 700;
  font-display: swap;
  src: url("https://www.edvantis.com/wp-content/themes/edvantis/fonts/century/6005276/b12fce6d-1212-4e0a-8d70-d15379749cb9.woff2") format("woff2");
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

a { color: var(--brand-ink); text-decoration: none; }
a:hover { color: var(--black); }

button, input, textarea { font-family: inherit; }

img { max-width: 100%; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

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

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

/* ---------- layout ---------- */
.site { min-height: 100vh; overflow-x: clip; background: var(--white); }

.container {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: var(--section-y) 0; scroll-margin-top: var(--header-h); }

/* ---------- shared components ---------- */
.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.1;
  color: var(--black);
  text-wrap: balance;
}

.text-brand { color: var(--brand); }

.section-lead {
  margin: 0;
  max-width: 640px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  text-wrap: pretty;
}

.label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.label--brand { color: var(--brand-ink); }

.tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 3px 8px;
  white-space: nowrap;
}

.badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  padding: 3px 10px;
}

.badge--live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--white);
  background: var(--brand);
  border: 0;
  padding: 4px 10px;
}

.badge--live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white);
}

/* area number (01 demo, 02-04 services), optionally with a badge next to it; scales down like .h2 */
.area-num { margin-bottom: 14px; font-family: var(--font-display); font-size: clamp(28px, 3vw, 36px); line-height: 1; color: var(--brand); }
.area-num-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.area-num-row .area-num { margin-bottom: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border: 1px solid var(--brand);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all .2s ease-in;
}

.btn--primary { background: var(--brand); color: var(--white); }
.btn--primary:hover { background: var(--white); color: var(--brand); }

.btn__arrow { display: inline-flex; transition: transform .25s var(--ease-out); }
.btn:hover .btn__arrow--down { transform: translateY(3px); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
}

.text-link:hover { color: var(--brand); }
.text-link--ink { color: var(--ink); }
.text-link--ink:hover { color: var(--brand-ink); }

/* Accordion: one open item per group; the panel animates from 0fr to 1fr (main.js toggles .is-open). */
.acc { max-width: 480px; border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }

.acc__btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.acc__btn:hover { color: var(--brand-ink); }

.acc__icon {
  display: inline-flex;
  flex: none;
  color: var(--muted);
  transition: transform .25s ease, color .2s;
}

.is-open > .acc__btn .acc__icon { transform: rotate(45deg); color: var(--brand-ink); }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease-out);
}

.is-open > .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }

.acc__body {
  padding: 0 36px 16px 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

/* Scroll reveal: only hidden when JS runs (html.js), so the page reads fine without it. */
.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease var(--reveal-delay, 0s), transform .45s var(--ease-out) var(--reveal-delay, 0s);
}

.js .reveal.is-in { opacity: 1; transform: none; }
.reveal--d1 { --reveal-delay: .1s; }
.reveal--d2 { --reveal-delay: .12s; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}

.site-header__inner {
  max-width: var(--content-w);
  height: var(--header-h);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-logo, .site-logo:hover { display: flex; align-items: center; gap: 14px; color: var(--ink); }
.site-logo img { display: block; height: 24px; width: auto; }

.site-logo__unit {
  padding-left: 14px;
  border-left: 1px solid var(--line-strong);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.site-nav { display: flex; gap: 28px; align-items: center; font-size: 14px; font-weight: 600; }
.site-nav a { color: var(--ink); }
.site-nav a:hover { color: var(--brand-ink); }

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border: 1px solid var(--brand);
  border-radius: 6px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: all .2s ease-in;
}

.header-cta:hover { background: var(--brand); color: var(--white); }

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ink);
}

.burger[aria-expanded="true"] .burger__open,
.burger[aria-expanded="false"] .burger__close { display: none; }

.mobile-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: flex;
  flex-direction: column;
  padding: 4px var(--gutter) 24px;
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 24px 40px -24px rgba(13, 14, 22, .25);
}

.mobile-menu[hidden] { display: none; }

.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  border-bottom: 1px solid #eef0f4;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

.mobile-menu__link:hover { color: var(--brand-ink); }
.mobile-menu__cta { margin-top: 20px; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  background: var(--white);
  isolation: isolate;
}

.hero__field { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; }

.hero__grid {
  flex: 1;
  width: calc(100% - 32px);
  max-width: 1344px;
  margin: 16px auto 0;
  padding: 56px clamp(20px, 4vw, 56px) 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 40px;
  align-items: center;
}

.hero__eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; font-size: 14px; font-weight: 600; color: var(--muted); }

.hero__title {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(46px, 5.6vw, 78px);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--black);
  text-wrap: balance;
}

.hero__lead { margin: 0 0 40px; max-width: 480px; font-size: 18px; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.hero__visual { display: flex; flex-direction: column; align-items: center; gap: 18px; }

/* The phone stage is laid out in fixed pixels; on short screens it is scaled with zoom (see responsive). */
.hero__stage { position: relative; width: 100%; max-width: 640px; height: 640px; }

.hero__waves { position: absolute; left: 50%; top: 250px; width: 0; height: 0; z-index: -1; pointer-events: none; }

.hero__phone { position: absolute; left: calc(50% - 179px); top: -9px; width: 358px; height: 682px; }

/* the demo's phone-only preview (softpos.css, .spx-preview) is laid out on a 420x800 canvas; scale it into the stage */
.hero__phone .spx-preview {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(.853);
  transform-origin: 0 0;
}

/* Callouts around the phone; .is-on follows the step the hero phone is showing. */
.callout { position: absolute; width: clamp(128px, calc(50% - 166px), 220px); pointer-events: none; }
.callout--keys { left: 0; top: 150px; order: 1; }
.callout--webhook { left: 0; top: 440px; order: 4; }
.callout--card { right: 0; top: 250px; order: 2; }
.callout--speed { right: 0; top: 480px; order: 3; }

.callout__box {
  position: relative;
  padding: 11px 13px;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 10px;
  box-shadow: 0 16px 36px -22px rgba(13, 14, 22, .18);
  transition: border-color .5s ease, box-shadow .5s ease;
}

.callout__title { margin-bottom: 4px; font-size: 12.5px; font-weight: 600; color: var(--brand-ink); }
.callout__text { font-size: 13.5px; line-height: 1.35; font-weight: 600; color: var(--black); text-wrap: balance; }

.callout__line {
  position: absolute;
  top: 50%;
  width: 34px;
  height: 1px;
  background: var(--line-strong);
  transform: scaleX(.3);
  transition: transform .5s var(--ease-out), background .3s;
}

.callout__dot {
  position: absolute;
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  transform: scale(0);
  transition: transform .3s var(--ease-out), background .3s;
}

.callout--keys .callout__line, .callout--webhook .callout__line { right: -34px; transform-origin: left center; }
.callout--card .callout__line, .callout--speed .callout__line { left: -34px; transform-origin: right center; }
.callout--keys .callout__dot, .callout--webhook .callout__dot { right: -38px; }
.callout--card .callout__dot, .callout--speed .callout__dot { left: -38px; }

.callout.is-on .callout__box { border-color: var(--brand); box-shadow: 0 16px 36px -18px rgba(0, 191, 99, .45); }
.callout.is-on .callout__line { background: var(--brand); transform: scaleX(1); }
.callout.is-on .callout__dot { background: var(--brand); border-color: var(--brand); transform: scale(1); transition-delay: .4s, 0s; }

.trust-pill {
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  white-space: nowrap;
  pointer-events: none;
  background: var(--white);
  border: 1px solid var(--hairline-strong);
  border-radius: 99px;
  box-shadow: 0 12px 30px -20px rgba(13, 14, 22, .35);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.trust-pill__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 191, 99, .14);
  transition: background .3s, box-shadow .3s;
}

.trust-pill__dot.is-checking { box-shadow: 0 0 0 5px rgba(0, 191, 99, .28); }

.stats-band { border-top: 1px solid var(--hairline); background: var(--white); }
.stats-band__inner { max-width: var(--content-w); margin: 0 auto; padding: 30px var(--gutter) 34px; }
.stats-band__clip { overflow: hidden; }
.stats { display: flex; flex-wrap: wrap; row-gap: 24px; margin: 0 0 0 -1px; padding: 0; list-style: none; }

.stat {
  flex: 1 1 120px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 20px;
  border-left: 1px solid var(--line);
}

.stat__value {
  display: flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--black);
}

.stat__unit { margin-left: 2px; font-size: .7em; color: var(--brand); }
.stat__unit--tight { margin-left: -.2em; }
.stat__unit--pct { margin-left: -.03em; }
.stat__label { font-size: 14px; color: var(--muted); }

/* digit roll used by the count-up (main.js) */
.roll { display: inline-flex; }
.roll__digit { display: inline-block; height: 1em; line-height: 1; overflow: hidden; }
.roll__col { display: flex; flex-direction: column; align-items: center; transition: transform 1.1s var(--ease-out); }
.roll__col > span { height: 1em; line-height: 1; }

/* ---------- overview ---------- */
.overview__head { margin-bottom: 28px; }
.overview__head .h2 { max-width: 720px; }

/* 4 columns, then 2 below 880px, then 1 below 440px (container-width switch, no media query) */
.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(calc((100% - 48px) / 4), (880px - 100%) * 999, clamp(calc((100% - 16px) / 2), (440px - 100%) * 999, 100%)), 1fr));
  gap: 16px;
}

.area-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 250px;
  padding: 26px;
  border-radius: 16px;
  background: var(--ground);
  border: 1px solid var(--ground);
  color: var(--ink);
  transition: transform .35s var(--ease-out), border-color .25s, background .25s, box-shadow .35s;
}

.area-card:hover {
  transform: translateY(-2px);
  color: var(--ink);
  border-color: var(--brand);
  background: var(--white);
  box-shadow: 0 1px 2px rgba(13, 14, 22, .05), 0 10px 24px -12px rgba(13, 14, 22, .18);
}

.area-card--live { background: var(--mint); border-color: var(--brand); }
.area-card--live:hover { background: var(--mint); box-shadow: 0 1px 2px rgba(0, 135, 74, .08), 0 10px 24px -12px rgba(0, 135, 74, .28); }

.area-card__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.area-card__num { font-family: var(--font-display); font-size: 36px; line-height: 1; color: var(--brand); }
.area-card__title { margin-top: 18px; font-size: 18px; line-height: 1.25; font-weight: 600; text-wrap: balance; }
.area-card__text { font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.area-card--live .area-card__text { color: var(--text); }
.area-card__more { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--brand-ink); }

/* ---------- demo ---------- */
.demo { background: linear-gradient(180deg, var(--white), var(--ground) 30%, var(--ground) 85%, var(--white)); }
.demo__head { margin-bottom: 28px; }
.demo__head > div { max-width: 860px; }
.demo__head .h2 { margin-bottom: 14px; }
.demo__note { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--brand-ink); }
.demo__note svg { flex: none; }

/* phones and portrait tablets get a film instead of the interactive demo (softpos.css), so copy that refers to it switches too */
.for-phone { display: none; }
@media (max-width: 980px) {
  .for-wide, .demo__note { display: none; }
  .for-phone { display: inline; }
}
.demo__app { max-width: var(--content-w); margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }

.demo__build { margin-top: 20px; }
.demo__build-inner { padding-top: 8px; }
/* under the film there is no phone edge to close the demo, so a divider starts the list as its own block */
@media (max-width: 980px) {
  .demo__build { margin-top: 32px; }
  .demo__build-inner { padding-top: 28px; border-top: 1px solid var(--line); }
}
.demo__build .label { display: block; margin-bottom: 6px; }
.demo__build .section-lead { margin: 4px 0 10px; }

/* 3 columns, then 2 below 820px, then 1 below 520px */
.build-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(calc((100% - 80px) / 3), (820px - 100%) * 999, clamp(calc((100% - 40px) / 2), (520px - 100%) * 999, 100%)), 1fr));
  gap: 0 40px;
}

.build-item { display: flex; flex-direction: column; gap: 5px; padding: 14px 0 16px; border-top: 1px solid var(--line); }
.build-item__title { font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--ink); } /* same as an accordion item title in 02-04 */
.build-item__text { font-size: 14px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }

.cta-band {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 22px;
  min-height: 210px;
  margin-top: 40px;
  padding: 48px clamp(24px, 5vw, 72px);
  border-radius: 8px;
  background: var(--brand);
}

.cta-band__lines { position: absolute; right: clamp(0px, 4vw, 100px); bottom: 0; width: clamp(110px, 32%, 260px); height: auto; pointer-events: none; }

.cta-band__title {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15;
  color: var(--white);
  text-wrap: balance;
}

.cta-band__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border: 1px solid var(--white);
  border-radius: 6px;
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .2s ease-in, color .2s ease-in;
}

.cta-band__btn:hover { background: var(--white); color: var(--brand-ink); }

/* ---------- services 02-04 ---------- */
.services__head { max-width: 820px; margin-bottom: 24px; }

.svc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding: 56px 0;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 96px;
}

.svc:last-child { border-bottom: 1px solid var(--hairline); }

/* the title scales down with the screen like .h2 does, so the section heading above stays clearly larger */

.svc__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.5vw, 30px);
  line-height: 1.15;
  color: var(--black);
  text-wrap: balance;
}

.svc__lead { margin: 0 0 20px; max-width: 440px; font-size: 16px; line-height: 1.6; color: var(--text); text-wrap: pretty; }

.svc__uses { max-width: 480px; margin-top: 14px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }

/* service picture card (each one is an illustrated .dia--art, below) */
.dia { padding: 28px; border-radius: 16px; background: var(--ground); }
.dia__caption { display: block; margin-bottom: 16px; }
.dia__foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line-dashed); }
.dia__foot .label { margin-right: 4px; }
/* service pictures: a soft gradient with the hero's dotted grid behind frosted cards of real-looking product data */
.dia--art {
  background:
    radial-gradient(circle, rgba(154, 161, 180, .32) 1px, transparent 1.3px) 0 0 / 22px 22px,
    radial-gradient(120% 80% at 15% 0%, #e9f8f0 0%, rgba(233, 248, 240, 0) 60%),
    radial-gradient(90% 70% at 100% 100%, #e8ecf4 0%, rgba(232, 236, 244, 0) 65%),
    #f6f7f9;
}
.dia--art .dia__foot { border-top-color: rgba(0, 0, 0, .07); }

/* 02, a live log: frosted cards in a stack (front, two behind, one waiting above) that main.js rotates;
   the live dot sits in the caption */
.dia__caption--live { display: flex; align-items: center; gap: 8px; }
.dia__caption--live i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(0, 191, 99, .16); }
.glass { position: relative; height: 244px; }

/* the path an entry takes before it lands in the log (card, EMV L2 kernel, our L3 app, acquirer), ours green, evenly
   spaced on a dashed line; when main.js starts a run, a dot crosses it in 1.4 s and each stop lights green
   as it passes (the acquirer red for a decline), then the new card drops in below */
.rail { position: absolute; left: 0; right: 0; top: 4px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; align-items: center; height: 30px; }
.rail::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 50%; border-top: 1px dashed #a6aec0; }
.rail__node { position: relative; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, .85); border-radius: 999px; background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 14px -10px rgba(22, 30, 60, .45); font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--muted); }
.rail__node--ours { border-color: rgba(0, 191, 99, .6); background: rgba(236, 255, 245, .88); color: var(--brand-ink); }
.rail__dot { position: absolute; left: 12.5%; top: 50%; z-index: 1; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px #fff, 0 0 12px rgba(0, 191, 99, .55); opacity: 0; }
.rail.is-running .rail__dot { animation: railDot 1.4s linear forwards; }
.rail.is-running .rail__node { animation: railNode .6s ease-out both; }
.rail.is-running .rail__node:nth-child(2) { animation-delay: .47s; }
.rail.is-running .rail__node:nth-child(3) { animation-delay: .93s; }
.rail.is-running .rail__node:nth-child(4) { animation-delay: 1.36s; }
@keyframes railDot { 0% { left: 12.5%; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { left: 87.5%; opacity: 0; } }
@keyframes railNode { 40% { color: var(--ink); box-shadow: 0 0 0 4px rgba(0, 191, 99, .2), 0 6px 14px -10px rgba(22, 30, 60, .45); } }
/* a decline comes back from the acquirer's side: that stop lights red instead */
.rail.is-bad.is-running .rail__node:nth-child(4) { animation-name: railNodeBad; animation-duration: 1s; }
@keyframes railNodeBad { 30%, 70% { color: var(--error); border-color: rgba(211, 41, 74, .45); box-shadow: 0 0 0 4px rgba(211, 41, 74, .16), 0 6px 14px -10px rgba(22, 30, 60, .45); } }
.glass__feed { margin: 0; padding: 0; list-style: none; }
.glass__card {
  position: absolute;
  left: 50%;
  top: 62px; /* under the path */
  width: min(88%, 440px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 4px 16px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 12px;
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 22px 40px -22px rgba(22, 30, 60, .45);
  transform-origin: 50% 0;
  transition: transform .7s var(--ease-out), opacity .7s var(--ease-out);
}
.glass__card.no-anim { transition: none; }
.glass__what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--muted); }
.glass__what b { font-weight: 600; color: var(--ink); }
.glass__amt { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.glass__res { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.glass__res::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.glass__res--bad::before { background: var(--error); }
.glass__meta { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5; color: #7c8399; transition: opacity .5s; }
/* stack positions (data-pos): 0 front, 1 and 2 behind it, "out" fading at the back, "above" waiting to drop in */
.glass__card[data-pos="0"] { z-index: 4; transform: translate(-50%, 0) scale(1); opacity: 1; }
.glass__card[data-pos="1"] { z-index: 3; transform: translate(-50%, 58px) scale(.92); opacity: .7; }
.glass__card[data-pos="2"] { z-index: 2; transform: translate(-50%, 104px) scale(.84); opacity: .42; }
.glass__card[data-pos="out"] { z-index: 1; transform: translate(-50%, 140px) scale(.76); opacity: 0; }
.glass__card[data-pos="above"] { z-index: 5; transform: translate(-50%, -22px) scale(1.04); opacity: 0; }
.glass__card:not([data-pos="0"]) .glass__meta { opacity: 0; }
/* narrow cards: the card name gets its own line, amount and result under it */
@media (max-width: 560px) {
  .glass { height: 268px; } /* the cards take two rows here */
  .rail__node { padding: 3px 7px; font-size: 11px; }
  .glass__card { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 16px; }
  .glass__what { grid-column: 1 / -1; white-space: normal; }
}


/* 03, the integration layer as a small network on the panel's dot grid: channels on one side, providers on the other,
   the ERP off to the side, the orchestration layer in the middle as a frosted card the lines run on under. Icons
   only; the caption and the tags say what they are. main.js places everything on the dots, draws the lines and plays
   payments through them; in a narrow card (.is-col) the picture turns on its side. Nodes stay hidden until placed. */
.router { position: relative; height: 242px; }
.router.is-col { height: 352px; }
.router__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.router__line { fill: none; stroke: #c6ccdb; stroke-width: 1.5; transition: stroke .3s; }
.router__line--ext { stroke-dasharray: 4 6; }
.router__line.is-on { stroke: var(--brand); }
.router__line.is-warn { stroke: var(--warn); }
.router__dot { fill: var(--brand); stroke: #fff; stroke-width: 3; paint-order: stroke; filter: drop-shadow(0 0 6px rgba(0, 191, 99, .7)); opacity: 0; }
.router__dot.is-warn { fill: var(--warn); filter: drop-shadow(0 0 6px rgba(217, 154, 0, .7)); }
.router__node {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 22px -12px rgba(22, 30, 60, .45);
  color: #8a91a6;
  transform: translate(-50%, -50%);
  transition: color .3s, border-color .3s, box-shadow .3s;
}
.router:not(.is-ready) .router__node { visibility: hidden; }
.router__node svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.router__node.is-on { border-color: rgba(0, 191, 99, .6); box-shadow: 0 0 0 5px rgba(0, 191, 99, .14), 0 10px 22px -12px rgba(22, 30, 60, .45); color: var(--brand-ink); }
.router__node.is-warn { border-color: rgba(217, 154, 0, .7); box-shadow: 0 0 0 5px rgba(217, 154, 0, .14), 0 10px 22px -12px rgba(22, 30, 60, .45); color: #a87400; }
.router__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 176px;
  height: 66px;
  border: 1px solid rgba(0, 191, 99, .4);
  border-radius: 16px;
  background: rgba(255, 255, 255, .36);
  -webkit-backdrop-filter: blur(4px) saturate(160%);
  backdrop-filter: blur(4px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 48px rgba(0, 191, 99, .14), 0 24px 40px -22px rgba(22, 30, 60, .45);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--brand-ink);
  transform: translate(-50%, -50%);
  transition: border-color .3s, box-shadow .3s;
}
.router__hub.is-on { border-color: rgba(0, 191, 99, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 0 5px rgba(0, 191, 99, .1), 0 0 56px rgba(0, 191, 99, .22), 0 24px 40px -22px rgba(22, 30, 60, .45); }
.router.is-col .router__hub { width: 132px; font-size: 16px; }


/* 04, the agent's request as frosted cards: the ask (dark, on the right, like a chat message), then the agent's
   steps; main.js brings them up one at a time from faint, so the box is never empty and nothing below moves. */
.chatflow { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 4px 0 2px; list-style: none; }
.chatflow__item {
  max-width: 88%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 15px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 16px 32px -20px rgba(22, 30, 60, .45);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.chatflow__item p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); }
.chatflow__item p b { font-weight: 600; }
.chatflow__item small { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5; color: #7c8399; }
.chatflow__who { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.chatflow__who i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.chatflow__item--ask { align-self: flex-end; border-color: transparent; border-radius: 14px 14px 4px 14px; background: #1d1f2a; box-shadow: 0 16px 32px -18px rgba(22, 30, 60, .6); }
.chatflow__item--ask p { color: #fff; }
.chatflow__item--ask .chatflow__who { color: rgba(255, 255, 255, .6); }
.chatflow__item--paid { border-color: rgba(0, 191, 99, .55); background: rgba(236, 255, 245, .8); }
.chatflow__item--paid .chatflow__who { color: var(--brand-ink); }
.chatflow__checks { display: flex; flex-wrap: wrap; gap: 6px; }
.chatflow__checks span { padding: 2px 8px; border-radius: 999px; background: rgba(0, 191, 99, .1); font-size: 12.5px; font-weight: 600; color: var(--brand-ink); }
.chatflow.is-playing .chatflow__item:not(.is-on) { opacity: .3; transform: translateY(4px); } /* steps still to come, faint */

/* ---------- cases ---------- */
.cases__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.cases__head > div { max-width: 760px; }
.cases__list { border-top: 1px solid var(--hairline-strong); }
.case { border-bottom: 1px solid var(--hairline-strong); }

.case__row,
.case__panel-grid {
  display: grid;
  grid-template-columns: minmax(150px, .9fr) minmax(150px, .9fr) minmax(0, 2fr) 32px;
  gap: 24px;
}

.case__row {
  align-items: center;
  width: 100%;
  padding: 26px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s;
}

.case__row:hover, .case.is-open > .case__row { background: var(--mint-soft); }

.case__num { font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--black); font-variant-numeric: tabular-nums; }
.case__num-label { margin-top: 6px; font-size: 12.5px; line-height: 1.3; color: var(--brand-ink); }
.case__brand { min-height: 38px; display: flex; align-items: center; }
.case__logo { display: block; max-width: 100%; object-fit: contain; object-position: left center; }
.case__client { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.case__client-name { font-size: 18px; line-height: 1.2; font-weight: 600; color: var(--black); }
.case__nda { font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 6px; }
.case__domain { margin-top: 6px; font-size: 13px; color: var(--muted); }
.case__title { font-size: 16px; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.case__icon { display: flex; justify-content: flex-end; color: var(--brand-ink); }
.case__icon svg { transition: transform .25s ease; } /* rotate the icon itself, not the wider cell, so it turns in place */
.case.is-open .case__icon svg { transform: rotate(45deg); }

.case > .acc__panel { transition: grid-template-rows .35s var(--ease-out), background .2s; }
.case.is-open > .acc__panel { background: var(--mint-soft); }

.case__panel-grid { padding: 4px 12px 32px; }
.case__aside { grid-column: 1 / span 2; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.case__meta { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding-top: 2px; }
.case__field { display: flex; flex-direction: column; gap: 4px; }
.case__field-value { font-size: 14px; line-height: 1.45; color: var(--ink); }
.case__stack { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7; color: var(--muted); }

.case__figure { width: 140px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.case__figure img { display: block; width: 100%; height: auto; aspect-ratio: 275 / 305; object-fit: contain; }
.case__figure figcaption { font-size: 12px; line-height: 1.45; color: var(--muted); }

.case__story { grid-column: 3; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.case__facts { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.case__kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: baseline; }
.case__kv dt { font-size: 12.5px; font-weight: 600; color: var(--brand-ink); }
.case__kv dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.case__kv--result { padding-top: 14px; border-top: 1px solid var(--hairline); }
.case__kv--result dd { font-size: 15px; line-height: 1.55; font-weight: 600; color: var(--ink); }

.case__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 2px; padding-left: 110px; }
.case__nda-note { font-size: 13px; color: var(--muted); }

/* ---------- why ---------- */
.why__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px 48px; margin-bottom: 40px; }
.why__head > div { max-width: 760px; }

/* Clutch stars: grey track with an orange fill clipped to the rating (--rating: 0-5, halves included).
   Each star is 16px wide with a 2px gap, so the fill width is rating * 18px - 1px. */
.stars {
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' viewBox='0 0 18 16'%3E%3Cpath fill='%23dfe2ea' d='M8 .6l2.35 4.76 5.25.77-3.8 3.7.9 5.23L8 12.6l-4.7 2.46.9-5.23-3.8-3.7 5.25-.77z'/%3E%3C/svg%3E");
  --star-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' viewBox='0 0 18 16'%3E%3Cpath fill='%23f0643c' d='M8 .6l2.35 4.76 5.25.77-3.8 3.7.9 5.23L8 12.6l-4.7 2.46.9-5.23-3.8-3.7 5.25-.77z'/%3E%3C/svg%3E");
  display: block;
  width: 88px;
  height: 16px;
  background: var(--star) repeat-x 0 0 / 18px 16px;
}

.stars__fill { display: block; width: calc(var(--rating, 5) * 18px - 1px); max-width: 100%; height: 100%; background: var(--star-on) repeat-x 0 0 / 18px 16px; }

/* overall Clutch rating next to the section title */
.rating { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.rating:hover { color: var(--ink); }
.rating__score { font-family: var(--font-display); font-size: 44px; line-height: 1; }
.rating__meta { display: flex; flex-direction: column; gap: 6px; }
.rating__src { font-size: 13px; color: var(--muted); }
.rating:hover .rating__src { color: var(--clutch); }

/* client reviews: one row of three cards, wrapping on narrow screens */
.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  margin-bottom: 16px; /* the panel below sits in the same grid as the cards */
}

.review { margin: 0; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
/* the head: photo on the left; stars and the Clutch link on the first line, then name and role across the full width,
   so narrow cards don't squeeze them beside the link */
.review__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; align-items: center; margin-bottom: 18px; }
.review__head > :first-child { grid-row: 1 / span 3; align-self: start; } /* the photo, framed or not */
.review__who { display: contents; }
.review__who .stars { grid-column: 2; justify-self: start; margin-bottom: 4px; }
.review__name, .review__role { grid-column: 2 / -1; }
.review__head > .review__src { grid-column: 3; grid-row: 1; }
.review__name { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.review__role { font-size: 13px; line-height: 1.4; color: var(--muted); }
.review__src { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: var(--muted); transition: color .2s; } /* quiet: the rating above already says Clutch */
.review__src:hover { color: var(--clutch); }
.review__quote { margin: 0; }
.review__quote p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
/* below three columns (1000px): one row to swipe instead of 2 + 1, the next card peeking in from the edge; the row runs
   to the screen edges and snaps to each card. The cards show at once, since a card off to the side would otherwise
   only fade in mid-swipe. */
@media (max-width: 1000px) {
  .reviews { display: flex; gap: 12px; margin: 0 calc(-1 * var(--gutter)) 16px; padding: 0 var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .reviews::-webkit-scrollbar { display: none; }
  .review { flex: 0 0 min(420px, 84%); scroll-snap-align: start; }
  @media (min-width: 600px) { .review { flex-basis: calc(50% - 30px); } } /* two whole cards, the third peeking */
  .js .reviews .reveal { opacity: 1; transform: none; }
}

.avatar { flex: none; display: block; border-radius: 50%; object-fit: cover; }

/* portraits shot on pure white: multiply them onto a light tint so the white reads as a soft circle, not as a hole */
.avatar-frame { flex: none; display: block; border-radius: 50%; background: #eceef3; isolation: isolate; }
.avatar--blend { mix-blend-mode: multiply; }

/* 4 columns, then 2 below 1000px, then 1 below 560px */
.reasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(calc((100% - 120px) / 4), (1000px - 100%) * 999, clamp(calc((100% - 40px) / 2), (560px - 100%) * 999, 100%)), 1fr));
  gap: 48px 40px;
}

/* the reasons and the certificates share one panel under the reviews: the service pictures' soft gradient without
   their dot grid (this one holds text); each reason opens with one of edvantis.com's own duotone icons */
.why__panel {
  padding: 36px 32px 24px;
  border-radius: 16px;
  background:
    radial-gradient(120% 80% at 15% 0%, #e9f8f0 0%, rgba(233, 248, 240, 0) 60%),
    radial-gradient(90% 70% at 100% 100%, #e8ecf4 0%, rgba(232, 236, 244, 0) 65%),
    #f6f7f9;
}
.reason { display: flex; flex-direction: column; gap: 10px; }
.reason__ico { display: block; width: 36px; height: 36px; margin-bottom: 6px; }
.reason h3 { margin: 0; font-size: 18px; line-height: 1.2; font-weight: 600; color: var(--black); text-wrap: balance; }
.reason p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
/* phones: the panel runs to the screen edges like the reviews row above (its text as wide as the rest of the page,
   not inset twice), and the icon sits beside the title */
@media (max-width: 560px) {
  .why__panel { margin: 0 calc(-1 * var(--gutter)); padding: 36px var(--gutter) 24px; border-radius: 0; }
  .reasons { gap: 36px; }
  .reason { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 10px 12px; }
  .reason__ico { width: 24px; height: 24px; margin: 0; }
  .reason p { grid-column: 1 / -1; }
}

.proof { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: 36px; padding-top: 20px; border-top: 1px dashed rgba(0, 0, 0, .08); }
.proof__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.proof__logos img { display: block; height: 56px; width: auto; }
.proof__standards { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.proof__standards .label { margin-right: 6px; }
.proof__standards .tag { font-size: 11px; padding: 4px 9px; background: none; }

/* ---------- contact ---------- */
.contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 56px 80px;
  align-items: center;
}

.contact .h2 { margin-bottom: 18px; }
.contact .section-lead { max-width: 460px; margin-bottom: 32px; }

.contact__next { display: grid; gap: 14px; margin: 32px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); list-style: none; counter-reset: next; }
.contact__next li { position: relative; display: flex; flex-direction: column; gap: 2px; padding-left: 38px; counter-increment: next; font-size: 14.5px; line-height: 1.45; color: var(--text); }
.contact__next li::before { content: counter(next); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--mint); color: var(--brand-ink); font-size: 12px; font-weight: 700; }
.contact__next b { font-weight: 600; color: var(--ink); }

.form { display: flex; flex-direction: column; padding: 28px; border-radius: 16px; background: var(--ground); }
.form__fields { display: flex; flex-direction: column; gap: 12px; }
.form__fields[hidden] { display: none; }

/* Fields with floating labels: the label sits inside the empty field and moves up, small, once the field is
   focused or filled (placeholder=" " lets :placeholder-shown tell an empty field apart). An example placeholder,
   where there is one, only shows while the field is focused. 16px text so iOS doesn't zoom in on focus. */
.fl { position: relative; }
.fl__input {
  display: block;
  width: 100%;
  height: 58px;
  padding: 24px 15px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--white);
  color: var(--black);
  font-size: 16px;
  line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
}
textarea.fl__input { height: auto; min-height: 120px; padding-top: 28px; resize: vertical; }
.fl__input::placeholder { color: transparent; transition: color .15s; }
.fl__input:focus::placeholder { color: var(--faint); }
.fl__input:hover { border-color: #b4bacb; }
.fl__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 191, 99, .16); }
.fl__label {
  position: absolute;
  left: 16px;
  top: 18px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--muted);
  pointer-events: none;
  transform-origin: left top;
  transition: transform .18s var(--ease-out), color .15s;
}
.fl__input:focus + .fl__label,
.fl__input:not(:placeholder-shown) + .fl__label { transform: translateY(-10px) scale(.75); }
.fl__input:focus + .fl__label { color: var(--brand-ink); }
.fl__req { margin-left: 2px; color: var(--error); }

.fl__err { margin: 6px 2px 0; font-size: 13px; line-height: 1.4; color: var(--error); }
.fl__err:empty { display: none; }
.is-invalid .fl__input { border-color: var(--error); }
.is-invalid .fl__input:focus { box-shadow: 0 0 0 3px rgba(211, 41, 74, .14); }
.is-invalid .fl__label { color: var(--error); }

.form__consent { margin: 2px 0 4px; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.check input { flex: none; appearance: none; width: 18px; height: 18px; margin: 1px 0 0; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--white) center / 12px no-repeat; cursor: pointer; transition: background-color .15s, border-color .15s; }
.check input:checked { border-color: var(--brand); background-color: var(--brand); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.check a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
.check a:hover { color: var(--brand-ink); text-decoration-color: currentColor; }
.is-invalid .check input { border-color: var(--error); }
.form__consent .fl__err { margin-left: 28px; }

.form__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: 4px; font-size: 13px; color: var(--muted); }
.form__foot a { font-weight: 600; }
.form__foot a:hover { color: var(--brand); }

/* after sending: the fields give way to a confirmation, in a card that keeps its height (main.js) */
.form__done { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 15px; line-height: 1.55; color: var(--text); }
.form__done[hidden] { display: none; }
.form__done:focus { outline: none; }
.form__done-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 50%; background: var(--mint); color: var(--brand-ink); }
.form__done p { margin: 0; }
.form__done-title { font-size: 20px; font-weight: 600; color: var(--ink); }
.form__done a { font-weight: 600; color: var(--brand-ink); }

/* ---------- footer ---------- */
.site-footer { padding: 28px 0; border-top: 1px solid var(--hairline); }
.site-footer__inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; font-size: 13px; color: var(--muted); }
.site-footer__brand { display: flex; align-items: center; gap: 14px; }
.site-footer__brand img { display: block; height: 20px; width: auto; }
.site-footer__links { display: flex; gap: 22px; }
.site-footer__links a { color: var(--muted); }
.site-footer__links a:hover { color: var(--black); }

/* ---------- responsive ---------- */

/* hero on short desktop screens: shrink the phone stage so the whole phone fits above the fold (needs vh >= 132 + 673 * zoom) */
@media (min-width: 1100px) and (max-height: 828px) { .hero__grid { padding-top: 32px; } }
@media (min-width: 1100px) and (max-height: 804px) { .hero__stage { zoom: .95; } }
@media (min-width: 1100px) and (max-height: 770px) { .hero__stage { zoom: .9; } }
@media (min-width: 1100px) and (max-height: 737px) { .hero__stage { zoom: .85; } }
@media (min-width: 1100px) and (max-height: 703px) { .hero__stage { zoom: .8; } }
@media (min-width: 1100px) and (max-height: 670px) { .hero__stage { zoom: .75; } }
@media (min-width: 1100px) and (max-height: 636px) { .hero__stage { zoom: .7; } }

@media (min-width: 861px) {
  .mobile-menu { display: none; }
}

@media (max-width: 860px) {
  .site-nav, .header-cta { display: none; }
  .burger { display: inline-flex; }

  /* one column: number, title and lead, then the diagram as the picture of the service, then the details.
     The text column dissolves (display: contents) so the diagram can sit between its lead and its accordion. */
  .svc { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 40px 0; }
  .svc__text { display: contents; }
  .svc__text > * { order: 1; } /* number (or number row), title, lead; only direct children, so the 04 badge row keeps its own order */
  .svc .dia { order: 2; margin: 4px 0 24px; padding: 20px; }
  .svc .acc, .svc__uses { order: 3; }
  .svc .acc { max-width: none; } /* the same width as the diagram above it */
  /* an accordion that ends the service would draw its last line right above the next service's divider */
  .svc__text > .acc:last-child > .acc__item:last-child { border-bottom: 0; }
  .svc__lead { max-width: 560px; }

  /* the list runs edge to edge, so an open case's tint and the dividers reach the screen sides; text keeps the gutter */
  .cases__list { margin: 0 calc(-1 * var(--gutter)); }
  .case__row { grid-template-columns: minmax(0, 1fr) 28px; gap: 10px 16px; padding: 22px var(--gutter); }
  .case__row > * { grid-column: 1; }
  .case__row > .case__icon { grid-column: 2; grid-row: 1; }
  .case__panel-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 0 var(--gutter) 28px; }
  .case__panel-grid > * { grid-column: 1 / -1; }

}

@media (max-width: 760px) {
  .hero__grid { width: 100%; margin-top: 0; padding: 28px clamp(16px, 5vw, 24px) 36px; gap: 32px; }
  .hero__actions > .btn { flex: 1 1 100%; }

  .form { padding: 20px 16px; } /* more room for the fields on a phone */

  .hero__stage {
    height: auto;
    max-width: 420px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }

  .trust-pill { position: relative; left: auto; top: auto; transform: none; grid-column: 1 / -1; justify-self: center; order: -2; margin-bottom: -24px; z-index: 2; }
  /* sized so the phone and the four notes it lights up fit on one screen together */
  .hero__phone { position: relative; left: auto; top: auto; width: 252px; height: 456px; justify-self: center; grid-column: 1 / -1; order: -1; margin-bottom: 8px; }
  .hero__phone .spx-preview { transform: scale(.6); }
  .callout { position: relative; left: auto; right: auto; top: auto; width: auto; display: flex; }
  .callout__box { flex: 1; min-height: 90px; }
  .callout__line, .callout__dot { display: none; }

  .stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .case__kv { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .case__links { padding-left: 0; }
}