/* ============================================================
   inqelo marketing site — home page
   @docs [[docs/Systems/Marketing Website/Patterns/inqelo Marketing Site Design Standard]]
   Page-specific rules only; tokens, buttons and the header/nav +
   footer chrome live in static/site.css, loaded first by the
   base template. Hand-authored responsive rebuild of the Claude
   Design export "inqelo Landing Page". Mobile-first; the ≥1024px
   breakpoint reproduces the export's desktop values exactly.
   ============================================================ */

/* ---- Icon font: Material Symbols Rounded (filled), self-hosted
   subset for this page's glyphs: balance / calculate / call / chat /
   checklist / group / my_location / paid / public / send /
   trending_up. Regenerate via the Google Fonts css2 API
   (icon_names=…) if new glyphs are needed. ---------------------- */
@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("assets/material-symbols-rounded-subset.woff2") format("woff2");
}
.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

/* ---- Reveal on scroll (motion per the design standard) ------ */
[data-reveal] {
  transition: opacity .62s var(--ease-out), transform .62s var(--ease-out);
}
[data-reveal].is-hidden { opacity: 0; transform: translateY(20px); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal].is-hidden { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ---- Shared page primitives --------------------------------- */
.h-accent { color: var(--green-600); }

.section-lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--gray-600);
  margin-top: 20px;
}
.section-lede + .section-lede { margin-top: 15px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-size: 16px;
  font-weight: 600;
  color: var(--green-700);
}
.link-arrow:hover { color: var(--green-500); }

/* Icon tiles follow the site's card-icon treatment
   (features .feature-card__icon); stat rows use the circular
   variant (how .loop__stat-icon). */
