/* ===========================================================================
   Dealdrum Landing — one-pager styles
   Built on top of /colors_and_type.css (which provides tokens + base type).
   =========================================================================== */

:root {
  --section-pad: 96px;
  --gutter: 48px;
}
@media (max-width: 800px) {
  :root { --section-pad: 56px; --gutter: 24px; }
}

* { box-sizing: border-box; }

html,
body { overflow-x: clip; } /* clip ≠ hidden: doesn't create a scroll container, so position:sticky works */

body { font-family: var(--font-ui); color: var(--fg-1); background: var(--surface-app); }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Header ------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248, 250, 247, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
  transition: box-shadow var(--dur-short) var(--ease-move), background var(--dur-short) var(--ease-move);
}
.site-header.is-scrolled {
  background: rgba(248, 250, 247, 0.94);
  box-shadow: var(--shadow-2);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.brand-lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* Suppress the global `a:hover { text-decoration: underline }` for the
   header brand lockup — a logo + wordmark shouldn't get an underline
   on hover. */
.brand-lockup:hover,
.brand-lockup:hover strong { text-decoration: none; }
.brand-lockup strong { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--fg-1); letter-spacing: 0; }
.site-nav { display: flex; align-items: center; gap: 6px; }
.site-nav a {
  font-size: 14px; font-weight: 500; color: var(--fg-2);
  padding: 8px 14px; border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-move), background var(--dur-short) var(--ease-move);
}
.site-nav a:hover { color: var(--fg-1); background: var(--primary-pale); text-decoration: none; }
.nav-menu {
  position: relative;
  display: inline-flex;
}
.nav-menu::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 12px;
  bottom: -17px;
  height: 3px;
  border-radius: 99px 99px 0 0;
  background: var(--primary);
  opacity: 0;
  transform: scaleX(0.55);
  transition: opacity var(--dur-short) var(--ease-move), transform var(--dur-short) var(--ease-move);
}
.nav-menu-trigger {
  border: 0;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-2);
  padding: 8px 12px 8px 14px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-move), background var(--dur-short) var(--ease-move);
}
.nav-menu-trigger svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-short) var(--ease-move);
}
.nav-menu:hover .nav-menu-trigger,
.nav-menu:focus-within .nav-menu-trigger,
.nav-menu.is-open .nav-menu-trigger {
  color: var(--fg-1);
  background: var(--primary-pale);
}
.nav-menu:hover::after,
.nav-menu:focus-within::after,
.nav-menu.is-open::after {
  opacity: 1;
  transform: scaleX(1);
}
.nav-menu:hover .nav-menu-trigger svg,
.nav-menu:focus-within .nav-menu-trigger svg,
.nav-menu.is-open .nav-menu-trigger svg {
  transform: rotate(180deg);
}
.nav-dropdown {
  position: fixed;
  top: 64px;
  left: 50%;
  right: auto;
  width: min(1040px, calc(100vw - 72px));
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.11);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -4px);
  pointer-events: none;
  transition:
    opacity var(--dur-short) var(--ease-move),
    transform var(--dur-short) var(--ease-move),
    visibility var(--dur-short) var(--ease-move);
}
.nav-dropdown::before {
  content: "";
  position: absolute;
  left: -32px;
  right: -32px;
  top: -18px;
  height: 18px;
}
.nav-menu:hover .nav-dropdown,
.nav-menu:focus-within .nav-dropdown,
.nav-menu.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.nav-mega-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 34px 30px 32px;
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(340px, 1.1fr);
  gap: 42px;
}
.nav-mega-story {
  align-self: stretch;
  padding: 8px 0 10px;
}
.nav-mega-kicker {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.nav-mega-story h3 {
  margin: 0;
  max-width: 420px;
  font-family: var(--font-display);
  font-size: clamp(23px, 2.1vw, 32px);
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--fg-1);
}
.nav-mega-story p:not(.nav-mega-kicker) {
  margin: 16px 0 0;
  max-width: 430px;
  font-size: 14px;
  line-height: 1.58;
  color: var(--fg-2);
}
.nav-mega-actions {
  margin-top: 28px;
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: nowrap;
}
.site-nav .nav-mega-actions a {
  font-size: 14px;
  font-weight: 700;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  /* Keep both CTAs on one row even when labels are longer (the investor and
     originator dropdowns have a "Request … access" CTA that used to wrap to
     a second line below the primary button). Each link takes an equal share
     of the column; text wraps inside if it must, and `align-items: stretch`
     above keeps the buttons matched in height. */
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-nav .nav-mega-actions .nav-mega-button {
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
}
.site-nav .nav-mega-actions .nav-mega-button:hover {
  background: var(--primary-hover);
  color: #fff;
}
.site-nav .nav-mega-actions .nav-mega-link {
  color: var(--primary);
  border: 1px solid var(--border);
  background: var(--panel);
}
.site-nav .nav-mega-actions .nav-mega-link:hover {
  background: var(--primary-pale);
  color: var(--primary-hover);
}
.nav-mega-panel {
  padding: 4px 0;
}
.site-nav .nav-mega-panel a {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.35;
}
.site-nav .nav-mega-panel a + a {
  margin-top: 8px;
}
.site-nav .nav-mega-panel a:hover {
  color: var(--fg-1);
  background: var(--surface-app);
}
.site-nav .nav-mega-panel a strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-1);
}
.site-nav .nav-mega-panel a small {
  display: block;
  margin-top: 4px;
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 500;
}
.nav-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-pale);
  color: var(--primary);
  font-size: 19px;
  font-weight: 800;
}
.site-nav .nav-cta {
  background: var(--primary); color: #fff;
  border: 1px solid var(--primary);
  padding: 9px 16px;
}
.site-nav .nav-cta:hover { background: var(--primary-hover); color: #fff; }

@media (max-width: 700px) {
  .site-nav .hide-sm { display: none; }
  .site-header .container { padding: 0 16px; }
  .brand-lockup { gap: 8px; }
  .brand-lockup strong { font-size: 16px; }
  .site-nav { gap: 4px; }
  .site-nav a { font-size: 13px; padding: 7px 8px; }
  .site-nav .nav-cta { padding: 9px 12px; }
}
@media (max-width: 420px) {
  .site-header .container { height: 60px; }
  .site-nav a { font-size: 12px; padding: 7px 6px; }
  .site-nav .nav-cta { padding: 8px 10px; }
}

/* ---------- Hero --------------------------------------------------------- */

.hero {
  padding: calc(var(--section-pad) + 24px) 0 var(--section-pad);
  text-align: center;
}
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: normal;
  justify-content: center;
  max-width: min(100%, 520px);
  font-family: var(--font-mono); font-size: 12px;
  color: var(--primary); background: var(--primary-pale);
  padding: 6px 12px; border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
  margin-bottom: 24px;
}
.hero .eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
  box-shadow: 0 0 0 4px rgba(105,89,250,0.18);
}
.hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 5.4vw, 60px);
  line-height: 1.08;
  letter-spacing: 0;
  max-width: 880px; margin: 0 auto 18px;
  color: var(--fg-1);
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(transparent 60%, rgba(201,151,0,0.18) 60%);
  padding: 0 4px;
}
.hero p.lede {
  font-size: 18px; line-height: 1.55; color: var(--fg-3);
  max-width: 640px; margin: 0 auto 12px;
}
.hero p.support {
  font-size: 14px; color: var(--fg-3);
  max-width: 560px; margin: 0 auto 32px;
}
.hero-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 56px;
}
.hero-actions .btn { padding: 12px 22px; font-size: 15px; }

