/* =====================================================================
   Rewafin — landing page
   ===================================================================== */

/* ------------------------------- tokens ------------------------------ */
:root {
  --cream: #F7F6EF;
  --white: #fff;

  --ink: #005A5F;
  /* display green            */
  --ink-deep: #005A5F;
  /* buttons                  */
  --teal: #1B8474;
  /* accent green             */
  --muted: #71807B;
  /* body copy                */
  --muted-2: #9AA5A1;
  /* meta / eyebrow           */

  --line: #EAEAE1;
  --line-2: #F0F0E8;

  --yellow: #FAF873;
  --yellow-hi: #F4FA5E;
  --mint: #DDF2E4;
  --mint-2: #CDECDC;
  --lav: #DEE5FB;
  --lime: #EEF7B4;

  --wrap: 1198px;
  --wrap-pad: 24px;
  /* the gutter that defines the content column */
  /* 1150px of content once the 24px gutters are off — the Figma measure */
  --header-h: 104px;

  /* section rhythm — every vertical gap between sections comes from these
     three steps so the page keeps one consistent beat */
  --sec: clamp(78px, 6vw, 128px);
  /* standard gap between sections   */
  --sec-sm: clamp(52px, 5.5vw, 80px);
  /* tighter, where two blocks pair  */
  --sec-lg: clamp(104px, 11vw, 168px);
  /* major break, e.g. hero -> next  */
  /* measured off the Figma frame: the white page card reads 45.6px across
     four probes (both top corners, a bottom corner, two separate captures).
     --r-lg still covers .stage, whose gradient edge is too soft to measure. */
  --r-page: 46px;
  --r-lg: 34px;
  --r-md: 24px;
  --r-sm: 16px;

  --ease: cubic-bezier(.22, .9, .26, 1);
  /* one family throughout; the two tokens stay so display vs body intent
     is still readable at each call site */
  --font-d: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-b: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

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

/* the header is sticky at --header-h, so anything the nav or footer links to
   with a #fragment would otherwise come to rest underneath it. Applied to
   every id inside <main> because the jump targets are a mix of <section>,
   <article> and plain wrappers, and scroll-margin is inert until something
   actually scrolls the element into view. */
main [id] {
  scroll-margin-top: calc(var(--header-h) + 18px)
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-b);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* `clip` — not `hidden`: hidden would make body a scroll container and
     silently break every `position:sticky` inside it. */
  overflow-x: clip;
}

h1,
h2,
h3,
p,
ul,
figure {
  margin: 0
}

ul {
  padding: 0;
  list-style: none
}

a {
  color: inherit;
  text-decoration: none
}

img,
svg {
  display: block;
  max-width: 100%
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--wrap-pad)
}

.muted {
  color: var(--muted-2)
}

/* ------------------------------ buttons ------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -.01em;
  /* Figma: rounded rects, not pills — the corner arc finishes a quarter of
     the way down (12.2px on the 50px button, 7.8px on the 36px small one) */
  padding: 12px 26px;
  border-radius: 12px;
  white-space: nowrap;
  transition: transform .35s var(--ease), background .25s, box-shadow .35s var(--ease), border-color .25s;
  will-change: transform;
}

.btn--sm {
  padding: 8px 20px;
  font-size: 14px;
  border-radius: 8px
}

.btn--primary {
  background: var(--ink-deep);
  color: #fff;
  box-shadow: 0 1px 2px rgba(11, 58, 49, .28)
}

.btn--primary:hover {
  background: #0d4a3e;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(11, 58, 49, .6)
}

.btn--ghost {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line)
}

.btn--ghost:hover {
  transform: translateY(-2px);
  border-color: #DCDCD0;
  box-shadow: 0 10px 22px -14px rgba(14, 63, 53, .4)
}

.btn__arrow {
  display: inline-block;
  transition: transform .35s var(--ease)
}

.btn:hover .btn__arrow {
  transform: translateX(4px)
}

.btn__play {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: .75
}

.btn__play svg {
  width: 9px;
  height: 9px
}

/* --------------------------- announcement ---------------------------- */
.announce {
  position: relative;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 9px 56px;
  background: var(--yellow);
  color: #15302A;
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
  overflow: hidden;
}

/* inline flow, not flex — so the sparkle rides with the first word
   instead of being pushed onto its own line when the copy wraps */
.announce__text {
  max-width: none
}

.announce__spark {
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: -3px;
  margin-right: 7px
}

.announce__close {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(21, 48, 42, .24);
  color: #15302A;
  transition: background .2s, border-color .2s;
}

.announce__close:hover {
  background: rgba(21, 48, 42, .08);
  border-color: rgba(21, 48, 42, .4)
}

.announce__close svg {
  width: 12px;
  height: 12px
}

.announce.is-closed {
  display: none
}

/* ------------------------------- header ------------------------------ */
.header {
  position: sticky;
  top: 0;
  z-index: 110;
  /* fixed flow box: the scrolled state shrinks .header__inner, and without
     this the sticky header's own height would shrink with it and jump every
     section below it up by 56px the moment is-stuck toggles */
  height: var(--header-h);
  /* .header itself is just the sticky sizing container — it never paints a
     fill of its own, at the top OR once scrolled. The on-scroll surface
     lives on .header__inner below it instead. */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}

.header.is-stuck {
  border-bottom-color: rgba(14, 75, 63, .09);
}

.header__inner {
  position: relative;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  transition: height .34s var(--ease), padding .34s var(--ease), background .3s, backdrop-filter .3s;
}

/* transparent at the top of the page — Figma shows the hero/hero-gradient
   straight through the header until you scroll — then it picks up this
   surface to read against */
.header.is-stuck .header__inner {
  background: rgba(247, 246, 239, .92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
}

/* ---- scrolled state, desktop ----
   Figma swaps that full-width band for a narrower bar that floats on just
   the content column and collapses the header to 58px. Measured off the
   scrolled frames: the bar runs 134.4 -> 1305.6 (1172 wide) against content
   at 167.8 -> 1283.3, and the logo/CTA sit at the SAME x in both states —
   so the fill has to be a backdrop that never touches layout (a ::before),
   not .header__inner's own background from the rule above. */
@media (min-width:1041px) {
  .header.is-stuck {
    border-bottom-color: transparent;
    /* .header itself stays at the full var(--header-h), so the empty space
       above the shrunk .header__inner would otherwise block clicks into
       whatever now sits underneath it */
    pointer-events: none;
  }

  .header.is-stuck .header__inner {
    height: 58px;
    /* the bar edge is at --wrap-pad; this pushes the logo and CTA 26px inside
       it instead of sitting flush against it */
    padding-inline: calc(var(--wrap-pad) + 26px);
    pointer-events: auto;
    /* the mobile rule's own fill would cover the whole (wrap-padded) inner
       box edge-to-edge; desktop wants the narrower floating pill below
       instead, so switch it off here */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* absolute, so it is not laid out as a flex item of .header__inner */
  .header.is-stuck .header__inner::before {
    /* inset by the wrap gutter so the bar is exactly the content column —
       any other value and the header overhangs every section below it */
    content: "";
    position: absolute;
    inset: 0 var(--wrap-pad);
    z-index: -1;
    background: rgba(250, 251, 246, .92);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-radius: 0 0 20px 20px;
    /* sampled off the Figma frame: the shadow bottoms out 12.3 levels below
       the surface behind it. */
    box-shadow: 0 7px 18px -11px rgba(14, 63, 53, .16);
  }
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.03em
}

.logo__mark {
  height: 20px;
  flex: none
}

.logo__mark svg {
  width: 100%;
  height: 100%
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.1vw, 30px);
  font-size: 14.5px;
  font-weight: 500;
  color: #2F423C
}

/* direct children only: the mega-menu links below are also `.nav a` and
   must not pick up the underline */
.nav>a {
  position: relative;
  padding: 6px 0;
  transition: color .2s
}

.nav>a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 2px;
  height: 1.5px;
  background: var(--teal);
  border-radius: 2px;
  transition: right .35s var(--ease);
}

.nav>a:hover {
  color: var(--ink)
}

.nav>a:hover::after {
  right: 0
}

/* the page you are on reads as the resting state of the hover above, so the
   underline is already drawn and stays drawn */
.nav>a[aria-current="page"] {
  color: var(--ink)
}

.nav>a[aria-current="page"]::after {
  right: 0
}

/* --------------------- header: right-hand link + CTA ------------------ */
.header__end {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 34px)
}

.header__contact {
  font-size: 14.5px;
  font-weight: 500;
  color: #2F423C;
  transition: color .2s
}

.header__contact:hover {
  color: var(--teal)
}

/* ------------------------- header: mega menu ------------------------- */
/* the trigger has to read exactly like the plain nav links beside it */
.nav__item {
  position: relative
}

.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  color: inherit;
  padding: 6px 0;
  transition: color .2s;
}

.nav__trigger:hover,
.nav__item.is-open .nav__trigger,
/* the underline above is scoped to `.nav > a`, and a trigger sits one level
   deeper inside .nav__item — so the current section reads through colour */
.nav__item.is-current .nav__trigger {
  color: var(--ink)
}

.nav__caret {
  display: block;
  width: 10px;
  height: 6px;
  color: #7C8C87;
  transform-origin: 50% 55%
}

.nav__caret svg {
  display: block;
  width: 100%;
  height: 100%
}

.nav__item.is-open .nav__caret {
  color: var(--teal)
}

.mega {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  width: min(752px, calc(100vw - 48px));
  /* the pointer has to cross the gap between the header and the panel
     without the menu closing — this padding is that bridge, so keep it */
  padding-top: 12px;
}

.mega[hidden] {
  display: none
}

.mega__inner {
  display: grid;
  grid-template-columns: 358px minmax(0, 1fr);
  border-radius: 18px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(14, 63, 53, .06), 0 28px 60px -28px rgba(14, 63, 53, .28);
  border: 1px solid rgba(14, 75, 63, .07);
}

.mega__list {
  background: #F7F7F4;
  padding: 18px 16px 20px;
  border-right: 1px solid rgba(14, 75, 63, .06)
}

.mega__label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 0 10px;
  margin-bottom: 12px;
}

.mega__list ul {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.megaitem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 11px 12px;
  border-radius: 12px;
  transition: background .25s var(--ease);
}

.megaitem::after {
  display: none
}

/* the .nav underline must not follow it here */
.megaitem__icon {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border-radius: 11px;
  background: #E7EFEA;
  color: var(--teal);
  flex: none;
  transition: background .25s, color .25s;
}

.megaitem__icon svg {
  width: 20px;
  height: 20px
}

.megaitem__txt {
  display: block;
  min-width: 0
}

.megaitem__txt b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em
}

.megaitem__txt em {
  display: block;
  font-style: normal;
  font-size: 11.4px;
  line-height: 1.45;
  color: var(--muted-2);
  margin-top: 2px
}

.megaitem__go {
  display: block;
  width: 8px;
  height: 12px;
  color: #A9B5B1;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .25s, transform .25s var(--ease)
}

.megaitem__go svg {
  display: block;
  width: 100%;
  height: 100%
}

.megaitem:hover,
.megaitem.is-active {
  background: #EDF2EE
}

.megaitem:hover .megaitem__icon,
.megaitem.is-active .megaitem__icon {
  background: #fff;
  color: var(--teal)
}

.megaitem:hover .megaitem__go,
.megaitem.is-active .megaitem__go {
  opacity: 1;
  transform: none
}

/* ---- preview pane ---- */
.mega__preview {
  position: relative;
  padding: 26px 28px 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, #EEF3FD 0%, rgba(238, 243, 253, 0) 60%),
    linear-gradient(150deg, #FBFCFE 0%, #F6FAF7 100%);
}

/* the panes are stacked so the card never reflows as the copy swaps */
.mpane {
  grid-area: 1/1;
  max-width: 330px
}

.mega__preview>.mpane {
  position: absolute;
  top: 26px;
  left: 28px;
  right: 28px
}

.mpane:not(.is-active) {
  visibility: hidden;
  opacity: 0
}

.mpane h3 {
  font-family: var(--font-d);
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.3
}

.mpane p {
  margin-top: 9px;
  font-size: 12.6px;
  line-height: 1.6;
  color: var(--muted)
}

/* ---- flat dashboard stand-in, clipped by the panel like the Figma shot ---- */
.mega__shot {
  position: absolute;
  left: 28px;
  right: -40px;
  top: 118px;
  height: 220px;
  border-radius: 12px 0 0 0;
  background: #fff;
  border: 1px solid rgba(14, 75, 63, .08);
  border-right: 0;
  border-bottom: 0;
  box-shadow: 0 -1px 24px -12px rgba(14, 63, 53, .3);
  overflow: hidden;
}

.mshot__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(14, 75, 63, .07)
}

.mshot__bar i {
  width: 34px;
  height: 6px;
  border-radius: 3px;
  background: rgba(14, 75, 63, .1)
}

.mshot__bar i:first-child {
  width: 52px;
  background: rgba(14, 75, 63, .18)
}

.mshot__body {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 12px
}

.mshot__side {
  display: flex;
  flex-direction: column;
  gap: 7px
}

.mshot__side i {
  height: 6px;
  border-radius: 3px;
  background: rgba(14, 75, 63, .08)
}

.mshot__side i:first-child {
  background: var(--mint-2)
}

.mshot__main {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0
}

.mshot__tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px
}

.mshot__tiles b {
  height: 34px;
  border-radius: 8px;
  background: #F2F7F4;
  border: 1px solid rgba(14, 75, 63, .06)
}

.mshot__tiles b:nth-child(2) {
  background: #EDF4FB
}

.mshot__tiles b:nth-child(3) {
  background: #F6FAE6
}

.mshot__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px
}

.mshot__row i {
  height: 8px;
  border-radius: 4px;
  background: var(--mint-2)
}

.mshot__row i:nth-child(3) {
  background: var(--lime)
}

.mshot__row i:nth-child(4) {
  background: rgba(14, 75, 63, .09)
}

.mshot__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px
}

.mshot__cards u {
  height: 62px;
  border-radius: 8px;
  background: #F4F8F5;
  border: 1px solid rgba(14, 75, 63, .06)
}

