/* MachBackflow public marketing site. */

:root {
  --ink: #0a1a2f;
  --night: #061022;
  --ink-soft: #15304f;
  --body: #42546b;
  --muted: #6b7c93;

  --brand: #1577e6;
  --brand-dark: #0d5bb9;
  --brand-light: #5aa9ff;
  --brand-wash: #eaf3ff;
  --accent: #15c39a;
  --accent-wash: #e6faf4;

  --surface: #ffffff;
  --surface-soft: #f5f8fd;
  --line: #e2eaf5;
  --line-strong: #cbd8ea;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;

  --shadow-sm: 0 1px 2px rgba(10, 26, 47, .06), 0 2px 8px rgba(10, 26, 47, .05);
  --shadow: 0 2px 6px rgba(10, 26, 47, .05), 0 18px 40px -18px rgba(10, 26, 47, .22);
  --shadow-lg: 0 4px 10px rgba(10, 26, 47, .06), 0 36px 70px -28px rgba(10, 26, 47, .35);

  --wrap: 1180px;
  --header-h: 72px;

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
/* Decorative glows and blurs bleed past the edges; never let them pan the page
   sideways. `clip` rather than `hidden` keeps the sticky header working. */
html { overflow-x: hidden; }
@supports (overflow-x: clip) {
  html, body.site-body { overflow-x: clip; }
}

body.site-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 0 0 .6em;
  font-weight: 700;
  text-wrap: balance;
  overflow-wrap: break-word;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

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

img, svg { max-width: 100%; }
/* Keep every image on its own aspect ratio. Without this the `height` attribute
   survives as a presentational hint whenever CSS sets only the width, which
   silently stretches the image. Slots that need a fixed height override it. */
img { height: auto; }

code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: .88em;
  background: var(--brand-wash);
  color: var(--brand-dark);
  padding: .12em .4em;
  border-radius: 5px;
}

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

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.narrow { max-width: 820px; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: .7rem 1rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ───────────────────────── Header ───────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.site-header-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.25rem;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: -.02em;
  color: var(--ink);
  white-space: nowrap;
}
.site-brand:hover { color: var(--ink); }
.site-brand img { width: auto; height: 34px; }
.site-brand span small {
  display: block;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
  margin-top: 2px;
}

.site-nav { margin-left: auto; }
.site-nav > ul {
  display: flex;
  align-items: center;
  gap: .15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .55rem .7rem;
  border-radius: 9px;
  font-size: .925rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}
.nav-link:hover { background: var(--surface-soft); color: var(--brand-dark); }
.nav-link[aria-current="page"] { color: var(--brand-dark); }
.nav-link .caret { width: 10px; height: 10px; opacity: .55; transition: transform .18s ease; }