/* Hero proof strip */
.proof-strip {
  display: flex; flex-wrap: wrap; gap: 0; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-3);
  letter-spacing: 0.02em;
  border-top: 1px solid var(--border-soft);
  padding-top: 24px;
  max-width: 720px; margin: 0 auto;
}
.proof-strip span { padding: 0 16px; border-right: 1px solid var(--border-soft); white-space: nowrap; }
.proof-strip span:last-child { border-right: 0; }
@media (max-width: 760px) {
  .proof-strip { row-gap: 8px; }
  .proof-strip span { border-right: 0; padding: 0 10px; }
}
@media (max-width: 520px) {
  .site-nav .nav-cta { display: none; }
  .hero {
    padding: 72px 0 48px;
    text-align: left;
  }
  .hero .container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-left: 20px;
    padding-right: 20px;
    overflow: visible;
  }
  .hero .eyebrow {
    width: auto;
    max-width: calc(100vw - 48px);
    line-height: 1.45;
    justify-content: flex-start;
    margin-left: 0;
    margin-right: 0;
    white-space: normal;
  }
  .hero h1 {
    font-size: 25px;
    line-height: 1.12;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .hero p.lede,
  .hero p.support {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .hero p.lede { font-size: 16px; line-height: 1.58; }
  .hero p.support { font-size: 13px; line-height: 1.55; }
  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .hero-actions .btn {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .proof-strip {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .proof-strip span {
    white-space: normal;
    text-align: left;
    padding: 0 6px;
  }
}

/* ---------- Mock — verified deal preview --------------------------------- */

.deal-preview-wrap {
  margin: 24px auto 0;
  max-width: 960px; padding: 0 var(--gutter);
  position: relative;
}
.deal-preview {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.dp-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(to bottom, #fcfcfb, #f8faf7);
}
.dp-chrome .dot { width: 10px; height: 10px; border-radius: 50%; background: #e1e3df; }
.dp-chrome .dot:nth-child(1) { background: #f5b8b1; }
.dp-chrome .dot:nth-child(2) { background: #f6dca5; }
.dp-chrome .dot:nth-child(3) { background: #b9d8b8; }
.dp-chrome .url {
  min-width: 0;
  flex: 1; text-align: center;
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-3);
  background: #fff; border: 1px solid var(--border-soft);
  padding: 4px 10px; border-radius: 6px; max-width: 380px; margin: 0 auto;
}
.dp-body { padding: 28px 32px; display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.dp-headline { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.dp-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--fg-1); }
.dp-meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); margin-top: 4px; letter-spacing: 0.02em; }
.dp-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; padding: 18px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.dp-grid .lbl { font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.dp-grid .val { font-family: var(--font-mono); font-size: 17px; font-weight: 600; color: var(--fg-1); }
.dp-grid .val.gold { color: var(--gold); }
.dp-trust {
  margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
}
.dp-trust .row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fg-2); }
.dp-trust .row svg { width: 16px; height: 16px; color: var(--success); flex-shrink: 0; }
.dp-side {
  background: #fbfbf9; border: 1px solid var(--border-soft); border-radius: 10px;
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
}
.dp-side h4 { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.06em; margin: 0; }
.dp-side .check-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--fg-1); }
.dp-side .check-row .check { width: 18px; height: 18px; border-radius: 4px; background: var(--success-bg); color: var(--success); display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
.dp-side .check-row .check svg { width: 12px; height: 12px; }
.dp-progress { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.dp-progress .bar { height: 4px; background: #ececec; border-radius: 2px; margin-top: 6px; overflow: hidden; }
.dp-progress .bar > span { display: block; height: 100%; background: var(--primary); width: 70%; border-radius: 2px; }

@media (max-width: 800px) {
  .dp-body { grid-template-columns: 1fr; padding: 22px; }
  .dp-grid { grid-template-columns: 1fr 1fr; }
  .dp-trust { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .deal-preview-wrap {
    width: auto;
    max-width: none;
    margin-left: 14px;
    margin-right: 14px;
    padding: 0;
  }
  .deal-preview { border-radius: 12px; }
  .deal-preview,
  .dp-body,
  .dp-left,
  .dp-headline,
  .dp-side,
  .dp-grid,
  .dp-trust {
    max-width: 100%;
    min-width: 0;
  }
  .dp-headline,
  .dp-left,
  .dp-side {
    min-width: 0;
  }
  .dp-title,
  .dp-meta,
  .dp-grid .val,
  .dp-trust .row,
  .dp-side .check-row {
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .dp-chrome { padding: 10px 12px; gap: 6px; }
  .dp-chrome .dot { width: 8px; height: 8px; }
  .dp-chrome .url {
    font-size: 10px;
    padding: 4px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dp-body { padding: 20px 16px; }
  .dp-headline { display: block; }
  .dp-title { font-size: 18px; max-width: 100%; }
  .dp-grid { grid-template-columns: 1fr; gap: 14px; }
  .dp-trust { gap: 9px; }
}

/* ---------- Sections ----------------------------------------------------- */

.section {
  padding: var(--section-pad) 0;
  border-top: 1px solid var(--border-soft);
}
.section-header {
  /* Was 720px — forced every two-clause headline (e.g. "Built for serious
     tickets, not noisy deal flow.", "Different contracts need different
     capital.", "What people doing the work actually say.") to break onto
     a second line at ~46-50 chars. Bumping to 1100px lets the standard
     headlines sit on one line on desktop, then the media query below
     restores wrapping at mobile widths so nothing overflows. */
  max-width: 1100px; margin: 0 auto var(--gutter); text-align: center;
}
.section-header .eyebrow {
  font-family: var(--font-mono); font-size: 12px; color: var(--primary);
  letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px;
}
.section-header h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 2.5vw, 30px); line-height: 1.18;
  letter-spacing: 0; margin: 0 0 12px;
}
.section-header p {
  font-size: 16px; line-height: 1.55; color: var(--fg-3); margin: 0;
}

/* Nowrap applies only on the homepage. The investor / originator /
   holders pages have longer, multi-clause headlines (e.g. "Private
   capital opportunities are real. The process is not.") that need to
   wrap; forcing nowrap there clips the right edge of the text under
   the page padding. Scope by body's data-screen-label so we don't have
   to touch any per-page markup. */
body[data-screen-label="Landing One-Pager"] .section-header h2 {
  white-space: nowrap;
}

/* Below the container breakpoint, allow long headlines to wrap normally
   so nothing overflows the viewport. nowrap-on-mobile would force a
   horizontal scrollbar — bad. */
@media (max-width: 900px) {
  .section-header { max-width: 720px; }
  body[data-screen-label="Landing One-Pager"] .section-header h2 {
    white-space: normal;
    font-size: clamp(22px, 3.4vw, 28px);
  }
}

/* ---------- SEO body ----------------------------------------------------- */

.seo-body-section {
  border-top: none;
}

/* Two-column editorial layout */
.seo-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 7vw, 88px);
  align-items: start;
  margin-bottom: 44px;
}
.seo-statement .eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 18px;
}
.seo-statement h2 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.seo-lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-2);
}

/* Right column: tag cloud + copy */
.seo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 22px;
}
.seo-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-2);
  background: var(--panel);
  border: 1px solid var(--border);
  white-space: nowrap;
  transition: border-color var(--dur-short) var(--ease-move), color var(--dur-short) var(--ease-move);
}
.seo-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--fg-3);
}
.seo-desc + .seo-desc {
  margin-top: 10px;
}

/* Audience pillar cards */
.seo-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.seo-pillar {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  transition: border-color var(--dur-short) var(--ease-move), box-shadow var(--dur-short) var(--ease-move), transform var(--dur-short) var(--ease-move);
  /* anchor-as-card: drop link decoration so the card reads as itself */
  display: block;
  color: inherit;
  text-decoration: none;
}
.seo-pillar:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
  text-decoration: none;
}
.seo-pillar:hover h3 { color: #a399ff; }
.seo-pillar span {
  display: block;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary);
}
.seo-pillar h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.25;
  color: var(--fg-1);
}
.seo-pillar p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--fg-3);
}

@media (max-width: 900px) {
  .seo-layout { grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; }
  .seo-pillars { grid-template-columns: 1fr; }
  .seo-pillar span { margin-bottom: 12px; }
}

/* ---------- Deal standards --------------------------------------------- */

.standards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.standard-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.standard-card .standard-value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0;
  margin-bottom: 28px;
}
.standard-card h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 8px;
  color: var(--fg-1);
}
.standard-card p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-3);
  margin: 0;
}
@media (max-width: 980px) {
  .standards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .standards-grid { grid-template-columns: 1fr; }
  .standard-card { min-height: auto; }
  .standard-card .standard-value { margin-bottom: 18px; }
}

/* ---------- Finance types ----------------------------------------------- */

.finance-types {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.finance-type {
  background: #fbfbf9;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
}
.finance-type span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary-pale);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 24px;
}
.finance-type h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 8px;
}
.finance-type p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-3);
  margin: 0;
}
@media (max-width: 980px) {
  .finance-types { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .finance-types { grid-template-columns: 1fr; }
}

/* ---------- Trust Room — split layout (text left / visual right) --------- */

.trust-feature {
  display: grid;
  /* text column is fixed width; visual takes the rest and bleeds to viewport edge */
  grid-template-columns: 340px 1fr;
  gap: 64px;
  align-items: center;
  /* align text column with rest of page (mirrors container padding + centering) */
  padding-left: max(var(--gutter), calc((100vw - 1180px) / 2 + var(--gutter)));
  overflow: hidden; /* clip right bleed, no scrollbar */
}

.trust-feature-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.trust-feature-text .eyebrow { margin-bottom: 0; }
.trust-feature-text h2 {
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.2;
}
.trust-feature-text p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-2);
  max-width: 320px;
}

/* visual column: rounded only on left side, flush right to viewport */
.trust-feature-visual { overflow: hidden; }
.trust-feature-visual .trust-window {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

@media (max-width: 1280px) {
  .trust-feature {
    grid-template-columns: 1fr;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    gap: 40px;
    overflow: visible;
  }
  .trust-feature-text { align-items: center; text-align: center; }
  .trust-feature-text p { max-width: 480px; }
  .trust-feature-visual .trust-window {
    border-radius: 14px; /* restore all corners on mobile */
  }
}

/* ---------- Trust Room — Dashboard animation ----------------------------- */

/* window shell */
.trust-window {
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 24px 48px rgba(17,24,39,.13), 0 4px 12px rgba(17,24,39,.06);
  overflow: hidden;
  background: var(--panel-2);
  opacity: 0;
  transform: translateY(20px) scale(0.988);
  transition: opacity 520ms cubic-bezier(0.16,1,0.3,1),
              transform 520ms cubic-bezier(0.16,1,0.3,1);
}
.trust-window.tw-in { opacity: 1; transform: translateY(0) scale(1); }

/* title bar */
.trust-titlebar {
  height: 40px; background: #f1f1ef;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 16px; gap: 7px; flex-shrink: 0;
}
.tw-dot { width: 11px; height: 11px; border-radius: 50%; }
.tw-dot-r { background: #ff5f57; }
.tw-dot-y { background: #febc2e; }
.tw-dot-g { background: #28c840; }
.trust-titlebar-label {
  flex: 1; text-align: center; margin-left: -44px;
  font-size: 11.5px; font-family: var(--font-mono); color: var(--ink-4); letter-spacing: .02em;
}

/* body layout */
.trust-body { display: flex; height: 640px; }

/* sidebar */
.trust-sidebar {
  width: 200px; flex-shrink: 0;
  background: var(--panel); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 14px 0;
}
.trust-sidebar-logo {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 16px 16px; border-bottom: 1px solid var(--border-soft); margin-bottom: 8px;
}
.trust-sidebar-logo strong {
  font-size: 13px; font-weight: 700; color: var(--charcoal); font-family: var(--font-display);
}
.tw-nav-label {
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-5); padding: 12px 16px 4px; font-family: var(--font-mono);
}
.tw-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; font-size: 13px; font-weight: 500;
  color: var(--ink-3); border-left: 2.5px solid transparent;
  transition: background 100ms, color 100ms;
}
.tw-nav-item svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .6; }
.tw-nav-item.tw-active {
  color: var(--primary); background: var(--primary-pale);
  border-left-color: var(--primary); font-weight: 600;
}
.tw-nav-item.tw-active svg { opacity: 1; }
.tw-nav-badge {
  margin-left: auto; font-size: 10px; font-weight: 600;
  background: var(--primary-pale); color: var(--primary);
  border-radius: 999px; padding: 1px 6px; font-family: var(--font-mono);
  transition: color 200ms, background 200ms;
}
.tw-nav-badge.tw-badge-done {
  background: var(--primary-pale); color: var(--primary);
}

/* main area */
.trust-main { flex: 1; overflow: hidden; display: flex; flex-direction: column; }

.trust-topbar {
  height: 50px; flex-shrink: 0; background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 22px; gap: 10px;
}
.tw-breadcrumb {
  font-size: 12.5px; color: var(--ink-4);
  display: flex; align-items: center; gap: 6px;
}
.tw-breadcrumb span { color: var(--charcoal); font-weight: 600; }
.tw-topbar-right { margin-left: auto; }
.tw-status {
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  border: 1px solid; display: flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); transition: all 360ms ease; white-space: nowrap;
}
.tw-status.tw-reviewing {
  color: var(--warning); background: var(--warning-bg); border-color: #ecd9a3;
}
.tw-status.tw-verified {
  color: var(--primary); background: var(--primary-pale); border-color: var(--primary-soft);
}
.tw-status-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; transition: background 360ms;
}
.tw-status.tw-reviewing .tw-status-dot {
  background: var(--warning); animation: tw-pulse 1.4s ease infinite;
}
.tw-status.tw-verified .tw-status-dot { background: var(--primary); animation: none; }
@keyframes tw-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.trust-progress-track { height: 3px; background: var(--border-soft); flex-shrink: 0; }
.trust-progress-fill {
  height: 100%; background: var(--primary); width: 0%;
  transition: width 480ms cubic-bezier(0.4,0,0.2,1);
}

/* scroll list */
.trust-scroll {
  flex: 1; overflow-y: auto; padding: 14px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.trust-scroll::-webkit-scrollbar { width: 4px; }
.trust-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.tw-list-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
}
.tw-list-head h3 {
  font-size: 14px; font-weight: 700; color: var(--charcoal); font-family: var(--font-display);
}
.tw-prog-label {
  font-size: 11px; font-family: var(--font-mono); color: var(--ink-4); font-weight: 600;
  transition: color 300ms;
}
.tw-prog-label.tw-done { color: var(--primary); }

