/* opndoor — design system tokens & shared styles */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Nunito:wght@600;700;800;900&display=swap');

/* ——— Brand fonts (Sora display + Manrope body, per partner brief) ——— */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@400;600;700;800&display=swap');

:root {
  /* Anchor neutrals */
  --canvas: #ffffff;            /* clean white primary */
  --canvas-2: #f8eff9;          /* white lilac — brand soft */
  --canvas-3: #fbf7fc;           /* extra-soft lilac */
  --ink: #271d5f;                /* valhalla as primary text */
  --ink-soft: #6c2c9c;           /* daisy bush — secondary type */
  --ink-mute: #8676ab;           /* lavender purple — muted type */
  --hairline: rgba(39, 29, 95, 0.10);
  --hairline-strong: rgba(39, 29, 95, 0.20);

  /* Brand — official palette */
  --heliotrope: #d364fb;         /* primary accent */
  --heliotrope-deep: #b54de0;    /* hover/active */
  --white-lilac: #f8eff9;
  --valhalla: #271d5f;            /* primary anchor */
  --valhalla-deep: #1a1240;
  --cerise: #e13973;
  --lavender: #8676ab;
  --light-wisteria: #c49ed6;
  --amethyst: #a44cc9;
  --brilliant-rose: #ef5ba9;
  --daisy-bush: #6c2c9c;
  --regent-blue: #8cb4dc;

  /* Type — Sora for display, Manrope for body (per partner brief). */
  --display: 'Sora', system-ui, sans-serif;
  --body: 'Manrope', system-ui, -apple-system, sans-serif;

  /* Spacing scale (8pt base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 160px;

  /* Radii — softer, friendlier */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 32px;

  /* Type scale */
  --t-display: clamp(48px, 6.4vw, 96px);
  --t-h1: clamp(40px, 4.6vw, 68px);
  --t-h2: clamp(30px, 3.2vw, 46px);
  --t-h3: clamp(22px, 2vw, 28px);
  --t-h4: 20px;
  --t-body-lg: 18px;
  --t-body: 16px;
  --t-small: 14px;
  --t-micro: 12px;

  /* Layout */
  --max: 1320px;
  --gutter: clamp(20px, 4vw, 40px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

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

/* ——— Typography ——— */
.display, h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); letter-spacing: -0.022em; }
h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.015em; line-height: 1.18; }
h4 { font-size: var(--t-h4); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }

p { margin: 0; }
.lede { font-size: var(--t-body-lg); color: var(--ink-soft); line-height: 1.55; max-width: 60ch; text-wrap: pretty; font-weight: 400; }
.eyebrow {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--heliotrope-deep);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--heliotrope);
  border-radius: 1px;
}

/* ——— Layout ——— */
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: clamp(64px, 10vw, 128px) 0; }
.section--tight { padding: clamp(48px, 7vw, 80px) 0; }
.section--lilac { background: var(--canvas-2); }
.section--soft  { background: var(--canvas-3); }

.section--dark {
  background: var(--valhalla);
  color: #fff;
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark .lede { color: rgba(255, 255, 255, 0.78); }
.section--dark .eyebrow { color: var(--heliotrope); }
.section--dark .eyebrow::before { background: var(--heliotrope); }

/* ——— Buttons ——— */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn--primary {
  background: var(--heliotrope);
  color: #fff;
  box-shadow: 0 6px 20px -6px rgba(211,100,251,0.55);
}
.btn--primary:hover { background: var(--heliotrope-deep); box-shadow: 0 10px 28px -8px rgba(211,100,251,0.7); }

.btn--dark {
  background: var(--valhalla);
  color: #fff;
}
.btn--dark:hover { background: var(--daisy-bush); }

.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline-strong);
}
.btn--secondary:hover { border-color: var(--ink); background: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  padding: 14px 4px;
}
.btn--ghost:hover { color: var(--heliotrope-deep); }

.btn--accent {
  background: var(--heliotrope);
  color: #fff;
}
.btn--accent:hover { background: var(--heliotrope-deep); }

