@charset "UTF-8";
:root {
  /* ---- Background arc -------------------------------------------------
     The six values of the page's colour sequence, in order down the page.
     Only the hero interpolates; every other boundary is a hard break.
     Retune the arc here and nowhere else.                               */
  --bg-hero-top: #FFFFFF;
  --bg-hero-fold: #F5F7FB;
  --bg-how-it-works: #8080FF;
  --bg-use-cases: #FFFFFF;
  --bg-features: #F5F7FB;
  --bg-deep: #1B2559;
  /* ---- Brand ---- */
  --navy: #1B2559;
  --purple: #8080FF;
  /* TRIAL — darkened so the white CTA label clears WCAG. The old #2ABF55 put
     white at 2.42:1, failing even the 3:1 large-text bar the 18px/700 label
     qualifies for (SPEC-CHANGELOG §9.2).
     Once the CTA also sits on navy (Block #8) the colour is squeezed from two
     sides: white-on-green wants it darker, green-on-navy wants it lighter and
     needs 3:1 to stay a distinguishable object. The window is roughly
     #22A047 to #1C883A; the whole scale was re-derived inside it, because the
     old hover and press values are darker than this rest state and would have
     inverted the interaction.
     Revert = restore the three values above this comment's replacements. */
  --green: #1F9440; /* label 3.91:1 · on navy 3.69:1 */
  --green-hover: #1C883A; /* label 4.53:1 · on navy 3.18:1 */
  --green-press: #1B8038; /* label 5.01:1 · on navy 2.88:1, momentary */
  /* Body-size green. Same relationship --link has to --purple: the brand
     value is a surface colour and fails badly as small text, so emphasis at
     reading size uses this instead. 5.42:1 on white, 5.05:1 on the tint. */
  --green-text: #1A7A33;
  /* ---- Surfaces ---- */
  --white: #FFFFFF;
  --tint: #F5F7FB;
  /* ---- Type ---- */
  --font-body: 'Assistant', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-accent: 'Archivo Narrow', 'Arial Narrow', system-ui, sans-serif;
  /* ---- Text ---- */
  --text-body: #494950;
  --text-muted: #767676;
  /* Extension content text. Dropdown items and the header CTA label. */
  --text-dark: #323232;
  /* ---- Text on navy -----------------------------------------------------
     Wherever #1B2559 is the ground — Block #8, the footer, and the FAQ's
     navy cards since §13. Every light-surface text token fails on it:
     --link 2.79:1, --link-hover 2.11:1, --text-muted 3.18:1,
     --green-text 2.66:1. Headings take --white (14.43:1); body copy takes
     the token below (10.76:1), so the §6.5 problem does not repeat here.

     rgba rather than the composited #DDDEE6 on purpose: it tracks the
     surface, so retuning --bg-deep keeps the relationship instead of
     silently changing the ratio. */
  --text-on-navy: rgba(255, 255, 255, 0.85);
  /* Decorative hairline between repeating units. 1.44:1 composited — well
     under 1.4.11's 3:1, which does not apply: it conveys nothing that the
     heading structure does not already carry.
     UNUSED as of §13: the FAQ hairlines this was added for are gone, replaced
     by cards. Kept only in case the footer wants a rule between navy groups.
     If the footer ships without one, delete this — a token with no consumer
     and no pending consumer is the phantom --header-max shape again. */
  --rule-on-navy: rgba(255, 255, 255, 0.12);
  /* ---- Links at body size ---- */
  --link: #5C5CE0;
  --link-hover: #4A4AC4;
  /* Links on navy are --white plus a permanent underline, with hover carried
     by text-decoration-thickness rather than colour — white has no brighter
     value to move to, and dimming it reads as disabled.
     The underline is the ENTIRE 1.4.1 compliance mechanism here, not
     reinforcement: white against the 85% body copy measures 1.34:1, where the
     criterion wants 3:1 or a non-colour cue. It can never be removed as
     visual tidying — the same argument §7.4 had to make for .card__link,
     which is scoped to that class and is not a site-wide rule.
     UNEXERCISED: the FAQ contains no links. The footer is the first place
     this ships, and nothing on the page proves it until then. */
  --link-on-navy: var(--white);
  /* ---- Layout ---------------------------------------------------------
     --gutter  keeps content off the viewport edge; sits OUTSIDE the
               max-width, so the content box is exactly --content-max on
               large screens.
     --channel is the centre gap between hero / How It Works columns.
     The two are independent: below 1024px the columns stack and there is
     no centre gap for the gutter to match.                              */
  /* px, deliberately: this is a screen-real-estate ceiling, not a reading
     measure, and it should not grow when the visitor enlarges their text. */
  --content-max: 1200px;
  /* The wide container, used by .container--wide on the header and How It
     Works. Settled layout, not an experiment: the strongly-coloured bands
     run wider than the white and near-white ones, so the difference reads
     as a pattern rather than as variance.
     Single retune point — set this to 1200px and the differential
     disappears everywhere with no markup change. See SPEC-CHANGELOG §1.3. */
  --content-max-wide: 1400px;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --channel: clamp(1.5rem, 3vw, 3rem);
  /* Fixed header height. Drives the hero's top padding, the dropdown panels'
     attachment point and every anchor target's scroll-margin, so they can
     never drift apart. Raised 0.5rem from 4.25rem / 3.75rem. */
  --header-h: 4.75rem;
  /* Header height + 0.75rem of breathing room. The 0.75rem is the gap below
     the header, not a correction for its height — it stays 0.75rem when the
     header grows, which is the whole point of deriving it. */
  --anchor-offset: calc(var(--header-h) + 0.75rem);
}