/* each check row */
.tw-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 13px;
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: 8px;
  opacity: 0; transform: translateX(-10px);
  transition: opacity 340ms cubic-bezier(0.16,1,0.3,1),
              transform 340ms cubic-bezier(0.16,1,0.3,1);
}
.tw-item.tw-in { opacity: 1; transform: translateX(0); }

.tw-icon {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--ink-4);
  position: relative; transition: background 260ms, border-color 260ms;
}
.tw-icon .tw-num { transition: opacity 160ms; }
.tw-icon .tw-tick {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.4);
  transition: opacity 220ms ease 50ms, transform 260ms cubic-bezier(0.34,1.56,0.64,1) 50ms;
}
.tw-icon .tw-tick svg {
  width: 13px; height: 13px; stroke: var(--primary); stroke-width: 2.8;
  stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.tw-item.tw-done .tw-icon { background: var(--primary-pale); border-color: var(--primary-soft); }
.tw-item.tw-done .tw-icon .tw-num { opacity: 0; }
.tw-item.tw-done .tw-icon .tw-tick { opacity: 1; transform: scale(1); }

.tw-body { flex: 1; min-width: 0; }
.tw-q { font-size: 13px; font-weight: 600; color: var(--charcoal); line-height: 1.3; }
.tw-a { font-size: 11.5px; color: var(--ink-4); line-height: 1.45; margin-top: 2px; }

.tw-pill {
  flex-shrink: 0; font-size: 10.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; border: 1px solid;
  font-family: var(--font-mono); white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
  transition: all 260ms ease;
}
.tw-pill svg { width: 10px; height: 10px; display: none; }
.tw-pill.tw-pending { color: var(--ink-5); background: var(--panel-2); border-color: var(--border); }
.tw-pill.tw-done-pill {
  color: var(--primary); background: var(--primary-pale); border-color: var(--primary-soft);
}
.tw-pill.tw-done-pill svg { display: block; stroke: var(--primary); stroke-width: 2.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* verified banner */
.tw-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: var(--primary-pale);
  border: 1px solid var(--primary-soft); border-radius: 8px;
  opacity: 0; transform: translateY(6px);
  transition: opacity 380ms ease, transform 380ms ease; pointer-events: none;
}
.tw-banner.tw-show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.tw-banner svg { width: 16px; height: 16px; stroke: var(--primary); flex-shrink: 0; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tw-banner strong { font-size: 13px; font-weight: 600; color: var(--primary); }
.tw-banner small { font-size: 11.5px; color: var(--primary-hover); display: block; margin-top: 1px; }

/* right panel */
.trust-right {
  width: 210px; flex-shrink: 0; border-left: 1px solid var(--border);
  background: var(--panel); padding: 18px 15px;
  display: flex; flex-direction: column; gap: 16px; overflow-y: auto;
}
.trust-right::-webkit-scrollbar { display: none; }
.tw-rp-label {
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-5); font-family: var(--font-mono); margin-bottom: 10px;
}
.tw-rp-field { margin-bottom: 9px; }
.tw-rp-key { font-size: 10.5px; color: var(--ink-4); margin-bottom: 2px; font-family: var(--font-mono); }
.tw-rp-val { font-size: 13px; font-weight: 600; color: var(--charcoal); }
.tw-rp-val.tw-mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--primary); }
.tw-divider { height: 1px; background: var(--border-soft); }

.tw-ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0 4px; }
.tw-ring-svg { width: 68px; height: 68px; position: relative; }
.tw-ring-svg svg { width: 68px; height: 68px; }
.tw-ring-bg { stroke: var(--border-soft); fill: none; }
.tw-ring-arc {
  stroke: var(--primary); fill: none; stroke-linecap: round;
  stroke-dasharray: 166.5; stroke-dashoffset: 166.5;
  transition: stroke-dashoffset 1100ms cubic-bezier(0.4,0,0.2,1) 180ms,
              stroke 420ms ease;
  transform: rotate(-90deg); transform-origin: 50% 50%;
}
.tw-ring-arc.tw-scored { stroke-dashoffset: 41.6; }  /* 75% */
.tw-ring-arc.tw-perfect { stroke: var(--primary); stroke-dashoffset: 0; }
.tw-ring-num {
  font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--charcoal);
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.tw-ring-note { font-size: 11px; color: var(--ink-4); font-family: var(--font-mono); }

@media (max-width: 900px) {
  .trust-right { display: none; }
  .trust-body { height: auto; min-height: 500px; }
}
@media (max-width: 640px) {
  .trust-sidebar { display: none; }
  .trust-body { height: auto; }
  .trust-titlebar-label { font-size: 10px; }
}

/* ---------- How it works (swim lanes) ----------------------------------------- */

#how { padding-bottom: 48px; }

.hiw-heading {
  line-height: 1.22 !important;
  /* This headline carries two clauses ("Getting in front of the right
     capital is hard. So is finding a deal worth backing.") — ~84 chars —
     so it needs a smaller cap than the standard section h2 to fit on one
     line at 1180px container width. */
  font-size: clamp(20px, 2.0vw, 24px) !important;
}
.hiw-heading em { font-style: normal; font-weight: 600; color: var(--ink-3); }
@media (max-width: 900px) {
  .hiw-heading {
    font-size: clamp(20px, 3.0vw, 24px) !important;
  }
}

.hiw-tracks { display: flex; flex-direction: column; gap: 0; }

/* track header */
.hiw-track-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  opacity: 0; transform: translateX(-14px);
  transition: opacity 400ms cubic-bezier(0.16,1,0.3,1), transform 400ms cubic-bezier(0.16,1,0.3,1);
}
.hiw-track-header--right { flex-direction: row-reverse; }
.hiw-track-header.hiw-in { opacity: 1; transform: translateX(0); }

.hiw-track-pill {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; border: 1px solid; white-space: nowrap;
}
.hiw-track-pill.hiw-investor {
  color: var(--primary); background: var(--primary-pale); border-color: var(--primary-soft);
}
.hiw-track-pill.hiw-originator {
  color: var(--fg-1); background: #f0f0ee; border-color: var(--fg-1);
}

.hiw-track-rule {
  flex: 1; height: 1px;
  background: linear-gradient(to right, var(--border), transparent);
}
.hiw-track-rule--orig {
  background: linear-gradient(to left, rgba(17,24,39,0.2), transparent);
}

/* steps row */
.hiw-steps-row {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch; gap: 0;
}

/* connector */
.hiw-connector {
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px; flex-shrink: 0; width: 52px; position: relative;
}
.hiw-connector-line {
  width: 100%; height: 2px; border-radius: 1px;
  position: relative; overflow: hidden;
  background: var(--border);
}
.hiw-connector-fill {
  position: absolute; inset: 0;
  background: var(--primary);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 500ms cubic-bezier(0.4,0,0.2,1);
}
.hiw-connector.hiw-gold .hiw-connector-fill { background: var(--gold); }
.hiw-connector-fill.hiw-drawn { transform: scaleX(1); }

.hiw-connector::after {
  content: ""; position: absolute; right: 3px;
  width: 7px; height: 7px;
  border-top: 2px solid var(--border); border-right: 2px solid var(--border);
  transform: rotate(45deg); transition: border-color 500ms ease;
}
.hiw-connector.hiw-drawn::after { border-color: var(--primary); }
.hiw-connector.hiw-gold.hiw-drawn::after { border-color: var(--gold); }

/* step card */
.hiw-step {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 20px 22px; display: flex; flex-direction: column; gap: 8px;
  opacity: 0; transform: translateY(12px);
  transition: opacity 380ms cubic-bezier(0.16,1,0.3,1),
              transform 380ms cubic-bezier(0.16,1,0.3,1),
              border-color 300ms ease, box-shadow 300ms ease;
}
.hiw-step.hiw-in { opacity: 1; transform: translateY(0); }
.hiw-step.hiw-in.hiw-investor  { border-color: var(--primary-soft); box-shadow: 0 0 0 3px var(--primary-pale); }
.hiw-step.hiw-in.hiw-originator{ border-color: var(--fg-1); box-shadow: 0 0 0 3px rgba(17,24,39,0.05); }

.hiw-step-num {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  background: var(--primary-pale); color: var(--primary); border: 1px solid var(--primary-soft);
  transition: background 300ms, color 300ms;
}
.hiw-step.hiw-originator .hiw-step-num {
  background: #f0f0ee; color: var(--fg-1); border-color: var(--fg-1);
}

.hiw-step-label {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-5);
}
.hiw-step.hiw-in.hiw-investor  .hiw-step-label { color: var(--primary); }
.hiw-step.hiw-in.hiw-originator .hiw-step-label { color: var(--fg-1); opacity: 0.6; }

.hiw-step-title {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--fg-1); line-height: 1.3; margin-top: 2px;
}
.hiw-step-body { font-size: 12.5px; color: var(--ink-4); line-height: 1.55; }

/* meeting node */
.hiw-meeting {
  display: flex; align-items: center; justify-content: center;
  padding: 28px 0; position: relative;
}
.hiw-meeting::before, .hiw-meeting::after {
  content: ""; position: absolute; left: 50%; width: 2px; border-radius: 1px;
  background: var(--border); transform: scaleY(0);
  transition: transform 500ms cubic-bezier(0.4,0,0.2,1);
}
.hiw-meeting::before { top: 0; height: 50%; transform-origin: top center; }
.hiw-meeting::after  { bottom: 0; height: 50%; transform-origin: bottom center; }
.hiw-meeting.hiw-in::before,
.hiw-meeting.hiw-in::after {
  transform: scaleY(1);
  background: linear-gradient(to bottom, var(--primary), var(--gold));
}

.hiw-meeting-node {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 10px;
  background: #111827; border: 1px solid #2d3748;
  z-index: 2; position: relative;
  opacity: 0; transform: scale(0.88);
  transition: opacity 400ms cubic-bezier(0.16,1,0.3,1) 200ms,
              transform 400ms cubic-bezier(0.34,1.56,0.64,1) 200ms;
}
.hiw-meeting.hiw-in .hiw-meeting-node { opacity: 1; transform: scale(1); }