.mshot__cards u:last-child {
  background: #F1F5FC
}

.burger {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  padding: 11px 9px;
  gap: 5px;
  flex-direction: column;
  justify-content: center
}

.burger span {
  display: block;
  height: 1.8px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s
}

.burger[aria-expanded="true"] span:first-child {
  transform: translateY(3.4px) rotate(45deg)
}

.burger[aria-expanded="true"] span:last-child {
  transform: translateY(-3.4px) rotate(-45deg)
}

.mobilenav {
  position: fixed;
  inset: 0 0 auto;
  top: calc(var(--header-h) + 0px);
  z-index: 105;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  padding: 18px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 17px;
  /* JS caps this to the space under the header; on a short screen the
     links scroll inside the sheet instead of running off it */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* without it the page reads as still-live under a half-height dropdown,
   and the hero's buttons show through right below the sheet's edge */
.navscrim {
  position: fixed;
  inset: 0;
  z-index: 104;
  background: rgba(16, 32, 28, .38);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.navscrim[hidden] {
  display: none
}

/* `top` is set in JS to the header's current viewport Y (below the
   announcement at scroll 0, at 0 once the bar has scrolled away). */
html.nav-open .header {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--cream)
}

.mobilenav a {
  padding: 11px 2px
}

.mobilenav a[aria-current="page"] {
  color: var(--teal)
}

.mobilenav .btn {
  margin-top: 12px;
  justify-content: center
}

/* `display:flex` above would otherwise beat the [hidden] attribute */
.mobilenav[hidden] {
  display: none
}

/* ------------------------ overview video modal ------------------------ */
/* Same scrim recipe and the same z-index band as the demo drawer — only one
   of the two can be open at a time, so they never stack. */
.videoscrim {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(11, 30, 26, .4);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.videoscrim[hidden] {
  display: none
}

html.video-open,
html.video-open body {
  overflow: hidden
}

.videomodal {
  position: fixed;
  inset: 0;
  z-index: 211;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  /* the scrim underneath takes the click, so the empty area around the card
     must not swallow it */
  pointer-events: none;
}

.videomodal[hidden] {
  display: none
}

.videomodal__card {
  position: relative;
  pointer-events: auto;
  width: min(1040px, 100%);
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  padding: clamp(20px, 2.6vw, 34px);
  border-radius: var(--r-lg);
  /* the drawer's blue -> lime -> mint gradient, so the two overlays read as
     the same surface */
  background:
    radial-gradient(130% 60% at 100% 0%, #EAF3FF 0%, rgba(234, 243, 255, 0) 55%),
    radial-gradient(120% 70% at 0% 100%, #EAF9D9 0%, rgba(234, 249, 217, 0) 58%),
    linear-gradient(165deg, var(--lav) 0%, var(--mint) 62%, var(--mint-2) 100%);
  box-shadow: 0 50px 100px -40px rgba(14, 63, 53, .55);
}

.videomodal__card::-webkit-scrollbar {
  display: none
}

.videomodal__close {
  position: absolute;
  top: clamp(16px, 1.7vw, 22px);
  right: clamp(16px, 1.7vw, 22px);
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(14, 75, 63, .14);
  color: var(--ink);
  transition: background .2s, border-color .2s, transform .3s var(--ease);
}

.videomodal__close:hover {
  background: #fff;
  border-color: rgba(14, 75, 63, .24);
  transform: rotate(90deg)
}

.videomodal__close svg {
  width: 14px;
  height: 14px
}

.videomodal__head {
  padding: 0 52px clamp(14px, 1.7vw, 20px) 2px
}

.videomodal__eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.videomodal__eyebrow b {
  color: #5B6B66;
  font-weight: 500
}

.videomodal__eyebrow .dot {
  padding: 0 2px
}

.videomodal__title {
  margin-top: 8px;
  font-family: var(--font-d);
  font-weight: 500;
  font-size: clamp(21px, 2.2vw, 28px);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
}

/* 16:9 box so the card never resizes when the metadata lands */
.videomodal__frame {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #0B1E1A;
  box-shadow: 0 24px 48px -30px rgba(11, 30, 26, .6);
}

.videomodal__player {
  width: 100%;
  height: 100%;
  /* `contain`, not `cover`: a real recording will not be exactly 16:9 and
     cropping a product walkthrough would cut off UI at the edges */
  object-fit: contain;
  background: #0B1E1A;
}

.videomodal__fallback {
  padding: 24px;
  color: #fff;
  font-size: 14px
}

.videomodal__fallback a {
  color: var(--yellow);
  text-decoration: underline
}

/* a short viewport is the one case where 16:9 plus the heading does not fit;
   drop the heading rather than shrink the picture */
@media (max-height: 520px) {
  .videomodal__head {
    display: none
  }
}

/* ------------------------- book a demo drawer ------------------------- */
.demoscrim {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(11, 30, 26, .4);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.demoscrim[hidden] {
  display: none
}

html.demo-open,
html.demo-open body {
  overflow: hidden
}

.demo {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 211;
  width: min(620px, 100vw);
  display: flex;
  flex-direction: column;
  /* same blue -> lime -> mint recipe as .stage, so the drawer reads as
     the same gradient language as the platform card */
  background:
    radial-gradient(130% 60% at 100% 0%, #EAF3FF 0%, rgba(234, 243, 255, 0) 55%),
    radial-gradient(120% 70% at 0% 100%, #EAF9D9 0%, rgba(234, 249, 217, 0) 58%),
    linear-gradient(165deg, var(--lav) 0%, var(--mint) 62%, var(--mint-2) 100%);
  box-shadow: -40px 0 90px -46px rgba(14, 63, 53, .55);
  transition: width .85s var(--ease);
}

.demo[hidden] {
  display: none
}

/* success takes the whole viewport for a moment, then auto-dismisses —
   the qualifier questions live in a side drawer, but the payoff earns the
   full stage */
.demo.is-success {
  left: 0;
  right: 0;
  width: 100vw;
}

.demo.is-success .demo__close {
  transition-delay: .15s
}

.demo.is-success .demo__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.demo.is-success .demo__head {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.demo.is-success .demo__body {
  margin-top: 0;
  width: 100%;
  max-width: 460px
}

.demo__close {
  position: absolute;
  top: 26px;
  right: 26px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(14, 75, 63, .14);
  color: var(--ink);
  transition: background .2s, border-color .2s, transform .3s var(--ease);
}

.demo__close:hover {
  background: #fff;
  border-color: rgba(14, 75, 63, .24);
  transform: rotate(90deg)
}

.demo__close svg {
  width: 14px;
  height: 14px
}

.demo__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 60px 48px 48px;
  padding-top: 28px;
  /* scroll still works on a short viewport, the track just never shows —
     a visible bar felt like chrome on what should read as one clean card */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.demo__scroll::-webkit-scrollbar {
  display: none
}

.demo__head h2 {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: clamp(23px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
  padding-right: 44px;
}

.demo__body {
  margin-top: 32px;
  position: relative
}

.demo__step[hidden] {
  display: none
}

.demo__step h3 {
  font-family: var(--font-d);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink-deep)
}

.demo__qgroup {
  margin-top: 22px
}

.demo__qlabel {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-deep);
  margin-bottom: 10px
}

.demo__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.demo__pill {
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid rgba(14, 75, 63, .12);
  background: #fff;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-deep);
  transition: background .2s, border-color .2s;
}

.demo__pill:hover {
  border-color: rgba(14, 75, 63, .3)
}

.demo__pill.is-active {
  background: var(--lime);
  border-color: var(--lime)
}

/* ---- contact form ---- */
.demo__formcard {
  background: #fff;
  border-radius: 18px;
  padding: 36px;
  margin-top: 22px;
  border: 1px solid rgba(11, 42, 36, .09);
  box-shadow: 0 22px 50px -34px rgba(11, 42, 36, .051);
}

.demo__fields {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.demo__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0
}

.demo__field--full {
  grid-column: 1 / -1
}

.demo__field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-deep)
}

.demo__field input {
  height: 46px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--cream);
  font: inherit;
  font-size: 14px;
  color: var(--ink-deep);
  transition: border-color .2s, background .2s, box-shadow .2s;
}

.demo__field input::placeholder {
  color: var(--muted-2)
}

.demo__field input:focus {
  outline: none;
  border-color: var(--teal);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(27, 132, 116, .14)
}

.demo__field input:invalid:not(:placeholder-shown) {
  border-color: #D9756B
}

.demo__submit {
  width: 100%;
  justify-content: center;
  margin-top: 18px
}

.demo__submit:disabled,
.demo__submit.is-loading {
  opacity: .72;
  cursor: wait;
  transform: none;
  background: var(--ink-deep);
  box-shadow: 0 1px 2px rgba(11, 58, 49, .28);
}

.demo__submit:disabled:hover,
.demo__submit.is-loading:hover {
  transform: none;
  background: var(--ink-deep);
}

.demo__submit-idle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.demo__submit-busy {
  display: none;
  align-items: center;
  gap: 9px;
}

.demo__submit.is-loading .demo__submit-idle,
.demo__submit-idle[hidden] {
  display: none;
}

.demo__submit.is-loading .demo__submit-busy {
  display: inline-flex;
}

.demo__submit-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: contactSpin .7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .demo__submit-spinner {
    animation: none
  }
}

.demo__error {
  text-align: center;
  margin-top: 12px;
}

.demo__qgroup.is-invalid .demo__qlabel {
  color: #B4483C;
}

.demo__qgroup.is-invalid .demo__pill {
  border-color: #D9756B;
}

@keyframes demoShake {

  0%,
  100% {
    transform: translateX(0)
  }

  20%,
  60% {
    transform: translateX(-6px)
  }

  40%,
  80% {
    transform: translateX(6px)
  }
}

.demo__formcard.is-shake {
  animation: demoShake .4s var(--ease)
}

/* ---- success ---- */
.demo__success {
  text-align: center;
  width: 100%
}

.demo__successcard {
  background: rgba(255, 255, 255, .6);
  border-radius: var(--r-md);
  padding: 52px 30px;
  margin-top: 22px;
  border: 1px solid rgba(14, 75, 63, .08);
  transition: padding .85s var(--ease);
}

.demo__checkwrap {
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--lime);
  color: #5C7A2E;
  display: grid;
  place-items: center;
  transition: width .85s var(--ease), height .85s var(--ease);
}

.demo__checkwrap svg {
  width: 22px;
  height: 22px
}

.demo__success h3 {
  margin-top: 22px;
  color: var(--ink);
  transition: font-size .85s var(--ease)
}

.demo__success p {
  margin-top: 10px;
  max-width: 320px;
  margin-inline: auto;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6
}

/* the full-screen takeover gets a bigger moment: larger card, bigger mark */
.demo.is-success .demo__successcard {
  padding: 72px 48px;
  margin-top: 0;
  box-shadow: 0 40px 90px -50px rgba(14, 63, 53, .4)
}

.demo.is-success .demo__checkwrap {
  width: 72px;
  height: 72px
}

.demo.is-success .demo__checkwrap svg {
  width: 30px;
  height: 30px
}

.demo.is-success .demo__success h3 {
  font-size: 26px
}

.demo.is-success .demo__success p {
  max-width: 360px;
  font-size: 14.5px
}

.demo__countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}

.demo__countdown-ring {
  position: relative;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
}

.demo.is-success .demo__countdown-ring {
  width: 60px;
  height: 60px;
}

.demo__countdown-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.demo__countdown-track,
.demo__countdown-progress {
  stroke-width: 2.4;
}

.demo__countdown-track {
  stroke: rgba(14, 75, 63, .12);
}

.demo__countdown-progress {
  stroke: var(--teal);
  stroke-linecap: round;
  stroke-dasharray: 97.4;
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

@keyframes demoCountRing {
  to {
    stroke-dashoffset: 97.4
  }
}

.demo__countdown-ring b {
  position: relative;
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -.03em;
  color: var(--ink-deep);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.demo__countdown-ring b.is-tick {
  animation: demoCountTick .4s var(--ease);
}

@keyframes demoCountTick {
  0% {
    transform: translateY(-5px);
    opacity: 0
  }

  100% {
    transform: none;
    opacity: 1
  }
}

.demo__countdown-copy {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted-2);
  letter-spacing: .01em;
}

@media (prefers-reduced-motion: reduce) {
  .demo__countdown-progress {
    animation: none
  }

  .demo__countdown-ring b.is-tick {
    animation: none
  }
}

@media (max-width:600px) {
  .demo {
    width: 100vw
  }

  .demo__scroll {
    padding: 52px 22px 36px
  }

  .demo__fields {
    grid-template-columns: 1fr
  }
}

/* ---------------------------- white canvas --------------------------- */
.canvas {
  background: var(--white);
  border-radius: var(--r-page);
  margin-inline: clamp(10px, 4.45vw, 64px);
  padding-bottom: var(--sec);
}

/* -------------------------------- hero ------------------------------- */
/* bottom gap is the WHOLE hero -> platform-card gap: .platform cancels its
   own sticky lead-in with a negative margin (see below), so what is set here
   is exactly what you see on first paint */
.hero {
  padding: clamp(72px, 8vw, 116px) 0 clamp(44px, 61vw, 61px)
}

.hero__inner {
  max-width: 900px;
  text-align: center
}

.hero__title {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: clamp(33px, 4.8vw, 60px);
  line-height: 62px;
  letter-spacing: -.035em;
  color: var(--ink);
}

.hero__title em {
  font-style: normal;
  color: var(--teal)
}

/* padding gives the masked reveal room for descenders (the g in "lending");
   the negative margin takes the space back so line spacing is unchanged */
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-bottom: .16em;
  margin-bottom: -.16em
}

.hero__title .line__i {
  display: block
}

.hero__sub {
  max-width: 624px;
  margin: 26px auto 0;
  color: var(--muted);
  font-size: 16.7px;
  line-height: 1.62;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 34px
}

/* =====================================================================
   PLATFORM — sticky scroll section
   ===================================================================== */
.platform {
  --panels: 3;
  /* height of .stage, which is fixed at a given breakpoint: the deck's
     min-height + both stage paddings + 120px of eyebrow and tab row. Only
     used to undo the centring slack below, so a few px of drift is harmless —
     but keep it in step if the card grows. */
  --stage-h: calc(396px + 2 * clamp(24px, 3vw, 40px) + 120px);
  /* Before it pins, the card's own lead-in inside the sticky (the header
     offset plus half the leftover centring space) reads as dead air under
     the hero, and it grows with the viewport. Pull the section up by exactly
     that much: the card then starts one --hero-padding below the buttons on
     every screen, and the pinned, centred state is untouched. */
  --lead: calc(var(--header-h) + max(0px, (100vh - var(--header-h) - var(--stage-h)) / 2));
  position: relative;
  margin-top: calc(-1 * var(--lead));
  /* 100vh of pinned viewport + one screenful of travel per panel.
     No padding here: the sticky child's travel must equal the trigger's
     scroll range exactly, or the last panel gets cut short. */
  height: calc(100vh + var(--panels) * 92vh);
  /* the negative margin above means this section's own (huge, mostly empty)
     box already geometrically overlaps the hero before you've scrolled a
     pixel — with default pointer-events it silently ate hover/clicks on the
     hero CTAs underneath. .stage re-enables events for the actual card. */
  pointer-events: none;
}

.platform__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--header-h);
  /* .platform is pulled up with a negative margin to sit under the hero's
     tail end (see the --lead comment above), so before this pins, its own
     full 100vh sticky box already geometrically overlaps the hero — including
     the empty space around .stage, which has no background of its own but
     still had default pointer-events:auto, silently swallowing hover/clicks
     on the hero CTAs underneath it. Let events pass through the empty area
     and only re-enable them on the actual visible card. */
  pointer-events: none;
}