.section--dark .btn--primary { background: var(--heliotrope); color: #fff; }
.section--dark .btn--primary:hover { background: #fff; color: var(--valhalla); }
.section--dark .btn--secondary { color: #fff; border-color: rgba(255,255,255,0.30); }
.section--dark .btn--secondary:hover { border-color: #fff; background: rgba(255,255,255,0.06); }

.btn .arrow { display: inline-block; transition: transform 0.18s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ——— Nav ——— */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.nav__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.nav__brand img { height: 28px; width: auto; display: block; }
.wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.04em;
  color: var(--heliotrope-deep);
  line-height: 1;
  text-transform: lowercase;
}
.wordmark--on-dark { color: #fff; }
.nav__links {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.nav__links li { white-space: nowrap; }
.nav__links a { white-space: nowrap; }
.nav__links a {
  color: var(--ink-soft);
  transition: color 0.15s;
}
.nav__links a:hover { color: var(--heliotrope-deep); }
.nav__links a.is-active { color: var(--ink); }
.nav__cta { display: flex; gap: 10px; align-items: center; }
.nav__cta .btn { padding: 10px 18px; font-size: 14px; }

@media (max-width: 1180px) { .nav__links { gap: 16px; font-size: 13px; } .nav__inner { gap: 20px; } }
@media (max-width: 980px) { .nav__links { display: none; } .nav__menu-btn { display: inline-flex; } }
.nav__menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.nav__menu-btn svg { width: 18px; height: 18px; }

/* ——— Footer ——— */
.footer {
  background: var(--valhalla);
  color: rgba(255,255,255,0.7);
  padding: 80px 0 32px;
}
.footer h4 {
  color: #fff;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer__brand { display: flex; flex-direction: column; gap: 16px; }
.footer__brand img { height: 28px; width: auto; }
.footer__brand .wordmark { font-size: 28px; }
.footer__tag { font-size: 14px; max-width: 30ch; line-height: 1.5; color: rgba(255,255,255,0.7); }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.footer ul a:hover { color: var(--heliotrope); }
.footer__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  flex-wrap: wrap;
  gap: 16px;
}
.footer__legal { display: flex; gap: 24px; }

@media (max-width: 880px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ——— Cards ——— */
.card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 32px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--light-wisteria);
  box-shadow: 0 16px 40px -20px rgba(39,29,95,0.18);
}

/* ——— Pill / chip ——— */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: #fff;
  color: var(--ink-soft);
  font-weight: 600;
}
.pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--heliotrope);
  box-shadow: 0 0 0 3px rgba(211,100,251,0.22);
}

/* ——— Reveal ——— */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ——— Audience cards ——— */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 880px) { .audience-grid { grid-template-columns: 1fr; } }
.audience-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.audience-card:hover {
  transform: translateY(-3px);
  border-color: var(--light-wisteria);
  box-shadow: 0 16px 40px -20px rgba(39,29,95,0.18);
}
.audience-card__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--heliotrope-deep);
}
.audience-card__title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  letter-spacing: -0.015em;
  line-height: 1.18;
}
.audience-card__body { font-size: 14px; color: var(--ink-soft); flex-grow: 1; line-height: 1.55; }
.audience-card__cta {
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
}
.audience-card:hover .audience-card__cta { color: var(--heliotrope-deep); }

/* ——— Hairline ——— */
.divider { height: 1px; background: var(--hairline); width: 100%; }

/* ——— Metric ——— */
.metric { display: flex; flex-direction: column; gap: 8px; }
.metric__value {
  font-family: var(--display);
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--heliotrope-deep);
}
.metric__label { font-size: 13px; color: var(--ink-soft); letter-spacing: 0.01em; text-wrap: balance; }