.hiw-meeting-icon {
  width: 28px; height: 28px; border-radius: 7px; background: var(--primary);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.hiw-meeting-icon svg { width: 14px; height: 14px; }
.hiw-meeting-text strong { display: block; font-size: 13px; font-weight: 700; color: #fff; font-family: var(--font-display); }
.hiw-meeting-text small  { font-size: 11px; color: #6b7280; font-family: var(--font-mono); }

/* responsive */
@media (max-width: 900px) {
  .hiw-steps-row { grid-template-columns: 1fr; }
  .hiw-connector { width: 100%; height: 32px; transform: rotate(90deg); }
  .hiw-connector::after { right: auto; bottom: 3px; top: auto; }
}
@media (max-width: 640px) {
  .hiw-track-header { display: none; }
  .hiw-meeting { padding: 20px 0; }
  .hiw-connector { opacity: 0.07; }
  .hiw-track-rule, .hiw-track-rule--orig { opacity: 0.07; }
}

/* ── Mobile collapsible sections ──────────────────────────────────────────── */
@media (max-width: 640px) {
  [data-collapse] .section-header {
    cursor: pointer;
    text-align: left;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding-right: 32px;
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }
  [data-collapse] .section-header .eyebrow { text-align: left; }

  .collapse-chevron {
    position: absolute;
    right: 0;
    top: 2px;
    color: var(--ink-4);
    transition: transform 300ms ease;
    display: flex;
    pointer-events: none;
  }
  [data-collapse].is-open .collapse-chevron { transform: rotate(180deg); }

  /* Smooth height animation via grid trick */
  .collapse-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 360ms cubic-bezier(0.16,1,0.3,1);
  }
  [data-collapse].is-open .collapse-body { grid-template-rows: 1fr; }

  .collapse-inner {
    min-height: 0;
    overflow: hidden;
    padding-top: 0;
    transition: padding-top 360ms ease;
  }
  [data-collapse].is-open .collapse-inner { padding-top: 28px; }
}

/* ---------- Audiences --------------------------------------------------- */

.audiences { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 800px) { .audiences { grid-template-columns: 1fr; } }
.audience {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.audience .role {
  font-family: var(--font-mono); font-size: 11px; color: var(--primary);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.audience h3 {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  margin: 0; line-height: 1.25;
}
.audience .desc { font-size: 14px; color: var(--fg-3); line-height: 1.6; flex: 1; }
.audience .what-you-get { font-size: 13px; color: var(--fg-2); display: flex; flex-direction: column; gap: 6px; }
.audience .what-you-get li { display: flex; gap: 10px; align-items: flex-start; }
.audience .what-you-get li svg { width: 14px; height: 14px; color: var(--success); flex-shrink: 0; margin-top: 4px; }
.audience .cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--primary);
  align-self: flex-start;
}
.audience .cta:hover { text-decoration: none; gap: 10px; }

/* ---------- Principles --------------------------------------------------- */

.principles {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: var(--panel);
}
.principles .p {
  padding: 28px;
  border-bottom: 1px solid var(--border-soft);
  border-right: 1px solid var(--border-soft);
}
.principles .p:nth-child(2n) { border-right: 0; }
.principles .p:nth-last-child(-n+2) { border-bottom: 0; }
.principles .p .ix {
  font-family: var(--font-mono); font-size: 11px; color: var(--gold);
  letter-spacing: 0.08em; margin-bottom: 8px;
}
.principles .p h4 {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  margin: 0 0 6px; line-height: 1.35;
}
.principles .p small { font-size: 13px; color: var(--fg-3); line-height: 1.55; }
@media (max-width: 700px) {
  .principles { grid-template-columns: 1fr; }
  .principles .p { border-right: 0; }
}

/* ---------- FAQ --------------------------------------------------------- */

.faq { max-width: 760px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--border-soft);
  padding: 18px 0;
}
.faq details:first-of-type { border-top: 1px solid var(--border-soft); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--fg-1);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--font-mono); font-weight: 400;
  font-size: 22px; color: var(--fg-3); line-height: 1;
  transition: transform var(--dur-short) var(--ease-move);
}
.faq details[open] summary::after { transform: rotate(45deg); color: var(--primary); }
.faq details > p { font-size: 14px; color: var(--fg-3); line-height: 1.65; margin: 12px 0 0; max-width: 620px; }

/* ---------- Final CTA --------------------------------------------------- */

.cta-band {
  background: var(--charcoal);
  color: #fff;
  border-radius: 16px;
  padding: 64px 48px;
  text-align: center;
  position: relative; overflow: hidden;
}
.cta-band::before {
  /* subtle purple wash — single solid hue, no rainbow gradient */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 0%, rgba(105,89,250,0.18), transparent 60%);
}
.cta-band > * { position: relative; }
.cta-band h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; color: #fff; max-width: 720px; margin: 0 auto 14px; }
.cta-band p { color: rgba(255,255,255,0.7); font-size: 16px; margin: 0 auto 28px; max-width: 540px; }
.cta-band .btn { padding: 14px 24px; font-size: 15px; }
.cta-band .btn--primary { background: #fff; color: var(--charcoal); border-color: #fff; }
.cta-band .btn--primary:hover { background: #f6f4ee; }
/* The secondary CTA in the Final-CTA band is the "Submit a high-value
   deal" button. User asked for a green button (matching the green
   checkmarks used elsewhere on dark cards). Soft green on the dark
   ground, brightens on hover. */
.cta-band .btn--ghost {
  background: #4ade80;
  color: #082c1d;
  border-color: #4ade80;
  font-weight: 700;
}
.cta-band .btn--ghost:hover {
  background: #5cf094;
  color: #062417;
  border-color: #5cf094;
}
/* Sign-in as plain text link — lower visual weight than action buttons */
.cta-band .btn--text {
  background: transparent; border-color: transparent;
  color: rgba(255,255,255,0.55); font-size: 14px; padding: 14px 16px;
}
.cta-band .btn--text:hover { color: #fff; background: transparent; border-color: transparent; }
.cta-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; align-items: center; }

/* ---------- Card-on-plate depth (Audiences + Final CTA) ---------------- */
/* These two sections were flat panels stacked between flat space — the rest
   of the page now had layered hero motion and the originator-room/holders
   blocks below, but the "Three sides" section and the dark final-CTA strip
   sat against the page background with nothing visually elevating them.
   The pattern below gives each one a tinted "plate" behind the content
   that peeks out beyond the card edges, so the card reads as floating. */

/* Audiences ---------------------------------------------------------------
   The 3 audience cards already have their own white surfaces. We turn the
   section's container into a tinted plate they sit on, with brand-tinted
   radial washes for warmth so it doesn't read as a flat block of colour.

   v3: user asked for the Final-CTA visual rhythm — black cards on a
   darker purple plate — applied here too. Plate steps from the v2 light
   lavender into a richer mid-purple (#a99dff → #8b7cf2 → #6e5ff0). The
   peek-out plate behind goes deeper still. The three .audience cards
   flip from white panels to charcoal panels with white text, mirroring
   the Final CTA card so the same "card sitting on purple" pattern reads
   on both blocks. */
.section#audiences {
  position: relative;
}
.section#audiences > .container {
  position: relative;
  padding: clamp(48px, 6vw, 72px) clamp(20px, 4vw, 48px);
  border-radius: 20px;
  background:
    radial-gradient(70% 90% at 12% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
    radial-gradient(55% 80% at 95% 100%, rgba(255, 196, 100, 0.12), transparent 60%),
    linear-gradient(180deg, #a99dff 0%, #8b7cf2 55%, #6e5ff0 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.30) inset,
    0 22px 56px -28px rgba(38, 28, 120, 0.42);
  overflow: hidden;
}
/* A second, slightly larger plate "peeking out" below the main one — same
   trick as the reference screenshots where the background card extends a
   few px past the foreground card. Sits behind via z-index, a notch deeper
   than the front plate so the layering reads. */
.section#audiences > .container::before {
  content: "";
  position: absolute;
  left: -10px; right: -10px;
  top: 14px; bottom: -18px;
  border-radius: 26px;
  background: linear-gradient(180deg, #5b50e5 0%, #4339c7 100%);
  z-index: -1;
}
.section#audiences > .container > * { position: relative; z-index: 1; }
/* The three .audience cards flip from white panels to charcoal — same
   colour treatment as the Final CTA card so both blocks read with the
   same visual rhythm. Children re-coloured below. */
.section#audiences .audience {
  background: var(--charcoal);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 30px -16px rgba(15, 23, 42, 0.50);
}
.section#audiences .audience .role { color: #a399ff; }
.section#audiences .audience h3 { color: #fff; }
.section#audiences .audience .desc { color: rgba(255, 255, 255, 0.68); }
.section#audiences .audience .what-you-get { color: rgba(255, 255, 255, 0.78); }
.section#audiences .audience .what-you-get li svg { color: #4ade80; }
.section#audiences .audience .cta { color: #a399ff; }
.section#audiences .audience .cta:hover { color: #fff; }
/* The section header sits on the purple plate, so re-tone its title +
   subtitle to read on the brighter ground. */
/* The "Who Dealdrum is for" eyebrow sits on the bright lavender plate.
   Plain white reads as a clean confident tag on the purple ground;
   weight + tracking + a soft shadow carry the emphasis without needing
   a coloured accent (previous green was too quiet on the purple). */
.section#audiences .section-header .eyebrow {
  color: #fff;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.20);
}
.section#audiences .section-header h2 { color: #fff; }
.section#audiences .section-header p { color: rgba(255, 255, 255, 0.78); }

/* Anonymous Deal Room ----------------------------------------------------
   The "dark pool" section right after the live-deals strip. Charcoal
   ground with a subtle dark-purple radial wash; three numbered steps
   showing the listing → NDA → reveal pipeline. Designed to look heavier
   and quieter than the surrounding marketing strips — it's a trust
   block, not a hype block. */
.section.dd-anon {
  background: #0E1014;
  color: rgba(255, 255, 255, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}
.section.dd-anon::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(45% 60% at 15% 0%, rgba(105, 89, 250, 0.14), transparent 65%),
    radial-gradient(35% 55% at 100% 100%, rgba(168, 152, 255, 0.08), transparent 70%);
  pointer-events: none;
}
.section.dd-anon > .container { position: relative; z-index: 1; }

.dd-anon-head { max-width: 760px; margin: 0 0 36px; }
.dd-anon-head .eyebrow {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: #a399ff;
  margin: 0 0 12px;
}
.dd-anon-head h2 {
  font-family: var(--font-display);
  font-weight: 800; font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15; letter-spacing: -0.01em;
  color: #fff; margin: 0 0 14px;
}
.dd-anon-head .lede {
  font-size: 16px; line-height: 1.6;
  color: rgba(255, 255, 255, 0.72); margin: 0;
}

.dd-anon-flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.dd-anon-step {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 24px 22px 22px;
  position: relative;
}
.dd-anon-step .dd-anon-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em;
  color: #a399ff; margin-bottom: 14px;
}
.dd-anon-step h3 {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 800; line-height: 1.25;
  color: #fff; margin: 0 0 10px;
  letter-spacing: -0.005em;
}
.dd-anon-step p {
  font-size: 14px; line-height: 1.55;
  color: rgba(255, 255, 255, 0.62); margin: 0;
}
.dd-anon-step p em {
  font-style: italic;
  color: #c5bdff;
}

.dd-anon-foot {
  margin-top: 32px;
  padding: 22px 26px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  display: flex; gap: 24px; align-items: center;
  flex-wrap: wrap;
}
.dd-anon-foot p {
  flex: 1 1 360px;
  font-size: 14px; line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}
.dd-anon-foot .btn {
  background: #4ade80;
  color: #082c1d;
  border-color: #4ade80;
  font-weight: 700;
  padding: 12px 22px;
  white-space: nowrap;
}
.dd-anon-foot .btn:hover {
  background: #5cf094;
  border-color: #5cf094;
  color: #062417;
}