.platform__sticky .stage {
  pointer-events: auto;
}

/* ---- gradient stage ---- */
.stage {
  position: relative;
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vh, 38px);
  background:
    radial-gradient(120% 90% at 6% 0%, #E3E9FD 0%, rgba(227, 233, 253, 0) 55%),
    radial-gradient(110% 90% at 92% 4%, #EFFAC2 0%, rgba(239, 250, 194, 0) 52%),
    radial-gradient(120% 120% at 50% 110%, #CFEEDD 0%, rgba(207, 238, 221, 0) 62%),
    linear-gradient(120deg, #E6ECFC 0%, #EAF6EE 46%, #F2FAD8 100%);
  box-shadow: 0 30px 70px -50px rgba(14, 75, 63, .5);
}

.stage__eyebrow {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.stage__eyebrow b {
  color: #5B6B66;
  font-weight: 500
}

.stage__eyebrow .dot {
  padding: 0 2px
}

/* ---- tabs ---- */
.tabs {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  padding-bottom: 56px;
}

.tab {
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -.01em;
  color: #6B7A75;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .42);
  transition: background .3s, color .3s;
}

.tab:hover {
  background: rgba(255, 255, 255, .75);
  color: var(--ink)
}

/* no shadow: it darkened the pill edge exactly where the stem meets it and
   split the two apart — the pill, the stem and the card read as one white
   shape only if nothing is drawn between them */
.tab.is-active {
  background: #fff;
  color: var(--ink);
}

/* white, not grey — it reads as the active pill extending a stem down into
   the card rather than as a divider drawn on the gradient */
/* no CSS transform here to centre it: GSAP animates `left` on this element
   and would clobber it. JS subtracts half the width instead. */
.tabs__connector {
  position: absolute;
  top: 36px;
  left: 0;
  width: 10px;
  height: 0;
  /* square ends: a radius pinches the stem away from the pill above and the
     card below, which is the join we are trying to make seamless */
  background: #fff;
  border-radius: 0;
  pointer-events: none;
}

/* ---- panel deck ---- */
.deck {
  position: relative;
  min-height: 396px;
  background: #fff;
  border-radius: var(--r-md);
  overflow: hidden;
}

.panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  visibility: hidden;
  opacity: 0;
}

.panel.is-active {
  visibility: visible;
  opacity: 1
}

.panel__copy {
  padding: clamp(26px, 3vw, 42px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  border-right: 1px solid var(--line-2);
}

.kicker {
  display: inline-block;
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 13.5px;
  color: #4C5C57;
  background: #F2F4F1;
  padding: 7px 15px;
  border-radius: 999px;
}

.panel__title {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: clamp(27px, 3.2vw, 42px);
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--ink);
  margin-top: 18px;
}

.panel__text {
  margin-top: 15px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.62
}

.learn {
  margin-top: 22px;
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  border-bottom: 1.5px solid var(--teal);
  padding-bottom: 4px;
  display: inline-flex;
  gap: 7px;
  align-items: center;
}

.learn span {
  transition: transform .35s var(--ease)
}

.learn:hover span {
  transform: translateX(4px)
}

/* the right half is a tinted well the mock card sits inside, so the mock
   reads as a screenshot placed on a surface rather than floating on white */
.panel__visual {
  padding: clamp(18px, 2vw, 26px);
  /* stretch, not center — the mock fills the well as in the design, with its
     own content sitting at the top of it */
  display: flex;
  align-items: stretch;
  background: #F7F8F6;
}

/* the platform card is large, so the shared mock pieces scale up inside it
   (mirrors the .feat__media block further down) */
.panel__visual .mock__head {
  margin-bottom: 16px
}

.panel__visual .mock__title {
  font-size: 14.5px
}

.panel__visual .mock__meta {
  font-size: 10px
}

.panel__visual .bar {
  height: 30px;
  border-radius: 9px
}

.panel__visual .bar::after {
  height: 6px;
  left: 9px
}

.panel__visual .chip {
  padding: 6px 10px
}

.panel__visual .chip span,
.panel__visual .chip b {
  font-size: 10.5px
}

.panel__visual .funnel {
  gap: 9px
}

.panel__visual .funnel__col {
  gap: 7px
}

.panel__visual .rule {
  padding: 10px 11px
}

.panel__visual .rules {
  gap: 8px
}

.panel__visual .rule__line {
  height: 7px
}

.panel__visual .pill {
  font-size: 9.5px;
  padding: 4px 9px
}

.panel__visual .stat3 b {
  font-size: 15px
}

.panel__visual .stat3 span {
  font-size: 10px
}

.panel__visual .chart {
  height: 118px
}

.panel__visual .score__val {
  font-size: 21px
}

.panel__visual .score__label {
  font-size: 11px
}

/* ---- one indicator per panel, sitting inside the left copy column;
       the active one fills as you scroll through its panel ---- */
.dashes {
  display: flex;
  gap: 6px;
  margin-top: 30px
}

.dash {
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: rgba(14, 75, 63, .14);
  overflow: hidden;
}

.dash b {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 2px;
  background: var(--teal)
}

/* =====================================================================
   MOCK UI (shared)
   ===================================================================== */
.mock {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 16px;
  box-shadow: 0 18px 34px -30px rgba(14, 75, 63, .5);
}

.mock--sm {
  padding: 13px;
  border-radius: 14px
}

.mock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px
}

.mock__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 13px;
  color: #33443F
}

.mock__title img {
  width: 16px;
  height: 16px;
  flex: none
}

.mock__meta {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--muted-2)
}

/* funnel */
.funnel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  align-items: start
}

.mock--sm .funnel {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px
}

.funnel__col {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: #F4F5F2;
  border-radius: 7px;
  padding: 5px 8px;
  margin-bottom: 2px;
}

.chip span {
  font-size: 9.5px;
  color: #6E7B77;
  font-weight: 500
}

.chip b {
  font-size: 9.5px;
  color: #33443F;
  font-weight: 500
}

.bar {
  display: block;
  height: 26px;
  border-radius: 8px;
  position: relative;
  background: var(--mint);
}

.mock--sm .bar {
  height: 20px;
  border-radius: 6px
}

.bar--lime {
  background: var(--lime)
}

.bar::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 58%;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .72);
}

.mock--sm .bar::after {
  height: 4px;
  left: 6px
}

/* score + track */
.score {
  margin-bottom: 14px
}

.score__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px
}

.score__label {
  font-size: 10.5px;
  color: #6E7B77;
  font-weight: 500
}

.score__val {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 19px;
  color: var(--ink);
  letter-spacing: -.02em
}

.track {
  height: 8px;
  border-radius: 5px;
  background: #F1F3F0;
  overflow: hidden
}

.track__fill {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 5px;
  background: linear-gradient(90deg, #BFE9D2, #E9F6A8)
}

/* rule rows */
.rules,
.alerts {
  display: flex;
  flex-direction: column;
  gap: 7px
}

.rule,
.alert {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #FAFBF9;
  border-radius: 9px;
  padding: 8px 10px
}

.rule__dot,
.alert>i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9FDCBB;
  flex: none
}

.rule__dot--warn,
.alert>i {
  background: #E4E96E
}

.rule__line {
  flex: 1;
  height: 6px;
  border-radius: 4px;
  background: #EBEEE9;
  max-width: var(--w)
}

.pill {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  flex: none;
}

.pill--pass {
  background: var(--mint);
  color: #2E6B55
}

.pill--flag {
  background: var(--lime);
  color: #67701F
}

.alerts {
  margin-top: 11px
}

/* three stats */
.stats3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 12px
}

.stat3 {
  background: #F6F8F5;
  border-radius: 9px;
  padding: 9px 10px
}

.stat3 b {
  display: block;
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -.02em
}

.stat3 span {
  font-size: 9.5px;
  color: var(--muted-2)
}

/* ledger */
.ledger {
  display: flex;
  flex-direction: column;
  gap: 7px
}

.led {
  display: flex;
  align-items: center;
  gap: 10px
}

.led__av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #EDF1EE;
  flex: none
}

.led__lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0
}

.led__lines span {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: #EDEFEB;
  width: var(--w)
}

.led__amt {
  height: 20px;
  border-radius: 6px;
  background: var(--mint);
  width: var(--w);
  max-width: 96px;
  flex: none
}

.led__amt--lime {
  background: var(--lime)
}

/* chart */
.chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 104px;
  margin-bottom: 4px
}

.chart i {
  flex: 1;
  height: var(--h);
  border-radius: 5px 5px 3px 3px;
  background: var(--mint);
  transform-origin: 50% 100%
}

.chart i.is-hot {
  background: var(--lime)
}

/* =====================================================================
   PROOF — bento
   ===================================================================== */
.sec-title {
  text-align: center;
  font-family: var(--font-d);
  font-weight: 500;
  font-size: clamp(25px, 3.2vw, 36px);
  line-height: 1.18;
  letter-spacing: -.032em;
  color: var(--ink);
}

.proof {
  padding: var(--sec) 0 var(--sec-sm)
}

.bento {
  margin-top: clamp(30px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.card {
  background: #fff;
  border-radius: var(--r-sm);
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid rgba(14, 75, 63, .055);
  box-shadow: 0 2px 3px rgba(14, 75, 63, .02);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -34px rgba(14, 75, 63, .55)
}

.card--hero {
  grid-column: span 2;
  display: flex;
  flex-direction: column
}

.big {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: clamp(44px, 5.6vw, 66px);
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--ink);
}

.big--sm {
  font-size: clamp(34px, 3.9vw, 46px)
}

.card__title {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 17.5px;
  letter-spacing: -.022em;
  color: var(--ink)
}

.card__text {
  margin-top: 13px;
  color: var(--muted);
  font-size: 13.8px;
  line-height: 1.62;
  max-width: 52ch
}

.card--hero .card__text {
  margin-top: 18px;
  max-width: 60ch
}

.metrics {
  margin-top: auto;
  padding-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
}

.card--hero .metrics {
  margin-top: 28px
}

.metric {
  padding: 15px 17px;
  border-right: 1px solid var(--line)
}

.metric:last-child {
  border-right: 0
}

.metric b {
  display: block;
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 15.5px;
  color: var(--ink);
  letter-spacing: -.02em
}

.metric span {
  font-size: 11.5px;
  color: var(--muted-2)
}

.card--yellow {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(180deg, #FEFFF4 0%, #FCFDB8 46%, #F5FA55 100%);
  border-color: rgba(14, 75, 63, .05);
}

.card--yellow .card__text {
  color: #4E5A38
}

.card--tint-b {
  background: linear-gradient(160deg, #fff 55%, #F6FAF7 100%)
}

.card--tint-c {
  background: linear-gradient(160deg, #fff 50%, #F8FBEE 100%)
}

/* =====================================================================
   SECTORS — horizontal accordion
   ===================================================================== */
.sectors {
  padding: var(--sec-sm) 0 var(--sec)
}

.sectors .sec-title {
  margin-bottom: clamp(30px, 4vw, 46px)
}

.sectors__row {
  display: flex;
  gap: 12px;
  align-items: stretch
}

.sector {
  position: relative;
  flex: 0 0 auto;
  width: calc((100% - 24px) * .22);
  min-height: 290px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid rgba(14, 75, 63, .055);
  overflow: hidden;
  cursor: pointer;
  transition: width .8s var(--ease), background .6s var(--ease), box-shadow .6s var(--ease);
}

.sector.is-active {
  width: calc((100% - 24px) * .56);
  cursor: default;
  background:
    radial-gradient(85% 120% at 0% 100%, #C9E7DF 0%, rgba(201, 231, 223, 0) 62%),
    linear-gradient(112deg, #D8E5F7 0%, #E8F3EC 44%, #FAFDF3 100%);
  box-shadow: 0 26px 50px -42px rgba(14, 75, 63, .6);
}

.sector__body {
  position: relative;
  z-index: 2;
  padding: clamp(20px, 2.2vw, 30px);
  max-width: 340px;
}

.sector__title {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.16;
  letter-spacing: -.03em;
  color: var(--ink);
  transition: font-size .6s var(--ease);
}

.sector.is-active .sector__title {
  font-size: clamp(21px, 2.2vw, 25px)
}

.sector__open {
  opacity: 0;
  pointer-events: none
}

.sector.is-active .sector__open {
  pointer-events: auto
}

.sector__text {
  margin-top: 14px;
  color: var(--muted);
  font-size: 13.4px;
  line-height: 1.6
}

.sector__list {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 9px
}

.sector__list li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  color: #54635E;
}

.sector__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8FA39C;
}

.sector__visual {
  position: absolute;
  right: -56px;
  bottom: -14px;
  z-index: 1;
  width: 378px;
  opacity: 0;
  pointer-events: none;
}

/* the mock bleeds off the card edge — this padding keeps its content
   inside the visible area so nothing meaningful gets cropped */
.sector__visual .mock {
  padding-right: 62px
}

.waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 0;
  height: 112px;
  opacity: 1;
  transition: opacity .5s var(--ease);
}

.waves svg {
  width: 100%;
  height: 100%
}

.sector.is-active .waves {
  opacity: 0
}


/* =====================================================================
   CORE FEATURES — sticky media, scroll-linked content
   ===================================================================== */
.features {
  padding: var(--sec-sm) 0 var(--sec)
}

.features__block + .features__block {
  margin-top: var(--sec-lg)
}

/* Product pages put a section title above .feat, so the home-page
   first-child padding reset never fires and --sec-sm stacks twice. */
.features__block > .sec-title {
  margin: 0 0 clamp(20px, 2.5vw, 32px)
}

/* per-product CTA sitting under a .feat block */
.features__cta {
  margin-top: clamp(20px, 2.5vw, 32px)
}

.features__block > .feat {
  padding-top: 0
}

.feat {
  --feat-gap: clamp(28px, 5.5vw, 80px);
  padding: var(--sec-sm) 0
}

/* the section already pads its own edges — without this the first and last
   blocks stack two paddings and open a gap half again as big as the rest */
.feat:first-child {
  padding-top: 0
}

.feat:last-child {
  padding-bottom: 0
}

.feat__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-d);
  font-weight: 600;
  font-size: clamp(21px, 2.2vw, 31.5px);
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: clamp(16px, 1.9vw, 26px);
}

.feat__eyebrow b {
  color: var(--teal);
  font-weight: 500
}

.feat__eyebrow i {
  width: 1px;
  height: .72em;
  background: #C6D0CC;
  display: block
}

.feat__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--feat-gap);
  /* must stay `stretch`: the media column has to be as tall as the text
     column, or the sticky column inside it has no travel and just scrolls by */
  align-items: stretch;
}