@media (max-width: 1023px) {
  :root {
    --header-h: 4.25rem;
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
  overflow-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@font-face {
  font-family: "Assistant";
  src: url("/fonts/Assistant.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Narrow";
  src: url("/fonts/ArchivoNarrow.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-body);
  background-color: var(--white);
}

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

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

.container {
  width: min(100% - var(--gutter) * 2, var(--content-max));
  margin-inline: auto;
}

.container--wide {
  width: min(100% - var(--gutter) * 2, var(--content-max-wide));
}

.btn--cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17.5rem;
  padding: 1rem 2.5rem;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
  text-align: center;
  text-decoration: none;
  background-color: var(--green);
  border: 0;
  border-radius: 1.875rem;
  box-shadow: 0 2px 8px rgba(31, 148, 64, 0.3);
  cursor: pointer;
  transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.btn--cta:hover {
  background-color: var(--green-hover);
  box-shadow: 0 4px 12px rgba(31, 148, 64, 0.4);
  transform: scale(1.02);
}
.btn--cta:active {
  background-color: var(--green-press);
  box-shadow: 0 1px 4px rgba(31, 148, 64, 0.3);
  transform: scale(0.98);
}
@media (max-width: 767px) {
  .btn--cta {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn--cta:hover,
  .btn--cta:active {
    transform: none;
  }
}
.btn--header {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  padding: 0.725rem 1.328125rem;
  font-family: var(--font-body);
  font-size: 0.975rem;
  font-weight: 550;
  line-height: 1;
  color: var(--text-dark);
  white-space: nowrap;
  text-decoration: none;
  background-color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 1.5rem;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.btn--header:hover {
  background-color: var(--tint);
  border-color: rgba(255, 255, 255, 0.5);
}
.btn--header:active {
  background-color: #EDEFF3;
  transition-duration: 50ms;
}

.btn--header__logo {
  width: 1.35rem;
  height: 1.35rem;
}

.card {
  position: relative;
  padding: 1.875rem;
  background-color: var(--tint);
  border: 1px solid rgba(27, 37, 89, 0.06);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.card:hover, .card:focus-within {
  border-color: rgba(128, 128, 255, 0.45);
  box-shadow: 0 6px 20px rgba(27, 37, 89, 0.1);
  transform: translateY(-2px);
}
.card:focus-within {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}
@media (max-width: 767px) {
  .card {
    padding: 1.375rem;
  }
}

.card__icon {
  display: block;
  margin-bottom: 1.125rem;
  color: var(--purple);
}
.card__icon svg {
  width: 3rem;
  height: 3rem;
  stroke-width: 1.5;
}
@media (max-width: 767px) {
  .card__icon svg {
    width: 2.5rem;
    height: 2.5rem;
  }
}

.card__heading {
  margin-bottom: 0.625rem;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--navy);
}

.card__body {
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-body);
}
@media (max-width: 1023px) {
  .card__body {
    max-width: 65ch;
  }
}

.card__link {
  position: static;
  font-weight: 600;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card__link:hover {
  color: var(--link-hover);
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 12.5rem;
  padding: 0;
  background-color: var(--navy);
  border-radius: 0 0 0.875rem 0.875rem;
  box-shadow: 0 10px 24px -6px rgba(27, 37, 89, 0.18);
  opacity: 0;
  transform: translateY(-0.25rem);
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}
.dropdown.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown__link {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.625rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--white);
  border-bottom: 1px solid var(--white);
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.dropdown__link:last-child {
  border-radius: 0 0 0.875rem 0.875rem;
  border-bottom: 0;
}
@media (min-width: 1024px) and (max-width: 1280px) {
  .dropdown__link {
    font-size: 0.875rem;
  }
}
.dropdown__link:hover {
  background-color: var(--white);
  color: var(--navy);
}

@media (max-width: 1023px) {
  .dropdown {
    position: static;
    min-width: 0;
    padding: 0 0 0.5rem;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .dropdown__link {
    padding-left: 1rem;
    color: rgba(255, 255, 255, 0.75);
    border-radius: 0;
    border-bottom: 0;
  }
  .dropdown__link:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--white);
  }
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  background-color: var(--navy);
  z-index: 1000;
}

.header--scrolled {
  /* stylelint-disable-next-line block-no-empty */
}

.header__inner {
  display: flex;
  align-items: center;
  height: 100%;
}

/* ---------- Logo + wordmark ---------- */
.header__brand {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  flex: 0 0 auto;
  margin-right: 2.625rem;
  text-decoration: none;
}
@media (min-width: 1024px) and (max-width: 1280px) {
  .header__brand {
    margin-right: 2rem;
  }
}

.header__logo {
  width: auto;
  height: 2.7625rem;
}
@media (max-width: 1023px) {
  .header__logo {
    width: 2.25rem;
    height: 2.25rem;
  }
}

.header__wordmark {
  font-family: var(--font-body);
  font-size: 1.70625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}
@media (max-width: 1023px) {
  .header__wordmark {
    font-size: 1.4125rem;
  }
}

/* ---------- Navigation ---------- */
@media (min-width: 1024px) {
  .nav {
    align-self: stretch;
  }
}

.nav__items {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1024px) {
  .nav__items {
    height: 100%;
    align-items: stretch;
  }
}
@media (min-width: 1024px) and (max-width: 1280px) {
  .nav__items {
    gap: 1.75rem;
  }
}

.nav__item {
  position: relative;
}
@media (min-width: 1024px) {
  .nav__item {
    display: flex;
    align-items: center;
    height: 100%;
  }
}

.nav__entry {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  font-family: var(--font-accent);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 150ms ease;
}
.nav__entry:hover {
  color: var(--white);
}
@media (min-width: 1024px) and (max-width: 1280px) {
  .nav__entry {
    font-size: 0.875rem;
  }
}

.nav__entry--active {
  color: var(--white);
  font-weight: 600;
  padding-bottom: 4px;
  border-bottom: 2px solid;
  border-image: linear-gradient(to right, var(--green), var(--purple)) 1;
}

.nav__chevron {
  display: inline-flex;
  transition: transform 200ms ease;
}
.nav__chevron svg {
  width: 1rem;
  height: 1rem;
}

[aria-expanded=true] > .nav__chevron {
  transform: rotate(180deg);
}

/* ---------- Secondary CTA / hamburger ---------- */
.header__cta {
  margin-left: auto;
}
@media (max-width: 1023px) {
  .header__cta {
    display: none;
  }
}

.header__hamburger {
  display: none;
  margin-left: auto;
  padding: 0.25rem;
  color: var(--white);
  background: none;
  border: 0;
  cursor: pointer;
}
@media (max-width: 1023px) {
  .header__hamburger {
    display: inline-flex;
  }
}
.header__hamburger svg {
  width: 1.5rem;
  height: 1.5rem;
}

.header__hamburger-icon--close {
  display: none;
}

[aria-expanded=true] > .header__hamburger-icon--open {
  display: none;
}

[aria-expanded=true] > .header__hamburger-icon--close {
  display: block;
}

/* ---------- Touch: minimal list ----------
   The full overlay specified in Block #2 (focus trap, green CTA) is
   deferred — its contents depend on sections that do not exist yet.
   This is the same nav markup restyled as a simple stacked list. */
@media (max-width: 1023px) {
  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: 0.5rem 0 1.5rem;
    background-color: var(--navy);
    display: none;
  }
  .nav.is-open {
    display: block;
  }
  .nav__items {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(100% - var(--gutter) * 2, var(--content-max));
    margin-inline: auto;
  }
  .nav__entry {
    width: 100%;
    padding: 0.75rem 0;
    font-size: 1.0625rem;
  }
  .nav__item--dropdown .nav__entry {
    cursor: default;
  }
  .nav__chevron {
    display: none;
  }
}
.hero {
  display: flex;
  align-items: center;
  min-height: 90vh;
  padding-top: calc(var(--header-h) + 2.5rem);
  padding-bottom: 2.5rem;
  background: linear-gradient(to bottom, var(--bg-hero-top) 0%, var(--bg-hero-top) calc(100% - 9.375rem), var(--bg-hero-fold) 100%);
}
@media (max-width: 1023px) {
  .hero {
    padding-top: calc(var(--header-h) + 3.5rem);
    padding-bottom: 3.5rem;
  }
}

.hero__inner {
  display: grid;
  grid-template-columns: 42fr 58fr;
  gap: var(--channel);
  align-items: start;
}
@media (max-width: 1023px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

.hero__centerpiece {
  container-type: inline-size;
}

.hero__conversion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
@media (max-width: 767px) {
  .hero__conversion {
    align-items: center;
    text-align: center;
  }
}

/* ================= Block #1 — centerpiece ================= */
.hero__h1 {
  max-width: 35rem;
  margin-bottom: 1.5rem;
  font-size: clamp(2.375rem, 4.2vw, 3.375rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy);
}
@media (min-width: 1024px) {
  .hero__h1 {
    margin-top: -0.192em;
  }
}

.hero__h1-line {
  display: block;
}

.hero__h2 {
  margin-bottom: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy);
  white-space: nowrap;
  font-size: min(2.125rem, 6.6cqi);
}

.hero__rotator {
  display: inline-block;
  min-width: 9.75em;
  color: var(--purple);
  transition: opacity 350ms ease-in-out, transform 350ms ease-in-out;
}

.hero__rotator.is-out {
  opacity: 0;
  transform: translateY(-0.5rem);
}

.hero__subhead {
  max-width: 30rem;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-body);
}

/* ================= Block #3 — conversion zone ================= */
.hero__ethics {
  margin-bottom: 1.75rem;
  font-size: 0.9375rem;
  font-weight: 550;
  letter-spacing: 0.033em;
  color: var(--text-muted);
}

.hero__ethics-term {
  font-weight: 700;
  color: var(--green-text);
}

.hero__cta {
  margin-bottom: 0.875rem;
}

.hero__screenshot {
  width: 100%;
  border: 1px solid rgba(27, 37, 89, 0.08);
  border-radius: 0.625rem;
  box-shadow: 0 8px 32px rgba(27, 37, 89, 0.12);
}
@media (max-width: 1023px) {
  .hero__screenshot {
    max-width: 40rem;
  }
}

.how-it-works {
  padding: 5.625rem 0;
  background-color: var(--bg-how-it-works);
  scroll-margin-top: var(--anchor-offset);
}
@media (max-width: 767px) {
  .how-it-works {
    padding: 3.5rem 0;
  }
}

.how-it-works__heading {
  margin-bottom: 2.75rem;
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
  text-align: center;
}

.how-it-works__columns {
  display: grid;
  grid-template-columns: 57fr 43fr;
  gap: calc(var(--channel) * 2);
  align-items: center;
}
@media (max-width: 1023px) {
  .how-it-works__columns {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

/* ---------- Video ---------- */
.video {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background-color: #000;
  border-radius: 0.875rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.video__player {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.video__play::before {
  content: "";
  position: absolute;
  width: 4.25rem;
  height: 4.25rem;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  transition: background-color 150ms ease;
}
.video__play:hover::before {
  background-color: var(--white);
}
.video__play svg {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  margin-left: 0.25rem;
  color: var(--navy);
  fill: currentColor;
  stroke: none;
}
@media (max-width: 1280px) {
  .video__play svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}
@media (max-width: 767px) {
  .video__play svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}
.video__play.is-hidden {
  display: none;
}

/* ---------- 3-step walkthrough ---------- */
.steps {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step__number {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.2);
}
@media (max-width: 767px) {
  .step__number {
    font-size: 2.375rem;
  }
}

.step__heading {
  margin-bottom: 0.4375rem;
  font-size: 1.3125rem;
  font-weight: 700;
  color: var(--white);
}

.step__description {
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 1023px) {
  .step__description {
    max-width: 68ch;
  }
}

.use-cases {
  padding: 5.625rem 0;
  background-color: var(--bg-use-cases);
  scroll-margin-top: var(--anchor-offset);
}
@media (max-width: 767px) {
  .use-cases {
    padding: 3.75rem 0;
  }
}

.use-cases__heading {
  margin-bottom: 1.125rem;
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
  text-align: center;
}

.use-cases__framing {
  max-width: 44rem;
  margin: 0 auto 3.25rem;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-body);
  text-align: center;
}

@media (max-width: 767px) {
  .use-cases__framing-line {
    display: block;
  }
}

.use-cases__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2vw, 2rem);
  align-items: stretch;
}
@media (max-width: 1023px) {
  .use-cases__cards {
    grid-template-columns: 1fr;
    gap: 1.375rem;
  }
}

.features {
  padding: 5.625rem 0;
  background-color: var(--bg-features);
  scroll-margin-top: var(--anchor-offset);
}
@media (max-width: 767px) {
  .features {
    padding: 3.75rem 0;
  }
}

/* ---------- Heading and intro ---------- */
.features__heading {
  margin-bottom: 1.125rem;
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
  text-align: center;
}

.features__intro {
  max-width: 65.625rem;
  margin: 0 auto 3.75rem;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-body);
  text-align: center;
}

/* ---------- Feature blocks ---------- */
.features__blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--channel);
  align-items: stretch;
}
@media (max-width: 1023px) {
  .features__blocks {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }
}

.feature {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.feature__heading {
  margin-bottom: 0.625rem;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
}

.feature__body {
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-body);
}
@media (max-width: 1023px) {
  .feature__body {
    max-width: 65ch;
    margin-inline: auto;
  }
}

.feature__link {
  color: var(--link);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 150ms ease;
}
.feature__link:hover {
  color: var(--link-hover);
}

.feature__visual {
  width: 100%;
  max-width: 36rem;
  margin-top: auto;
  margin-inline: auto;
  border: 1px solid rgba(27, 37, 89, 0.06);
  border-radius: 0.625rem;
}

/* ---------- No-limits band ---------- */
.no-limits {
  margin-top: 3.75rem;
  padding: 2.75rem;
  background-color: var(--white);
  border: 1px solid rgba(27, 37, 89, 0.06);
  border-radius: 0.75rem;
}
@media (max-width: 1023px) {
  .no-limits {
    padding: 2.125rem;
  }
}
@media (max-width: 767px) {
  .no-limits {
    padding: 1.625rem;
  }
}

.no-limits__heading {
  margin-bottom: 1.75rem;
  font-size: 1.5625rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
  text-align: center;
}

.no-limits__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1023px) {
  .no-limits__items {
    grid-template-columns: 1fr;
    gap: 1.625rem;
  }
}