@media (max-width: 900px) {
  .dd-anon-flow { grid-template-columns: 1fr; }
  .dd-anon-foot { flex-direction: column; align-items: stretch; }
  .dd-anon-foot .btn { text-align: center; }
}

/* Final CTA --------------------------------------------------------------
   The .cta-band is the dark card; we add a plate behind it that extends
   beyond all four edges, so the dark card visibly sits on a brand-tinted
   surface instead of being a black strip across the page.

   v2: same deepening as Audiences — the plate is a richer purple now, not
   the original washed pale. The dark card still pops because of its
   contrast against the brand colour.

   v3: extend the same plate to the sub-pages' page-specific CTAs. The
   originators + holders pages use .section.originator-final (with an
   .originator-cta dark card inside); the investor page uses #access
   .cta-band already. Same plate behind both shapes so every page's
   bottom CTA sits on the same lavender surface. */
#access,
.section.originator-final {
  position: relative;
}
#access > .container,
.section.originator-final > .container {
  position: relative;
}
#access > .container::before,
.section.originator-final > .container::before {
  content: "";
  position: absolute;
  left: -14px; right: -14px;
  top: 16px; bottom: -16px;
  border-radius: 28px;
  background:
    radial-gradient(60% 80% at 100% 50%, rgba(105, 89, 250, 0.35), transparent 60%),
    radial-gradient(50% 80% at 0% 50%, rgba(201, 151, 0, 0.16), transparent 70%),
    linear-gradient(180deg, #cfc8ff 0%, #bcb2ff 100%);
  z-index: 0;
}
#access .cta-band,
.section.originator-final .originator-cta {
  position: relative;
  z-index: 1;
  box-shadow: 0 22px 50px -18px rgba(15, 23, 42, 0.36);
}

/* Dark sections ---------------------------------------------------------
   Two short, weighty sections — Statement aside ("Controls that make the
   platform feel serious") and Principles ("Operating rules") — go full
   dark to break up the long stretch of light-on-light between Audiences
   and the Final CTA. Both have short, punchy content that benefits from
   the gravitas of black ground + white display type. */

/* Statement aside -------------------------------------------------------- */
.statement-aside {
  position: relative;
  background: var(--charcoal);
  color: #fff;
  padding-top: clamp(72px, 8vw, 112px);
  padding-bottom: clamp(72px, 8vw, 112px);
  margin-top: clamp(56px, 8vw, 96px);
  overflow: hidden;
}
.statement-aside::before {
  /* a soft purple radial wash so the black has some life, mirroring the
     pattern on the Final CTA band */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 70% at 12% 100%, rgba(105, 89, 250, 0.22), transparent 65%),
    radial-gradient(50% 60% at 100% 0%, rgba(201, 151, 0, 0.10), transparent 70%);
  pointer-events: none;
}
.statement-aside > .container { position: relative; z-index: 1; }
.statement-aside .stat-num { color: #fff; }
.statement-aside .stat-label { color: rgba(255, 255, 255, 0.55); }
.statement-aside .statement-aside-inner {
  border-left-color: #a399ff;
}
.statement-aside .statement-aside-inner h3 { color: #fff; }
.statement-aside .statement-aside-inner p { color: rgba(255, 255, 255, 0.7); }

/* Principles ------------------------------------------------------------- */
#principles {
  background: var(--charcoal);
  color: #fff;
  position: relative;
  overflow: hidden;
}
#principles::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(40% 60% at 90% 10%, rgba(105, 89, 250, 0.18), transparent 65%),
    radial-gradient(35% 60% at 0% 100%, rgba(201, 151, 0, 0.08), transparent 70%);
  pointer-events: none;
}
#principles > .container { position: relative; z-index: 1; }
#principles .section-header h2 { color: #fff; }
#principles .section-header p  { color: rgba(255, 255, 255, 0.65); }
#principles .section-header .eyebrow { color: #a399ff; }
/* The principles grid is a single rounded card containing p-blocks — keep
   the card but make it dark too, with brighter inner borders. */
#principles .principles {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}
#principles .principles .p {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  border-right-color: rgba(255, 255, 255, 0.08);
}
#principles .principles .p h4 { color: #fff; }
#principles .principles .p small { color: rgba(255, 255, 255, 0.6); }
#principles .principles .p .ix { color: #4ade80; }
/* Section borders that lived on neighbouring light sections need to drop
   when one of them goes dark — otherwise a 1px off-white line sits on
   top of the charcoal. */
.statement-aside + .section { border-top-color: transparent; }
#principles { border-top-color: rgba(255, 255, 255, 0.10); }
#principles + .section { border-top-color: rgba(255, 255, 255, 0); }

/* SEO body ("Built for transactions with credible paymasters") -----------
   Full-dark treatment. White-on-charcoal makes the section feel like a
   serious editorial statement. The tag chips switch to a quieter glassy
   chip on dark, and the three pillar cards get a subtle dark surface so
   they don't read as floating white tiles. */
.seo-body-section {
  background: var(--charcoal);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.seo-body-section::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(55% 75% at 8% 0%, rgba(105, 89, 250, 0.18), transparent 65%),
    radial-gradient(45% 65% at 100% 100%, rgba(201, 151, 0, 0.08), transparent 70%);
  pointer-events: none;
}
.seo-body-section > .container { position: relative; z-index: 1; }
.seo-body-section .seo-statement .eyebrow { color: #a399ff; }
.seo-body-section .seo-statement h2 { color: #fff; }
.seo-body-section .seo-lead { color: rgba(255, 255, 255, 0.78); }
.seo-body-section .seo-desc { color: rgba(255, 255, 255, 0.62); }
.seo-body-section .seo-tag {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
}
.seo-body-section .seo-pillar {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}
.seo-body-section .seo-pillar:hover {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.6);
}
.seo-body-section .seo-pillar span { color: #a399ff; }
.seo-body-section .seo-pillar h3 { color: #fff; }
.seo-body-section .seo-pillar p { color: rgba(255, 255, 255, 0.65); }

/* Trust Room half-black --------------------------------------------------
   Only the text column sits on a charcoal plate; the right-side trust
   carousel visual stays on the page background. The plate is an absolutely
   positioned ::before whose width tracks the layout (left padding + the
   340px text column + half of the 64px gap), so the split lands cleanly
   between the text and the visual on desktop. On stacked mobile layouts
   the plate is hidden — the trust-window card already has its own
   surface and the column collapses to one.

   Scoped to the homepage only — the investor page also has a section
   with id="trust" but a different inner layout, and the half-black
   plate was leaking through and covering its content. */
body[data-screen-label="Landing One-Pager"] #trust {
  position: relative;
  overflow: visible;
  border-top: none;
}
body[data-screen-label="Landing One-Pager"] #trust::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: calc(max(var(--gutter, 48px), (100vw - 1180px) / 2 + var(--gutter, 48px)) + 340px + 32px);
  background:
    radial-gradient(60% 60% at 30% 50%, rgba(105, 89, 250, 0.20), transparent 65%),
    var(--charcoal);
  z-index: 0;
  pointer-events: none;
}
body[data-screen-label="Landing One-Pager"] #trust > .trust-feature { position: relative; z-index: 1; }
body[data-screen-label="Landing One-Pager"] #trust .trust-feature-text .eyebrow { color: #a399ff; }
body[data-screen-label="Landing One-Pager"] #trust .trust-feature-text h2 { color: #fff; }
body[data-screen-label="Landing One-Pager"] #trust .trust-feature-text p { color: rgba(255, 255, 255, 0.72); }

@media (max-width: 1280px) {
  /* Stacked layout: drop the half plate, switch to a slim top band so the
     "dark" treatment is still present but doesn't crash into the visual. */
  body[data-screen-label="Landing One-Pager"] #trust::before {
    width: 100%;
    bottom: auto;
    height: 260px;
  }
}
@media (max-width: 800px) {
  /* On phones the title block is short; trim the dark band further. */
  body[data-screen-label="Landing One-Pager"] #trust::before { height: 220px; }
}

/* Footer dark-mode overrides live just below the original .site-footer
   block (later in the file) so the cascade resolves correctly without
   needing !important. See the "Global footer (dark)" comment further
   down in this file. */

/* Mobile: keep the depth but loosen the padding so the plate doesn't crowd
   the screen edges. */
@media (max-width: 700px) {
  .section#audiences > .container {
    padding: 40px 18px;
    border-radius: 16px;
  }
  .section#audiences > .container::before {
    left: -6px; right: -6px;
    top: 8px; bottom: -12px;
    border-radius: 20px;
  }
  #access > .container::before {
    left: -6px; right: -6px;
    top: 10px; bottom: -10px;
    border-radius: 22px;
  }
}

/* ---------- Footer ------------------------------------------------------ */