/* the eyebrow now lives inside this column (right above .feat__media), so
   the WHOLE column sticks as one unit — label and image travel together
   instead of the label scrolling off after its own short height */
.feat__mediacol {
  position: sticky;
  top: clamp(96px, 17vh, 168px);
  align-self: start;
}

.feat__mediacol .feat__eyebrow {
  margin-bottom: clamp(14px, 1.6vw, 20px)
}

.feat__media {
  /* .shot inside is position:absolute — this has to stay the containing
     block for it. It used to come along for free when .feat__media itself
     was position:sticky; moving sticky up to .feat__mediacol dropped it,
     so .shot fell through to .feat__mediacol as ITS containing block
     instead and positioned itself against the eyebrow+media box together
     rather than just the card, shifting every shot up and out of place. */
  position: relative;
  border-radius: var(--r-md);
  padding: clamp(16px, 1.8vw, 22px);
  aspect-ratio: 4/3.4;
  background:
    radial-gradient(95% 80% at 8% 4%, #DEE8FA 0%, rgba(222, 232, 250, 0) 62%),
    linear-gradient(148deg, #E1EAFA 0%, #E6F3EC 52%, #EFF8DE 100%);
  overflow: hidden;
}

.feat--rev .feat__mediacol {
  order: 2
}

.shot {
  position: absolute;
  inset: clamp(16px, 1.8vw, 22px);
  visibility: hidden;
  opacity: 0
}

.shot.is-active {
  visibility: visible;
  opacity: 1
}

.mock--flat {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0
}

/* the feature media card is far larger than the platform panel's mock,
   so the shared pieces scale up to fill it */
.feat__media .mock__head {
  margin-bottom: 62px
}

.feat__media .mock__title {
  font-size: 15px
}

.feat__media .mock__meta {
  font-size: 10.5px
}

.feat__media .funnel {
  gap: 10px
}

.feat__media .funnel__col {
  gap: 8px
}

.feat__media .bar {
  height: 32px;
  border-radius: 9px
}

.feat__media .bar::after {
  height: 6px;
  left: 10px
}

.feat__media .chip {
  padding: 7px 10px;
  margin-bottom: 4px
}

.feat__media .chip span,
.feat__media .chip b {
  font-size: 11px
}

.feat__media .rules,
.feat__media .alerts {
  gap: 9px
}

.feat__media .rule,
.feat__media .alert {
  padding: 11px 12px
}

.feat__media .rule__line {
  height: 7px
}

.feat__media .pill {
  font-size: 9.5px;
  padding: 4px 9px
}

.feat__media .stats3 {
  gap: 9px
}

.feat__media .stat3 {
  padding: 12px
}

.feat__media .stat3 b {
  font-size: 16px
}

.feat__media .stat3 span {
  font-size: 10.5px
}

.feat__media .ledger {
  gap: 10px
}

.feat__media .led__av {
  width: 26px;
  height: 26px
}

.feat__media .led__amt {
  height: 24px;
  max-width: 112px
}

.feat__media .chart {
  height: 140px
}

.feat__media .score__label {
  font-size: 11.5px
}

.feat__media .score__val {
  font-size: 22px
}

.feat__media .track {
  height: 10px
}

/* Figma: 140px between items, and a 120px drop before the FIRST item only
   (measured from the top of the media card) — so the list keeps no top padding */
.feat__list {
  display: flex;
  flex-direction: column;
  gap: clamp(72px, 9.72vw, 140px);
  padding: 0 0 clamp(6px, 2vw, 26px)
}

.feat__list>.fitem:first-child {
  margin-top: clamp(80px, 8.33vw, 120px)
}

.fitem {
  opacity: .34;
  transition: opacity .55s var(--ease);
}

.fitem.is-active {
  opacity: 1
}

.fitem__title {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: clamp(21.5px, 2.25vw, 26px);
  line-height: 1.24;
  letter-spacing: -.028em;
  color: var(--ink);
  max-width: 22ch;
}

.fitem__text {
  margin-top: 12px;
  color: var(--muted);
  font-size: 15.6px;
  line-height: 1.62;
  max-width: 44ch
}

.checks {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
}

.checks li {
  position: relative;
  padding-left: 20px;
  font-size: 14.1px;
  color: #54635E;
  line-height: 1.4;
}

.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 11px;
  height: 7px;
  border-left: 1.6px solid var(--teal);
  border-bottom: 1.6px solid var(--teal);
  transform: rotate(-45deg);
}

/* EMI schedule mock */
.emi {
  display: flex;
  flex-direction: column;
  gap: 9px
}

.emi li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 30px
}

.emi__m {
  font-size: 11px;
  color: var(--muted-2);
  width: 26px;
  flex: none
}

.emi__t {
  flex: 1;
  height: 6px;
  border-radius: 4px;
  background: rgba(14, 75, 63, .09);
  overflow: hidden;
  min-width: 0
}

.emi__t b {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 4px;
  background: var(--teal)
}

.emi__a {
  font-size: 11.5px;
  color: #33443F;
  font-weight: 600;
  flex: none
}

.emi__s {
  font-size: 10.5px;
  color: var(--muted-2);
  width: 30px;
  text-align: right;
  flex: none
}

.emi__s--due {
  color: #8A7A2E
}

/* ask-the-portfolio mock */
.ask {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.ask__q {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, .75);
  border-radius: 999px;
  padding: 9px 13px;
}

.ask__ico {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  flex: none
}

.ask__a {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0 3px
}

.ask__a span {
  display: block;
  height: 6px;
  border-radius: 4px;
  background: rgba(14, 75, 63, .11);
  width: var(--w)
}

/* =====================================================================
   AI — coverflow carousel
   ===================================================================== */
.ai {
  position: relative;
  /* off-centre slides park outside the container; clip them horizontally.
     `clip` (not `hidden`) so no scroll container is created. */
  overflow-x: clip;
  /* The wash has to reach into the news section, or the two read as two
     stacked blocks with a ruled line between them. The section paints an
     extra --ai-bleed of background below its content and then pulls the
     next section back up over it by the same amount, so the gradient
     travels further down the page WITHOUT moving anything. */
  --ai-bleed: clamp(110px, 13vw, 180px);
  padding: var(--sec) 0 calc(var(--sec) + var(--ai-bleed));
  margin-bottom: calc(-1 * var(--ai-bleed));
  /* sampled off the Figma frame: blue on the left, pink/mauve on the
     right, blending to lavender in the centre, fading to near-white lower
     in the section. Checked 7 rows top-to-bottom on both edges — no green
     or yellow-green appears anywhere, so the old bottom-left green radial
     and the linear layer's mint/yellow-green stops are both gone. */
  background:
    radial-gradient(62% 58% at 8% 0%, #C7D6FE 0%, rgba(199, 214, 254, 0) 62%),
    radial-gradient(55% 55% at 92% 0%, #E6D1EA 0%, rgba(230, 209, 234, 0) 60%),
    linear-gradient(160deg, #CCD8F5 0%, #E2DCF1 50%, #F4F2F9 100%);
}

/* the fade itself: cream dissolving up into the wash. The mid stops
   approximate an ease — a straight two-stop ramp against a gradient
   leaves a faint band where its slope changes. */
.ai::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--ai-bleed) + var(--sec));
  background: linear-gradient(to bottom,
      rgba(247, 246, 239, 0) 0%,
      rgba(247, 246, 239, .30) 32%,
      rgba(247, 246, 239, .72) 66%,
      var(--cream) 100%);
  pointer-events: none;
}

.ai__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1
}

.ai__title {
  text-align: center;
  font-family: var(--font-d);
  font-weight: 500;
  font-size: clamp(27px, 3.6vw, 40px);
  line-height: 1.17;
  letter-spacing: -.035em;
  color: #1B2C28;
}

.ai__title em {
  font-style: normal;
  color: #fff
}

.carousel {
  position: relative;
  width: 100%;
  margin-top: clamp(34px, 5vw, 58px);
}

.carousel__stage {
  position: relative;
  height: 400px;
  touch-action: pan-y;
  cursor: grab;
}

.carousel__stage.is-dragging {
  cursor: grabbing
}

/* Every slide is laid out by JS: the centre one is a full card, its
   neighbours are narrowed slivers of the same element. Width/height are
   animated (not scale) so corner radii and text stay crisp while the
   card crops down into a slab. */
.slide {
  /* centring is done by GSAP via xPercent/yPercent, NOT by a CSS
     `translate` — GSAP nulls that property the moment it writes a
     transform here, which would silently shift every slide right by
     half its own width. */
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: var(--r-md);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(12, 40, 34, .6);
  will-change: transform, width, height;
}

.slide__inner {
  position: absolute;
  top: 0;
  left: 50%;
  /* xPercent:-50 applied by GSAP */
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: 14px;
  padding: 16px;
}

/* the two slab looks, cross-faded in as a slide moves off centre */
.veil {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none
}