.nav-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 268px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: .5rem;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav-item:hover > .nav-menu,
.nav-item:focus-within > .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-item:hover > .nav-link .caret,
.nav-item:focus-within > .nav-link .caret { transform: rotate(180deg); }
.nav-menu a {
  display: block;
  padding: .5rem .7rem;
  border-radius: 9px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.nav-menu a:hover { background: var(--brand-wash); color: var(--brand-dark); }

.site-header-actions { display: flex; align-items: center; gap: .5rem; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 11px;
  cursor: pointer;
  color: var(--ink);
}

/* ───────────────────────── Buttons ───────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .72rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .94rem;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(180deg, var(--brand-light) -40%, var(--brand) 45%, var(--brand-dark) 140%);
  color: #fff;
  box-shadow: 0 1px 1px rgba(255, 255, 255, .25) inset, 0 8px 20px -8px rgba(21, 119, 230, .65);
}
.btn-primary:hover { color: #fff; box-shadow: 0 1px 1px rgba(255, 255, 255, .3) inset, 0 14px 28px -10px rgba(21, 119, 230, .7); }

.btn-outline { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-outline:hover { background: var(--surface-soft); border-color: var(--brand-light); color: var(--brand-dark); }

.btn-light { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .32); color: #fff; }
.btn-light:hover { background: rgba(255, 255, 255, .22); color: #fff; }

.btn-white { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.btn-white:hover { color: var(--brand-dark); }

.btn-sm { padding: .5rem .95rem; font-size: .875rem; }
.btn-block { width: 100%; }

.link-arrow { font-weight: 650; }
.link-arrow::after { content: "→"; display: inline-block; margin-left: .3rem; transition: transform .15s ease; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ───────────────────────── Sections ───────────────────────── */

.sec { position: relative; isolation: isolate; padding: clamp(3.25rem, 6vw, 5.5rem) 0; }
/* Tinted band: a cool top-right glow and a faint mint bottom-left glow carry the
   hero palette down the page without competing with the content. */
.sec-soft {
  background:
    radial-gradient(56rem 26rem at 100% 0%, rgba(90, 169, 255, .14), transparent 70%),
    radial-gradient(48rem 24rem at 0% 100%, rgba(21, 195, 154, .07), transparent 70%),
    linear-gradient(180deg, #f2f6fd 0%, #f7faff 100%);
  border-block: 1px solid #e6eef9;
}
/* Dark feature band: breaks up long runs of light sections once per page. */
.sec-dark {
  background:
    radial-gradient(52rem 28rem at 92% 0%, rgba(21, 119, 230, .3), transparent 70%),
    radial-gradient(44rem 24rem at 0% 100%, rgba(21, 195, 154, .14), transparent 70%),
    linear-gradient(180deg, #0b1d36 0%, var(--night) 100%);
  color: rgba(232, 241, 251, .8);
}
.sec-dark h2, .sec-dark h3 { color: #fff; }
.sec-dark p, .sec-dark .lede { color: rgba(232, 241, 251, .8); }
.sec-dark .eyebrow { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #cfe4ff; }
.sec-dark .eyebrow::before { background: var(--accent); box-shadow: 0 0 0 3px rgba(21, 195, 154, .25); }
.sec-dark .btn-outline { border-color: rgba(255, 255, 255, .3); color: #fff; }
.sec-dark .btn-outline:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); color: #fff; }
.sec-dark .split-art::before { background: radial-gradient(closest-side, rgba(90, 169, 255, .4), rgba(21, 119, 230, .14) 60%, transparent); }
.sec-dark .kit-photo { border-color: rgba(255, 255, 255, .1); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6); }
.sec-dark .phone-shot { filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .55)); }

::selection { background: rgba(21, 119, 230, .22); color: inherit; }
.sec-tight { padding-top: 0; }

.sec-head { max-width: 50rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .32rem .8rem .32rem .6rem;
  margin-bottom: 1rem;
  background: var(--brand-wash);
  border: 1px solid #d4e6fd;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand-dark);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(21, 119, 230, .18);
}
.eyebrow-light { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #cfe4ff; }
.eyebrow-light::before { background: var(--brand-light); box-shadow: 0 0 0 3px rgba(90, 169, 255, .25); }

h1.display { font-size: clamp(2.1rem, 5.4vw, 3.9rem); letter-spacing: -.035em; }
h2.title { font-size: clamp(1.75rem, 3.4vw, 2.6rem); letter-spacing: -.03em; }
h3.subtitle { font-size: clamp(1.2rem, 2vw, 1.5rem); }

.lede { font-size: clamp(1.03rem, 1.35vw, 1.18rem); color: var(--body); max-width: 46rem; }
.lede-lg { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; }
.kicker { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--brand-dark); margin-bottom: .5rem; }

/* ───────────────────────── Hero ───────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3.5rem, 7vw, 6rem);
  background:
    linear-gradient(100deg, rgba(6, 16, 34, .94) 0%, rgba(8, 24, 52, .82) 38%, rgba(8, 24, 52, .38) 70%, rgba(6, 16, 34, .2) 100%),
    linear-gradient(0deg, rgba(6, 16, 34, .55) 0%, transparent 35%),
    url("/static/website/mb/bg-glass.webp?v=2") center / cover no-repeat,
    var(--night);
  color: #e8f1fb;
  isolation: isolate;
}
.hero::after {
  content: "";
  position: absolute;
  width: 46rem; height: 46rem;
  right: -14rem; top: -20rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21, 119, 230, .38), transparent 62%);
  filter: blur(10px);
  z-index: -1;
}
.hero, .page-hero, .cta-band {
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(90, 169, 255, .6) 30%, rgba(21, 195, 154, .5) 70%, transparent) 1;
}
.hero h1, .hero h2, .hero h3 { color: #fff; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.hero-sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--brand-light);
  margin-bottom: .9rem;
}
.hero-lede { color: rgba(232, 241, 251, .84); font-size: clamp(1.02rem, 1.3vw, 1.12rem); max-width: 40rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; }
.hero-note { margin-top: 1.5rem; font-size: .88rem; color: rgba(232, 241, 251, .6); }
.hero-art { position: relative; display: flex; justify-content: center; isolation: isolate; }
.hero-art::before {
  content: "";
  position: absolute;
  inset: 12% 4% 8%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(90, 169, 255, .45), rgba(21, 119, 230, .16) 55%, transparent);
  filter: blur(24px);
}
.hero-art img, .hero-art svg { width: 100%; max-width: 430px; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .45)); }

.page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2.75rem, 5vw, 4.25rem) 0 clamp(2.5rem, 4.5vw, 3.75rem);
  background: radial-gradient(120% 130% at 90% 0%, #1b4f94 0%, #0e2d55 45%, var(--night) 85%);
  color: #e8f1fb;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -70% 55%;
  height: 24rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21, 119, 230, .38), transparent 65%);
}
.page-hero > .wrap { position: relative; z-index: 1; }

/* Photographic backdrops from the live site, re-graded into the brand palette
   so every page shares one colour family. The photo runs at full strength on
   the right and is shaded on the left, so the headline sits on an even field. */
.page-hero-art { background: var(--night); }
.page-hero-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(6, 16, 34, .92) 0%, rgba(6, 16, 34, .72) 40%, rgba(6, 16, 34, .12) 100%),
    var(--hero-art);
  background-position: center, var(--hero-pos, right center);
  background-size: cover, cover;
}
.page-hero-art::after { display: none; }
.page-hero-streak { --hero-art: url("/static/website/mb/bg-streak.webp"); }
.page-hero-smoke { --hero-art: url("/static/website/mb/bg-smoke.webp"); --hero-pos: right 30%; }
.page-hero-glass { --hero-art: url("/static/website/mb/bg-glass.webp?v=2"); --hero-pos: center 40%; }
.page-hero-aurora { --hero-art: url("/static/website/mb/bg-aurora.webp"); --hero-pos: center 60%; }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 4.2vw, 3.1rem); letter-spacing: -.03em; }
.page-hero .lede { color: rgba(232, 241, 251, .84); }
.page-hero .hero-sub { margin-bottom: .75rem; }