.site-footer {
  padding: clamp(56px, 7vw, 96px) 0 0;
  border-top: 1px solid transparent;
  margin-top: clamp(56px, 8vw, 104px);
  overflow: hidden;
  background: var(--charcoal);
  color: rgba(255, 255, 255, 0.62);
  position: relative;
}
.site-footer::before {
  /* soft brand wash so the dark footer doesn't read flat — same pattern
     as the Statement-aside and Principles dark sections */
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 240px;
  background:
    radial-gradient(40% 60% at 15% 0%, rgba(105, 89, 250, 0.16), transparent 70%),
    radial-gradient(30% 60% at 100% 0%, rgba(201, 151, 0, 0.06), transparent 70%);
  pointer-events: none;
}
.site-footer > .container { position: relative; z-index: 1; }
.site-footer .container {
  display: block;
  max-width: 1640px;
  padding-inline: clamp(28px, 4vw, 64px);
}
.footer-grid {
  display: grid;
  /* 4 columns now (brand wider for tagline + CTA, then 3 link columns).
     The 7-column template this replaced was tuned for the old footer
     with "12 Engines" + Use Cases columns, which left dead space on
     the right after the canonical-footer unification. */
  grid-template-columns: minmax(280px, 1.5fr) repeat(3, minmax(160px, 1fr));
  gap: clamp(28px, 3vw, 56px);
  align-items: start;
}
.site-footer .left { max-width: 390px; }
.site-footer .left p { font-size: 14px; color: rgba(255, 255, 255, 0.62); line-height: 1.62; margin: 16px 0 0; }
.site-footer .brand-lockup strong { color: #fff; }
.site-footer .col { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.site-footer .col h5 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 650;
  color: #fff;
  letter-spacing: 0;
  margin: 0 0 8px;
}
.site-footer .col a,
.site-footer .col span { font-size: 14px; color: rgba(255, 255, 255, 0.62); line-height: 1.35; }
.site-footer .col span { cursor: default; }
.site-footer .col a:hover { color: #fff; text-decoration: none; }
.footer-col-wide {
  display: grid;
  grid-template-columns: 1fr;
}
.footer-engine-col {
  min-width: 260px;
}
.footer-engine-col h5 {
  position: relative;
  display: block;
  text-align: center;
  white-space: nowrap;
  padding-bottom: 13px;
  margin-bottom: 12px;
}
.footer-engine-col h5::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}
.footer-engine-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 18px;
}
.footer-engine-grid a,
.footer-engine-grid span {
  white-space: nowrap;
}
.footer-cta-row {
  padding: 28px 0 0;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-cta-row .btn { font-size: 14px; padding: 11px 22px; }
.footer-signin-link {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
}
.footer-signin-link:hover { color: #fff; text-decoration: none; }

.site-footer .legal {
  width: 100%;
  position: relative;
  z-index: 1;
  padding: 28px 0 32px;
  margin-top: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.50);
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
  background: transparent;
}
.site-footer .footer-inner {
  width: min(100%, 960px);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
}
.site-footer .footer-inner a {
  color: #a399ff;
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;
}
.site-footer .footer-inner a:hover { color: #fff; }

@media (max-width: 1180px) {
  .footer-grid {
    grid-template-columns: minmax(260px, 1.3fr) repeat(3, minmax(150px, 1fr));
  }
}

@media (max-width: 760px) {
  .site-footer {
    padding-top: 44px;
  }

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

  .footer-brand-block {
    grid-column: 1 / -1;
  }

  .site-footer .left {
    max-width: 100%;
  }

  .site-footer .col h5 {
    font-size: 13px;
  }

  .site-footer .col a,
  .site-footer .col span {
    font-size: 13px;
  }

  .footer-engine-col {
    min-width: 0;
  }

  .footer-engine-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px 12px;
  }

  .site-footer .legal {
    padding: 22px 0 28px;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}


/* ===========================================================================
   Floating-Engines Hero — May 2026
   Scroll-driven orbit animation + dark-mode toggle
   =========================================================================== */

/* ── Dark-mode body overrides ──────────────────────────────────────────────── */
body.dark { background: #07080f; color: #fff; }
body.dark .site-header {
  background: rgba(7,8,15,0.85) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
body.dark .site-header.is-scrolled { background: rgba(7,8,15,0.96) !important; }
body.dark .brand-lockup strong { color: #fff !important; }
body.dark .site-nav > a,
body.dark .nav-menu-trigger { color: rgba(255,255,255,0.7) !important; }
body.dark .site-nav > a:hover,
body.dark .nav-menu-trigger:hover { color: #fff !important; background: rgba(255,255,255,0.06) !important; }
body.dark .nav-cta { background: var(--primary) !important; color: #fff !important; }
body.dark .nav-dropdown { background: #10111a !important; border-color: rgba(255,255,255,0.09) !important; }
body.dark .nav-dropdown a { color: rgba(255,255,255,0.7) !important; }
body.dark .nav-dropdown a:hover { background: rgba(255,255,255,0.05) !important; color: #fff !important; }
body.dark .nav-mega-kicker { color: rgba(255,255,255,0.4) !important; }
body.dark .nav-mega-story h3, body.dark .nav-mega-story p { color: rgba(255,255,255,0.8) !important; }
body.dark .nav-mega-button {
  background: var(--primary) !important; color: #fff !important;
}

/* ── Theme toggle pill ─────────────────────────────────────────────────────── */
.dd-theme-toggle {
  position: relative; width: 38px; height: 22px;
  background: rgba(105,89,250,0.12);
  border: 1px solid rgba(105,89,250,0.28);
  border-radius: 999px; cursor: pointer; flex-shrink: 0;
  transition: background 0.3s;
  padding: 0; margin: 0 2px;
  vertical-align: middle;
}
.dd-theme-toggle::after {
  content: ''; position: absolute;
  width: 16px; height: 16px; background: #6959fa;
  border-radius: 50%; top: 2px; left: 2px;
  transition: transform 0.3s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
body.dark .dd-theme-toggle::after { transform: translateX(16px); }

/* ── Dark mode: section headings + eyebrows (all sections) ─────────────────── */
body.dark .section-header h2,
body.dark .hiw-heading { color: #fff !important; }
body.dark .section-header .eyebrow { color: rgba(168,159,255,0.80) !important; }
body.dark .section-header p { color: rgba(255,255,255,0.48) !important; }

/* SEO body */
body.dark .seo-statement h2 { color: #fff !important; }
body.dark .seo-lead { color: rgba(255,255,255,0.62) !important; }
body.dark .seo-tag {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.55) !important;
}
body.dark .seo-desc { color: rgba(255,255,255,0.42) !important; }
body.dark .seo-pillar {
  background: #10111a !important;
  border-color: rgba(255,255,255,0.08) !important;
}
body.dark .seo-pillar:hover { border-color: rgba(255,255,255,0.18) !important; }
body.dark .seo-pillar h3 { color: #fff !important; }
body.dark .seo-pillar p { color: rgba(255,255,255,0.45) !important; }

/* Trust Room text column */
body.dark .trust-feature-text h2 { color: #fff !important; }
body.dark .trust-feature-text .eyebrow { color: rgba(168,159,255,0.70) !important; }
body.dark .trust-feature-text p { color: rgba(255,255,255,0.48) !important; }

/* Deal Standards cards */
body.dark .standard-card {
  background: #10111a !important;
  border-color: rgba(255,255,255,0.08) !important;
}
body.dark .standard-card h3 { color: #fff !important; }
body.dark .standard-card p { color: rgba(255,255,255,0.48) !important; }

/* Finance Types cards */
body.dark .finance-type {
  background: #10111a !important;
  border-color: rgba(255,255,255,0.08) !important;
}
body.dark .finance-type h3 { color: #fff !important; }
body.dark .finance-type p { color: rgba(255,255,255,0.48) !important; }

/* How It Works steps */
body.dark .hiw-step {
  background: #10111a !important;
  border-color: rgba(255,255,255,0.08) !important;
}
body.dark .hiw-step-label { color: rgba(255,255,255,0.38) !important; }
body.dark .hiw-step-title { color: #fff !important; }
body.dark .hiw-step-body  { color: rgba(255,255,255,0.48) !important; }
body.dark .hiw-step.hiw-in.hiw-originator {
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.04) !important;
}
body.dark .hiw-step-num { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.15) !important; color: rgba(255,255,255,0.6) !important; }
body.dark .hiw-step.hiw-originator .hiw-step-num { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.2) !important; }
body.dark .hiw-track-pill.hiw-originator {
  color: rgba(255,255,255,0.75) !important;
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.18) !important;
}
body.dark .hiw-track-rule { background: linear-gradient(to right, rgba(255,255,255,0.10), transparent) !important; }
body.dark .hiw-track-rule--orig { background: linear-gradient(to left, rgba(255,255,255,0.10), transparent) !important; }

/* Audiences section */
body.dark .audience {
  background: #10111a !important;
  border-color: rgba(255,255,255,0.08) !important;
}
body.dark .audience h3 { color: #fff !important; }
body.dark .audience .desc { color: rgba(255,255,255,0.50) !important; }
body.dark .audience .what-you-get { color: rgba(255,255,255,0.65) !important; }

/* Principles grid */
body.dark .principles {
  background: #10111a !important;
  border-color: rgba(255,255,255,0.08) !important;
}
body.dark .principles .p { border-color: rgba(255,255,255,0.07) !important; }
body.dark .principles .p h4 { color: #fff !important; }
body.dark .principles .p small { color: rgba(255,255,255,0.48) !important; }

/* FAQ */
body.dark .faq details { border-color: rgba(255,255,255,0.08) !important; }
body.dark .faq summary { color: #fff !important; }
body.dark .faq summary::after { color: rgba(255,255,255,0.35) !important; }
body.dark .faq details > p { color: rgba(255,255,255,0.55) !important; }

/* ── Mobile nav: hamburger + drawer ──────────────────────────────────────── */
.nav-hamburger {
  display: none;
  background: none; border: none; cursor: pointer;
  padding: 6px; margin-left: 4px;
  flex-direction: column; gap: 5px;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .nav-hamburger { display: flex; }
}
.nav-hamburger span {
  display: block; width: 18px; height: 2px;
  background: var(--fg-1); border-radius: 1px;
  transition: transform 220ms ease, opacity 220ms ease;
}
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
body.dark .nav-hamburger span { background: #fff; }

.nav-mobile-drawer {
  display: none;
  flex-direction: column;
  background: rgba(248,250,247,0.97);
  border-top: 1px solid var(--border-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms cubic-bezier(0.4,0,0.2,1);
}
.nav-mobile-drawer.is-open { max-height: 320px; }
@media (max-width: 640px) {
  .nav-mobile-drawer { display: flex; }
}
.nav-mobile-drawer a {
  font-size: 15px; font-weight: 500;
  color: var(--fg-1); padding: 13px 20px;
  text-decoration: none; display: block;
  border-bottom: 1px solid transparent;
  transition: color 120ms;
}
.nav-mobile-drawer a:hover { color: var(--primary); }
.nav-mobile-drawer .nav-mobile-divider {
  height: 1px; background: var(--border-soft); margin: 6px 16px;
}
.nav-mobile-drawer .nav-mobile-cta {
  margin: 8px 16px 16px;
  background: var(--primary); color: #fff !important;
  border-radius: 8px; padding: 13px 20px !important;
  font-weight: 600; text-align: center; display: block;
  border-bottom: none !important;
}
.nav-mobile-drawer .nav-mobile-cta:hover {
  background: var(--primary-hover); color: #fff !important;
}
body.dark .nav-mobile-drawer {
  background: rgba(7,8,15,0.97);
  border-color: rgba(255,255,255,0.08);
}
body.dark .nav-mobile-drawer a { color: rgba(255,255,255,0.80); }
body.dark .nav-mobile-drawer .nav-mobile-divider { background: rgba(255,255,255,0.08); }

/* ── Dark mode mobile hero override for header ──────────────────────────── */
@media (max-width: 640px) {
  body.dark .nav-hamburger span { background: #fff; }
}

/* ── Hero scroll container ─────────────────────────────────────────────────── */
/* 250vh: scrollMax = 150vh — gives cards time to fully spread before releasing */
.dd-hero-scroll { height: 250vh; }
@media (max-width: 640px) { .dd-hero-scroll { height: 100vh; } }

/* Remove gap + border between hero and the first section below */
.dd-hero-scroll + .section { padding-top: 0; border-top: none; }

.dd-hero-sticky {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  transition: background 0.5s;
}
body.dark .dd-hero-sticky { background: #07080f; }

/* Radial glow */
.dd-glow {
  position: absolute; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(105,89,250,0.10) 0%, rgba(105,89,250,0.03) 50%, transparent 70%);
  border-radius: 50%; pointer-events: none; z-index: 0;
  transition: opacity 0.5s;
}
body.dark .dd-glow {
  background: radial-gradient(circle, rgba(105,89,250,0.18) 0%, rgba(105,89,250,0.04) 50%, transparent 70%);
}

/* ── Centre copy ───────────────────────────────────────────────────────────── */
.dd-hero-center {
  position: relative; z-index: 10;
  text-align: center; max-width: 540px; padding: 0 24px;
}
.dd-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(105,89,250,0.07); border: 1px solid rgba(105,89,250,0.22);
  border-radius: 999px; padding: 5px 14px 5px 10px;
  font-size: 11px; font-weight: 700; color: #6959fa;
  letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 22px;
  transition: color 0.5s;
}
body.dark .dd-badge { color: #a89fff; border-color: rgba(105,89,250,0.35); background: rgba(105,89,250,0.12); }
.dd-badge-dot {
  width: 6px; height: 6px; background: #6959fa;
  border-radius: 50%; box-shadow: 0 0 8px rgba(105,89,250,0.55);
  animation: dd-blink 2s ease-in-out infinite; flex-shrink: 0;
}
@keyframes dd-blink {
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.5;transform:scale(1.5)}
}
.dd-hero-h1 {
  font-family: var(--font-display);
  font-size: 40px; font-weight: 700;
  line-height: 1.15; letter-spacing: -0.025em;
  color: var(--charcoal); margin: 0 0 14px;
  transition: color 0.5s;
}
@media (max-width: 800px) { .dd-hero-h1 { font-size: 30px; } }
body.dark .dd-hero-h1 { color: #fff; }
.dd-hero-h1 em {
  /* Match the Request Access button's solid purple, not the old gradient
     that faded to lavender (#a89fff) and made the right half look weak. */
  font-style: normal;
  color: var(--primary);
}
body.dark .dd-hero-h1 em {
  /* Bump brightness slightly on dark backgrounds for legibility. */
  color: #8b7dff;
}

/* ── Hero per-font-pack tuning ────────────────────────────────────────────
   The default .dd-hero-h1 size+spacing above is tuned for Plus Jakarta Sans
   (pack 3, ~700 weight, geometric). Other packs need different sizing and
   weight to look right at the same optical impact. Applied via body class
   set by the font rotator in index.html.

   Pack 0 (Fraunces) is the default + the body class .fp-fraunces is also
   set so JS-off pages get the right tuning too. */
body.fp-fraunces .dd-hero-h1 {
  font-size: 50px; font-weight: 600;
  line-height: 1.06; letter-spacing: -0.022em;
}
/* Em weight matches the h1 numerically (600). Lenny prefers it heavier
   even though purple at the same weight reads slightly heavier than
   black on white — that "present" feel is the look. */
body.fp-fraunces .dd-hero-h1 em { font-weight: 600; }
@media (max-width: 800px) { body.fp-fraunces .dd-hero-h1 { font-size: 34px; } }

body.fp-instrument .dd-hero-h1 {
  font-size: 56px; font-weight: 400;
  line-height: 1.02; letter-spacing: -0.020em;
}
body.fp-instrument .dd-hero-h1 em { font-style: italic; }
@media (max-width: 800px) { body.fp-instrument .dd-hero-h1 { font-size: 38px; } }

body.fp-bricolage .dd-hero-h1 {
  font-size: 46px; font-weight: 700;
  line-height: 1.10; letter-spacing: -0.030em;
}
@media (max-width: 800px) { body.fp-bricolage .dd-hero-h1 { font-size: 32px; } }

/* Pack 3 (Jakarta) keeps the default tuning, no overrides needed. */

.dd-mobile-break { display: none; }
.dd-hero-sub {
  font-size: 15px; color: var(--ink-4);
  line-height: 1.65; margin: 0 0 30px;
  transition: color 0.5s;
}
body.dark .dd-hero-sub { color: rgba(255,255,255,0.50); }

/* ── Engine cards ──────────────────────────────────────────────────────────── */
.dd-cw {
  position: absolute; top: 0; left: 0; z-index: 6;
  will-change: transform;
}
.dd-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px; padding: 13px 15px;
  width: 172px;
  box-shadow: var(--shadow-2);
  transition: border-color 0.3s, background 0.5s, box-shadow 0.3s;
  cursor: default;
}
body.dark .dd-card {
  background: rgba(255,255,255,0.055);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 4px 24px rgba(0,0,0,0.30);
}
.dd-card:hover {
  border-color: rgba(105,89,250,0.45);
  box-shadow: var(--shadow-3), 0 0 0 1px rgba(105,89,250,0.12);
}
.dd-card-num {
  font-size: 10px; font-weight: 700;
  color: rgba(105,89,250,0.65);
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px;
}
.dd-card-title {
  font-size: 12.5px; font-weight: 700;
  color: var(--charcoal); line-height: 1.3; margin-bottom: 5px;
  transition: color 0.5s;
}
body.dark .dd-card-title { color: #fff; }
.dd-card-detail {
  font-size: 11px; color: var(--ink-4);
  line-height: 1.5; transition: color 0.5s;
}
body.dark .dd-card-detail { color: rgba(255,255,255,0.40); }
.dd-dot {
  display: inline-block; width: 5px; height: 5px;
  border-radius: 50%; margin-right: 4px;
  vertical-align: middle; position: relative; top: -1px;
}

/* ── Mobile hero: dark background ──────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Dark hero background */
  .dd-hero-sticky {
    background: #07080f !important;
  }

  /* Header: dark to match the hero while at the top of the page */
  .site-header:not(.is-scrolled) {
    background: #07080f !important;
    border-bottom-color: rgba(255,255,255,0.07) !important;
    box-shadow: none !important;
  }

  /* Once scrolled, let the normal light header take over */
  .site-header.is-scrolled {
    background: rgba(248,250,247,0.94) !important;
  }

  /* Logo + nav text: white against the dark header */
  .site-header:not(.is-scrolled) .brand-lockup strong {
    color: #fff !important;
  }

  /* Heading + sub go white */
  .dd-hero-h1 { color: #fff !important; }
  .dd-hero-sub { color: rgba(255,255,255,0.52) !important; }

  /* Badge: lighter purple tint */
  .dd-badge {
    color: #a89fff !important;
    border-color: rgba(105,89,250,0.35) !important;
    background: rgba(105,89,250,0.12) !important;
  }

  /* Glow: brighter on dark */
  .dd-glow {
    background: radial-gradient(circle, rgba(105,89,250,0.22) 0%, rgba(105,89,250,0.06) 50%, transparent 70%) !important;
  }

  /* Centre legibility overlay: dark radial (replaces light one) */
  .dd-hero-center::before {
    background: radial-gradient(circle, rgba(7,8,15,0.88) 0%, rgba(7,8,15,0.65) 42%, rgba(7,8,15,0) 72%) !important;
  }

  /* Cards: dark glass */
  .dd-card {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.10) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
  }
  .dd-card-num  { color: rgba(255,255,255,0.35) !important; }
  .dd-card-title { color: rgba(255,255,255,0.80) !important; }
}

@media (max-width: 640px) {
  .site-header .container {
    height: 58px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .site-nav {
    flex: 0 0 auto;
    min-width: 0;
    gap: 6px;
  }

  .site-nav > a:not(.nav-cta),
  .site-nav .nav-cta {
    display: none;
  }

  .dd-hero-center {
    max-width: 340px;
    padding: 0 22px;
  }

  .dd-hero-center::before {
    content: "";
    position: absolute;
    inset: -28px -10px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle, rgba(248,249,252,0.86) 0%, rgba(248,249,252,0.68) 42%, rgba(248,249,252,0) 72%);
  }

  body.dark .dd-hero-center::before {
    background: radial-gradient(circle, rgba(7,8,15,0.84) 0%, rgba(7,8,15,0.62) 42%, rgba(7,8,15,0) 72%);
  }

  .dd-badge {
    font-size: 9px;
    padding: 4px 10px 4px 8px;
    margin-bottom: 16px;
  }

  .dd-hero-h1 {
    font-size: 24px;
    line-height: 1.16;
    letter-spacing: -0.015em;
    margin-bottom: 11px;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    overflow-wrap: anywhere;
  }

  .dd-mobile-break {
    display: block;
  }

  .dd-hero-sub {
    font-size: 12.5px;
    line-height: 1.55;
    max-width: 300px;
    margin: 0 auto 22px;
  }

  .dd-cw {
    z-index: 2;
    pointer-events: none;
  }

  .dd-card {
    width: 98px;
    padding: 6px 7px;
    border-radius: 10px;
    background: rgba(255,255,255,0.52);
    box-shadow: 0 4px 14px rgba(15,23,42,0.035);
    opacity: 0.78;
  }

  body.dark .dd-card {
    background: rgba(255,255,255,0.028);
    border-color: rgba(255,255,255,0.06);
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  }

  .dd-card-num {
    font-size: 7.5px;
    letter-spacing: 0.06em;
    margin-bottom: 3px;
  }

  .dd-card-title {
    font-size: 9px;
    line-height: 1.25;
    margin-bottom: 0;
  }

  .dd-card-detail {
    display: none;
  }

  .dd-dot {
    width: 4px;
    height: 4px;
    margin-right: 3px;
  }
}

/* ── Statement aside ──────────────────────────────────────────────────────── */
.statement-aside { padding: 72px 0; }

/* Dashboard layout — the "control room" section ----------------------------
   A 4-column grid that mirrors the marketing-dashboard reference:

     [ flip card (2 rows) ] [ stat A ] [ stat B ] [ insight (2 rows) ]
     [ flip card cont.    ] [ stat C ] [ stat D ] [ insight cont.    ]

   The leftmost card flips on a slow loop (rotateY) so the section has one
   point of motion — same idea as the screenshot the user referenced. */

.dd-dash-header {
  max-width: 720px;
  margin: 0 auto 36px;
  text-align: center;
}
.dd-dash-header .eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a399ff;
  margin: 0 0 12px;
}
.dd-dash-header h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 12px;
  white-space: nowrap;
}
.dd-dash-header p {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.dd-dash-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) repeat(2, minmax(150px, 1fr)) minmax(240px, 1.4fr);
  grid-auto-rows: minmax(160px, auto);
  gap: 14px;
}
.dd-dash-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 22px;
  position: relative;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.85);
}

/* Flipping deal card spans 2 rows on the left */
.dd-flip {
  grid-column: 1;
  grid-row: 1 / span 2;
  perspective: 1400px;
  padding: 0;
  background: transparent;
  border: 0;
}
.dd-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: ddCardFlip 9s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.dd-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dd-flip-back {
  /* User wanted the back of the flip card to feel "brighter and more
     colourful" — not just another dark card. Layered radial brand washes
     on a vibrant violet → indigo base, with a warm gold flare in the
     bottom-right corner, do the work. Border switches to a thin glowing
     stroke and the back gets its own subtle inner highlight via a top
     gradient line. */
  transform: rotateY(180deg);
  padding: 24px;
  gap: 14px;
  background:
    radial-gradient(70% 90% at 18% 0%, rgba(168, 152, 255, 0.55), transparent 65%),
    radial-gradient(60% 80% at 90% 100%, rgba(255, 196, 100, 0.30), transparent 60%),
    radial-gradient(80% 90% at 100% 0%, rgba(94, 234, 212, 0.22), transparent 60%),
    linear-gradient(155deg, #6959fa 0%, #5246d2 45%, #3b2f9e 100%);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 18px 40px -20px rgba(48, 36, 140, 0.50);
}
.dd-flip-back::before {
  /* a soft top highlight to give the panel depth — feels lifted, like
     it's catching light from above */
  content: "";
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
}
.dd-flip-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dd-flip-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.22);
}
.dd-flip-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.dd-flip-stat:last-child { border-bottom: 0; }
.dd-flip-stat strong {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1;
  /* tiny glow so the numbers pop on the colourful field */
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}
.dd-flip-stat strong .dd-unit {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.70);
}
.dd-flip-stat span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
}

/* Front face: a "photo" of the project (CSS-only — gradient + SVG art) +
   meta strip with deal title. */
.dd-flip-photo {
  position: relative;
  flex: 1;
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(105, 89, 250, 0.55), transparent 70%),
    linear-gradient(180deg, #5b50e5 0%, #312a8f 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  min-height: 200px;
}
.dd-flip-photo-glow {
  position: absolute;
  top: -40%; right: -20%;
  width: 80%; height: 120%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.18), transparent 70%);
  pointer-events: none;
}
.dd-flip-photo-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.dd-flip-photo-art {
  width: 78%;
  max-width: 240px;
  height: auto;
  position: relative;
  z-index: 1;
}
.dd-flip-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.36);
  padding: 5px 10px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2;
}
.dd-flip-meta {
  padding: 16px 18px 18px;
  background: rgba(0, 0, 0, 0.30);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.dd-flip-buyer {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a399ff;
  margin-bottom: 6px;
}
.dd-flip-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.dd-flip-sub {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  gap: 8px;
}
.dd-flip-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18);
}

/* Stat cards (4 small + 1 big insight) */
.dd-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dd-stat-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}
.dd-stat-eyebrow svg {
  width: 16px;
  height: 16px;
  color: #a399ff;
  flex-shrink: 0;
}
.dd-stat-num {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1;
  margin-top: 4px;
}
.dd-stat-num .dd-unit {
  font-size: 0.55em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.50);
  margin-left: 2px;
}
.dd-stat-foot {
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
  margin: auto 0 0;
}

/* Insight column spans 2 rows on the right */
.dd-insight {
  grid-column: 4;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(105, 89, 250, 0.16), transparent 70%),
    rgba(255, 255, 255, 0.04);
}
.dd-insight-body {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}
.dd-insight-body strong { color: #fff; font-weight: 600; }
.dd-insight-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}
.dd-insight-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

@keyframes ddCardFlip {
  /* Holds each face for ~3.5s, with a smooth ~1s rotation between.
     Total cycle = 9s. The "sliver" frame the user pointed to is the
     mid-rotation instant where the card is edge-on. */
  0%, 38%   { transform: rotateY(0deg); }
  50%, 88%  { transform: rotateY(180deg); }
  100%      { transform: rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dd-flip-inner { animation: none; }
}

/* Responsive: drop to a 2-col grid at tablet, single column on mobile.
   The flip card becomes a regular full-width card on mobile so the cycle
   still plays but doesn't dominate. */
@media (max-width: 1100px) {
  .dd-dash-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }
  .dd-flip {
    grid-column: 1 / span 2;
    grid-row: auto;
    height: 360px;
  }
  .dd-insight {
    grid-column: 1 / span 2;
    grid-row: auto;
  }
}
@media (max-width: 600px) {
  .dd-dash-grid { grid-template-columns: 1fr; }
  .dd-flip,
  .dd-insight { grid-column: 1; }
  .dd-flip { height: 380px; }
  .dd-dash-header h3 { white-space: normal; }
}

/* ── Scroll hint ───────────────────────────────────────────────────────────── */
.dd-scroll-hint {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  z-index: 55; pointer-events: none;
  opacity: 1; transition: opacity 0.4s;
}
.dd-scroll-hint span {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-4);
  transition: color 0.5s;
}
body.dark .dd-scroll-hint span { color: rgba(255,255,255,0.38); }
.dd-scroll-hint svg {
  width: 20px; height: 20px; color: rgba(105,89,250,0.6);
  animation: dd-chevron 1.8s ease-in-out infinite;
}
@keyframes dd-chevron {
  0%,100%{transform:translateY(0);opacity:0.6}
  50%{transform:translateY(5px);opacity:1}
}
.dd-scroll-hint.hidden { opacity: 0; }