.veil--near {
  background: linear-gradient(180deg, #2E524C, #1E403A)
}

.veil--far {
  background: linear-gradient(180deg, #71A99F, #4E8B82)
}

.slide__copy {
  padding: 12px 4px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center
}

.kicker--ico {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #3E5B54
}

.kicker--ico svg {
  width: 13px;
  height: 13px;
  flex: none
}

.slide__title {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: clamp(20px, 2.1vw, 25px);
  line-height: 1.16;
  letter-spacing: -.03em;
  color: var(--ink);
  margin-top: 16px;
}

.slide__text {
  margin-top: 13px;
  color: var(--muted);
  font-size: 13.6px;
  line-height: 1.6
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 24px
}

.tags span {
  font-size: 11px;
  color: #54635E;
  background: #F2F4F1;
  border-radius: 999px;
  padding: 5px 11px;
}

.slide__stat {
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  /* re-measured against the Figma frame: dark concentrated in the top-left
     corner, a brighter teal through the rest of the card, washing out to
     --lime in the bottom-right corner specifically — the same recipe
     .ctacard uses above, just with --lime here instead of --mint */
  background:
    radial-gradient(100% 130% at 100% 100%, var(--lime) 0%, rgba(238, 247, 180, 0) 55%),
    radial-gradient(120% 120% at 0% 0%, #06463E 0%, rgba(6, 70, 62, 0) 65%),
    linear-gradient(135deg, #0B4A41 0%, #12897A 55%, #1B9C8B 100%);
  color: #CFDDD8;
}

.slide__meta {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(207, 221, 216, .72);
}

.slide__rule {
  display: block;
  height: 1px;
  background: rgba(207, 221, 216, .22);
  margin-top: auto
}

.slide__num {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -.04em;
  color: var(--yellow);
  margin-top: 16px;
  line-height: 1;
}

.slide__cap {
  margin-top: 7px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(207, 221, 216, .72);
}

/* nav */
.cnav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(22px, 3vw, 32px)
}

.cbtn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 8px -3px rgba(12, 40, 34, .35);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.cbtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -8px rgba(12, 40, 34, .55)
}

.cbtn svg {
  width: 15px;
  height: 15px
}

.dots {
  display: flex;
  align-items: center;
  gap: 7px
}

/* scoped to .dots — a bare `.dot` would also hit the middot separator
   in the platform section's eyebrow */
.dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(20, 50, 44, .26);
  transition: width .45s var(--ease), background .45s var(--ease);
}

.dots .dot.is-active {
  width: 26px;
  background: var(--teal)
}

/* =====================================================================
   LATEST NEWS & EVENTS
   ===================================================================== */
/* sits over the tail of .ai's bleed, so it needs a stacking position —
   it stays transparent, and the wash shows through behind the heading */
.news {
  position: relative;
  z-index: 1;
  padding: var(--sec) 0 var(--sec-sm)
}

.news .sec-title {
  margin-bottom: clamp(26px, 3.4vw, 42px)
}

.news__rail {
  /* the marquee carries cards past both edges, so the rail dissolves into the
     page there instead of hard-cutting them at the viewport line */
  --news-fade: clamp(48px, 8vw, 132px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--news-fade), #000 calc(100% - var(--news-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--news-fade), #000 calc(100% - var(--news-fade)), transparent 100%);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  /* no scroll-snap here: it fights the autoscroll marquee, tugging the
     rail back toward a card every frame */
}

.news__rail::-webkit-scrollbar {
  display: none
}

.news__rail.is-dragging {
  cursor: grabbing
}

.news__track {
  display: flex;
  gap: 22px;
  width: max-content;
  /* No inline padding, deliberately. The autoscroll loops by jumping back
     one card-set width, which is only invisible if the track is exactly
     periodic — a lead padding would show empty space at scrollLeft 0 but
     the previous card at the loop point, making the wrap visibly jump.
     Cards therefore bleed off both edges, as in the design.
     The vertical padding IS load-bearing: `overflow-x:auto` forces
     overflow-y to a non-visible value, so the hover lift and card shadow
     would be clipped without room inside the scroller. */
  padding: 16px 0;
}

.ncard {
  flex: 0 0 auto;
  width: min(480px, 84vw);
  /* the frame's card is much taller than its content needs; the min-height is
     what makes the thumb, text and arrow sit centred in open space */
  min-height: 168px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid rgba(14, 75, 63, .055);
  border-radius: 20px;
  padding: 18px;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.ncard:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 34px -28px rgba(14, 75, 63, .6)
}

.ncard__thumb {
  flex: 0 0 auto;
  width: 96px;
  height: 76px;
  border-radius: 13px;
  background: linear-gradient(140deg, #DDE7F8, #DCF0E2);
}

.ncard__thumb--a {
  background: linear-gradient(140deg, #DCE7F9, #CFEBDE)
}

.ncard__thumb--b {
  background: linear-gradient(140deg, #E7DCF3, #DCE7F9)
}

.ncard__thumb--c {
  background: linear-gradient(140deg, #D6EDDF, #EDF6BC)
}

.ncard__thumb--d {
  background: linear-gradient(140deg, #CFE9E3, #DDE7F8)
}

.ncard__thumb--e {
  background: linear-gradient(140deg, #E4F0C9, #D6EDDF)
}

.ncard__thumb--f {
  background: linear-gradient(140deg, #DCE7F9, #E7DCF3)
}

.ncard__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  flex: 1
}

/* the pill is one unbreakable word, so on a narrow card all the shortfall
   lands on the date and breaks it mid-value ("Aug / 28, / 2026"). Let the
   row wrap instead, and keep the date itself intact. */
.ncard__meta {
  display: flex;
  align-items: center;
  gap: 4px 9px;
  flex-wrap: wrap
}

.ncard__meta time {
  white-space: nowrap
}

.ntag {
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 5px;
}

.ntag--compliance {
  background: var(--mint);
  color: #2E6B55
}

.ntag--event {
  background: #E2E8FB;
  color: #3E5089
}

.ntag--customer {
  background: var(--lime);
  color: #67701F
}

.ntag--product {
  background: #D8EEE9;
  color: #276257
}

.ncard__meta time {
  font-size: 10.5px;
  color: var(--muted-2);
  letter-spacing: .01em
}

.ncard__title {
  font-size: 13px;
  line-height: 1.42;
  color: #33443F;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ncard__go {
  flex: 0 0 auto;
  align-self: center;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--muted-2);
  transition: color .3s, transform .35s var(--ease);
}

.ncard__go svg {
  width: 13px;
  height: 13px
}

.ncard:hover .ncard__go {
  color: var(--teal);
  transform: translate(2px, -2px)
}

.news__foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(26px, 3.4vw, 40px)
}

.viewall {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  /* same button family and size class as .btn--sm — inferred, not measured:
     the news section is not in any captured frame */
  padding: 11px 20px;
  border-radius: 8px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s;
}

.viewall svg {
  width: 13px;
  height: 13px
}

.viewall:hover {
  transform: translateY(-2px);
  border-color: #DCDCD0;
  box-shadow: 0 10px 22px -14px rgba(14, 63, 53, .5)
}

/* =====================================================================
   CLOSING CTA
   ===================================================================== */
.cta {
  padding: var(--sec-sm) 0 var(--sec)
}

.ctacard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
  border-radius: var(--r-md);
  padding: clamp(30px, 4.4vw, 58px);
  /* re-measured against the Figma frame: it's not a symmetric dark-light-dark
     band — dark is concentrated in the top-left corner, the rest of the card
     is a noticeably brighter teal, and it washes out to the page's own
     --mint in the bottom-right corner specifically (same recipe .slide__stat
     uses below, just fading to --lime there instead of --mint here) */
  background:
    radial-gradient(100% 130% at 100% 100%, var(--mint) 0%, rgba(221, 242, 228, 0) 55%),
    radial-gradient(120% 120% at 0% 0%, #06463E 0%, rgba(6, 70, 62, 0) 65%),
    linear-gradient(135deg, #0B4A41 0%, #12897A 55%, #1B9C8B 100%);
}

.ctacard__title {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 39px);
  line-height: 1.14;
  letter-spacing: -.035em;
  color: var(--yellow);
}

.ctacard__text {
  color: rgba(226, 238, 234, .76);
  font-size: 14.5px;
  line-height: 1.62;
  max-width: 46ch
}

.ctacard__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px
}

.btn--light {
  background: #fff;
  color: var(--ink)
}

.btn--light:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .6)
}

.btn--outline {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .3)
}

.btn--outline:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .06)
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer {
  padding: var(--sec-sm) 0 clamp(36px, 4vw, 54px)
}

.footer__grid {
  display: grid;
  /* Figma bunches the three link columns against the right edge and lets the
     brand block take everything left over — equal 1fr tracks instead spread
     them across the full width and open a dead gap inside each column */
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: clamp(28px, 5.5vw, 80px);
  padding-bottom: clamp(34px, 4.4vw, 54px);
}

/* the footer lockup is a step larger than the one in the header */
.footer__brand .logo {
  margin-bottom: 18px;
  font-size: 23px
}

.footer__brand .logo__mark {
  height: 23px
}

.footer__blurb {
  color: var(--muted);
  font-size: 13.4px;
  line-height: 1.74;
  max-width: 38ch
}

.footer__addr {
  margin-top: 18px;
  font-style: normal;
  color: var(--muted-2);
  font-size: 12.4px;
  line-height: 1.72;
}

.footer__addr a {
  color: var(--teal);
  border-bottom: 1px solid transparent;
  transition: border-color .25s
}

.footer__addr a:hover {
  border-bottom-color: var(--teal)
}

.footer__h {
  font-family: var(--font-b);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 16px;
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 11px
}

.footer__col a {
  font-size: 13.4px;
  color: #3E4F4A;
  transition: color .2s
}

.footer__col a:hover {
  color: var(--teal)
}

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: clamp(18px, 2.4vw, 26px);
  border-top: 1px solid var(--line);
  font-size: 12.2px;
  color: var(--muted-2);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 22px
}

.footer__legal a {
  transition: color .2s
}

.footer__legal a:hover {
  color: var(--teal)
}

/* =====================================================================
   CONTACT PAGE
   ===================================================================== */
.contact-hero {
  position: relative;
  text-align: center;
  /* .header is transparent at the top of the page and sits BEFORE <main> in
     the DOM, so without this the two never overlap — the header would just
     show the plain page background instead of this section's gradient. Pull
     the section up by exactly the header's reserved height (same technique
     .platform uses on the home page) and hand that height straight back as
     extra top padding, so only the BACKGROUND extends under the header;
     the badge/heading/copy still start visually right below it. */
  margin-top: calc(-1 * var(--header-h));
  padding: calc(clamp(56px, 7vw, 88px) + var(--header-h)) 0 clamp(72px, 8vw, 108px);
  /* same blue -> lime -> mint recipe as .stage / the demo drawer, so a
     dedicated page still reads as this design system. The first layer is a
     bottom-to-transparent wash sitting on top of that colour recipe — still
     part of the element's OWN background paint (behind every child,
     positioned or not), so the text above never gets clipped by it the way
     a ::after overlay would. It fades the section out to the page's cream
     background instead of hard-cutting into .contact-grid below it. */
  background:
    linear-gradient(to bottom, rgba(247, 246, 239, 0) 45%, var(--cream) 100%),
    radial-gradient(120% 90% at 6% 0%, #E3E9FD 0%, rgba(227, 233, 253, 0) 55%),
    radial-gradient(110% 90% at 92% 4%, #EFFAC2 0%, rgba(239, 250, 194, 0) 52%),
    radial-gradient(120% 120% at 50% 110%, #CFEEDD 0%, rgba(207, 238, 221, 0) 62%),
    linear-gradient(120deg, #E6ECFC 0%, #EAF6EE 46%, #F2FAD8 100%);
}

.contact-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(14, 75, 63, .12);
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  box-shadow: 0 2px 3px rgba(14, 75, 63, .04);
}

.contact-hero__title {
  margin-top: 22px;
  font-family: var(--font-d);
  font-weight: 500;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--ink);
}

.contact-hero__sub {
  max-width: 560px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.62;
}

/* the grid overlaps the hero's soft lower edge, same overlap language as
   the bento stats pulling up into the hero above them */
.contact-grid {
  position: relative;
  margin-top: clamp(-56px, -5vw, -36px);
  padding-bottom: var(--sec-sm);
}

.contact-grid__inner {
  display: grid;
  grid-template-columns: minmax(0, 469px) minmax(0, 1fr);
  gap: 51px;
  align-items: stretch;
}

.contact-card {
  display: flex;
  gap: 16px;
  background: #fff;
  border-radius: var(--r-md);
  padding: 26px;
  border: 1px solid rgba(14, 75, 63, .06);
  box-shadow: 0 20px 40px -36px rgba(14, 75, 63, .3);
}

.contact-card+.contact-card {
  margin-top: 16px
}

.contact-card__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--mint);
  color: var(--teal);
}

.contact-card__icon svg {
  width: 20px;
  height: 20px
}

.contact-card__body h3 {
  font-family: var(--font-d);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
}

.contact-card__body p {
  margin-top: 6px;
  font-size: 13.3px;
  line-height: 1.6;
  color: var(--muted);
}

.contact-card__meta {
  display: inline-block;
  margin-top: 9px;
  font-size: 12.8px;
  font-weight: 600;
  color: var(--teal);
}

a.contact-card__meta {
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}

a.contact-card__meta:hover {
  border-bottom-color: var(--teal)
}

.contact-trust {
  margin-top: 16px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  border: 1px dashed rgba(14, 75, 63, .18);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}

.contact-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.8px;
  color: var(--muted);
}

.contact-trust svg {
  width: 13px;
  height: 13px;
  color: var(--teal);
  flex: none;
}

.contact-form-card {
  background: #fff;
  border-radius: 18px;
  padding: 36px;
  border: 1px solid rgba(11, 42, 36, .09);
  box-shadow: 0 30px 60px -30px rgba(11, 42, 36, .28);
  transition: transform .2s;
  width: 100%;
  min-height: 100%;
}

.contact-form-card__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.contact-tabs {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Each chip is a <label> wrapping a real checkbox now, so it needs the
   pointer and the flex box a <button> gave it for free. */
.contact-tab {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--font-d);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background .2s, border-color .2s, color .2s;
}

/* Clipped rather than display:none — a display:none control cannot take
   focus, which would drop the whole group out of the tab order and leave
   the "pick at least one" error with nothing to focus. */
.contact-tab input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.contact-tab:hover {
  border-color: rgba(14, 75, 63, .3);
  color: var(--ink);
}

/* One rule for "this chip is chosen". :has() drives it straight off the
   checkbox — the same baseline this file already assumes elsewhere (see
   .features:has(> .features__block)) — so the chosen look survives with no
   JavaScript at all. .is-active stays for anything still setting a class. */
.contact-tab.is-active,
.contact-tab:has(input:checked) {
  background: var(--yellow-hi);
  border-color: var(--yellow-hi);
  color: #15302A;
}

/* the input is clipped, so the ring has to be drawn on the chip around it */
.contact-tab:has(input:focus-visible) {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.contact-tabs.is-invalid .contact-tab {
  border-color: #D9756B
}

.contact-fields {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.contact-field--full {
  grid-column: 1 / -1
}

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

.contact-field input,
.contact-field textarea {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--cream);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  transition: border-color .2s, background .2s, box-shadow .2s;
}

.contact-field textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
  font-family: var(--font-b);
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: var(--muted-2)
}

.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--teal);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(27, 132, 116, .14);
}

.contact-field input:invalid:not(:placeholder-shown) {
  border-color: #D9756B
}

/* ---- validation messages ---- */
/* #B4483C rather than the #D9756B used on borders: the lighter tone reads
   fine as a 1px edge but only clears ~2.6:1 as text, under the 4.5:1 body
   copy needs. */
.contact-field__error,
.contact-error {
  font-size: 12px;
  line-height: 1.45;
  color: #B4483C;
}

.contact-error {
  margin-top: 12px
}

.contact-field__opt {
  font-weight: 500;
  color: var(--muted-2);
  letter-spacing: .01em;
}

.contact-field.is-invalid input,
.contact-field.is-invalid textarea {
  border-color: #D9756B;
  background: #FFF8F7;
}

.contact-field.is-invalid input:focus,
.contact-field.is-invalid textarea:focus {
  border-color: #D9756B;
  box-shadow: 0 0 0 3px rgba(217, 117, 107, .16);
}

.contact-submit {
  width: 100%;
  justify-content: center;
  margin-top: 26px;
}

.contact-submit:disabled,
.contact-submit.is-loading {
  opacity: .72;
  cursor: wait;
  transform: none;
  background: var(--ink-deep);
  box-shadow: 0 1px 2px rgba(11, 58, 49, .28);
}

.contact-submit:disabled:hover,
.contact-submit.is-loading:hover {
  transform: none;
  background: var(--ink-deep);
}

.contact-submit__idle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.contact-submit__busy {
  display: none;
  align-items: center;
  gap: 9px;
}

.contact-submit.is-loading .contact-submit__idle,
.contact-submit__idle[hidden] {
  display: none;
}