.breadcrumbs { font-size: .85rem; color: rgba(232, 241, 251, .6); margin-bottom: 1rem; }
.breadcrumbs a { color: rgba(232, 241, 251, .82); }
.breadcrumbs a:hover { color: #fff; }

/* ───────────────────────── Cards & grids ───────────────────────── */

/* Explicit column counts per breakpoint rather than auto-fit, so a three- or
   four-card row never strands a single card on its own line at tablet widths. */
.grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-3 > :last-child:nth-child(odd) { grid-column: auto; }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.6rem;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  opacity: 0;
  transition: opacity .2s ease;
}
/* Only cards that lead somewhere react to the pointer, and their link is
   stretched over the whole card so the hover state never promises a click
   that does nothing. */
.card:has(.card-link a):hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.card:has(.card-link a):hover::before { opacity: 1; }
.card-link a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.card h3 { font-size: 1.12rem; margin-bottom: .5rem; }
.card p { color: var(--body); font-size: .96rem; }
.card-flat { box-shadow: none; }
.card-link { margin-top: auto; padding-top: 1rem; }

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: 1.1rem;
  background: linear-gradient(145deg, #eef5ff 0%, #d9e9fe 100%);
  box-shadow: inset 0 0 0 1px rgba(21, 119, 230, .14);
  border-radius: 13px;
  color: var(--brand);
}
.card-icon .ico { width: 22px; height: 22px; }
.card-icon.alt { background: linear-gradient(145deg, #eafbf5 0%, #cff3e6 100%); box-shadow: inset 0 0 0 1px rgba(15, 143, 114, .16); color: #0f8f72; }
.card-icon-lg { width: 58px; height: 58px; border-radius: 17px; }
.card-icon-lg .ico { width: 29px; height: 29px; }

/* Icon slots. Every icon is a 24x24 line glyph that inherits its colour from
   the slot, so each slot only has to set a box, a tint, and a glyph size. */
.ico { display: block; flex: none; }

/* Focal icon for an artwork column beside a block of copy. */
.icon-medallion {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(116px, 15vw, 156px);
  aspect-ratio: 1;
  border-radius: 28%;
  background:
    radial-gradient(90% 70% at 30% 10%, rgba(255, 255, 255, .28), transparent 60%),
    linear-gradient(150deg, #4a9cf7 0%, var(--brand) 45%, #0b4b9c 100%);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 28px 56px -22px rgba(21, 119, 230, .75),
    0 10px 22px -12px rgba(10, 26, 47, .4);
  color: #fff;
}
.icon-medallion .ico { width: 46%; height: 46%; stroke-width: 1.5; }
.icon-medallion-center { margin: 0 auto; }

/* Large variant for an artwork column of its own, where the medallion has to
   carry the same visual weight as the illustration it replaced. The rings are
   absolutely positioned so they stay out of the centring grid. */
.icon-medallion-lg { width: clamp(150px, 20vw, 212px); border-radius: 30%; }
.icon-medallion-lg .ico { width: 44%; height: 44%; }
.icon-medallion-lg::before,
.icon-medallion-lg::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  border: 1px solid rgba(21, 119, 230, .2);
  pointer-events: none;
}
.icon-medallion-lg::before { inset: -14%; }
.icon-medallion-lg::after { inset: -28%; opacity: .55; }

/* Inline chip for list rows. */
.icon-chip {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 16px;
  background: linear-gradient(145deg, #eef5ff 0%, #d9e9fe 100%);
  box-shadow: inset 0 0 0 1px rgba(21, 119, 230, .14);
  color: var(--brand);
}
.icon-chip .ico { width: 26px; height: 26px; }

/* Icon-above-caption cards. Square glyphs put every caption on one baseline
   without needing a fixed icon height. */
.icon-card { align-items: center; text-align: center; }
.icon-card .ico {
  width: 60px; height: 60px;
  padding: 15px;
  border-radius: 18px;
  background: linear-gradient(145deg, #eef5ff 0%, #d9e9fe 100%);
  box-shadow: inset 0 0 0 1px rgba(21, 119, 230, .14);
  color: var(--brand);
  stroke-width: 1.7;
}
.icon-card p { margin-top: 1.2rem; }

/* Real app screenshots. */
.phone-shot {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 26px 44px rgba(10, 26, 47, .3));
}
/* Mid-West 855 product photo. */
.kit-photo {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 1.25rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* Partner / platform logo lockups (white artwork, dark backing). */
.logo-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background:
    radial-gradient(70% 90% at 85% 110%, rgba(21, 195, 154, .22), transparent 60%),
    radial-gradient(120% 140% at 20% 0%, #1f5aa6 0%, #0e2d55 55%, #0a1a2f 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), var(--shadow-lg);
}
.logo-panel img { width: 100%; max-width: 300px; height: auto; }

.demo-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.demo-points li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 1.1rem; align-items: center; }
.demo-point-text { color: var(--ink-soft); font-size: 1.02rem; }

.feature-rows { display: grid; gap: 1.25rem; }
.feature-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.1rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.feature-row h3 { font-size: 1.08rem; margin-bottom: .45rem; }
.feature-row p { font-size: .95rem; }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
}
/* Artwork column of a .split. Each child carries its own size class; the column
   only centres it, so nothing here can override an image's own max-width. */
.split-art { position: relative; isolation: isolate; display: flex; justify-content: center; }
.split-art::before {
  content: "";
  position: absolute;
  inset: 4% 8%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(90, 169, 255, .3), rgba(90, 169, 255, .1) 60%, transparent);
  filter: blur(18px);
  pointer-events: none;
}
.split-top { align-items: start; }

.panel {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.panel-soft { background: var(--surface-soft); box-shadow: none; }
.policy h2 { font-size: 1.2rem; margin: 1.6rem 0 .45rem; }
.policy h3 { font-size: 1rem; margin: 1.1rem 0 .35rem; }
.policy p, .policy li { line-height: 1.55; }
.policy ul { margin: .35rem 0 1rem; padding-left: 1.15rem; }
.policy-updated { color: var(--muted, #5c6b7a); font-size: .9rem; }

/* ───────────────────────── Steps ───────────────────────── */

.steps { display: grid; gap: 1.25rem; counter-reset: step; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .steps { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .steps > :last-child:nth-child(odd) { grid-column: auto; }
}
.step {
  position: relative;
  padding: 1.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
/* Screenshot-led step cards. The shot sits within the card's own padding rather
   than bleeding past it, so the phone's top bezel is never clipped. */
.steps-shot .step {
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(90, 169, 255, .2), transparent 70%),
    linear-gradient(180deg, #eef5ff 0%, #fff 22rem);
}
.steps-shot .phone-shot {
  max-width: 230px;
  margin-bottom: 1.4rem;
  filter: drop-shadow(0 18px 30px rgba(10, 26, 47, .22));
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  margin-bottom: 1rem;
  background: linear-gradient(140deg, var(--brand), var(--brand-dark));
  color: #fff;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  box-shadow: 0 8px 18px -8px rgba(21, 119, 230, .8);
}
.step-label {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-dark);
  margin-bottom: .35rem;
}
.step h3 { font-size: 1.06rem; margin-bottom: .5rem; }
.step p { font-size: .94rem; }

/* ───────────────────────── Lists ───────────────────────── */

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.checks li {
  position: relative;
  padding-left: 2rem;
  color: var(--body);
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: .28em;
  width: 1.25rem; height: 1.25rem;
  background: var(--accent-wash);
  border-radius: 50%;
}
.checks li::after {
  content: "";
  position: absolute;
  left: .41rem; top: .55em;
  width: .42rem; height: .22rem;
  border-left: 2px solid #0f8f72;
  border-bottom: 2px solid #0f8f72;
  transform: rotate(-45deg);
}
.checks-2 { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: .7rem 1.75rem; }
.checks-light li { color: rgba(232, 241, 251, .86); }
.checks-light li::before { background: rgba(21, 195, 154, .18); }
.checks-light li::after { border-color: #5fe3c3; }

.ordered { counter-reset: ol; list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.ordered li { position: relative; padding-left: 2.4rem; color: var(--body); }
.ordered li::before {
  counter-increment: ol;
  content: counter(ol);
  position: absolute;
  left: 0; top: .1em;
  width: 1.7rem; height: 1.7rem;
  display: grid;
  place-items: center;
  background: var(--brand-wash);
  color: var(--brand-dark);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 800;
}

.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }

/* ───────────────────────── Stat band ───────────────────────── */

.band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.band > div { background: var(--surface); padding: 1.5rem; text-align: center; }
.band dt { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; color: var(--ink); margin-bottom: .25rem; }
.band dd { margin: 0; font-size: .9rem; color: var(--muted); }

/* ───────────────────────── Pricing ───────────────────────── */

.plans { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.plan-featured {
  background: linear-gradient(180deg, #f3f8ff 0%, #fff 14rem);
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), var(--shadow-lg);
}
.plan-badge {
  position: absolute;
  top: -.8rem;
  left: 1.9rem;
  padding: .3rem .8rem;
  background: linear-gradient(140deg, var(--brand), var(--brand-dark));
  color: #fff;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.plan h3 { font-size: 1.35rem; margin-bottom: .5rem; }
.plan-sub { color: var(--muted); font-size: .94rem; }
.plan-divider { height: 1px; background: var(--line); margin: 1.35rem 0; border: 0; }
.plan-note { font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: .8rem; }
.plan .checks { font-size: .95rem; }
.plan-foot { margin-top: auto; padding-top: 1.5rem; }
/* Each plan has a single destination, so its button covers the whole card. A
   transformed button would become the containing block and shrink the overlay
   back to itself, so the button stays put and the card lifts instead. */
.plan { transition: transform .2s ease, box-shadow .2s ease; }
.plan-foot .btn::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-lg); }
.plan-foot .btn:hover { transform: none; }
.plan:has(.plan-foot .btn):hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.plan-featured:has(.plan-foot .btn):hover { box-shadow: 0 0 0 1px var(--brand), var(--shadow-lg); }

.plan-badge-soft { background: var(--brand-wash); color: var(--brand-dark); box-shadow: inset 0 0 0 1px #cfe2fb; }
.plan-fine { margin-top: 1rem; font-size: .84rem; color: var(--muted); }

.plan-price { margin-top: 1.1rem; }
.plan-price strong { display: block; font-family: var(--font-display); font-size: 1.6rem; line-height: 1.2; color: var(--ink); }
.plan-price span { display: block; margin-top: .25rem; font-size: .86rem; color: var(--muted); }

.plan-enterprise {
  background:
    radial-gradient(28rem 18rem at 100% 0%, rgba(21, 119, 230, .35), transparent 70%),
    radial-gradient(22rem 16rem at 0% 100%, rgba(21, 195, 154, .16), transparent 70%),
    linear-gradient(180deg, #0b1d36 0%, var(--night) 100%);
  border-color: #1d3557;
  color: rgba(232, 241, 251, .8);
}
.plan-enterprise .plan-badge { background: linear-gradient(140deg, var(--accent), #0f8f72); }
.plan-enterprise h3, .plan-enterprise .plan-price strong { color: #fff; }
.plan-enterprise .plan-sub, .plan-enterprise .plan-price span, .plan-enterprise .plan-note { color: rgba(232, 241, 251, .72); }
.plan-enterprise .plan-divider { background: rgba(255, 255, 255, .12); }
.plan-enterprise .checks li { color: rgba(232, 241, 251, .88); }
.plan-enterprise .checks li::before { background: rgba(21, 195, 154, .2); }
.plan-enterprise .checks li::after { border-color: #5fe3c1; }
.plan-enterprise:has(.plan-foot .btn):hover { box-shadow: 0 0 0 1px rgba(95, 227, 193, .45), var(--shadow-lg); }

.btn-accent {
  background: linear-gradient(180deg, #4fe0bd -40%, var(--accent) 45%, #0f8f72 140%);
  color: #04261d;
  box-shadow: 0 1px 1px rgba(255, 255, 255, .3) inset, 0 8px 20px -8px rgba(21, 195, 154, .6);
}
.btn-accent:hover { color: #04261d; box-shadow: 0 1px 1px rgba(255, 255, 255, .35) inset, 0 14px 28px -10px rgba(21, 195, 154, .65); }

.price-tag { font-family: var(--font-display); font-size: 2.1rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.price-tag small { font-family: var(--font-body); font-size: .9rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }

.credit-table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.credit-table caption {
  text-align: left;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand-dark);
  padding-bottom: .5rem;
}
.credit-table th, .credit-table td { padding: .5rem 0; border-bottom: 1px solid var(--line); text-align: left; }
.credit-table th { font-weight: 600; color: var(--body); }
.credit-table td { text-align: right; font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.credit-table tr:last-child th, .credit-table tr:last-child td { border-bottom: 0; }

.kit-rates { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kit-rate {
  padding: .9rem 1rem;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.kit-rate span { display: block; font-size: .84rem; color: var(--muted); margin-bottom: .2rem; }
.kit-rate strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }

/* ───────────────────────── Tables ───────────────────────── */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.site-table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.site-table th, .site-table td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.site-table thead th {
  background: var(--surface-soft);
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink);
}
.site-table tbody tr:last-child th, .site-table tbody tr:last-child td { border-bottom: 0; }
.site-table tbody th { font-weight: 600; color: var(--ink); }
.tag {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tag-required { background: #fdecec; color: #b42318; }
.tag-optional { background: var(--surface-soft); color: var(--muted); }
.tag-recommended { background: var(--accent-wash); color: #0f8f72; }

.endpoint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.1rem;
  background: #0b1b2e;
  border: 1px solid #1c3a5c;
  border-radius: var(--radius);
  color: #d7e6f7;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: .9rem;
  overflow-x: auto;
}
.endpoint .verb {
  padding: .18rem .55rem;
  background: var(--accent);
  color: #04281f;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .07em;
}
.code-block {
  margin: 0;
  padding: 1.15rem 1.25rem;
  background: #0b1b2e;
  border-radius: var(--radius);
  color: #d7e6f7;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: .86rem;
  line-height: 1.6;
  overflow-x: auto;
}
.code-block code { background: none; color: inherit; padding: 0; font-size: inherit; }

/* ───────────────────────── FAQ ───────────────────────── */

.faq-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.faq-tab {
  padding: .5rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 650;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.faq-tab:hover { border-color: var(--brand-light); color: var(--brand-dark); }
.faq-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.faq-list { display: grid; gap: .75rem; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq-item[open] { border-color: var(--brand-light); }
.faq-item > summary {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1.1rem 1.3rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "";
  flex: none;
  width: .6rem; height: .6rem;
  margin: .4rem 0 0 auto;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq-item[open] > summary::after { transform: rotate(-135deg); }
.faq-body { padding: 0 1.3rem 1.3rem; }
.faq-body > *:first-child { margin-top: 0; }

/* ───────────────────────── Quote ───────────────────────── */

.quote {
  position: relative;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.quote::before {
  content: "“";
  position: absolute;
  top: -.4rem; left: 1.5rem;
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--brand-wash);
}
.quote-headline { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--ink); margin-bottom: .9rem; position: relative; }
.quote p { color: var(--body); }
.quote-who { display: flex; align-items: center; gap: .9rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.quote-avatar {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  background: linear-gradient(140deg, var(--brand), var(--brand-dark));
  color: #fff;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
}
.quote-who strong { display: block; font-family: var(--font-display); color: var(--ink); }
.quote-who span { font-size: .88rem; color: var(--muted); }

/* ───────────────────────── Forms ───────────────────────── */

.form-panel {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.form-grid { display: grid; gap: 1rem 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: .86rem; font-weight: 650; color: var(--ink); }
.field .req { color: #d64545; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .7rem .85rem;
  font: inherit;
  /* 16px keeps iOS Safari from zooming the page when a field gains focus. */
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field select {
  appearance: none;
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2342546b' stroke-width='1.8'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 12px 12px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(21, 119, 230, .16);
}
.field input[aria-invalid="true"] { border-color: #d64545; box-shadow: 0 0 0 3px rgba(214, 69, 69, .14); }
.field-hint { font-size: .82rem; color: var(--muted); }
.field-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form-foot { margin-top: 1rem; font-size: .85rem; color: var(--muted); }

.alert {
  display: flex;
  gap: .75rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  font-size: .95rem;
  margin-bottom: 1.25rem;
}
.alert-success { background: var(--accent-wash); color: #0b6b55; border: 1px solid #b9ecdd; }
.alert-error { background: #fdeeee; color: #a12a2a; border: 1px solid #f5c9c9; }
.alert[hidden] { display: none; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.alert-info { background: var(--brand-wash); color: var(--brand-dark); border: 1px solid #d4e6fd; }

/* ───────────────────────── CTA band & footer ───────────────────────── */

.cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 6.5vw, 5.5rem) 0;
  background:
    radial-gradient(55% 80% at 50% 50%, rgba(6, 16, 34, .6), transparent 75%),
    linear-gradient(180deg, rgba(6, 16, 34, .25) 0%, rgba(6, 16, 34, .7) 100%),
    url("/static/website/mb/bg-smoke-mint.webp") 30% 35% / cover no-repeat,
    var(--night);
  color: #e8f1fb;
  text-align: center;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: -45% auto auto -10%;
  width: 34rem; height: 34rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21, 195, 154, .2), transparent 62%);
}
.cta-band > .wrap { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.5rem); max-width: 34rem; margin-inline: auto; }
.cta-band p { color: rgba(232, 241, 251, .8); max-width: 38rem; margin-inline: auto; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 2rem; }

.site-footer {
  background:
    radial-gradient(50rem 18rem at 85% 0%, rgba(21, 119, 230, .12), transparent 70%),
    #081322;
  color: rgba(232, 241, 251, .68);
  padding: clamp(2.75rem, 5vw, 4rem) 0 2rem;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(230px, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: 2rem;
}
.site-footer .footer-brand { gap: .7rem; font-size: 1.25rem; color: #fff; }
.site-footer .footer-brand:hover { color: #fff; }
.site-footer .footer-brand img { height: 42px; }
.site-footer .footer-brand span small { display: block; font-size: .7rem; color: rgba(232, 241, 251, .6); margin-top: 4px; }
.footer-tagline { margin-top: 1.25rem; font-size: .95rem; max-width: 24rem; }

.footer-qr { display: flex; align-items: flex-start; gap: .9rem; margin-top: 1.5rem; }
.footer-qr img { width: 84px; height: auto; border-radius: 10px; }
.footer-qr p { margin: 0; font-size: .85rem; line-height: 1.5; }
.footer-qr strong { display: block; color: #fff; font-family: var(--font-display); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .3rem; }
.site-footer h4 {
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.site-footer a { color: rgba(232, 241, 251, .68); font-size: .92rem; }
.site-footer a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .86rem;
}
.footer-bottom p { margin: 0; }
.footer-social { display: flex; gap: .55rem; align-items: center; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  color: rgba(232, 241, 251, .9);
}
.footer-social a:hover { color: #fff; border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .08); }
.footer-social svg { width: 1rem; height: 1rem; display: block; }

/* ───────────────────────── Motion ───────────────────────── */

/* Hidden only while scripting is available to reveal it again. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:has(.card-link a):hover, .plan:has(.plan-foot .btn):hover { transform: none; }
}

/* ───────────────────────── Responsive ───────────────────────── */

@media (max-width: 1040px) {
  .nav-link { padding: .5rem .55rem; font-size: .88rem; }
  .site-header-actions .btn-outline { display: none; }
  .site-table th, .site-table td { padding-inline: .75rem; }
}

@media (max-width: 900px) {
  :root { --header-h: 64px; }

  .hero-grid { grid-template-columns: 1fr; }
  /* Headline first; the phone follows as a cropped preview so it never pushes
     the copy below the fold. */
  .hero-art {
    width: 100%;
    max-width: 300px;
    max-height: 430px;
    margin-inline: auto;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
    mask-image: linear-gradient(180deg, #000 72%, transparent);
  }

  .nav-toggle { display: inline-flex; }
  .site-header-actions { display: none; }
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: .75rem 1.25rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    display: none;
  }
  .site-nav.is-open { display: block; }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav .nav-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--line); }
  .site-nav .nav-item:last-child { border-bottom: 0; }
  .nav-link { justify-content: space-between; min-height: 52px; padding: .75rem .25rem; font-size: 1.02rem; }
  .nav-menu {
    grid-column: 1 / -1;
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    margin: 0 0 .75rem .25rem;
    padding: 0 0 0 .75rem;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    background: none;
  }
  .nav-menu a { padding: .65rem .6rem; font-size: .96rem; }
  .nav-item > .nav-link .caret { display: none; }
  /* Submenus fold away behind a toggle once scripting can open them again. */
  .js .site-nav .nav-item:not(.is-open) > .nav-menu { display: none; }
  .nav-sub-toggle {
    display: inline-grid;
    place-items: center;
    width: 44px; height: 44px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 10px;
    color: var(--ink-soft);
    cursor: pointer;
  }
  .nav-sub-toggle:hover { background: var(--surface-soft); }
  .nav-sub-toggle svg { width: 14px; height: 14px; transition: transform .18s ease; }
  .nav-item.is-open > .nav-sub-toggle svg { transform: rotate(180deg); }
  .site-nav .nav-cta { display: grid; gap: .6rem; margin-top: 1.25rem; }
  body.nav-open { overflow: hidden; }

  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  .footer-top > :first-child { grid-column: 1 / -1; }
}

@media (min-width: 901px) {
  .site-nav .nav-cta, .nav-sub-toggle { display: none; }
}

@media (max-width: 640px) {
  .wrap, .site-header-inner { padding-inline: 1.1rem; }
  .sec { padding: 3rem 0; }
  .sec-head { margin-bottom: 1.75rem; }
  .split { gap: 2rem; }

  .card, .step, .feature-row, .panel, .form-panel, .quote { padding: 1.3rem; }
  .plan { padding: 1.4rem; }
  .plan-badge { left: 1.4rem; }
  .card-icon-lg { width: 50px; height: 50px; border-radius: 15px; }
  .card-icon-lg .ico { width: 25px; height: 25px; }

  /* Decorative medallions shrink so they punctuate the copy instead of
     filling a screen of their own. */
  .icon-medallion-lg { width: 112px; }
  .icon-medallion-lg::after { display: none; }

  /* Icon cards read as a compact list: glyph beside its caption. */
  .icon-card { flex-direction: row; align-items: center; gap: 1rem; padding: 1rem 1.1rem; text-align: left; }
  .icon-card .ico { width: 48px; height: 48px; padding: 12px; border-radius: 14px; }
  .icon-card p { margin: 0; }
  .grid:has(> .icon-card) { gap: .75rem; }

  .steps-shot .phone-shot { max-width: 200px; }

  .step-num { width: 34px; height: 34px; border-radius: 10px; font-size: .95rem; margin-bottom: .8rem; }

  .endpoint { overflow-wrap: anywhere; font-size: .82rem; }
  .code-block { font-size: .8rem; padding: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; }

  /* Tables collapse into labelled rows; the labels are copied from the column
     headers by script, so the stacked layout only applies when they exist. */
  .js .site-table, .js .site-table tbody, .js .site-table tr,
  .js .site-table th, .js .site-table td { display: block; }
  .js .site-table { min-width: 0; }
  .js .site-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .js .site-table tr { padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
  .js .site-table tbody tr:last-child { border-bottom: 0; }
  .js .site-table th, .js .site-table td { padding: 0; border: 0; }
  .js .site-table tbody th { margin-bottom: .4rem; white-space: normal; }
  .js .site-table td { padding: .2rem 0; font-size: .9rem; }
  .js .site-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .faq-item > summary { padding: 1rem 1.1rem; font-size: .98rem; }
  .faq-body { padding: 0 1.1rem 1.1rem; }

  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
  .site-footer ul { gap: .1rem; }
  .site-footer ul a { display: inline-block; padding: .35rem 0; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .feature-row { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .hero-actions, .cta-actions, .form-actions { flex-direction: column; align-items: stretch; }
  .site-brand span small { display: none; }
}

@media (max-width: 380px) {
  .wrap, .site-header-inner { padding-inline: 1rem; }
  h2.title { font-size: 1.6rem; }
  .page-hero h1 { font-size: 1.85rem; }
  .card, .step, .feature-row, .panel, .form-panel, .quote, .plan { padding: 1.1rem; }
  .plan-badge { left: 1.1rem; }
  .price-tag { font-size: 1.8rem; }
}