/* ============================================================================
 * Voice of the work — testimonial band (added 2026-05-23 from field notes)
 * 2026-05-25: added photo banner (Desola Lanre-Ologun on Unsplash) above
 * the existing quote cards. Zero padding-top on the band so the photo
 * goes edge-to-edge.
 * ========================================================================== */
.voice-band {
  background: linear-gradient(180deg, rgba(105,89,250,0.05) 0%, transparent 100%);
  padding-block: 0 88px;
}

/* Photo banner: full-bleed image with dark-to-purple gradient overlay
   and the section header text on top in white. Min-height keeps it
   cinematic on wide screens without crushing the text on phones. */
.voice-hero {
  position: relative;
  width: 100%;
  min-height: clamp(320px, 42vw, 480px);
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-bottom: 56px;
}
.voice-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%; /* keep face/laptop in frame on most crops */
}
.voice-hero-overlay {
  position: absolute; inset: 0;
  /* Heavy on the left (where the text sits) so copy stays legible,
     softer on the right so the photo subject still reads. */
  background:
    linear-gradient(90deg, rgba(11,15,25,0.86) 0%, rgba(11,15,25,0.62) 55%, rgba(11,15,25,0.34) 100%),
    linear-gradient(180deg, rgba(105,89,250,0.18) 0%, rgba(11,15,25,0.10) 100%);
}
.voice-hero-content {
  position: relative;
  z-index: 1;
  padding-block: 56px;
  color: #fff;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
.voice-hero-eyebrow {
  color: #d9d4ff;
  letter-spacing: 0.08em;
}
.voice-hero-h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 10px 0 14px;
  max-width: 620px;
}
.voice-hero-lead {
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  margin: 0;
  max-width: 560px;
}
@media (max-width: 700px) {
  .voice-hero { min-height: 280px; margin-bottom: 36px; }
  .voice-hero-overlay {
    background: linear-gradient(180deg, rgba(11,15,25,0.30) 0%, rgba(11,15,25,0.85) 70%);
  }
  .voice-hero-content { padding-block: 36px; }
}