.no-limits__icon {
  display: inline-flex;
  vertical-align: middle;
  color: var(--purple);
}
.no-limits__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 1.5;
}

.no-limits__item-heading {
  margin-bottom: 0.375rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
}

.no-limits__item-body,
.no-limits__close {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-body);
}

.no-limits__close {
  margin-bottom: 2rem;
}

.closing {
  padding: 6rem 0;
  background-color: var(--bg-deep);
  text-align: center;
}
@media (max-width: 1023px) {
  .closing {
    padding: 4.875rem 0;
  }
}
@media (max-width: 767px) {
  .closing {
    padding: 3.75rem 0;
  }
}

.closing__statement {
  max-width: 45rem;
  margin: 0 auto 2.75rem;
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--white);
}
@media (max-width: 1023px) {
  .closing__statement {
    font-size: 2rem;
  }
}
@media (max-width: 767px) {
  .closing__statement {
    margin-bottom: 2.25rem;
    font-size: 1.6875rem;
  }
}

.closing__line {
  display: block;
}
@media (max-width: 767px) {
  .closing__line {
    display: inline;
  }
}

.closing__cta, .closing__cta:hover, .closing__cta:active {
  box-shadow: none;
}

.faq {
  padding: 5.625rem 0;
  background-color: var(--bg-use-cases);
  scroll-margin-top: var(--anchor-offset);
}
@media (max-width: 1023px) {
  .faq {
    padding: 4.5rem 0;
  }
}
@media (max-width: 767px) {
  .faq {
    padding: 3.5rem 0;
  }
}

.faq__heading {
  margin-bottom: 3.25rem;
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
  text-align: center;
}
@media (max-width: 1023px) {
  .faq__heading {
    margin-bottom: 2.75rem;
    font-size: 2rem;
  }
}
@media (max-width: 767px) {
  .faq__heading {
    margin-bottom: 2.25rem;
    font-size: 1.6875rem;
  }
}

.faq__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(1.25rem, 2vw, 2rem);
}
@media (max-width: 767px) {
  .faq__list {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
}

.faq__item {
  padding: 1.875rem;
  background-color: var(--bg-deep);
  border-radius: 0.75rem;
}
@media (max-width: 1023px) {
  .faq__item {
    padding: 1.5rem;
  }
}
@media (max-width: 767px) {
  .faq__item {
    padding: 1.375rem;
  }
}

.faq__question {
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--white);
}
@media (max-width: 767px) {
  .faq__question {
    font-size: 1.1875rem;
  }
}

.faq__answer {
  max-width: 68ch;
  margin-top: 0.8125rem;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-on-navy);
}
@media (max-width: 767px) {
  .faq__answer {
    font-size: 1rem;
  }
}

/*# sourceMappingURL=main.css.map */