.contact-submit.is-loading .contact-submit__busy {
  display: inline-flex;
}

.contact-submit__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: contactSpin .7s linear infinite;
}

@keyframes contactSpin {
  to {
    transform: rotate(360deg)
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-submit__spinner {
    animation: none
  }
}

#cFormError {
  text-align: center;
  margin-top: 14px;
}

/* reassurance line sitting under the submit button */
.contact-note {
  margin-top: 14px;
  text-align: center;
  color: var(--muted-2);
  font-size: 12.5px;
  line-height: 1.6;
}

@keyframes contactShake {

  0%,
  100% {
    transform: translateX(0)
  }

  20%,
  60% {
    transform: translateX(-6px)
  }

  40%,
  80% {
    transform: translateX(6px)
  }
}

.contact-form-card.is-shake {
  animation: contactShake .4s var(--ease);
}

@media (max-width:900px) {
  .contact-grid__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width:600px) {
  .contact-fields {
    grid-template-columns: 1fr;
  }

  .contact-trust {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   Responsive
   ===================================================================== */

/* short viewports — keep the pinned stage inside 100vh */
@media (min-width:901px) and (max-height:820px) {
  .platform {
    --stage-h: 564px
  }

  /* 340 deck + 44 padding + 113 eyebrow/tabs */
  .stage {
    padding: 22px;
    padding-top: 70px;
  }

  .deck {
    min-height: 340px
  }

  .tabs {
    margin-top: 14px;
    padding-bottom: 44px
  }

  .panel__title {
    font-size: clamp(22px, 2.2vw, 27px)
  }

  .chart {
    height: 84px
  }

  .dashes {
    margin-top: 14px
  }
}

@media (min-width:1041px) {

  /* Figma centres the nav on the header itself, not on the space left over
     between the logo and the CTA — equal flanks put it there */
  .header__inner>.logo,
  .header__end {
    flex: 1 1 0
  }

  .header__end {
    justify-content: flex-end
  }

  .mobilenav,
  .navscrim {
    display: none !important
  }
}

@media (max-width:1040px) {

  /* nav collapses into the burger here, so the panel has nothing to hang off */
  .mega {
    display: none !important
  }

  .header__end {
    gap: 14px
  }

  .header__contact {
    display: none
  }

  .nav {
    display: none
  }

  .header__cta {
    display: none
  }

  .burger {
    display: flex
  }

  .panel {
    grid-template-columns: 1fr
  }

  .panel__copy {
    border-right: 0;
    border-bottom: 1px solid var(--line-2)
  }
}

@media (max-width:900px) {

  /* The pin is off here, but the deck still shows ONE panel at a time.
     Every panel sits in the SAME grid cell, so the deck is exactly as tall
     as the tallest one and switching is a crossfade with zero layout
     shift — stacking all three ran to ~2400px of near-identical cards.
     The tabs and the connector stem stay: they are the control now. */
  /* 104px is a desktop measure off the 1440 Figma frame; on a phone that
     bar would eat the fold, so the compact header comes back */
  :root {
    --header-h: 74px
  }

  /* unpinned here, so there is no sticky lead-in to cancel */
  .platform {
    height: auto;
    padding-bottom: 0;
    margin-top: 0
  }

  .hero {
    padding-bottom: var(--sec-sm)
  }

  .hero__title {
    font-size: clamp(32px, 8vw, 44px);
    line-height: 1.12
  }

  .hero__title .line {
    padding-bottom: .2em;
    margin-bottom: -.12em
  }

  .platform__sticky {
    position: static;
    height: auto;
    padding-top: 0;
    display: block
  }

  .deck {
    min-height: 0;
    display: grid
  }

  .panel {
    position: relative;
    inset: auto;
    grid-area: 1 / 1
  }

  /* the mock well is dropped on phones — the card is copy only, so the
     divider .panel__copy carries at >900 would strand a line on its
     bottom edge */
  .panel__visual {
    display: none
  }

  .panel__copy {
    border-bottom: 0
  }

  .tabs {
    padding-bottom: 30px
  }

  .bento {
    grid-template-columns: 1fr
  }

  .card--hero {
    grid-column: span 1
  }

  .metrics {
    grid-template-columns: 1fr
  }

  .metric {
    border-right: 0;
    border-bottom: 1px solid var(--line)
  }

  .metric:last-child {
    border-bottom: 0
  }

  /* the accordion becomes a plain stack: every card is open (see the
     matching mqRow guard in main.js), so they all carry the open card's
     tint and size to their own content */
  .sectors__row {
    flex-direction: column;
    gap: 14px
  }

  .sector,
  .sector.is-active {
    width: 100%;
    min-height: 0;
    cursor: default
  }

  .sector__body {
    max-width: none
  }

  /* Accordion bodies are opacity:0 on desktop until JS opens them. On a
     phone every card is open, so CSS has to show the copy — otherwise the
     text still takes up height while staying invisible (empty title-only
     slabs). */
  .sector__open {
    opacity: 1;
    pointer-events: auto
  }

  .sector__visual {
    display: none
  }

  /* the waves are absolutely positioned decoration sized for a tall empty
     card — in a content-height card they land on top of the list */
  .waves {
    display: none
  }

  /* Features on a phone: stacked document flow, not sticky. Sticky media
     sat under the header while the list painted over it (later sibling,
     no z-index, translucent card) — headings and checklists collided.
     JS adds .feat--stacked and moves each shot into its fitem so mock +
     copy read as one block; without JS the top card still sits in flow. */
  .feat {
    padding: 36px 0
  }

  .feat + .feat {
    margin-top: 8px;
    padding-top: 40px;
    border-top: 1px solid var(--line)
  }

  .feat__grid {
    grid-template-columns: 1fr;
    gap: 18px
  }

  .feat--rev .feat__mediacol {
    order: 0
  }

  .feat__mediacol {
    position: static;
    top: auto;
    z-index: auto;
    background: transparent
  }

  .feat__media {
    aspect-ratio: 16 / 11;
    max-height: none
  }

  .feat--stacked .feat__media {
    display: none
  }

  .feat--stacked .shot,
  .shot {
    display: flex;
    flex-direction: column;
    justify-content: center
  }

  .feat--stacked .shot {
    position: relative;
    inset: auto;
    visibility: visible;
    opacity: 1;
    margin: 0 0 16px;
    padding: 14px;
    border-radius: var(--r-md);
    overflow: hidden;
    background:
      radial-gradient(95% 80% at 8% 4%, #DEE8FA 0%, rgba(222, 232, 250, 0) 62%),
      linear-gradient(148deg, #E1EAFA 0%, #E6F3EC 52%, #EFF8DE 100%);
  }

  .feat__list {
    gap: 36px
  }

  .feat__list>.fitem:first-child {
    margin-top: 0
  }

  .fitem {
    opacity: 1
  }

  .fitem__title,
  .fitem__text {
    max-width: none
  }

  /* Dial the desktop scale-ups back down so every shot fits the smaller card.
     Selectors use .shot (not .feat__media) so they still apply after JS
     moves each shot into its fitem. They also beat the <=600px layout
     overrides below — inside the mock they must keep full column count
     or the mock doubles in height and gets clipped. */
  .shot .mock__head,
  .feat__media .mock__head {
    margin-bottom: 11px
  }

  .shot .mock__title,
  .feat__media .mock__title {
    font-size: 13.5px
  }

  .shot .funnel,
  .feat__media .funnel {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px
  }

  .shot .funnel__col,
  .feat__media .funnel__col {
    gap: 6px
  }

  .shot .bar,
  .feat__media .bar {
    height: 22px;
    border-radius: 7px
  }

  .shot .chip,
  .feat__media .chip {
    padding: 5px 8px;
    margin-bottom: 2px
  }

  .shot .chip span,
  .shot .chip b,
  .feat__media .chip span,
  .feat__media .chip b {
    font-size: 9.5px
  }

  .shot .chart,
  .feat__media .chart {
    height: 96px
  }

  .shot .rule,
  .shot .alert,
  .feat__media .rule,
  .feat__media .alert {
    padding: 8px 9px
  }

  .shot .rules,
  .shot .alerts,
  .feat__media .rules,
  .feat__media .alerts {
    gap: 6px
  }

  .shot .rule__line,
  .feat__media .rule__line {
    height: 6px
  }

  .shot .ledger,
  .feat__media .ledger {
    gap: 7px
  }

  .shot .led__av,
  .feat__media .led__av {
    width: 22px;
    height: 22px
  }

  .shot .led__amt,
  .feat__media .led__amt {
    height: 20px
  }

  .shot .stats3,
  .feat__media .stats3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px
  }

  .shot .stat3,
  .feat__media .stat3 {
    padding: 8px
  }

  .shot .stat3 b,
  .feat__media .stat3 b {
    font-size: 12.5px
  }

  .shot .stat3 span,
  .feat__media .stat3 span {
    font-size: 9px
  }

  .shot .score,
  .feat__media .score {
    margin-bottom: 10px
  }

  .shot .score__val,
  .feat__media .score__val {
    font-size: 17px
  }

  .shot .score__label,
  .feat__media .score__label {
    font-size: 10.5px
  }

  .shot .track,
  .feat__media .track {
    height: 8px
  }

  .shot .ask,
  .feat__media .ask {
    gap: 9px
  }

  .shot .ask__q,
  .feat__media .ask__q {
    padding: 7px 11px
  }

  .emi {
    gap: 8px
  }

  .emi li {
    min-height: 20px
  }

  .carousel__stage {
    height: 590px
  }

  .slide__inner {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .slide__copy {
    padding: 10px 8px 4px
  }

  .slide__stat {
    min-height: 132px
  }

  .ncard {
    width: min(400px, 86vw);
    min-height: 146px;
    padding: 15px;
    gap: 14px
  }

  .ncard__thumb {
    width: 82px;
    height: 66px
  }

  .news__track {
    padding: 16px 0;
    gap: 16px
  }

  .ctacard {
    grid-template-columns: 1fr;
    gap: 22px
  }

  .ctacard__btns .btn {
    width: 100%;
    justify-content: center
  }

  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px
  }

  .footer__brand {
    grid-column: 1 / -1
  }

  .footer__bar {
    flex-direction: column;
    align-items: flex-start
  }
}

@media (max-width:600px) {

  /* the close button only occupies the right end — a symmetric inset threw
     away a sixth of the line and pushed the copy to three lines */
  .announce {
    padding: 9px 50px 9px 16px;
    font-size: 12.5px;
    text-align: left
  }

  .announce__text {
    justify-content: flex-start;
    text-align: left
  }

  .hero {
    padding-top: 56px
  }

  .hero__title {
    font-size: clamp(32px, 8.8vw, 40px);
    line-height: 1.14;
  }

  .hero__sub {
    font-size: 15.4px;
    margin-top: 20px
  }

  .hero__cta {
    margin-top: 26px;
    gap: 11px
  }

  .hero__cta .btn {
    width: 100%;
    justify-content: center
  }

  /* the pinned stage nested three paddings — wrap + stage + panel — and ate
     19% of a 390px screen before any content started */
  .canvas {
    margin-inline: 10px
  }

  .stage {
    padding: 14px;
    border-radius: var(--r-md)
  }

  .panel__copy {
    padding: 22px 18px
  }

  .panel__visual {
    padding: 14px
  }

  .tabs {
    gap: 7px;
    margin-top: 14px;
    padding-bottom: 26px
  }

  .sector__body {
    padding: 20px 18px
  }

  /* two columns leave ~11 characters a line, so every check wraps */
  .checks {
    grid-template-columns: 1fr;
    gap: 9px
  }

  .feat + .feat {
    padding-top: 32px
  }

  .feat--stacked .shot {
    padding: 12px
  }

  .feat__list {
    gap: 32px
  }

  .funnel {
    grid-template-columns: repeat(2, 1fr)
  }

  .stats3 {
    grid-template-columns: 1fr
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 28px
  }

  .footer__legal {
    gap: 16px
  }

  /* claw back width for the news card's meta row on small phones */
  .ncard {
    gap: 12px;
    padding: 13px;
    min-height: 124px
  }

  .ncard__thumb {
    width: 66px;
    height: 58px
  }

  .news__rail {
    --news-fade: 26px
  }
}

/* --------------------------- reduced motion -------------------------- */
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
/* =====================================================================
   COMING SOON PAGE
   ===================================================================== */
/* the page is one viewport tall: top bar / hero / ticker / footer, with the
   hero taking whatever is left so the headline always sits mid-screen */
.cs-body {
  min-height: 100svh;
  position: relative;
  display: flex;
  flex-direction: column;
}

.cs {
  flex: 1;
  display: flex;
  flex-direction: column;
}

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

/* ---- top bar ---- */
/* floats over the hero so the colour washes run right up to the top edge —
   the same transparent-header-over-gradient treatment as .contact-hero */
.cs-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
}

.cs-top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: clamp(20px, 2.6vw, 30px);
  padding-bottom: clamp(20px, 2.6vw, 30px);
}

.cs-top__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---- hero ---- */
.cs-hero {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  /* the top bar is out of flow, so reserve its ~96px here */
  padding: calc(clamp(40px, 6vh, 72px) + 96px) 0 clamp(48px, 7vh, 88px);
  /* a quiet base wash under the orbs so the hero never reads as bare cream,
     fading back to the page colour just before the ticker */
  background:
    linear-gradient(to bottom, rgba(247, 246, 239, 0) 62%, var(--cream) 100%),
    linear-gradient(120deg, #EDF1FC 0%, #F0F7F0 46%, #F5FAE4 100%);
}

.cs-hero__inner {
  position: relative;
  z-index: 3;
  max-width: 820px;
  text-align: center;
}

/* three loose colour washes — the .stage gradient recipe pulled apart so it
   can drift. Blur is expensive, so they are few, large and slow. */
.cs-orbs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.cs-orb {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .9;
  will-change: transform;
}

.cs-orb--blue {
  width: 46vw;
  height: 46vw;
  max-width: 640px;
  max-height: 640px;
  left: -10vw;
  top: -14vw;
  background: radial-gradient(circle at 40% 40%, #DCE4FD 0%, rgba(220, 228, 253, 0) 68%);
}

.cs-orb--lime {
  width: 44vw;
  height: 44vw;
  max-width: 600px;
  max-height: 600px;
  right: -12vw;
  top: -10vw;
  background: radial-gradient(circle at 50% 50%, #EEF9C4 0%, rgba(238, 249, 196, 0) 68%);
}

.cs-orb--mint {
  width: 60vw;
  height: 36vw;
  max-width: 900px;
  max-height: 520px;
  left: 50%;
  bottom: -20vw;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at 50% 60%, #CFEEDD 0%, rgba(207, 238, 221, 0) 68%);
}

.cs-ribbon {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: min(1400px, 140vw);
  transform: translate(-50%, -50%) rotate(-8deg);
  opacity: .34;
  pointer-events: none;
}

/* ---- floating glimpses ---- */
.cs-floats {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.cs-float {
  position: absolute;
  will-change: transform;
}

.cs-float.mock {
  width: 218px;
  padding: 14px 15px;
  border-color: rgba(255, 255, 255, .9);
  box-shadow: 0 30px 60px -34px rgba(14, 75, 63, .45), 0 0 0 1px rgba(14, 75, 63, .04);
}

.cs-float--a {
  left: clamp(16px, 7vw, 120px);
  top: 14%;
  transform: rotate(-4deg);
}

.cs-float--b {
  right: clamp(16px, 6vw, 100px);
  top: 18%;
  transform: rotate(3deg);
}

.cs-float--c {
  right: clamp(24px, 9vw, 150px);
  bottom: 12%;
  transform: rotate(-2deg);
}

.cs-float--d {
  left: clamp(30px, 10vw, 170px);
  bottom: 18%;
  transform: rotate(2deg);
}

.cs-float .mock__head {
  margin-bottom: 11px
}

.cs-float .mock__title {
  font-size: 12.5px
}

/* bar chart */
.cs-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 6px;
  height: 58px;
}

.cs-bars i {
  display: block;
  height: var(--h);
  border-radius: 5px 5px 2px 2px;
  background: var(--mint-2);
}

.cs-bars i:nth-child(6) {
  background: var(--teal)
}

.cs-bars i:nth-child(4) {
  background: var(--lav)
}

/* ring + lines */
.cs-ring-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cs-ring {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: conic-gradient(var(--teal) 0 76%, var(--line-2) 76% 100%);
}

.cs-ring::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #fff;
}

.cs-ring b {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  font-family: var(--font-d);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}

.cs-ring b::before {
  content: "76%"
}

.cs-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cs-lines i {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: var(--line-2);
}

.cs-lines i:first-child {
  width: 88%;
  background: var(--mint)
}

.cs-lines i:nth-child(2) {
  width: 64%
}

.cs-lines i:last-child {
  width: 76%
}

/* rows */
.cs-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-rows li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-rows i {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--lav);
}

.cs-rows li:nth-child(2) i {
  background: var(--lime)
}

.cs-rows li:last-child i {
  background: var(--mint-2)
}

.cs-rows b {
  display: block;
  width: var(--w);
  height: 7px;
  border-radius: 4px;
  background: var(--line-2);
}

.cs-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--font-d);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .04em;
}