.voice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 0;
}
.voice-card {
  margin: 0;
  padding: 32px 30px;
  background: #fff;
  border: 1px solid rgba(105,89,250,0.14);
  border-radius: 18px;
  box-shadow: 0 14px 40px -22px rgba(13,18,33,0.22);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.voice-card blockquote {
  margin: 0;
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  font-size: 1.18rem;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: #1a1f2e;
  font-weight: 500;
}
.voice-card blockquote::before {
  content: "\201C";
  display: block;
  font-size: 3rem;
  line-height: 0.6;
  color: #6959fa;
  font-family: Georgia, serif;
  margin-bottom: 8px;
}
.voice-card blockquote em {
  color: #6959fa;
  font-style: italic;
  font-weight: 600;
}
.voice-card figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(13,18,33,0.06);
}
.voice-card figcaption > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.voice-card figcaption strong {
  font-size: 0.98rem;
  font-weight: 700;
  color: #1a1f2e;
}
.voice-card figcaption span:not(.voice-avatar) {
  font-size: 0.85rem;
  color: #5a6478;
}
.voice-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6959fa 0%, #8b7dff 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  box-shadow: 0 4px 12px -4px rgba(105,89,250,0.55);
}
.voice-disclaimer {
  margin: 28px 0 0;
  text-align: center;
  font-size: 0.82rem;
  color: #7b8198;
}
.voice-disclaimer em { font-style: italic; }
body[data-theme="dark"] .voice-card {
  background: #1c2030;
  border-color: rgba(125,113,255,0.22);
}
body[data-theme="dark"] .voice-card blockquote { color: #e8eaf2; }
body[data-theme="dark"] .voice-card figcaption { border-top-color: rgba(255,255,255,0.08); }
body[data-theme="dark"] .voice-card figcaption strong { color: #f1f2f7; }
body[data-theme="dark"] .voice-card figcaption span:not(.voice-avatar) { color: #9aa1b8; }
body[data-theme="dark"] .voice-disclaimer { color: #8a91a8; }
@media (max-width: 860px) {
  .voice-grid { grid-template-columns: 1fr; gap: 18px; }
  .voice-card { padding: 26px 22px; }
  .voice-card blockquote { font-size: 1.06rem; }
}

/* ============================================================================
 * Live deals strip (Fix #4 — investor walkthrough)
 * ========================================================================== */
.dd-live-strip {
  padding-block: 64px;
  background: linear-gradient(180deg, #f7f6ff 0%, transparent 100%);
}
.dd-live-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.dd-live-head .eyebrow {
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6959fa;
}
.dd-live-head h2 {
  margin: 0;
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #1a1f2e;
  line-height: 1.15;
}
.dd-live-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #1a1f2e;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, transform .12s ease;
}
.dd-live-cta:hover { background: #2a3144; transform: translateY(-1px); }
.dd-live-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.dd-live-card {
  background: #fff;
  border: 1px solid rgba(105,89,250,0.14);
  border-radius: 14px;
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.dd-live-card:hover {
  border-color: #6959fa;
  box-shadow: 0 14px 36px -20px rgba(105,89,250,0.4);
  transform: translateY(-2px);
}
.dd-live-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.dd-live-tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 9px;
  border-radius: 999px;
  background: #f4f4f8;
  color: #4a5060;
}
.dd-live-tag--verified {
  background: #def7ea;
  color: #166c3c;
}
.dd-live-payer {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a1f2e;
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.dd-live-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid #ececef;
}
.dd-live-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dd-live-stats span {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7b8198;
}
.dd-live-stats strong {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1a1f2e;
}
.dd-live-foot {
  margin: 22px 0 0;
  text-align: center;
  font-size: 0.82rem;
  color: #7b8198;
}
body[data-theme="dark"] .dd-live-strip {
  background: linear-gradient(180deg, rgba(105,89,250,0.05) 0%, transparent 100%);
}
body[data-theme="dark"] .dd-live-head h2 { color: #f1f2f7; }
body[data-theme="dark"] .dd-live-cta { background: #fff; color: #1a1f2e; }
body[data-theme="dark"] .dd-live-cta:hover { background: #f1f2f7; }
body[data-theme="dark"] .dd-live-card { background: #1c2030; border-color: rgba(125,113,255,0.22); }
body[data-theme="dark"] .dd-live-tag { background: #2a3144; color: #c9cee0; }
body[data-theme="dark"] .dd-live-tag--verified { background: rgba(34,197,94,0.15); color: #5fd998; }
body[data-theme="dark"] .dd-live-payer { color: #f1f2f7; }
body[data-theme="dark"] .dd-live-stats { border-top-color: rgba(255,255,255,0.08); }
body[data-theme="dark"] .dd-live-stats strong { color: #f1f2f7; }
body[data-theme="dark"] .dd-live-stats span { color: #8a91a8; }
body[data-theme="dark"] .dd-live-foot { color: #8a91a8; }
@media (max-width: 860px) {
  .dd-live-grid { grid-template-columns: 1fr; }
  .dd-live-head { flex-direction: column; align-items: flex-start; }
  .dd-live-head h2 { font-size: 1.5rem; }
}