/* === homepage page-styles (merged) === */

    /* =========================================================
       opndoor homepage v2. Design-led, less written.
       Owns the market shift: rent upfront is gone.
       opndoor is the professional guarantor process.
       ========================================================= */

    /* ---------- shared bits ---------- */
    .pre-h { display:flex; align-items:center; gap:10px; }
    .pre-h .pre-h__dot {
      width:8px; height:8px; border-radius:50%;
      background: var(--heliotrope);
    }
    .pre-h__text {
      font-family: var(--body);
      font-size: 12px; font-weight: 700;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--ink-soft);
    }

    .ribbon {
      background: var(--ink);
      color:#fff;
      padding: 10px 0;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.01em;
    }
    .ribbon__inner { display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; }
    .ribbon__pip {
      display:inline-block; width:6px; height:6px; border-radius:50%;
      background: var(--heliotrope);
    }
    .ribbon a { color: var(--heliotrope); font-weight: 600; }
    .ribbon a:hover { color:#fff; }

    /* ---------- HERO ---------- */
    .hero {
      padding: clamp(56px, 8vw, 96px) 0 clamp(72px, 9vw, 120px);
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(1100px 600px at 100% -10%, rgba(211,100,251,0.20), transparent 60%),
        radial-gradient(900px 600px at -10% 90%, rgba(140,180,220,0.18), transparent 60%),
        var(--canvas);
    }
    .hero__grid {
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: clamp(40px, 5vw, 80px);
      align-items: center;
    }
    @media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; } }

    .hero__title {
      font-size: clamp(40px, 5.4vw, 76px);
      line-height: 0.98;
      letter-spacing: -0.028em;
      margin: 22px 0 26px;
      text-wrap: balance;
      font-weight: 800;
    }
    .hero__title em {
      font-style: normal;
      color: var(--heliotrope-deep);
      position: relative;
      white-space: nowrap;
    }
    .hero__title em::after {
      content:'';
      position: absolute;
      left: 0; right: 0; bottom: 6px;
      height: 12px;
      background: var(--heliotrope);
      opacity: 0.28;
      z-index: -1;
      border-radius: 4px;
    }
    .hero__lede { max-width: 50ch; margin-bottom: 32px; font-size: 18px; }
    .hero__ctas { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
    .hero__chips {
      display:flex; flex-wrap:wrap; gap:8px;
      margin-top: 36px; padding-top: 28px;
      border-top: 1px solid var(--hairline);
    }
    .hero__chip {
      font-size: 12px;
      padding: 7px 14px;
      border-radius: 999px;
      border: 1px solid var(--hairline-strong);
      background: rgba(255,255,255,0.7);
      color: var(--ink);
      font-weight: 600;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .hero__chip::before {
      content:''; width: 5px; height: 5px; border-radius:50%;
      background: var(--heliotrope);
    }

    /* ---------- HERO PRODUCT VISUAL ---------- */
    /* A 3-state diagram: stalled application becomes guarantee issued.
       Pure CSS/SVG, no stock photos. */
    .stage {
      position: relative;
      background: linear-gradient(160deg, #1a1240 0%, #271d5f 50%, #6c2c9c 100%);
      border-radius: 28px;
      padding: 28px;
      color:#fff;
      overflow: hidden;
      min-height: 520px;
      box-shadow: 0 30px 60px -30px rgba(39,29,95,0.5);
    }
    .stage::before {
      content:'';
      position:absolute; inset: 0;
      background:
        radial-gradient(450px 320px at 90% 0%, rgba(211,100,251,0.5), transparent 60%),
        radial-gradient(360px 260px at 0% 100%, rgba(239,91,169,0.35), transparent 60%);
      pointer-events:none;
    }
    .stage__head {
      position:relative;
      display:flex; align-items:center; justify-content:space-between;
      gap:12px;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(255,255,255,0.12);
      margin-bottom: 22px;
    }
    .stage__title {
      font-family: var(--display);
      font-size: 14px;
      font-weight: 700;
      color:#fff;
      letter-spacing: -0.005em;
    }
    .stage__title small {
      display:block;
      font-family: var(--body);
      font-size: 11px;
      font-weight: 600;
      color: rgba(255,255,255,0.6);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .stage__pill {
      display:inline-flex; align-items:center; gap: 6px;
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.9);
    }
    .stage__pill .pip { width:6px; height:6px; border-radius:50%; background: var(--heliotrope); animation: ping 2s infinite; }
    @keyframes ping {
      0%, 100% { box-shadow: 0 0 0 0 rgba(211,100,251,0.7); }
      50% { box-shadow: 0 0 0 6px rgba(211,100,251,0); }
    }

    /* before/after rows */
    .route {
      position: relative;
      display:grid;
      grid-template-columns: 28px 1fr auto;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      border-radius: 14px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.12);
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 10px;
    }
    .route__icon {
      width: 28px; height: 28px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 8px;
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.7);
    }
    .route__icon svg { width: 14px; height: 14px; }
    .route__icon--glyph {
      font-family: var(--display);
      font-size: 16px; font-weight: 800;
      color: rgba(255,255,255,0.9);
      line-height: 1;
    }
    .route__label { color: rgba(255,255,255,0.92); }
    .route__tag {
      font-size: 10px; font-weight: 700;
      letter-spacing: 0.06em; text-transform: uppercase;
      padding: 4px 9px;
      border-radius: 999px;
    }
    .route--gone { color: rgba(255,255,255,0.5); }
    .route--gone .route__label { text-decoration: line-through; text-decoration-color: rgba(239,91,169,0.65); text-decoration-thickness: 1.5px; }
    .route--gone .route__tag { background: rgba(225,57,115,0.22); color: #f8b6cf; }
    .route--gap .route__tag { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); }
    .route--win {
      background: linear-gradient(120deg, rgba(211,100,251,0.18), rgba(239,91,169,0.12));
      border-color: rgba(211,100,251,0.55);
    }
    .route--win .route__icon { background: var(--heliotrope); color:#fff; }
    .route--win .route__label { font-weight: 700; color:#fff; }
    .route--win .route__tag { background: var(--heliotrope); color:#fff; }

    .stage__divider {
      position: relative;
      display:flex; align-items:center; gap:12px;
      margin: 14px 0;
      color: rgba(255,255,255,0.5);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .stage__divider::before, .stage__divider::after {
      content:''; flex: 1; height: 1px;
      background: rgba(255,255,255,0.14);
    }

    /* document card at bottom */
    .doc {
      position: relative;
      margin-top: 18px;
      padding: 16px 18px;
      background: rgba(255,255,255,0.96);
      color: var(--ink);
      border-radius: 14px;
      display: grid;
      grid-template-columns: 36px 1fr auto;
      gap: 14px;
      align-items: center;
      box-shadow: 0 18px 40px -20px rgba(0,0,0,0.4);
    }
    .doc__ic {
      width: 36px; height: 36px; border-radius: 10px;
      background: var(--white-lilac);
      color: var(--heliotrope-deep);
      display:inline-flex; align-items:center; justify-content:center;
    }
    .doc__ic svg { width: 18px; height: 18px; }
    .doc__title { font-size: 13px; font-weight: 700; }
    .doc__sub { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }
    .doc__status {
      font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
      padding: 5px 9px; border-radius: 999px;
      background: rgba(34, 178, 110, 0.12); color: #1c8a52;
      display:inline-flex; align-items:center; gap:6px;
    }
    .doc__status::before { content:''; width:6px; height:6px; border-radius:50%; background:#22b26e; }

    /* ---------- SECTION: market shift ---------- */
    .shift { background: var(--canvas-2); }
    .shift__head {
      display:grid; grid-template-columns: 1fr 1fr;
      gap: 56px; align-items: end;
      margin-bottom: 56px;
    }
    @media (max-width: 880px) { .shift__head { grid-template-columns: 1fr; gap: 24px; } }

    .shift__cards {
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }
    @media (max-width: 880px) { .shift__cards { grid-template-columns: 1fr; } }

    .shiftcard {
      background:#fff;
      border: 1px solid var(--hairline);
      border-radius: 22px;
      padding: 28px;
      display:flex; flex-direction: column;
      gap: 14px;
      min-height: 280px;
      position: relative;
      overflow: hidden;
    }
    .shiftcard__num {
      font-family: var(--body);
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--ink-mute);
    }
    .shiftcard h3 {
      font-family: var(--display);
      font-size: 24px; font-weight: 800;
      letter-spacing: -0.018em; line-height: 1.18;
      margin: auto 0 0;
    }
    .shiftcard p {
      font-size: 15px; color: var(--ink-soft); line-height: 1.55;
    }
    .shiftcard__visual {
      height: 90px;
      display:flex; align-items:center; justify-content:center;
      border-radius: 14px;
      position: relative;
    }
    .shiftcard--win {
      background: linear-gradient(150deg, var(--heliotrope) 0%, var(--amethyst) 100%);
      color:#fff;
      border-color: transparent;
    }
    .shiftcard--win .shiftcard__num { color: rgba(255,255,255,0.7); }
    .shiftcard--win h3 { color:#fff; }
    .shiftcard--win p { color: rgba(255,255,255,0.92); }

    /* visuals inside the cards */
    .vmoney {
      width:100%; height: 100%;
      background: var(--canvas-2);
      display:flex; align-items:center; justify-content:center;
      gap: 8px;
      border-radius: 14px;
      position: relative;
    }
    .vmoney__chip {
      font-family: var(--display);
      font-size: 18px; font-weight: 800;
      color: var(--ink);
      padding: 12px 18px;
      background:#fff;
      border-radius: 12px;
      border:1px solid var(--hairline);
      position: relative;
    }
    .vmoney__chip--strike { color: rgba(39,29,95,0.45); }
    .vmoney__chip--strike::after {
      content:'';
      position:absolute;
      left: 8%; right: 8%; top: 50%;
      height: 2px;
      background: var(--cerise);
      transform: rotate(-7deg);
      transform-origin: center;
    }
    .vmoney__x {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: var(--cerise);
      color:#fff;
      display:inline-flex; align-items:center; justify-content:center;
      font-size: 14px; font-weight: 800;
    }
    .vstall {
      width:100%; height:100%;
      border-radius:14px;
      background: var(--canvas-2);
      display:flex; align-items:center; justify-content:space-between;
      padding: 0 18px;
      gap: 10px;
    }
    .vstall__step {
      flex:1;
      height: 8px;
      border-radius: 999px;
      background: rgba(39,29,95,0.12);
      position: relative;
    }
    .vstall__step--done { background: var(--ink); }
    .vstall__step--block {
      background: var(--cerise);
    }
    .vstall__step--block::after {
      content:'!';
      position:absolute;
      right: -3px; top: 50%;
      transform: translateY(-50%);
      width: 18px; height: 18px;
      background: var(--cerise);
      color:#fff; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      font-size: 11px; font-weight: 800;
    }
    .vissue {
      width:100%; height:100%;
      border-radius:14px;
      background: rgba(255,255,255,0.12);
      display:flex; align-items:center; justify-content:center;
      gap:10px;
      color:#fff;
      font-size: 13px; font-weight: 700;
    }
    .vissue__seal {
      width: 44px; height: 44px;
      background: rgba(255,255,255,0.96);
      color: var(--heliotrope-deep);
      border-radius: 50%;
      display:inline-flex; align-items:center; justify-content:center;
      box-shadow: 0 8px 24px -8px rgba(0,0,0,0.25);
    }
    .vissue__seal svg { width: 20px; height: 20px; }

    /* ---------- SECTION: pillars ---------- */
    .pillars__head {
      display:grid; grid-template-columns: 1fr 1fr;
      gap: 56px; align-items: end;
      margin-bottom: 56px;
    }
    @media (max-width: 880px) { .pillars__head { grid-template-columns: 1fr; gap: 24px; } }
    .pillars__grid {
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1px;
      background: var(--hairline);
      border: 1px solid var(--hairline);
      border-radius: 28px;
      overflow: hidden;
    }
    @media (max-width: 720px) { .pillars__grid { grid-template-columns: 1fr; } }
    .pillar {
      background:#fff;
      padding: 36px;
      display:flex; flex-direction: column;
      gap: 14px;
      min-height: 240px;
      transition: background 0.2s;
    }
    .pillar:hover { background: var(--canvas-3); }
    .pillar__lab {
      display:flex; align-items:center; gap:10px;
      font-family: var(--body);
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--heliotrope-deep);
    }
    .pillar__lab .num {
      width: 22px; height: 22px;
      display:inline-flex; align-items:center; justify-content:center;
      background: var(--white-lilac);
      color: var(--heliotrope-deep);
      border-radius: 6px;
      font-size: 11px; font-weight: 700;
      letter-spacing: 0;
    }
    .pillar h3 {
      font-family: var(--display);
      font-size: 24px; font-weight: 800;
      letter-spacing: -0.018em; line-height: 1.18;
      margin: auto 0 0;
    }
    .pillar p { font-size: 15px; color: var(--ink-soft); line-height: 1.55; }

    /* ---------- SECTION: how it works (dark) ---------- */
    .how {
      background: linear-gradient(180deg, #1a1240 0%, #271d5f 100%);
      color:#fff;
      padding: clamp(72px, 9vw, 120px) 0;
    }
    .how__head {
      display:grid; grid-template-columns: 1fr 1fr;
      gap:56px; align-items: end; margin-bottom: 56px;
    }
    @media (max-width: 880px) { .how__head { grid-template-columns: 1fr; gap: 24px; } }

    .how__steps {
      display:grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
    }
    @media (max-width: 980px) { .how__steps { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 540px)  { .how__steps { grid-template-columns: 1fr; } }
    .step {
      padding: 28px 24px 28px 0;
      border-top: 1px solid rgba(255,255,255,0.18);
      display:flex; flex-direction: column;
      gap: 10px;
    }
    .step__num {
      font-family: var(--display);
      font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
      color: var(--heliotrope);
    }
    .step h3 { font-size: 18px; letter-spacing: -0.005em; line-height: 1.2; color:#fff; }
    .step p { font-size: 13.5px; color: rgba(255,255,255,0.78); line-height: 1.55; }
    .step__pill {
      align-self:flex-start;
      font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
      padding: 4px 9px; border-radius: 999px;
      background: rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.85);
      display:inline-flex; align-items:center; gap:6px;
      margin-top: 6px;
    }
    .step__pill::before { content:''; width:5px; height:5px; border-radius:50%; background: var(--heliotrope); }
    .step--issued .step__pill { background: var(--heliotrope); color:#fff; }
    .step--issued .step__pill::before { background:#fff; }

    /* status flow ribbon below steps */
    .flow {
      margin-top: 56px;
      display:flex; align-items:center;
      padding: 14px 22px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 999px;
      width: 100%;
      flex-wrap: nowrap;
    }
    .flow__node {
      display:inline-flex; align-items:center; gap:8px;
      font-size: 12px; font-weight: 600;
      color: rgba(255,255,255,0.78);
      padding: 4px 4px;
      flex: 0 0 auto;
      white-space: nowrap;
    }
    .flow__node .dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: rgba(255,255,255,0.45);
      flex-shrink: 0;
    }
    .flow__node--active .dot { background: var(--heliotrope); box-shadow: 0 0 0 4px rgba(211,100,251,0.18); }
    .flow__node--active { color: #fff; }
    .flow__sep {
      flex: 1 1 auto;
      min-width: 12px;
      height: 1px;
      background: rgba(255,255,255,0.18);
    }
    @media (max-width: 980px) {
      .flow { border-radius: 18px; padding: 14px 18px; flex-wrap: wrap; gap: 10px 14px; }
      .flow__sep { display: none; }
      .flow__node { font-size: 11.5px; }
    }

    /* ---------- SECTION: audiences ---------- */
    .auds { background: var(--canvas-2); }
    .auds__grid {
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    @media (max-width: 980px) { .auds__grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 600px) { .auds__grid { grid-template-columns: 1fr; } }
    .aud {
      background:#fff;
      border:1px solid var(--hairline);
      border-radius: 22px;
      padding: 28px;
      display:flex; flex-direction:column;
      gap: 14px;
      min-height: 260px;
      text-decoration: none;
      color: var(--ink);
      transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    }
    .aud:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 40px -22px rgba(39,29,95,0.25);
      border-color: var(--light-wisteria);
    }
    .aud__tag {
      display: inline-flex; align-items:center; gap:8px;
      font-family: var(--body);
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--ink-soft);
    }
    .aud__tag .tagdot { width:6px; height:6px; border-radius:50%; background: var(--heliotrope); }
    .aud h3 {
      font-family: var(--display);
      font-size: 22px; font-weight: 800;
      letter-spacing: -0.015em; line-height: 1.2;
      margin-top: auto;
    }
    .aud p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
    .aud__cta {
      font-size: 14px; font-weight: 600;
      color: var(--heliotrope-deep);
      display:inline-flex; align-items:center; gap:6px;
    }
    .aud:hover .aud__cta { gap: 10px; }
    .aud--tenant {
      background: linear-gradient(160deg, #fff 0%, var(--white-lilac) 100%);
      border-color: var(--light-wisteria);
    }

    /* ---------- SECTION: eligibility ---------- */
    .elig {
      display:grid;
      grid-template-columns: 0.95fr 1.05fr;
      gap: 56px;
      align-items: start;
    }
    @media (max-width: 880px) { .elig { grid-template-columns: 1fr; gap: 32px; } }

    .badges {
      display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
    }
    @media (max-width: 540px) { .badges { grid-template-columns: 1fr; } }
    .badge {
      background:#fff;
      border:1px solid var(--hairline);
      border-radius: 16px;
      padding: 18px 18px;
      display:flex; flex-direction: column;
      gap: 6px;
    }
    .badge__head {
      display:flex; align-items:center; gap: 10px;
    }
    .badge__check {
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--heliotrope);
      color:#fff;
      display:inline-flex; align-items:center; justify-content:center;
      font-size: 11px; font-weight: 800;
      flex-shrink: 0;
    }
    .badge__check svg { width: 13px; height: 13px; }
    .badge__check--warn {
      background: #f4b942;
      color: #1a1303;
    }
    .badge__title {
      font-family: var(--display);
      font-size: 15px; font-weight: 700;
      letter-spacing: -0.005em;
      color: var(--ink);
    }
    .badge__body { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

    .elig__panel {
      background:#fff;
      border:1px solid var(--hairline);
      border-radius: 22px;
      padding: 28px;
      display:flex; flex-direction: column; gap: 18px;
    }
    .reqlist { display:flex; flex-direction:column; gap:14px; }
    .req {
      display:grid;
      grid-template-columns: 28px 1fr auto;
      gap: 12px;
      align-items: center;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--hairline);
    }
    .req:last-child { border-bottom: none; padding-bottom: 0; }
    .req__ic {
      width: 28px; height: 28px;
      border-radius: 8px;
      background: var(--white-lilac);
      color: var(--heliotrope-deep);
      display:inline-flex; align-items:center; justify-content:center;
    }
    .req__ic svg { width: 14px; height: 14px; }
    .req__ic--glyph {
      font-family: var(--display);
      font-size: 15px; font-weight: 800;
      color: var(--heliotrope-deep);
      line-height: 1;
    }
    .req__lbl {
      font-size: 13.5px;
      color: var(--ink);
      font-weight: 600;
    }
    .req__lbl span {
      display:block; font-weight: 400; color: var(--ink-soft);
      margin-top: 2px; font-size: 12.5px;
    }
    .req__val {
      font-family: var(--display);
      font-size: 15px; font-weight: 800;
      color: var(--heliotrope-deep);
    }
    .fee {
      background: var(--canvas-2);
      border-radius: 16px;
      padding: 18px;
      font-size: 13.5px; line-height: 1.55;
      color: var(--ink);
    }
    .fee b { color: var(--heliotrope-deep); font-weight: 800; }
    .fee__row { display:flex; justify-content:space-between; gap: 12px; padding: 6px 0; }
    .fee__row + .fee__row { border-top: 1px dashed var(--hairline-strong); }
    .fee__row strong { font-family: var(--display); color: var(--ink); font-weight: 800; }

    /* ---------- SECTION: trust (dark) ---------- */
    .trust {
      background: linear-gradient(180deg, #271d5f 0%, #1a1240 100%);
      color:#fff;
      padding: clamp(72px, 9vw, 120px) 0;
    }
    .trust__head { max-width: 780px; margin-bottom: 48px; }
    .trust__head h2 { color:#fff; }
    .trust__head p { color: rgba(255,255,255,0.78); }
    .trust__grid {
      display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    }
    @media (max-width: 880px) { .trust__grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 600px) { .trust__grid { grid-template-columns: 1fr; } }
    .tcard {
      background: rgba(255,255,255,0.05);
      border:1px solid rgba(255,255,255,0.12);
      border-radius: 18px;
      padding: 22px 22px;
      display:flex; flex-direction: column; gap: 10px;
      min-height: 130px;
    }
    .tcard__ic {
      width: 32px; height: 32px;
      border-radius: 8px;
      background: rgba(211,100,251,0.18);
      color: var(--heliotrope);
      display:inline-flex; align-items:center; justify-content:center;
    }
    .tcard__ic svg { width: 16px; height: 16px; }
    .tcard h4 {
      font-family: var(--display);
      font-size: 15px; font-weight: 700;
      letter-spacing: -0.005em; color:#fff;
    }
    .tcard p { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.5; }
    .trust__legal {
      margin-top: 32px;
      font-size: 12px; line-height: 1.6;
      color: rgba(255,255,255,0.55);
      max-width: 70ch;
    }

    /* ---------- SECTION: integrations ---------- */
    .integ {
      display:grid; grid-template-columns: 1fr 1fr;
      gap: 56px; align-items: center;
    }
    @media (max-width: 880px) { .integ { grid-template-columns: 1fr; } }
    .integ__panel {
      position: relative;
      background:#fff;
      border:1px solid var(--hairline);
      border-radius: 24px;
      padding: 32px;
      overflow: hidden;
    }
    .integ__rail {
      position: relative;
      display:grid; grid-template-columns: 1fr; gap: 12px;
    }
    .integ__row {
      display:grid;
      grid-template-columns: 36px 1fr auto;
      gap: 14px;
      align-items: center;
      padding: 14px 16px;
      background: var(--canvas-2);
      border-radius: 14px;
      font-size: 14px;
    }
    .integ__row .row__ic {
      width: 36px; height: 36px;
      background:#fff;
      border-radius: 10px;
      display:inline-flex; align-items:center; justify-content:center;
      color: var(--heliotrope-deep);
    }
    .integ__row .row__ic svg { width: 16px; height: 16px; }
    .integ__row .row__lbl strong {
      display:block; font-family: var(--display); color: var(--ink);
      font-weight: 700; font-size: 14px;
    }
    .integ__row .row__lbl span { font-size: 12.5px; color: var(--ink-soft); }
    .integ__row .row__tag {
      font-size: 10px; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase;
      padding: 5px 9px; border-radius: 999px;
      background: rgba(211,100,251,0.16);
      color: var(--heliotrope-deep);
    }

    /* ---------- final CTA ---------- */
    .finale {
      padding: clamp(64px, 8vw, 112px) 0;
    }
    .finale__inner {
      position: relative;
      background: linear-gradient(135deg, #1a1240 0%, #271d5f 50%, #6c2c9c 100%);
      border-radius: 32px;
      padding: clamp(48px, 7vw, 96px);
      color:#fff;
      overflow: hidden;
      display:grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 56px;
      align-items: center;
    }
    @media (max-width: 880px) { .finale__inner { grid-template-columns: 1fr; padding: 48px 32px; } }
    .finale__inner::before {
      content:'';
      position:absolute;
      top:-150px; right:-100px;
      width:480px; height:480px; border-radius:50%;
      background: radial-gradient(circle, rgba(211,100,251,0.55), transparent 70%);
    }
    .finale h2 { color:#fff; font-size: clamp(34px, 4vw, 56px); position: relative; }
    .finale__lede { color: rgba(255,255,255,0.85); margin-top: 18px; max-width: 48ch; position: relative; font-size: 17px; }
    .finale__ctas { display:flex; flex-wrap:wrap; gap: 12px; margin-top: 28px; position: relative; }
    .finale__form {
      position: relative;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.16);
      backdrop-filter: blur(10px);
      border-radius: 22px;
      padding: 26px;
      display:flex; flex-direction: column; gap: 14px;
    }
    .finale__form label {
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(255,255,255,0.7);
    }
    .finale__form input,
    .finale__form select {
      background: rgba(255,255,255,0.06);
      border:1px solid rgba(255,255,255,0.16);
      color:#fff;
      padding: 12px 14px;
      border-radius: 10px;
      font-family: var(--body);
      font-size: 14px;
      font-weight: 500;
      width: 100%;
    }
    .finale__form input::placeholder { color: rgba(255,255,255,0.4); }
    .finale__form .btn { justify-content: center; }
    .finale__legal {
      font-size: 11.5px;
      color: rgba(255,255,255,0.6);
      line-height: 1.55;
      margin-top: 4px;
    }
    .finale__form a { color: rgba(255,255,255,0.85); text-decoration: underline; }

    /* extra utility */
    .h2-tight { letter-spacing: -0.025em; }

    /* ---------- FAQ ---------- */
    .faq { background: var(--canvas-2); }
    .faq__head { max-width: 780px; margin-bottom: 48px; }
    .faq__grid {
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
      max-width: 980px;
    }
    .faq__item {
      background:#fff;
      border:1px solid var(--hairline);
      border-radius: 18px;
      padding: 22px 26px;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .faq__item[open] {
      border-color: var(--light-wisteria);
      box-shadow: 0 14px 30px -18px rgba(39,29,95,0.14);
    }
    .faq__item summary {
      list-style: none;
      cursor: pointer;
      font-family: var(--display);
      font-size: 17px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -0.005em;
      display:flex; align-items:center; justify-content: space-between;
      gap: 16px;
    }
    .faq__item summary::-webkit-details-marker { display: none; }
    .faq__item summary::after {
      content: '+';
      font-family: var(--display);
      font-size: 22px; font-weight: 700;
      width: 28px; height: 28px;
      border-radius: 50%;
      background: var(--white-lilac);
      color: var(--heliotrope-deep);
      display:inline-flex; align-items:center; justify-content:center;
      flex-shrink: 0;
      transition: transform 0.2s, background 0.2s;
    }
    .faq__item[open] summary::after { content: '−'; background: var(--heliotrope); color:#fff; }
    .faq__item p {
      margin-top: 14px;
      font-size: 15px;
      line-height: 1.6;
      color: var(--ink-soft);
    }

    /* ---------- About / E-E-A-T paragraph ---------- */
    .about-block {
      background: #fff;
      border: 1px solid var(--hairline);
      border-radius: 22px;
      padding: 32px;
      max-width: 880px;
    }
    .about-block h3 {
      font-family: var(--display);
      font-size: 22px; font-weight: 800;
      letter-spacing: -0.018em;
      margin-bottom: 14px;
    }
    .about-block p {
      font-size: 15.5px;
      line-height: 1.7;
      color: var(--ink-soft);
    }
    .about-block p + p { margin-top: 12px; }
    .about-block strong { color: var(--ink); font-weight: 700; }