.cs-pill--ok {
  background: var(--mint);
  color: var(--teal);
}

.cs-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 11px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .9);
  font-family: var(--font-d);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  box-shadow: 0 20px 40px -26px rgba(14, 75, 63, .5);
}

.cs-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(27, 132, 116, .16);
}

/* ---- headline ---- */
.cs-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(14, 75, 63, .12);
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  box-shadow: 0 2px 3px rgba(14, 75, 63, .04);
  backdrop-filter: blur(6px);
}

.cs-badge__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
}

.cs-badge__dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--teal);
  opacity: 0;
  animation: cs-pulse 2.2s var(--ease) infinite;
}

@keyframes cs-pulse {
  0% {
    transform: scale(.6);
    opacity: .9
  }

  70%,
  100% {
    transform: scale(1.8);
    opacity: 0
  }
}

.cs-title {
  margin-top: 26px;
  font-family: var(--font-d);
  font-weight: 500;
  font-size: clamp(40px, 6.4vw, 78px);
  line-height: 1.04;
  letter-spacing: -.038em;
  color: var(--ink);
}

.cs-title em {
  font-style: normal;
  color: var(--teal);
}

.cs-title .line {
  display: block;
  overflow: hidden;
  padding-bottom: .16em;
  margin-bottom: -.16em;
}

.cs-title .line__i {
  display: block
}

.cs-sub {
  max-width: 600px;
  margin: 24px auto 0;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.62;
}

/* ---- countdown ---- */
.cs-count {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 1.4vw, 14px);
  margin-top: 36px;
}

.cs-count__tile {
  display: grid;
  gap: 4px;
  min-width: clamp(64px, 8vw, 84px);
  padding: 12px 8px 10px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 18px 34px -30px rgba(14, 75, 63, .5), 0 0 0 1px rgba(14, 75, 63, .05);
  backdrop-filter: blur(6px);
}

.cs-count__tile b {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.cs-count__tile b.is-tick {
  animation: cs-tick .45s var(--ease);
}

@keyframes cs-tick {
  0% {
    transform: translateY(-6px);
    opacity: 0
  }

  100% {
    transform: none;
    opacity: 1
  }
}

.cs-count__tile span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.cs-count__sep {
  font-family: var(--font-d);
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  color: var(--muted-2);
  opacity: .7;
  margin-top: -14px;
}

.cs-count__label {
  margin-top: 14px;
  font-size: 12.4px;
  font-weight: 500;
  letter-spacing: .02em;
  color: #5B6B66;
}

.cs-count__label .dot {
  padding: 0 4px;
  color: var(--muted-2);
}

/* ---- notify form ---- */
.cs-notify {
  margin-top: 34px;
}

.cs-notify__field {
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(100%, 520px);
  margin-inline: auto;
  padding: 6px 6px 6px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -36px rgba(11, 42, 36, .4);
  transition: border-color .25s, box-shadow .35s var(--ease);
}

.cs-notify__field:focus-within {
  border-color: rgba(27, 132, 116, .5);
  box-shadow: 0 30px 60px -36px rgba(11, 42, 36, .4), 0 0 0 4px rgba(27, 132, 116, .12);
}

.cs-notify.is-invalid .cs-notify__field {
  border-color: #D9534F;
  animation: cs-shake .4s var(--ease);
}

@keyframes cs-shake {

  20%,
  60% {
    transform: translateX(-5px)
  }

  40%,
  80% {
    transform: translateX(5px)
  }
}

.cs-notify__icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--muted-2);
}

.cs-notify__field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  padding: 10px 6px;
}

.cs-notify__field input::placeholder {
  color: var(--muted-2)
}

.cs-notify__btn {
  flex: none;
  padding: 11px 20px;
  font-size: 14px;
}

.cs-notify__note {
  margin-top: 12px;
  font-size: 12.2px;
  color: var(--muted-2);
}

/* success swap */
.cs-done {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
  padding: 16px 22px 16px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  text-align: left;
  box-shadow: 0 30px 60px -36px rgba(11, 42, 36, .4);
}

.cs-done[hidden] {
  display: none
}

.cs-done__check {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--mint);
  color: var(--teal);
}

.cs-done__check svg {
  width: 18px;
  height: 18px
}

.cs-done__title {
  font-family: var(--font-d);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
}

.cs-done__sub {
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
}

.cs-done__sub b {
  font-weight: 500;
  color: var(--ink)
}

/* ---- ticker ---- */
.cs-ticker {
  position: relative;
  z-index: 3;
  overflow: hidden;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* fade the ends so the loop never shows a hard edge */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.cs-ticker__track {
  display: flex;
  width: max-content;
  animation: cs-marquee 38s linear infinite;
}

.cs-ticker:hover .cs-ticker__track {
  animation-play-state: paused
}

.cs-ticker__list {
  display: flex;
  align-items: center;
  flex: none;
}

.cs-ticker__list li {
  position: relative;
  padding: 0 28px;
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  color: #5B6B66;
  white-space: nowrap;
}

.cs-ticker__list li::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint-2);
  transform: translateY(-50%);
}

@keyframes cs-marquee {
  to {
    transform: translateX(-50%)
  }
}

/* ---- footer ---- */
.cs-foot {
  position: relative;
  z-index: 3;
}

.cs-foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 18px;
  padding-bottom: 22px;
  font-size: 12.2px;
  color: var(--muted-2);
}

/* ---- responsive ---- */
@media (max-width:1100px) {
  .cs-float.mock {
    width: 190px
  }

  .cs-float--a {
    top: 8%
  }

  .cs-float--b {
    top: 10%
  }
}

@media (max-width:900px) {

  /* the glimpses would sit on top of the copy at this width — drop them and
     let the orbs + ticker carry the visual interest */
  .cs-floats {
    display: none
  }

  .cs-ribbon {
    width: 160vw;
    opacity: .28;
  }
}

@media (max-width:600px) {
  .cs-top__actions .btn--ghost {
    display: none
  }

  .cs-title {
    font-size: clamp(36px, 11vw, 48px)
  }

  .cs-sub {
    font-size: 15px
  }

  .cs-count {
    gap: 6px
  }

  .cs-count__tile {
    min-width: 0;
    flex: 1;
    padding: 10px 4px 8px;
  }

  .cs-count {
    display: flex;
    width: 100%;
  }

  .cs-count__sep {
    display: none
  }

  .cs-count__tile span {
    font-size: 9px;
    letter-spacing: .08em;
  }

  .cs-notify__field {
    flex-wrap: wrap;
    padding: 6px;
    border-radius: 18px;
  }

  .cs-notify__icon {
    display: none
  }

  .cs-notify__field input {
    width: 100%;
    flex: 1 0 100%;
    padding: 10px 12px;
  }

  .cs-notify__btn {
    width: 100%;
    justify-content: center;
  }

  .cs-done {
    display: flex;
    text-align: left;
  }

  .cs-foot__inner {
    justify-content: center;
    text-align: center;
  }
}

/* =====================================================================
   SECTORS / MFIs PAGE
   Reuses .btn, .sec-title, .card, .bento, .checks, .learn, .cta.
   New rules only cover the contained hero, pain cards, lifecycle rows
   and quotes — nothing here changes home or contact.
   ===================================================================== */
.sec-title--left {
  text-align: left
}

/* intro paragraph sitting under a left-aligned section title */
.sec-lead {
  margin-top: 16px;
  max-width: 62ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.62;
}

.sector-hero {
  padding: 8px var(--wrap-pad) 0
}

.sector-hero__card {
  max-width: 1318px;
  margin: 0 auto;
  min-height: min(571px, 78vh);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(56px, 7vw, 88px) clamp(20px, 4vw, 48px) clamp(48px, 5vw, 72px);
  border-radius: 40px;
  background:
    linear-gradient(148deg, rgba(120, 150, 255, .28) 6%, rgba(77, 165, 216, .25) 25%, rgba(23, 184, 166, .22) 43%, rgba(137, 219, 139, .26) 68%, rgba(220, 245, 120, .3) 94%);
}

.sector-hero__inner {
  max-width: 590px;
  margin: 0 auto
}

.sector-hero__title {
  margin-top: 22px;
  font-family: var(--font-d);
  font-weight: 500;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -.053em;
  color: var(--ink);
}

.sector-hero__sub {
  margin-top: 28px;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.56;
  color: rgba(14, 90, 76, .75);
}

.sector-hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 40px
}

.sector-hero__note {
  margin-top: 36px;
  font-size: 14px;
  line-height: 1.45;
  color: #5A6E67;
}

.pain {
  padding: var(--sec-sm) 0 var(--sec)
}

.pain__grid {
  margin-top: clamp(28px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px
}

.pain__card {
  position: relative;
  overflow: hidden;
  min-height: 259px;
  padding: 40px 32px 32px;
  background: #fff;
  border-radius: var(--r-sm);
  box-shadow: 0 1px 1px rgba(11, 42, 36, .03), 0 22px 50px -34px rgba(11, 42, 36, .1);
}

.pain__card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -20px;
  width: 140%;
  height: 172px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(23, 184, 166, .14) 0%, rgba(23, 184, 166, 0) 70%);
  filter: blur(32px);
  pointer-events: none;
}

.pain__icon {
  display: grid;
  place-items: center;
  width: 49px;
  height: 49px;
  border-radius: 12px;
  background: #FEFD82;
  overflow: clip
}

.pain__icon img {
  width: 24px;
  height: 24px
}

.pain__card h3 {
  position: relative;
  z-index: 1;
  margin-top: 31px;
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -.022em;
  color: #0B2A24;
}

.pain__card p {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.38;
  color: #5A6E67;
}

.slife {
  padding: 0 0 var(--sec)
}

.slife__list {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 80px);
  margin-top: clamp(28px, 3vw, 40px);
}

.slife__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}

.slife__row--rev .slife__copy {
  order: -1
}

.slife__media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(320px, 36vw, 461px);
  padding: clamp(28px, 3vw, 48px) clamp(16px, 2vw, 28px);
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(129deg, rgba(120, 150, 255, .28) 6%, rgba(77, 165, 216, .25) 25%, rgba(23, 184, 166, .22) 43%, rgba(137, 219, 139, .26) 68%, rgba(220, 245, 120, .3) 94%);
  box-shadow: 0 1px 2px rgba(11, 42, 36, .05);
}

.slife__media img {
  width: 100%;
  max-width: 486px;
  height: auto;
  border-radius: 27px
}

.slife__kicker {
  display: inline-block;
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1.85px;
  text-transform: uppercase;
  color: #5A6E67;
}

.slife__title {
  margin-top: 8px;
  font-family: var(--font-d);
  font-weight: 500;
  font-size: clamp(22px, 2.3vw, 28px);
  line-height: 1.38;
  letter-spacing: -.04em;
  color: #0B2A24;
  max-width: 18ch;
}

.slife__text {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.62;
  color: #5A6E67;
}

.slife .checks {
  margin-top: 28px
}

.slife .learn {
  margin-top: 36px
}