.icon-disc {
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 50%;
  background: var(--green-50);
  color: var(--green-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-disc--stat {
  width: 66px;
  height: 66px;
  color: var(--green-600);
}
.icon-disc .material-symbols-rounded { font-size: 28px; }
.icon-disc--stat .material-symbols-rounded { font-size: 32px; }

/* Section headings share the export's type treatment; payoff,
   getting and cta override size/leading below. */
.problem h2, .solution h2, .payoff h2, .getting h2, .faq h2 {
  font-size: clamp(28px, 6vw, 46px);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin: 16px 0 0;
  color: var(--ink-900);
}

/* ============================================================
   Hero — deep green band, copy left, poker table art right
   ============================================================ */
.hero {
  background: #11311c;
  position: relative;
  overflow: hidden;
}
.hero__ghost-a { left: -70px; bottom: -90px; width: 300px; height: 300px; border-radius: 36px; background: rgba(255, 255, 255, .05); transform: rotate(18deg); }
.hero__ghost-b { right: 120px; top: -70px; width: 210px; height: 210px; border-radius: 26px; background: rgba(255, 255, 255, .05); transform: rotate(24deg); }
.hero__outline { left: 37%; top: 40px; width: 110px; height: 110px; border-radius: 20px; border: 2px solid rgba(255, 255, 255, .12); transform: rotate(16deg); }
.hero__amber { left: 44%; bottom: 42px; width: 44px; height: 44px; border-radius: 9px; background: var(--amber-500); opacity: .85; transform: rotate(26deg); }
.hero__ring-square { right: 44px; bottom: 120px; width: 54px; height: 54px; border-radius: 11px; border: 2px solid var(--green-300); opacity: .5; transform: rotate(12deg); }
.hero__dots-a { right: 5%; top: 52px; width: 96px; height: 78px; background-image: radial-gradient(rgba(255, 255, 255, .55) 1.5px, transparent 1.6px); background-size: 16px 16px; opacity: .2; }
.hero__dots-b { left: 30px; bottom: 130px; width: 84px; height: 64px; background-image: radial-gradient(rgba(255, 255, 255, .55) 1.5px, transparent 1.6px); background-size: 16px 16px; opacity: .16; }

.hero__grid {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  position: relative;
  z-index: 1;
}
/* The copy is split either side of the art so that on phones the poker
   table sits directly under the headline, lede and platform pills. The
   buttons and the free-credits note follow it. */
.hero__copy {
  padding: 44px 20px 8px;
  position: relative;
  z-index: 2;
}
.hero__actions {
  padding: 0 20px 8px;
  position: relative;
  z-index: 2;
}
.hero h1 {
  font-size: clamp(34px, 8.5vw, 62px);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.04;
  color: #fff;
}
.hero__h-accent { color: #85cb8b; }
.hero__lede {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
  margin-top: 22px;
  max-width: 470px;
}
/* Destination platforms. The marks are third-party trademarks, so they
   sit on white pills rather than being recoloured to the brand palette —
   which also keeps them legible on the deep green band. */
.hero__platforms {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}
.hero__platforms-label {
  /* Own row on tight phones so the two pills can still pair up. */
  flex: 0 0 100%;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}
.hero__platform {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink-900);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}
.hero__platform img { display: block; height: 18px; width: auto; }
@media (min-width: 480px) {
  .hero__platforms { gap: 10px; }
  .hero__platforms-label { flex: none; }
  .hero__platform { padding: 8px 15px; font-size: 14px; }
}
.hero__ctas {
  display: flex;
  gap: 13px;
  margin-top: 30px;
  align-items: center;
  flex-wrap: wrap;
}
.hero__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  line-height: 1.5;
  max-width: 380px;
}
.hero__note svg { flex: none; margin-top: 1px; color: #85cb8b; }
.hero__art { position: relative; align-self: end; }
.hero__art img {
  display: block;
  width: 100%;
  margin-top: 24px;
  filter: drop-shadow(0 24px 26px rgba(0, 0, 0, .4));
}
@media (min-width: 700px) {
  .hero__copy,
  .hero__actions { padding-left: 40px; padding-right: 40px; }
}
@media (min-width: 1024px) {
  /* Two-column again: the art returns to the right of the copy and spans
     both copy rows, so the desktop hero reads exactly as it did before the
     phone reorder. align-content keeps the left column vertically centred
     against the taller art. */
  .hero__grid {
    grid-template-columns: minmax(420px, 0.82fr) 1.18fr;
    grid-template-areas: "copy art" "actions art";
    align-content: center;
  }
  .hero__copy { grid-area: copy; padding: 72px 24px 0 64px; }
  .hero__actions { grid-area: actions; padding: 0 24px 88px 64px; }
  .hero__art { grid-area: art; }
  /* Bleed the art's hard-cropped bottom edge past the section edge so
     the visible scene sits higher without exposing the crop line. */
  .hero__art img { margin-top: 0; margin-bottom: -36px; }
}

/* ============================================================
   Problem — warm paper band, copy left, blind-bets art right
   ============================================================ */
.problem {
  background: #fbf9f7;
  border-top: 1px solid #ece8df;
  position: relative;
  overflow: hidden;
}
.problem__circle-a { top: -88px; left: -64px; width: 300px; height: 300px; border-radius: 50%; background: #eef2e6; }
.problem__dots-a { left: 26px; bottom: 36px; width: 86px; height: 96px; background-image: radial-gradient(var(--gray-300) 1.6px, transparent 1.7px); background-size: 16px 16px; opacity: .5; }
.problem__dots-b { right: 90px; top: 44px; width: 84px; height: 104px; background-image: radial-gradient(var(--gray-300) 1.6px, transparent 1.7px); background-size: 16px 16px; opacity: .5; }
.problem__tri-a { right: 44px; top: 30px; }
.problem__tri-b { right: 46%; bottom: 44px; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 21px solid var(--amber-500); transform: rotate(20deg); }
.problem__circle-b { right: 60px; bottom: 18px; width: 452px; height: 452px; border-radius: 50%; background: #eef2e6; opacity: .6; }
.problem__band-a { right: 20px; bottom: 0; width: 600px; height: 224px; background: linear-gradient(135deg, transparent 47%, #eef1e6 47%, #eef1e6 61%, transparent 61%); opacity: .7; }
.problem__band-b { right: 210px; bottom: 0; width: 430px; height: 150px; background: linear-gradient(135deg, transparent 46%, #e6ecda 46%, #e6ecda 60%, transparent 60%); opacity: .6; }

.problem__grid {
  max-width: 1360px;
  margin: 0 auto;
  padding: 8px 20px 0;
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  gap: 24px;
  position: relative;
  z-index: 1;
}
.problem__copy {
  position: relative;
  z-index: 2;
  padding: 40px 0 8px;
  align-self: center;
}
.problem__copy .section-lede { max-width: 470px; }
.problem__art {
  position: relative;
  justify-self: center;
  align-self: end;
  width: 100%;
  max-width: 720px;
}
.problem__art img {
  display: block;
  width: 100%;
  filter: drop-shadow(0 20px 22px rgba(21, 36, 43, .12));
  position: relative;
  z-index: 1;
}
@media (min-width: 700px) {
  .problem__grid { padding-left: 40px; padding-right: 40px; }
}
@media (min-width: 1024px) {
  .problem__grid { padding: 40px 40px 40px 64px; grid-template-columns: 0.92fr 1.08fr; gap: 44px; }
  .problem__copy { padding: 40px 0 64px; }
  .problem__art { margin-bottom: -40px; }
}

/* ============================================================
   Solution — sage band, centred head, reveal art, 4 verb cards
   ============================================================ */
.solution {
  background: #e9ede0;
  position: relative;
  overflow: hidden;
}
.solution__circle-a { left: -70px; top: -50px; width: 250px; height: 250px; border-radius: 50%; background: #e4efd8; opacity: .6; }
.solution__circle-b { right: -64px; top: -88px; width: 300px; height: 300px; border-radius: 50%; background: #e4efd8; }
.solution__dots-a { left: 30px; top: 300px; width: 84px; height: 104px; background-image: radial-gradient(var(--green-300) 1.6px, transparent 1.7px); background-size: 16px 16px; opacity: .45; }
.solution__dots-b { right: 70px; bottom: 46px; width: 104px; height: 74px; background-image: radial-gradient(var(--green-300) 1.6px, transparent 1.7px); background-size: 16px 16px; opacity: .45; }
.solution__wedge { left: 12%; bottom: 26px; width: 0; height: 0; border-left: 32px solid transparent; border-right: 32px solid transparent; border-bottom: 54px solid #d8ecca; transform: rotate(-14deg); }
.solution__tri { right: 16%; top: 64px; }

.solution__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 56px 20px 56px;
  text-align: center;
  position: relative;
  z-index: 1;
}
/* Content blocks layer above the art's backdrop disc — positioned
   decorations otherwise paint over stacked mobile columns. */
.solution__head, .solution__cards, .solution__cta { position: relative; z-index: 1; }
.solution__head .section-lede { max-width: 620px; margin-left: auto; margin-right: auto; }
.solution__art {
  position: relative;
  max-width: 980px;
  margin: 24px auto 0;
}
.solution__disc {
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: min(430px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f2f5ea;
  opacity: .7;
  z-index: 0;
}
.solution__art img {
  position: relative;
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  filter: drop-shadow(0 22px 22px rgba(21, 36, 43, .14));
  z-index: 1;
}
.solution__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 28px;
  text-align: center;
}
.solution__card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  text-align: left;
}
.solution__card h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-strong);
}
.solution__card p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin-top: 6px;
}
.solution__cta {
  margin-top: 36px;
  display: flex;
  justify-content: center;
}
@media (min-width: 480px) {
  .solution__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 700px) {
  .solution__inner { padding-left: 40px; padding-right: 40px; }
}
@media (min-width: 1024px) {
  .solution__inner { padding-top: 88px; padding-bottom: 80px; }
  .solution__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================
   Payoff — cream band, art left, copy right, stat cards below
   ============================================================ */
.payoff {
  background: #fbf8f1;
  border-top: 1px solid #ece8df;
  position: relative;
  overflow: hidden;
}
.payoff__circle { left: 40px; top: 76px; width: 400px; height: 400px; border-radius: 50%; background: #eef2e6; opacity: .6; }
.payoff__band-a { left: 0; bottom: 210px; width: 560px; height: 220px; background: linear-gradient(135deg, transparent 48%, #eef1e6 48%, #eef1e6 62%, transparent 62%); opacity: .75; }
.payoff__band-b { left: 170px; bottom: 240px; width: 440px; height: 158px; background: linear-gradient(135deg, transparent 46%, #e6ecda 46%, #e6ecda 60%, transparent 60%); opacity: .65; }
.payoff__dots-a { left: 34px; top: 98px; width: 78px; height: 96px; background-image: radial-gradient(var(--gray-300) 1.6px, transparent 1.7px); background-size: 16px 16px; opacity: .5; }
.payoff__tri-a { left: 330px; top: 62px; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 20px solid var(--green-400); transform: rotate(12deg); opacity: .85; }
.payoff__dots-b { right: 64px; top: 48px; width: 110px; height: 76px; background-image: radial-gradient(var(--gray-300) 1.6px, transparent 1.7px); background-size: 18px 18px; opacity: .5; }
.payoff__tri-b { right: 40px; top: 130px; width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 23px solid var(--amber-500); }

.payoff__grid {
  max-width: 1300px;
  margin: 0 auto;
  padding: 48px 20px 24px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 32px;
  position: relative;
  z-index: 1;
}
.payoff__copy { order: 1; }
.payoff__art { order: 2; position: relative; width: 100%; max-width: 620px; justify-self: center; }
.payoff__ground {
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  width: 88%;
  height: 44px;
  background: radial-gradient(ellipse at center, rgba(21, 36, 43, .16) 0%, rgba(21, 36, 43, 0) 65%);
  border-radius: 50%;
}
.payoff__art img {
  position: relative;
  display: block;
  width: 100%;
  filter: drop-shadow(0 22px 22px rgba(21, 36, 43, .12));
  z-index: 1;
}
.payoff h2 {
  font-size: clamp(27px, 5.5vw, 40px);
  letter-spacing: -0.026em;
  line-height: 1.14;
}
.payoff__copy .section-lede { max-width: 520px; }

.payoff__stats-wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 32px 20px 56px;
  position: relative;
  z-index: 1;
}
.payoff__case {
  max-width: 720px;
  margin: 0 auto 30px;
  text-align: center;
}
.payoff__case h3 {
  font-size: clamp(21px, 3.8vw, 27px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.18;
  color: var(--ink-900);
  margin: 10px 0 12px;
}
.payoff__case p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-600);
}
.payoff__disclaimer {
  max-width: 880px;
  margin: 24px auto 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: #8a938c;
}
.payoff__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.payoff__stat {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 26px 28px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.payoff__stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--green-600);
  letter-spacing: -0.02em;
  line-height: 1;
}
.payoff__stat-label {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-900);
  margin-top: 6px;
  line-height: 1.25;
}
.payoff__stat-sub {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--gray-600);
  margin-top: 5px;
}
@media (min-width: 700px) {
  .payoff__grid, .payoff__stats-wrap { padding-left: 40px; padding-right: 40px; }
}
@media (min-width: 1024px) {
  .payoff__grid { padding-top: 72px; padding-bottom: 32px; grid-template-columns: 1.02fr 0.98fr; gap: 56px; }
  .payoff__art { order: 1; }
  .payoff__copy { order: 2; }
  .payoff__stats-wrap { padding-bottom: 80px; }
  .payoff__stats { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Getting started — white band, copy left, free-seat art right
   ============================================================ */
.getting {
  background: var(--white);
  position: relative;
  overflow: hidden;
}
.getting__circle-a { right: -64px; top: -88px; width: 300px; height: 300px; border-radius: 50%; background: #eef2e6; }
.getting__circle-b { left: -60px; bottom: -70px; width: 220px; height: 220px; border-radius: 50%; background: var(--green-50); opacity: .5; }
.getting__tri-a { left: 44px; bottom: 44px; width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 23px solid var(--amber-500); }
.getting__tri-b { right: 42px; bottom: 260px; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 21px solid var(--amber-500); transform: rotate(20deg); }
.getting__dots { right: 48%; top: 60px; width: 84px; height: 104px; background-image: radial-gradient(var(--gray-300) 1.6px, transparent 1.7px); background-size: 16px 16px; opacity: .5; }
.getting__circle-c { right: 40px; bottom: 180px; width: 452px; height: 452px; border-radius: 50%; background: #eef2e6; opacity: .6; }
.getting__band-a { right: 0; bottom: 160px; width: 600px; height: 224px; background: linear-gradient(135deg, transparent 47%, #eef1e6 47%, #eef1e6 61%, transparent 61%); opacity: .7; }
.getting__band-b { right: 190px; bottom: 160px; width: 430px; height: 150px; background: linear-gradient(135deg, transparent 46%, #e6ecda 46%, #e6ecda 60%, transparent 60%); opacity: .6; }

.getting__grid {
  max-width: 1360px;
  margin: 0 auto;
  padding: 56px 20px 0;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 24px;
  position: relative;
  z-index: 1;
}
.getting__copy { position: relative; z-index: 2; }
.getting h2 {
  font-size: clamp(28px, 6vw, 44px);
  line-height: 1.12;
}
.getting__copy .section-lede { max-width: 520px; }
.getting__steps {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.step-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-strong);
}
.step-chip svg { color: var(--green-700); flex: none; }
.getting__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  color: var(--gray-600);
  font-size: 14px;
  line-height: 1.5;
}
.getting__note svg { flex: none; margin-top: 1px; color: var(--green-700); }
.getting__art {
  position: relative;
  justify-self: center;
  align-self: end;
  width: 100%;
  max-width: 620px;
}
.getting__art img {
  position: relative;
  display: block;
  width: 100%;
  filter: drop-shadow(0 20px 22px rgba(21, 36, 43, .12));
  z-index: 1;
}
@media (min-width: 700px) {
  .getting__grid { padding-left: 40px; padding-right: 40px; }
}
@media (min-width: 1024px) {
  .getting__grid { padding: 80px 40px 24px 64px; grid-template-columns: 0.95fr 1.05fr; gap: 44px; }
  .getting__art { margin-bottom: -24px; }
}

/* ============================================================
   FAQ — paper band; copy + art on the left, answer cards right
   ============================================================ */
.faq {
  background: #fbf9f7;
  border-top: 1px solid #ece8df;
  position: relative;
  overflow: hidden;
}
.faq__dots { right: 56px; top: 44px; width: 96px; height: 64px; background-image: radial-gradient(var(--gray-300) 1.6px, transparent 1.7px); background-size: 17px 17px; opacity: .5; }

.faq__grid {
  max-width: 1300px;
  margin: 0 auto;
  padding: 56px 20px 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "copy" "cards" "art";
  gap: 28px;
  position: relative;
  z-index: 1;
}
.faq__copy { grid-area: copy; position: relative; z-index: 1; }
.faq__copy .section-lede { max-width: 440px; }
.faq__cards {
  grid-area: cards;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  z-index: 1;
}
.faq__card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.faq__card h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-strong);
}
.faq__card p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin-top: 8px;
}
.faq__art {
  grid-area: art;
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 12px auto 0;
  align-self: end;
}
.faq__art-disc {
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  width: min(400px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #eef2e6;
  opacity: .7;
  z-index: 0;
}
.faq__art-tri-a { left: 4px; top: 30px; }
.faq__art-tri-b { right: -20px; top: 130px; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 21px solid var(--amber-500); transform: rotate(18deg); }
.faq__art-dots { left: -50px; bottom: 40px; width: 92px; height: 112px; background-image: radial-gradient(var(--gray-300) 1.6px, transparent 1.7px); background-size: 16px 16px; opacity: .5; }
.faq__art img {
  position: relative;
  display: block;
  width: 100%;
  filter: drop-shadow(0 20px 22px rgba(21, 36, 43, .12));
  z-index: 1;
}
@media (min-width: 700px) {
  .faq__grid { padding-left: 40px; padding-right: 40px; }
}
@media (min-width: 1024px) {
  .faq__grid {
    padding: 64px 40px 88px;
    grid-template-columns: 0.95fr 1.05fr;
    grid-template-areas: "copy cards" "art cards";
    grid-template-rows: auto 1fr;
    gap: 0 48px;
  }
  /* Slightly larger and pulled further past the section edge so the
     figures sit higher and crop at the knees, not the shins. */
  .faq__art { max-width: 560px; margin: 24px auto -118px; padding-top: 40px; }
  .faq__art-tri-a { left: -34px; }
}

/* ============================================================
   Final CTA — deep green closing band, cash-out art
   ============================================================ */
.cta {
  background: var(--green-800);
  position: relative;
  overflow: hidden;
}
.cta__ghost-a { left: -70px; bottom: -90px; width: 300px; height: 300px; border-radius: 36px; background: rgba(255, 255, 255, .05); transform: rotate(18deg); }
.cta__ghost-b { right: 120px; top: -70px; width: 210px; height: 210px; border-radius: 26px; background: rgba(255, 255, 255, .05); transform: rotate(24deg); }
.cta__outline { left: 40%; top: 34px; width: 120px; height: 120px; border-radius: 20px; border: 2px solid rgba(255, 255, 255, .12); transform: rotate(16deg); }
.cta__square-a { right: 52px; bottom: 56px; width: 70px; height: 70px; border-radius: 14px; background: var(--green-400); opacity: .55; transform: rotate(20deg); }
.cta__amber { left: 46%; bottom: 44px; width: 46px; height: 46px; border-radius: 9px; background: var(--amber-500); opacity: .85; transform: rotate(26deg); }
.cta__ring-square { right: 250px; top: 70px; width: 54px; height: 54px; border-radius: 11px; border: 2px solid var(--green-300); opacity: .5; transform: rotate(12deg); }
.cta__dots { right: 410px; bottom: 30px; width: 96px; height: 78px; background-image: radial-gradient(rgba(255, 255, 255, .55) 1.5px, transparent 1.6px); background-size: 16px 16px; opacity: .2; }
.cta__square-b { left: 47%; top: 70px; width: 96px; height: 96px; border-radius: 18px; background: var(--green-400); opacity: .5; transform: rotate(22deg); }

.cta__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px 20px 0;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.cta h2 {
  font-size: clamp(28px, 6.5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: #fff;
}
.cta__h-accent { color: var(--green-300); }
.cta__copy { max-width: 520px; }
.cta__sub {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .84);
  margin-top: 16px;
}
.cta__ctas {
  display: flex;
  gap: 13px;
  margin: 26px 0 16px;
  flex-wrap: wrap;
}
.cta__note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 4px;
  color: rgba(255, 255, 255, .6);
  font-size: 13px;
  line-height: 1.45;
}
.cta__note svg { flex: none; margin-top: 1px; color: var(--green-300); }
.cta__art {
  width: min(100%, 400px);
  margin: 20px auto -2px;
  flex: none;
  position: relative;
  z-index: 1;
}
.cta__art img {
  display: block;
  width: 100%;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .35));
}
.cta__art-disc {
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: min(440px, 96%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  z-index: 0;
}
.cta__art-ground {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 82%;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 65%);
  z-index: 0;
}
@media (min-width: 1024px) {
  .cta__inner {
    padding: 34px 64px 0;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: 40px;
  }
  .cta__copy { padding-bottom: 110px; }
  .cta__art { width: 500px; margin: 0 0 -2px; }
}