.checks--stack {
  grid-template-columns: 1fr;
  gap: 16px
}

.bento--outcomes {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px
}

.bento--outcomes .card--hero {
  grid-column: span 8
}

.bento--outcomes .card--yellow {
  grid-column: span 4
}

.bento--outcomes .card--half {
  grid-column: span 6
}

.bento--outcomes .card__lead {
  margin-top: 8px;
  font-family: var(--font-d);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 40px);
  line-height: 1.2;
  letter-spacing: -.04em;
  color: #0B2A24;
}

.bento--outcomes .card--yellow .card__lead {
  color: #0E5A4C;
  font-size: clamp(20px, 2vw, 28px);
}

.bento--outcomes .card--half .card__lead {
  font-size: 20px;
  color: #0E5A4C;
}

.quotes {
  position: relative;
  padding: 94px 0 100px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(250, 250, 247, 0) 0%, #FAFAF7 88%),
    linear-gradient(154.6deg, #C7D6FF 0%, #D6CCF2 30%, #E9D4E8 55%, #F3E7CD 78%, #EEF1E3 100%);
}

.quotes::before,
.quotes::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0
}

.quotes::before {
  left: 115px;
  top: 148px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(23, 184, 166, .35) 0%, rgba(23, 184, 166, 0) 70%);
  filter: blur(80px)
}

.quotes::after {
  right: 86px;
  top: 152px;
  width: 384px;
  height: 384px;
  background: radial-gradient(circle, rgba(220, 245, 120, .5) 0%, rgba(220, 245, 120, 0) 70%);
  filter: blur(90px)
}

.quotes .wrap,
.quotes__slider {
  position: relative;
  z-index: 1
}

.quotes .wrap {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center
}

.quotes__slider {
  margin-top: 34px
}

.quotes__viewport {
  position: relative;
  height: 415px;
  cursor: grab;
  touch-action: pan-y;
  overflow: hidden
}

.quotes__viewport.is-dragging {
  cursor: grabbing
}

.quotes__track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 39px;
  height: 100%;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
  visibility: hidden
}

.quotes__viewport.is-ready .quotes__track {
  visibility: visible
}

.quotes__track.is-instant .qcard {
  transition: none
}

.qcard {
  position: relative;
  flex: 0 0 min(566px, 86vw);
  width: min(566px, 86vw);
  height: 325px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  background: #fff;
  border: 1px solid rgba(11, 42, 36, .09);
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 1px 1px rgba(11, 42, 36, .03),
    0 22px 50px -34px rgba(11, 42, 36, .2),
    -12px 0 50px rgba(146, 146, 146, .23);
  transition: height .75s var(--ease);
  user-select: none;
  -webkit-user-drag: none;
  cursor: pointer;
}

.qcard img {
  pointer-events: none;
  -webkit-user-drag: none
}

.qcard.is-focus {
  height: 381px;
  z-index: 2;
  cursor: grab
}

.qcard blockquote {
  font-family: var(--font-d);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: -.015em;
  color: #737373;
  padding-top: 10px
}

.qcard__who {
  display: flex;
  align-items: center;
  gap: 24px
}

.qcard__photo {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  overflow: hidden;
  background: #EEF1EC;
  flex: none
}

.qcard__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .75
}

.qcard__who p {
  min-width: 0
}

.qcard__who b,
.qcard__who span {
  display: block;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.5;
  color: #5A6E67;
}

.qcard__who span {
  margin-top: 8px
}

@media (max-width: 1040px) {
  .bento--outcomes {
    grid-template-columns: 1fr 1fr
  }

  .bento--outcomes .card--hero,
  .bento--outcomes .card--yellow,
  .bento--outcomes .card--half {
    grid-column: span 1
  }
}

@media (max-width: 900px) {
  .sector-hero__card {
    border-radius: 28px;
    min-height: 0
  }

  .pain__grid,
  .slife__row {
    grid-template-columns: 1fr
  }

  .quotes {
    padding: 64px 0 72px
  }

  .quotes__viewport {
    height: 360px
  }

  .qcard {
    height: 300px
  }

  .qcard.is-focus {
    height: 340px
  }

  .qcard blockquote {
    font-size: 16px
  }

  .slife__row--rev .slife__copy {
    order: 0
  }

  .bento--outcomes {
    grid-template-columns: 1fr
  }
}

/* =====================================================================
   PRODUCTS / LMS PAGE
   ===================================================================== */
.product-hero {
  padding: 8px var(--wrap-pad) 0
}

.product-hero__card {
  max-width: 1360px;
  margin: 0 auto;
  min-height: min(602px, 78vh);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(64px, 8vw, 112px) clamp(20px, 4vw, 48px) clamp(48px, 6vw, 72px);
  border-radius: 44px;
  background:
    radial-gradient(90% 70% at 50% -10%, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(80% 50% at 50% 110%, rgba(220, 245, 120, .22) 0%, rgba(220, 245, 120, 0) 70%),
    linear-gradient(168deg, #00464A 8%, #007A7F 47%, #35A58F 73%, #DCF0D2 92%);
}

.product-hero__inner {
  max-width: 720px;
  margin: 0 auto
}

.product-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  color: rgba(255, 255, 255, .75);
  font-size: 14px;
  font-weight: 400;
}

.product-hero__title {
  margin-top: 22px;
  font-family: var(--font-d);
  font-weight: 500;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -.06em;
  color: #fff;
}

.product-hero__title em {
  font-style: normal;
  color: #E2E2E2
}

.product-hero__sub {
  max-width: 576px;
  margin: 16px auto 0;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.56;
  color: rgba(255, 255, 255, .8);
}

.product-hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px
}

.product-hero__proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin-top: 36px;
  font-size: 14px;
  color: rgba(255, 255, 255, .75);
}

.product-hero__proof li {
  display: flex;
  align-items: center;
  gap: 6px
}

.product-hero__proof li::before {
  content: "";
  width: 11px;
  height: 7px;
  border-left: 1.6px solid rgba(255, 255, 255, .85);
  border-bottom: 1.6px solid rgba(255, 255, 255, .85);
  transform: rotate(-45deg);
  flex: none;
}

.statstrip {
  padding: clamp(28px, 3vw, 40px) 0
}

.statstrip__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 978px;
  margin: 0 auto;
  text-align: center;
}

.statstrip__item {
  padding: 8px 16px;
  border-right: 1px solid rgba(11, 42, 36, .12);
}

.statstrip__item:last-child {
  border-right: 0
}

.statstrip__item b {
  display: block;
  font-family: var(--font-d);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -.04em;
  color: var(--ink);
  line-height: 1.2;
}

.statstrip__item span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: #5A6E67;
}

/* Same strip, label first. On the platform page the small line describes the
   big number above it ("Up to 50% Reduction" / "In CapEx & OpEx"), so the
   number leads. On the event page it is a field label ("Where" / "Jasmine
   Pavilion"), which has to be read before the value it names — so those
   items put the <span> first in the DOM and this only fixes the gap.

   Deliberately NOT flex-centred: a value that wraps to two lines would then
   push its own label off the line its neighbours sit on. Left in normal
   block flow, every label starts at the top of its stretched grid cell and
   the longer value simply hangs lower. */
.statstrip__row--labelled .statstrip__item span {
  margin-top: 0;
  margin-bottom: 6px;
}

.benefit-grid {
  margin-top: clamp(28px, 3vw, 56px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px
}

.benefit {
  background: #fff;
  border: 1px solid rgba(11, 42, 36, .09);
  border-radius: var(--r-sm);
  padding: 28px;
  box-shadow: 0 22px 25px -20px rgba(11, 42, 36, .07);
}

.benefit__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: rgba(23, 184, 166, .14);
  overflow: clip
}

.benefit__icon img {
  width: 20px;
  height: 20px
}

.benefit h3 {
  margin-top: 20px;
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -.02em;
  color: #0B2A24;
}

.benefit p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.62;
  color: #5A6E67;
}

.flow {
  padding: var(--sec-sm) 0 var(--sec)
}

.flow__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(28px, 3vw, 56px);
}

.flow__row::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 38px;
  height: 1px;
  background: rgba(11, 42, 36, .12);
}

.flow__step {
  position: relative
}

.flow__num {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(11, 42, 36, .09);
  font-family: var(--font-d);
  font-size: 18px;
  letter-spacing: -.02em;
  color: var(--ink);
}

.flow__step h3 {
  margin-top: 20px;
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 19px;
  color: #0B2A24;
}

.flow__step p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.62;
  color: #5A6E67;
}

.rails {
  padding: 0 0 var(--sec-sm)
}

.rails__card {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-md);
  border: 1px solid rgba(11, 42, 36, .09);
  background: linear-gradient(180deg, #fff 22%, #FEFD82 220%);
}

.rails__card h2 {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -.03em;
  color: #0E5A4C;
}

.rails__card p {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.62;
  color: #5A6E67;
}

.rails__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.rails__pills span {
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid rgba(11, 42, 36, .09);
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 14px;
  color: #0B2A24;
}

.suite {
  padding: 0 0 var(--sec-sm)
}

.suite__label {
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5A6E67;
}

.suite__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 371px));
  gap: 20px;
  margin-top: 24px;
}

.suite__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  background: #fff;
  border: 1px solid rgba(11, 42, 36, .09);
  border-radius: var(--r-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.suite__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 40px -34px rgba(11, 42, 36, .4);
}

.suite__card b {
  display: block;
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 22px;
  color: #0B2A24;
}

.suite__card span {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: #5A6E67;
}

.suite__card i {
  font-style: normal;
  color: var(--ink);
  font-size: 18px;
}

.suite__card.is-current {
  box-shadow: 0 22px 40px -34px rgba(11, 42, 36, .4)
}

.faq {
  padding: var(--sec) 0
}

.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.faq__intro p {
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.62;
  color: #5A6E67;
  max-width: 38ch;
}

.faq__intro .learn {
  margin-top: 24px
}

.faq__item {
  border-bottom: 1px solid rgba(11, 42, 36, .12)
}

.faq__item:first-child {
  border-top: 1px solid rgba(11, 42, 36, .12)
}

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  text-align: left;
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -.01em;
  color: #0B2A24;
  transition: color .25s var(--ease);
}

.faq__q:hover {
  color: var(--teal)
}

.faq__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(11, 42, 36, .09);
  flex: none;
  position: relative;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}

.faq__q:hover .faq__icon {
  border-color: rgba(11, 42, 36, .28)
}

.faq__item.is-open .faq__q:hover .faq__icon {
  border-color: var(--ink)
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: var(--ink);
  transition: background .3s var(--ease), transform .42s var(--ease), opacity .28s var(--ease);
}

.faq__icon::before {
  width: 10px;
  height: 1.5px
}

.faq__icon::after {
  width: 1.5px;
  height: 10px
}

/* the plus becomes a minus: the upright stroke swings a quarter turn down
   into the horizontal one and fades out behind it, while the ring fills in.
   The horizontal stroke deliberately does NOT move — rotating the ring too
   would carry it off-axis, and mid-sweep the mark reads as an asterisk
   instead of a plus folding shut. */
.faq__item.is-open .faq__icon {
  background: var(--ink);
  border-color: var(--ink);
}

.faq__item.is-open .faq__icon::before,
.faq__item.is-open .faq__icon::after {
  background: #fff
}

.faq__item.is-open .faq__icon::after {
  transform: rotate(90deg);
  opacity: 0
}

/* .faq__panel is the height-animated box and carries no styling of its own:
   main.js owns its inline height (and overflow) for the duration of a tween
   and then hands both back, so an open answer sits at natural height and
   keeps reflowing on resize or when a webfont lands. Collapsed panels carry
   the `hidden` attribute, which keeps them out of the tab order and out of
   a screen reader's reach — and keeps the accordion collapsed if the script
   never runs at all. */
.faq__a {
  padding: 0 0 24px;
  font-size: 15px;
  line-height: 1.62;
  color: #5A6E67;
}

@media (max-width: 900px) {
  .product-hero {
    padding-top: 4px
  }

  .product-hero__card {
    border-radius: 28px;
    min-height: 0;
    padding: 48px 24px 40px
  }

  .product-hero__title {
    margin-top: 16px
  }

  .product-hero__sub {
    margin-top: 14px
  }

  .product-hero__cta {
    margin-top: 22px;
    flex-direction: column;
    align-items: stretch
  }

  .product-hero__cta .btn {
    width: 100%;
    justify-content: center
  }

  .product-hero__proof {
    margin-top: 22px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: max-content;
    max-width: 100%;
    margin-inline: auto
  }

  .statstrip {
    padding: 16px 0 4px
  }

  /* Platform page: give Compliance → Rewafin LOS a little more air than the
     stacked stat rows above it. Desktop keeps the original strip padding. */
  .statstrip:has(+ .features) {
    padding-bottom: 32px
  }

  .statstrip__row,
  .benefit-grid,
  .rails__card,
  .suite__grid,
  .faq__grid {
    grid-template-columns: 1fr
  }

  .statstrip__item {
    border-right: 0;
    border-bottom: 1px solid rgba(11, 42, 36, .12);
    padding: 14px 0
  }

  .statstrip__item:last-child {
    border-bottom: 0
  }

  .flow__row::before {
    display: none
  }

  .flow .sec-title {
    text-align: center
  }

  .flow__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 24px;
    margin-top: 28px
  }

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

  .flow__num {
    margin-inline: auto
  }

  .flow__step h3 {
    margin-top: 14px
  }

  .flow__step p {
    max-width: 34ch;
    margin-inline: auto
  }

  /* Title already opens the section — don't add another --sec-sm of air */
  .features:has(> .features__block) {
    padding: 12px 0 40px
  }

  .features__block > .sec-title {
    margin-bottom: 24px
  }

  .features__block > .feat {
    padding: 0
  }

  .features__block .feat--stacked .shot {
    margin-bottom: 22px
  }

  .features__block .feat__list {
    gap: 40px
  }

  .features__block + .features__block {
    margin-top: 36px
  }

  .proof {
    padding-top: 40px
  }
}

@media (max-width: 600px) {
  .flow__row {
    grid-template-columns: 1fr;
    gap: 32px
  }
}