/* =================================================================
   DEMARA — Shared design system
   ================================================================= */

:root {
  /* Surfaces */
  --bg: #FFFFFF;
  --bg-soft: #FAFBFA;
  --bg-tint: #F6FEFA;

  /* Charcoal — for dark sections */
  --charcoal: #1A1F25;
  --charcoal-soft: #232931;
  --charcoal-deep: #12161B;

  /* Ink */
  --ink: #1A1F25;
  --ink-2: #2A2F36;
  --ink-soft: #4F555E;
  --ink-muted: #8B919A;
  --ink-light: #C4C8CD;
  --on-dark: #FFFFFF;

  /* Lines */
  --line: #ECEEF0;
  --line-soft: #F4F5F6;
  --line-strong: #D8DCE0;

  /* Brand green — vibrant, like a logo */
  --green: #00BF62;
  --green-hover: #00A356;
  --green-deep: #14532D;
  --green-soft: #DCFCE7;
  --green-tint: #F0FDF4;

  /* Footer — near-black blue-black, matching the hero video overlay tone.
     The Dubai skyline image breathes through a vignette+gradient overlay for cinematic effect.
     Tweak --footer-bg to try other shades: #1A1F25 (charcoal), #0F2419 (deep green),
     #14532D (matches --green-deep), or #00BF62 (full logo green). */
  --footer-bg: #0A0E13;
  --footer-text: rgba(255, 255, 255, 0.68);
  --footer-text-strong: #FFFFFF;
  --footer-eyebrow: var(--green);
  --footer-line: rgba(255, 255, 255, 0.10);

  /* Type */
  --display: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --pad: clamp(20px, 5vw, 64px);
  --max-w: 1280px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }

html { scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
  font-family: var(--body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  animation: pageIn 0.4s ease-out;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

img { max-width: 100%; display: block; }
button { font-family: inherit; }
a { color: inherit; }

/* ===== EQUAL-MARGIN CONTAINER ===== */
.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
  width: 100%;
}

/* ===== UTILITIES ===== */
.eyebrow {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--green);
}

.accent { color: var(--green); }

/* ===== HEADER ===== */
header.site-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  z-index: 100;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  padding-bottom: 14px;
}

.logo-link { display: block; line-height: 0; text-decoration: none; }
.logo-img {
  height: 56px;
  width: auto;
  display: block;
  margin-left: 4px;
}

nav.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

nav.site-nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  position: relative;
  transition: color 0.25s ease;
}
nav.site-nav a:hover { color: var(--green); }
nav.site-nav a.active { color: var(--green); }
nav.site-nav a.active::after {
  content: '';
  position: absolute;
  bottom: -22px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--green);
}

.nav-cta {
  background: var(--green) !important;
  color: #FFFFFF !important;
  padding: 10px 20px;
  border-radius: 100px;
  font-weight: 600 !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.3s ease, transform 0.2s ease;
  font-size: 12.5px !important;
  letter-spacing: 0.01em !important;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover { background: var(--green-hover) !important; transform: translateY(-1px); color: #FFFFFF !important; }
.nav-cta svg { width: 13px; height: 13px; fill: currentColor; }

/* ===== BUTTONS ===== */
.btn-primary {
  background: var(--green);
  color: #FFFFFF;
  padding: 16px 28px;
  border-radius: 100px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  border: 0;
  cursor: pointer;
  font-family: var(--body);
}
.btn-primary:hover {
  background: var(--green-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(22, 163, 74, 0.22);
}
.btn-primary svg { width: 16px; height: 16px; fill: currentColor; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  padding: 15px 26px;
  border-radius: 100px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid var(--line-strong);
  transition: border-color 0.25s, color 0.25s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-ghost:hover { border-color: var(--green); color: var(--green); }

.btn-text {
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 3px;
  transition: color 0.25s, border-color 0.25s;
  letter-spacing: 0.01em;
}
.btn-text:hover { color: var(--green); border-color: var(--green); }

/* ===== TYPOGRAPHY ===== */
.h-display {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.0;
  color: var(--ink);
}

.section-sub {
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  font-weight: 400;
  color: var(--ink-soft);
  max-width: 56ch;
}

/* ===== PAGE HERO (for non-home pages) ===== */
.page-hero {
  padding-top: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(36px, 4.5vw, 60px);
  border-bottom: 1px solid var(--line);
}

.page-hero .eyebrow {
  margin-bottom: 20px;
}

.page-hero h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-bottom: 16px;
  max-width: 18ch;
}
.page-hero h1 .accent { color: var(--green); }

.page-hero .lead {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ===== FOOTER ===== */
footer.site-footer {
  /* Cinematic backdrop — Dubai Marina skyline.
     The image is a 4:1 wide cinematic strip purpose-built for a footer band.
     'cover' fills the entire footer with no empty space; 'center bottom'
     anchors the buildings to the lower edge so they stay visible.
     Overlay matches the homepage hero video tone — rgba(10, 14, 19) near-black —
     light enough at the top that the skyline reads clearly, deeper at the bottom
     where text columns sit. */
  background:
    linear-gradient(180deg,
      rgba(10, 14, 19, 0.60) 0%,
      rgba(10, 14, 19, 0.72) 40%,
      rgba(10, 14, 19, 0.90) 75%,
      rgba(10, 14, 19, 0.96) 100%
    ),
    var(--footer-bg) url('../images/home/dubai-skyline.png') no-repeat center bottom / cover;
  color: var(--footer-text);
  border-top: 0;
  padding-top: clamp(96px, 11vw, 150px);
  padding-bottom: 32px;
  font-size: 13.5px;
  margin-top: 0;
  position: relative;
  /* Reasonable footer height — image's 4:1 ratio means the skyline shows fully without forcing extra height */
  min-height: clamp(380px, 32vw, 480px);
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 64px);
  margin-bottom: clamp(36px, 5vw, 56px);
  padding-bottom: clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--footer-line);
}

.footer-brand-img {
  height: 26px;
  margin-bottom: 20px;
  display: block;
  margin-left: 4px;
  /* Brighten the green logo slightly so it reads cleanly on the dark background */
  filter: brightness(1.15);
}

.footer-brand-text {
  color: var(--footer-text);
  line-height: 1.65;
  font-size: 13.5px;
  max-width: 320px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.footer-col h4 {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--footer-eyebrow);
  margin-bottom: 18px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.footer-col p, .footer-col a {
  color: var(--footer-text);
  text-decoration: none;
  display: block;
  line-height: 2;
  font-size: 13.5px;
  transition: color 0.2s;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.footer-col a:hover { color: var(--footer-text-strong); }
.footer-col p a { display: inline; }

.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.footer-bottom a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-bottom a:hover {
  color: var(--footer-text-strong);
}

/* ===== RESPONSIVE BASE ===== */
@media (max-width: 960px) {
  nav.site-nav a:not(.nav-cta) { display: none; }
  nav.site-nav { gap: 14px; }
  nav.site-nav .nav-cta { padding: 9px 16px; font-size: 12px !important; }
}

@media (max-width: 720px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}

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


/* =================================================================
   PAGE-SPECIFIC STYLES (scoped via body class)
   ================================================================= */


/* ===== INDEX.HTML (.page-home) ===== */

:root {
  --prism-p: #16A34A;
  --prism-r: #D97706;
  --prism-i: #BE5A5A;
  --prism-s: #2563EB;
  --prism-m: #4338CA;
}
/* ===== HERO (VIDEO) — global, used by any page with class .hero ===== */
.hero {
  position: relative;
  min-height: clamp(560px, 78vh, 720px);
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #0a0e13;
}
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  /* Cinematic monochrome treatment — applies to every video using this class.
     Combined with the dark overlay above, gives a unified moody-doc-film feel. */
  filter: grayscale(1) contrast(1.05) brightness(0.95);
  transition: opacity 2.5s cubic-bezier(0.4, 0, 0.6, 1);
}

/* Profiles hero — shift framing leftward so the figure on the right side
   of the source video is cropped out. Tune the percentage if needed:
   smaller = more left-shift = more right side cropped off. */
/* Profiles hero — gentle scale anchored to the left so only the right-side
   people (man + woman + hands) crop off-screen. The three women on the left,
   including the centre one, remain fully in frame. */
body.page-profiles .hero-video-bg {
  object-position: 0% center;
  transform: scale(1.1);
  transform-origin: left center;
}
.hero-video-2 { opacity: 0; }
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(10, 14, 19, 0.35) 0%, rgba(10, 14, 19, 0.7) 100%),
    linear-gradient(180deg, rgba(10, 14, 19, 0.55) 0%, rgba(10, 14, 19, 0.45) 50%, rgba(10, 14, 19, 0.7) 100%);
  z-index: 1;
}
.hero .hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 24px;
  width: 100%;
}
.hero .hero-eyebrow {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero h1 {
  color: #fff;
  font-size: clamp(36px, 5.5vw, 60px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 24px 0 20px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.hero h1 .accent {
  color: var(--green);
}
.hero .hero-desc {
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(15px, 1.5vw, 17px);
  max-width: 620px;
  margin: 0 auto 32px;
  line-height: 1.6;
}
.hero .hero-buttons {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
}
body.page-home .hero .hero-trust {
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  width: 100%;
  max-width: 820px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.4);
}
body.page-home .hero .hero-trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  text-align: left;
  position: relative;
  min-width: 0;
}
body.page-home .hero .hero-trust-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: rgba(255, 255, 255, 0.14);
}
body.page-home .hero .hero-trust-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(74, 222, 128, 0.14);
  border: 1px solid rgba(74, 222, 128, 0.28);
  flex-shrink: 0;
}
body.page-home .hero .hero-trust-item-icon svg {
  width: 16px;
  height: 16px;
  color: #4ADE80;
  stroke: currentColor;
}
body.page-home .hero .hero-trust-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.35;
}
body.page-home .hero .hero-trust-item-text strong {
  color: #fff;
  font-weight: 600;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: -0.005em;
}
body.page-home .hero .hero-trust-item-text span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}
@media (max-width: 720px) {
  body.page-home .hero {
    min-height: clamp(520px, 80vh, 640px);
  }
  body.page-home .hero .hero-content {
    padding: 40px 20px;
  }
  body.page-home .hero .hero-trust {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 360px;
    margin-top: 36px;
  }
  body.page-home .hero .hero-trust-item {
    padding: 12px 18px;
  }
  body.page-home .hero .hero-trust-item:not(:last-child)::after {
    right: 22%;
    left: 22%;
    top: auto;
    bottom: 0;
    width: auto;
    height: 1px;
  }
}
body.page-home .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 100px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}
body.page-home .btn svg { width: 14px; height: 14px; }
body.page-home .btn-primary {
  background: var(--green);
  color: #FFFFFF;
}
body.page-home .btn-primary:hover {
  background: var(--green-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(22,163,74,0.5);
}
/* ===== SECTION HEAD (global — shared across all pages) ===== */
.section-head {
  text-align: center;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.section-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: var(--bg-tint);
  border: 1px solid var(--green-soft);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 22px;
  font-family: var(--display);
}
.section-title {
  font-family: var(--display);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--ink);
  line-height: 1.05;
  margin-bottom: 12px;
}
.section-title .accent { color: var(--green); }
.section-subtitle {
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 52ch;
  margin: 0 auto;
}
/* ===== STEPS ===== */
body.page-home .steps {
  background: var(--bg-soft);
  padding-top: clamp(64px, 8vw, 96px);
  padding-bottom: clamp(64px, 8vw, 96px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
body.page-home .steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(20px, 2.2vw, 32px);
}
body.page-home .step-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}
body.page-home .step-card:hover {
  border-color: var(--green-soft);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(26, 31, 37, 0.18);
}
body.page-home .step-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-soft);
  position: relative;
}
body.page-home .step-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 35%);
  pointer-events: none;
}
body.page-home .step-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
body.page-home .step-card:nth-child(3) .step-image img {
  object-position: center 25%;
}
body.page-home .step-card:hover .step-image img {
  transform: scale(1.04);
}
body.page-home .step-num {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  width: 38px;
  height: 38px;
  margin-bottom: 0;
  background: var(--green);
  color: #FFFFFF;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 6px 18px -4px rgba(22, 163, 74, 0.55), 0 0 0 1px rgba(255,255,255,0.1) inset;
}
body.page-home .step-eyebrow {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 22px 24px 8px;
  line-height: 1;
}
body.page-home .step-card h3 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 24px 10px;
  line-height: 1.25;
}
body.page-home .step-card p {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 24px 24px;
}
@media (min-width: 768px) {
  body.page-home .step-card:not(:last-child)::after {
    content: '';
    position: absolute;
    right: clamp(-22px, -1.75vw, -14px);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M5 12l4-4-4-4' stroke='%2316A34A' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
    z-index: 3;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08));
  }
}
/* ===== PILLARS ===== */
body.page-home .pillars {
  background: var(--bg);
  padding-top: clamp(64px, 8vw, 96px);
  padding-bottom: clamp(64px, 8vw, 96px);
}
body.page-home .pillars-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
}
body.page-home .pillar-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 18px;
  text-align: center;
  transition: border-color 0.25s ease, transform 0.3s ease;
}
body.page-home .pillar-card:hover {
  border-color: var(--green-soft);
  transform: translateY(-3px);
}
body.page-home .pillar-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: 12px;
  background: var(--bg-tint);
  border: 1px solid var(--green-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-home .pillar-icon svg { width: 22px; height: 22px; color: var(--green); stroke: var(--green); }
body.page-home .pillar-card h3 {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 6px;
  line-height: 1.2;
}
body.page-home .pillar-card p {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.4;
}
/* ===== FOOTER OVERRIDE ===== */
/* ===== FOCUS ===== */
body.page-home .focus {
  background: var(--bg-soft);
  padding: clamp(72px, 9vw, 110px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
body.page-home .focus::before {
  content: '';
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 240px;
  background: radial-gradient(ellipse at center, rgba(22, 163, 74, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
body.page-home .focus-block {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
body.page-home .focus-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 22px;
  font-family: var(--display);
}
body.page-home .focus-title {
  font-family: var(--display);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 18px;
  line-height: 1.12;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}
body.page-home .focus-title .accent { color: var(--green); }
body.page-home .focus-body {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 auto 56px;
}
body.page-home .focus-stages {
  display: grid;
  grid-template-columns: 1fr 60px 1fr 60px 1fr;
  align-items: flex-start;
  gap: 0;
  margin: 0 auto 48px;
  max-width: 760px;
}
body.page-home .focus-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 8px;
}
body.page-home .focus-stage-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--green-soft);
  box-shadow: 0 1px 2px rgba(26, 31, 37, 0.04), 0 12px 28px -10px rgba(22, 163, 74, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  position: relative;
}
body.page-home .focus-stage-icon::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px dashed rgba(22, 163, 74, 0.2);
  pointer-events: none;
}
body.page-home .focus-stage-icon svg {
  width: 26px;
  height: 26px;
  color: var(--green);
  stroke: currentColor;
}
body.page-home .focus-stage-label {
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
body.page-home .focus-stage-desc {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.45;
  max-width: 18ch;
}
body.page-home .focus-stage-line {
  height: 1px;
  align-self: center;
  margin-top: 32px;
  position: relative;
  background-image: linear-gradient(90deg, var(--green-soft) 50%, transparent 50%);
  background-size: 6px 1px;
  background-repeat: repeat-x;
}
body.page-home .focus-stage-line::after {
  content: '';
  position: absolute;
  right: -3px;
  top: -2.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}
body.page-home .focus-exclusion {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 auto;
}
body.page-home .focus-exclusion svg {
  width: 14px;
  height: 14px;
  color: var(--ink-muted);
  stroke: currentColor;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  body.page-home .focus-stages {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 280px;
  }
  body.page-home .focus-stage-line { display: none; }
  body.page-home .focus-exclusion {
    font-size: 12.5px;
    padding: 10px 16px;
    text-align: left;
  }
}
/* ===== CTA (tinted) ===== */
body.page-home .cta-band {
  background: var(--bg-tint);
  border-top: 1px solid var(--green-soft);
  border-bottom: 1px solid var(--green-soft);
  padding-top: clamp(64px, 8vw, 96px);
  padding-bottom: clamp(64px, 8vw, 96px);
  text-align: center;
}
body.page-home .cta-band h2 {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-bottom: 14px;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.05;
}
body.page-home .cta-band h2 .accent { color: var(--green); }
body.page-home .cta-band p {
  color: var(--ink-soft);
  font-size: 15px;
  margin-bottom: 32px;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}
body.page-home /* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
  body.page-home .steps-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  body.page-home .steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .pillars-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 540px) {
  body.page-home .steps-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}
@media (max-width: 720px) {
  body.page-home .pillars-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  body.page-home .hero-trust { flex-direction: column; gap: 14px; }
  body.page-home .hero-buttons .btn { flex: 1; justify-content: center; }
}
@media (max-width: 460px) {
  body.page-home .pillars-grid { grid-template-columns: 1fr; }
}


/* ===== ABOUT.HTML (.page-about) ===== */

:root { --about-card-shadow: 0 1px 3px rgba(26,31,37,0.04), 0 18px 40px -22px rgba(26,31,37,0.14); }
body.page-about .about-section { padding: clamp(64px, 8vw, 110px) 0; }
body.page-about .about-section.alt { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body.page-about .about-section-head { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); max-width: 760px; margin-left: auto; margin-right: auto; }
body.page-about .about-section-eyebrow { display: inline-block; padding: 6px 14px; background: var(--bg-tint); border: 1px solid var(--green-soft); border-radius: 100px; font-size: 11px; font-weight: 700; color: var(--green); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 22px; font-family: var(--display); }
body.page-about .about-section-title { font-family: var(--display); font-size: clamp(28px, 3.6vw, 44px); font-weight: 600; letter-spacing: -0.025em; color: var(--ink); line-height: 1.1; margin-bottom: 14px; }
body.page-about .about-section-title .accent { color: var(--green); }
body.page-about .about-section-subtitle { font-size: 16px; color: var(--ink-soft); line-height: 1.6; max-width: 60ch; margin: 0 auto; }
body.page-about .about-hero { padding: clamp(36px, 4.5vw, 64px) 0 clamp(56px, 7vw, 90px); background: var(--bg); text-align: center; position: relative; overflow: hidden; }
body.page-about .about-hero::before { content: ''; position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 720px; height: 240px; background: radial-gradient(ellipse at center, rgba(22,163,74,0.06) 0%, transparent 70%); pointer-events: none; }
body.page-about .about-hero-eyebrow { display: inline-block; padding: 6px 14px; background: var(--bg-tint); border: 1px solid var(--green-soft); border-radius: 100px; font-size: 11px; font-weight: 700; color: var(--green); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 22px; font-family: var(--display); position: relative; z-index: 1; }
body.page-about .about-hero h1 { font-family: var(--display); font-weight: 600; font-size: clamp(36px, 5.5vw, 60px); letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); margin-bottom: 24px; max-width: 16ch; margin-left: auto; margin-right: auto; position: relative; z-index: 1; }
body.page-about .about-hero h1 .accent { color: var(--green); }
body.page-about .about-hero-lead { font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-soft); line-height: 1.55; max-width: 58ch; margin: 0 auto; position: relative; z-index: 1; }
body.page-about .about-story-grid { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.5vw, 28px); max-width: 760px; margin: 0 auto; }
body.page-about .about-story-card { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: clamp(28px, 3.5vw, 40px); display: grid; grid-template-columns: 56px 1fr; gap: 22px; align-items: flex-start; transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; }
body.page-about .about-story-card:hover { border-color: var(--green-soft); transform: translateY(-2px); box-shadow: var(--about-card-shadow); }
body.page-about .about-story-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--bg-tint); border: 1px solid var(--green-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
body.page-about .about-story-icon svg { width: 24px; height: 24px; color: var(--green); stroke: currentColor; }
body.page-about .about-story-card h3 { font-family: var(--display); font-size: clamp(18px, 2vw, 22px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 8px; line-height: 1.25; }
body.page-about .about-story-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; }
body.page-about .team-ceo { display: flex; justify-content: center; margin-bottom: 36px; }
body.page-about .team-card { background: var(--bg); border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px 22px; display: flex; flex-direction: column; align-items: center; text-align: center; transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; position: relative; }
body.page-about .team-card:hover { border-color: var(--green-soft); transform: translateY(-4px); box-shadow: var(--about-card-shadow); }
body.page-about .team-card.is-ceo { background: var(--bg); border: 2px solid var(--green-soft); box-shadow: 0 1px 3px rgba(22,163,74,0.06), 0 18px 40px -18px rgba(22,163,74,0.18); min-width: 240px; }
body.page-about .team-avatar { width: 96px; height: 96px; border-radius: 50%; margin-bottom: 14px; background: var(--bg-tint); position: relative; overflow: hidden; }
body.page-about .team-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.page-about .team-card.is-ceo .team-avatar { width: 112px; height: 112px; }
body.page-about .team-name { font-family: var(--display); font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.015em; margin-bottom: 4px; line-height: 1.2; }
body.page-about .team-card.is-ceo .team-name { font-size: 18px; }
body.page-about .team-role { font-size: 12.5px; color: var(--green); font-weight: 600; margin-bottom: 6px; letter-spacing: 0.02em; }
body.page-about .team-location { font-size: 11.5px; color: var(--ink-muted); display: inline-flex; align-items: center; gap: 6px; }
body.page-about .team-location .flag-icon {
  width: 14px;
  height: auto;
  flex-shrink: 0;
  border-radius: 1.5px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.04);
  display: inline-block;
  vertical-align: middle;
}
body.page-about .team-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 600px; margin: 0 auto 36px; position: relative; }
body.page-about .team-row.heads { grid-template-columns: repeat(3, 1fr); max-width: 920px; }
body.page-about .team-tree { position: relative; max-width: 1200px; margin: 0 auto; padding-top: 0; }
body.page-about .team-tree::before { content: ''; position: absolute; top: 200px; left: 50%; width: 1px; height: 36px; background: var(--green-soft); z-index: 0; }
body.page-about .team-departments { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1200px; margin: 32px auto 0; }
/* Peripheral nodes: agents + EU rep, body.page-about dotted-line connection to CEO */
body.page-about .team-peripherals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 720px;
  margin: 36px auto 0;
}
body.page-about .peripheral-node {
  background: var(--bg);
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: center;
  text-align: left;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}
body.page-about .peripheral-node:hover {
  border-color: var(--green-soft);
  border-style: dashed;
  transform: translateY(-2px);
  box-shadow: var(--about-card-shadow);
}
body.page-about .peripheral-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-tint);
  border: 1px dashed var(--green-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
body.page-about .peripheral-icon svg { width: 22px; height: 22px; color: var(--green); stroke: currentColor; }
body.page-about .peripheral-tag {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
body.page-about .peripheral-name {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 2px;
  line-height: 1.25;
}
body.page-about .peripheral-note {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.45;
}
body.page-about .dept-block { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 0; overflow: hidden; transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; }
body.page-about .dept-block:hover { border-color: var(--green-soft); transform: translateY(-3px); box-shadow: var(--about-card-shadow); }
body.page-about .dept-head { padding: 24px 22px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--bg-tint); border-bottom: 1px solid var(--green-soft); }
body.page-about .dept-head .team-avatar { width: 72px; height: 72px; margin-bottom: 10px; }
body.page-about .dept-head .team-name { font-size: 14.5px; }
body.page-about .dept-head .team-role { font-size: 11.5px; }
body.page-about .dept-head .team-location { font-size: 11px; margin-top: 4px; }
body.page-about .dept-areas { list-style: none; margin: 0; padding: 18px 22px 22px; }
body.page-about .dept-areas li { padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 13px; color: var(--ink); display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }
body.page-about .dept-areas li:last-child { border-bottom: 0; }
body.page-about .dept-areas li svg { width: 14px; height: 14px; color: var(--green); stroke: currentColor; flex-shrink: 0; margin-top: 2px; }
body.page-about .dept-areas li strong { font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--ink); }
body.page-about .dept-areas li span { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 1px; }
body.page-about .team-legal { margin-top: 32px; display: flex; justify-content: center; }
body.page-about .team-legal .team-card { flex-direction: row; align-items: center; text-align: left; gap: 18px; padding: 18px 24px; max-width: 460px; }
body.page-about .team-legal .team-avatar { width: 56px; height: 56px; margin-bottom: 0; }
body.page-about .team-legal .team-card-text { display: flex; flex-direction: column; }
body.page-about .team-legal .team-name { margin-bottom: 2px; }
body.page-about .team-legal .team-role { margin-bottom: 4px; }
body.page-about .presence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1080px; margin: 0 auto; }
body.page-about .presence-card { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px; transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; position: relative; }
body.page-about .presence-card:hover { border-color: var(--green-soft); transform: translateY(-3px); box-shadow: var(--about-card-shadow); }
body.page-about .presence-card.primary { border: 2px solid var(--green-soft); background: var(--bg); }
body.page-about .presence-tag { display: inline-block; font-family: var(--display); font-size: 10px; font-weight: 700; color: var(--green); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 14px; }
body.page-about .presence-card h3 { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 4px; line-height: 1.2; }
body.page-about .presence-card .country { font-size: 12.5px; color: var(--ink-muted); margin-bottom: 14px; }
body.page-about .presence-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }
body.page-about .agents-block { max-width: 720px; margin: 0 auto; background: var(--bg); border: 1px solid var(--line); border-radius: 18px; padding: 32px 28px; text-align: center; transition: border-color 0.25s ease, box-shadow 0.25s ease; }
body.page-about .agents-block:hover { border-color: var(--green-soft); box-shadow: var(--about-card-shadow); }
body.page-about .agents-flags { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin: 18px 0 6px; }
body.page-about .agent-flag { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 7px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 100px; font-size: 13px; font-weight: 600; color: var(--ink); transition: border-color 0.2s ease, background 0.2s ease; }
body.page-about .agent-flag:hover { border-color: var(--green-soft); background: var(--bg); }
body.page-about .agent-flag .flag-svg { width: 22px; height: 16px; border-radius: 3px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(26,31,37,0.08); display: block; overflow: hidden; }
body.page-about .agents-note { font-size: 13px; color: var(--ink-soft); line-height: 1.55; max-width: 52ch; margin: 16px auto 0; }
/* ===== DEVELOPER WALL (DRAFT — REMOVE BEFORE PRODUCTION) ===== */
body.page-about .dev-wall {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  max-width: 1080px;
  margin: 0 auto;
}
body.page-about .dev-tile {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 88px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
body.page-about .dev-tile:hover {
  border-color: var(--green-soft);
  transform: translateY(-2px);
  box-shadow: var(--about-card-shadow);
}
body.page-about .dev-tile span {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
body.page-about .dev-disclaimer {
  margin: 28px auto 0;
  max-width: 640px;
  padding: 12px 18px;
  background: var(--bg-soft);
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.55;
  text-align: center;
}
@media (max-width: 960px) {
  body.page-about .dev-wall { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px) {
  body.page-about .dev-wall { grid-template-columns: repeat(2, 1fr); }
  body.page-about .dev-tile { padding: 22px 14px; min-height: 72px; }
  body.page-about .dev-tile span { font-size: 13.5px; }
}
/* ===== VISION & MISSION ===== */
body.page-about .vm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 880px;
  margin: 0 auto;
}
body.page-about .vm-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px 30px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}
body.page-about .vm-card:hover {
  border-color: var(--green-soft);
  transform: translateY(-3px);
  box-shadow: var(--about-card-shadow);
}
body.page-about .vm-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--bg-tint);
  border: 1px solid var(--green-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
body.page-about .vm-icon svg { width: 22px; height: 22px; color: var(--green); stroke: currentColor; }
body.page-about .vm-tag {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
body.page-about .vm-card h3 {
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  line-height: 1.2;
}
body.page-about .vm-card p {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.65;
}
@media (max-width: 720px) {
  body.page-about .vm-grid { grid-template-columns: 1fr; max-width: 460px; }
}
body.page-about .principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1080px; margin: 0 auto; }
body.page-about .principle-card { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 28px 24px; text-align: center; transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; }
body.page-about .principle-card:hover { border-color: var(--green-soft); transform: translateY(-3px); box-shadow: var(--about-card-shadow); }
body.page-about .principle-icon { width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 14px; background: var(--bg-tint); border: 1px solid var(--green-soft); display: flex; align-items: center; justify-content: center; }
body.page-about .principle-icon svg { width: 22px; height: 22px; color: var(--green); stroke: currentColor; }
body.page-about .principle-card h3 { font-family: var(--display); font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.015em; margin-bottom: 8px; line-height: 1.25; }
body.page-about .principle-card p { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
body.page-about .cta-band { background: var(--bg-tint); border-top: 1px solid var(--green-soft); border-bottom: 1px solid var(--green-soft); padding-top: clamp(64px, 8vw, 96px); padding-bottom: clamp(64px, 8vw, 96px); text-align: center; }
body.page-about .cta-band h2 { font-family: var(--display); font-size: clamp(28px, 4vw, 44px); font-weight: 600; letter-spacing: -0.025em; color: var(--ink); margin-bottom: 18px; line-height: 1.1; }
body.page-about .cta-band h2 .accent { color: var(--green); font-weight: 600; }
body.page-about .cta-band p { font-size: 16px; color: var(--ink-soft); line-height: 1.55; max-width: 56ch; margin: 0 auto 32px; }
body.page-about .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 100px; font-family: var(--body); font-size: 14px; font-weight: 600; text-decoration: none; border: 0; cursor: pointer; transition: all 0.2s ease; }
body.page-about .btn svg { width: 14px; height: 14px; }
body.page-about .btn-primary { background: var(--green); color: #FFFFFF; }
body.page-about .btn-primary:hover { background: var(--green-hover); transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(22,163,74,0.5); }
body.page-about .fade-in { opacity: 0; transform: translateY(16px); transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1); }
body.page-about .fade-in.is-visible { opacity: 1; transform: translateY(0); }
body.page-about .read-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--green); z-index: 100; transition: width 0.1s ease-out; pointer-events: none; }
@media (max-width: 1080px) {
  body.page-about .team-departments { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
  body.page-about .team-tree::before { display: none; }
}
@media (max-width: 960px) {
  body.page-about .presence-grid { grid-template-columns: 1fr; max-width: 460px; }
  body.page-about .principles-grid { grid-template-columns: 1fr; max-width: 420px; }
}
@media (max-width: 720px) {
  body.page-about .team-departments { grid-template-columns: 1fr; max-width: 460px; }
  body.page-about .about-story-card { grid-template-columns: 1fr; gap: 16px; }
  body.page-about .agents-flags { gap: 10px; }
  body.page-about .team-legal .team-card { flex-direction: column; text-align: center; }
}


/* ===== STAGES.HTML (.page-stages) ===== */

/* ===== STAGES PAGE ===== */
body.page-stages .stages-hero {
  padding: clamp(36px, 4.5vw, 64px) 0 clamp(48px, 6vw, 80px);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
body.page-stages .stages-hero-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: var(--bg-tint);
  border: 1px solid var(--green-soft);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 22px;
  font-family: var(--display);
}
body.page-stages .stages-hero h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 56px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--ink);
  margin-bottom: 22px;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
body.page-stages .stages-hero h1 .accent { color: var(--green); }
body.page-stages .stages-hero-lead {
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 60ch;
  margin: 0 auto;
}
/* ===== Section blocks shared ===== */
body.page-stages .stage-section {
  padding: clamp(56px, 8vw, 100px) 0;
}
body.page-stages .stage-section.alt {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stage-section-head {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 60px);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.stage-section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--green);
  color: #fff;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 18px;
  box-shadow: 0 6px 18px -4px rgba(22, 163, 74, 0.45);
}
.stage-section-head h2 {
  font-family: var(--display);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 14px;
}
.stage-section-head h2 .accent { color: var(--green); }
.stage-section-subtitle {
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 auto;
}
/* Body-class-scoped duplicates kept for backwards compat with guide page */
body.page-stages .stage-section-head {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 60px);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
body.page-stages .stage-section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--green);
  color: #fff;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 18px;
  box-shadow: 0 6px 18px -4px rgba(22, 163, 74, 0.45);
}
body.page-stages .stage-section h2 {
  font-family: var(--display);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 14px;
}
body.page-stages .stage-section h2 .accent { color: var(--green); }
body.page-stages .stage-section-subtitle {
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 auto;
}
/* ===== Section 1: What it means ===== */
body.page-stages .what-it-means-body {
  max-width: 720px;
  margin: 0 auto;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.75;
  text-align: center;
}
body.page-stages .what-it-means-body p { margin-bottom: 16px; }
body.page-stages .what-it-means-body p:last-child { margin-bottom: 0; }
body.page-stages .what-it-means-body strong { color: var(--ink); font-weight: 600; }
/* ===== Section 2: Three stages ===== */
body.page-stages .three-stages {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
}
body.page-stages .three-stage-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
body.page-stages .three-stage-card:hover {
  border-color: var(--green-soft);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(26, 31, 37, 0.18);
}
body.page-stages .three-stage-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-soft);
}
body.page-stages .three-stage-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
body.page-stages .three-stage-card:hover .three-stage-banner img {
  transform: scale(1.04);
}
body.page-stages .three-stage-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
body.page-stages .three-stage-num {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 6px 18px -4px rgba(22, 163, 74, 0.55), 0 0 0 1px rgba(255,255,255,0.1) inset;
}
body.page-stages .three-stage-tag {
  position: absolute;
  bottom: 14px;
  left: 16px;
  z-index: 2;
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
body.page-stages .three-stage-body {
  padding: 22px 24px 26px;
}
body.page-stages .three-stage-card h3 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  line-height: 1.25;
}
body.page-stages .three-stage-card p {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}
/* ===== Section 3: How booking works ===== */
body.page-stages .booking-flow {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}
body.page-stages .booking-step {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 20px;
  align-items: flex-start;
  transition: border-color 0.25s ease;
}
body.page-stages .booking-step:hover { border-color: var(--green-soft); }
body.page-stages .booking-step-num {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-tint);
  border: 1px solid var(--green-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
}
body.page-stages .booking-step h4 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 6px;
  line-height: 1.3;
}
body.page-stages .booking-step p {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}
body.page-stages .booking-disclaimer {
  margin: 32px auto 0;
  max-width: 760px;
  padding: 16px 22px;
  background: var(--bg-soft);
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
  text-align: center;
}
/* ===== Section 4: Why people consider it ===== */
body.page-stages .consider-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
}
body.page-stages .consider-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: left;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
body.page-stages .consider-card:hover {
  border-color: var(--green-soft);
  transform: translateY(-3px);
}
body.page-stages .consider-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--bg-tint);
  border: 1px solid var(--green-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-stages .consider-icon svg {
  width: 20px;
  height: 20px;
  color: var(--green);
  stroke: currentColor;
}
body.page-stages .consider-card h3 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 8px;
  line-height: 1.25;
}
body.page-stages .consider-card p {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}
/* ===== Section 5: Calculator ===== */
body.page-stages .calc-wrap {
  max-width: 720px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 1px 3px rgba(26,31,37,0.06), 0 24px 48px -24px rgba(26,31,37,0.12);
}
body.page-stages .calc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
body.page-stages .calc-field { display: flex; flex-direction: column; gap: 8px; }
body.page-stages .calc-field label {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
body.page-stages .calc-field input, body.page-stages .calc-field select {
  font-family: var(--body);
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}
body.page-stages .calc-field input:focus, body.page-stages .calc-field select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}
body.page-stages .calc-field-note {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 2px;
}
body.page-stages .calc-result {
  margin-top: 28px;
  padding: 24px;
  background: var(--bg-tint);
  border: 1px solid var(--green-soft);
  border-radius: 14px;
}
body.page-stages .calc-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
body.page-stages .calc-result-item {
  text-align: center;
  padding: 12px 8px;
}
body.page-stages .calc-result-label {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
body.page-stages .calc-result-value {
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
}
body.page-stages .calc-disclaimer {
  margin-top: 18px;
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.55;
  text-align: center;
}
/* ===== CTA (tinted) ===== */
body.page-stages .cta-band {
  background: var(--bg-tint);
  border-top: 1px solid var(--green-soft);
  border-bottom: 1px solid var(--green-soft);
  padding-top: clamp(64px, 8vw, 96px);
  padding-bottom: clamp(64px, 8vw, 96px);
  text-align: center;
}
body.page-stages .cta-band h2 {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 18px;
  line-height: 1.1;
}
body.page-stages .cta-band h2 .accent { color: var(--green); font-weight: 600; }
body.page-stages .cta-band p {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 auto 32px;
}
body.page-stages .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 100px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}
body.page-stages .btn svg { width: 14px; height: 14px; }
body.page-stages .btn-primary {
  background: var(--green);
  color: #FFFFFF;
}
body.page-stages .btn-primary:hover {
  background: var(--green-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(22,163,74,0.5);
}
@media (max-width: 720px) {
  body.page-stages .three-stages { grid-template-columns: 1fr; max-width: 420px; }
  body.page-stages .consider-grid { grid-template-columns: 1fr; max-width: 420px; }
  body.page-stages .calc-row { grid-template-columns: 1fr; }
  body.page-stages .calc-result-grid { grid-template-columns: 1fr; }
  body.page-stages .booking-step { grid-template-columns: 36px 1fr; gap: 14px; padding: 18px 20px; }
}
/* ===== Premium UX: scroll-progress + fade-in ===== */
body.page-stages .fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
body.page-stages .fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}
body.page-stages .read-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--green);
  z-index: 100;
  transition: width 0.1s ease-out;
  pointer-events: none;
}

/* ===== PROFILES.HTML (.page-profiles) ===== */

/* Hero */
body.page-profiles .profiles-hero {
  padding: clamp(36px, 4.5vw, 64px) 0 clamp(40px, 5vw, 70px);
  background: var(--bg);
  text-align: center;
  position: relative;
  overflow: hidden;
}
body.page-profiles .profiles-hero::before {
  content: '';
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 240px;
  background: radial-gradient(ellipse at center, rgba(22,163,74,0.06) 0%, transparent 70%);
  pointer-events: none;
}
body.page-profiles .profiles-hero-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: var(--bg-tint);
  border: 1px solid var(--green-soft);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 22px;
  font-family: var(--display);
  position: relative;
  z-index: 1;
}
body.page-profiles .profiles-hero h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 54px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--ink);
  margin-bottom: 20px;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}
body.page-profiles .profiles-hero h1 .accent { color: var(--green); }
body.page-profiles .profiles-hero-lead {
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 60ch;
  margin: 0 auto 14px;
  position: relative;
  z-index: 1;
}
body.page-profiles .profiles-hero-hint {
  font-size: 12.5px;
  color: var(--ink-muted);
  font-style: italic;
  position: relative;
  z-index: 1;
}

/* Profiles grid section */
body.page-profiles .profiles-section {
  padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 8vw, 100px);
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
body.page-profiles .profiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
  perspective: 1400px;
}

/* Flip card mechanics — matches PRISM exactly */
body.page-profiles .flip-card {
  background: transparent;
  width: 100%;
  height: 520px;
  cursor: pointer;
  outline: none;
  perspective: 1400px;
  border-radius: 18px;
}
body.page-profiles .flip-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(22,163,74,0.35);
  border-radius: 18px;
}
body.page-profiles .flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
  border-radius: 18px;
  transform: translateZ(0);
  /* Safety net: if the back face hasn't painted yet on first flip, 
     the eye sees green instead of white through the rotation */
  background: #D1F5DD;
}
/* Hover: gentle lift — composes with rotateY when flipped */
body.page-profiles .flip-card:hover .flip-card-inner {
  transform: translate3d(0, -4px, 0);
}
body.page-profiles .flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}
body.page-profiles .flip-card.is-flipped:hover .flip-card-inner {
  transform: rotateY(180deg) translate3d(0, -4px, 0);
}
body.page-profiles .flip-card-front,
body.page-profiles .flip-card-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 22px 22px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  /* Force GPU compositing on first paint so the back face is rasterized
     before the first flip happens — eliminates white flash on initial click */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}
body.page-profiles .flip-card-back {
  padding: 28px 24px 24px;
}
body.page-profiles .flip-card:hover .flip-card-front,
body.page-profiles .flip-card:hover .flip-card-back {
  border-color: var(--green-soft);
  box-shadow: 0 8px 32px rgba(22,163,74,0.12);
}
body.page-profiles .flip-card-back {
  transform: rotateY(180deg) translateZ(0);
  background: #D1F5DD;
  border-color: var(--green-soft);
}

/* Front-of-card content */
/* Top-right circular arrow indicator — signals card is flippable */
body.page-profiles .flip-card-flip-pill {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-block;
  padding: 8px 16px;
  background: var(--green);
  color: #fff;
  border-radius: 100px;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  box-shadow:
    0 2px 6px rgba(0, 191, 98, 0.20),
    0 6px 18px -4px rgba(0, 191, 98, 0.30);
  pointer-events: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  z-index: 2;
}
body.page-profiles .flip-card:hover .flip-card-flip-pill {
  background: var(--green-hover);
  transform: translateY(-1px) scale(1.04);
  box-shadow:
    0 3px 8px rgba(0, 191, 98, 0.28),
    0 12px 24px -4px rgba(0, 191, 98, 0.38);
}

body.page-profiles .flip-card-avatar {
  width: 260px;
  height: 260px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-profiles .flip-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
body.page-profiles .flip-card-name {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-bottom: 6px;
  text-align: center;
}
body.page-profiles .flip-card-tag {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 16px;
  text-align: center;
}
/* Pills — stacked vertically, equal width, light green background matching the avatar circle */
body.page-profiles .flip-card-pills {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  align-items: stretch;
}
body.page-profiles .pill {
  display: block;
  width: 100%;
  text-align: center;
  padding: 8px 14px;
  background: rgba(22, 163, 74, 0.15);
  border: 0;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: var(--green-hover, #15803D);
  font-family: var(--body);
  line-height: 1.3;
  letter-spacing: 0.005em;
}

/* Back-of-card content */
body.page-profiles .flip-card-back .flip-card-name {
  margin-bottom: 12px;
  text-align: left;
}
body.page-profiles .flip-card-desc {
  font-size: 13.5px;
  color: rgba(15, 23, 42, 0.78);
  line-height: 1.55;
  margin-bottom: 14px;
  min-height: calc(13.5px * 1.55 * 3);
}
body.page-profiles .back-focus-list {
  display: grid;
  gap: 10px;
  margin-top: auto;
}
body.page-profiles .focus-item {
  padding: 9px 12px;
  background: var(--bg);
  border: 1px solid var(--green-soft);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
body.page-profiles .focus-item strong {
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
body.page-profiles .focus-item span {
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* Footnote under grid */
body.page-profiles .profiles-footnote {
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 56ch;
  margin: 32px auto 0;
  font-style: italic;
}

/* ===== PILLARS — premium styling (profile-page only) ===== */
body.page-profiles .profiles-pillars {
  background: var(--bg);
  padding-top: clamp(64px, 8vw, 96px);
  padding-bottom: clamp(64px, 8vw, 96px);
}

/* Pillars grid — photo cards (mirrors homepage step-card pattern) */
body.page-profiles .pillars-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  max-width: 1180px;
  margin: 0 auto;
}

/* Pillar card — image-on-top layout */
body.page-profiles .pillar-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
}
body.page-profiles .pillar-card:hover {
  border-color: var(--green-soft);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(26, 31, 37, 0.18);
}

/* Image banner */
body.page-profiles .pillar-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-soft);
  position: relative;
}
body.page-profiles .pillar-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 35%);
  pointer-events: none;
}
body.page-profiles .pillar-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
body.page-profiles .pillar-card:hover .pillar-image img {
  transform: scale(1.04);
}

/* Number badge — green pill, top-left over image */
body.page-profiles .pillar-num {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  background: var(--green);
  color: #FFFFFF;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 18px -4px rgba(22, 163, 74, 0.55), 0 0 0 1px rgba(255,255,255,0.1) inset;
}

/* Body text below image */
body.page-profiles .pillar-body {
  padding: 18px 18px 22px;
}
body.page-profiles .pillar-card h3 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.25;
}
body.page-profiles .pillar-card p {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}

/* CTA band (mirror of about page) */
body.page-profiles .cta-band {
  background: var(--bg-tint);
  border-top: 1px solid var(--green-soft);
  border-bottom: 1px solid var(--green-soft);
  padding-top: clamp(64px, 8vw, 96px);
  padding-bottom: clamp(64px, 8vw, 96px);
  text-align: center;
}
body.page-profiles .cta-band h2 {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 18px;
  line-height: 1.1;
}
body.page-profiles .cta-band h2 .accent { color: var(--green); font-weight: 600; }
body.page-profiles .cta-band p {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 auto 32px;
}
body.page-profiles .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 100px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}
body.page-profiles .btn svg { width: 14px; height: 14px; }
body.page-profiles .btn-primary { background: var(--green); color: #FFFFFF; }
body.page-profiles .btn-primary:hover {
  background: var(--green-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(22,163,74,0.5);
}

/* Footer override */

/* Shared utilities */
body.page-profiles .fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
body.page-profiles .fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}
body.page-profiles .read-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--green);
  z-index: 100;
  transition: width 0.1s ease-out;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 1080px) {
  body.page-profiles .profiles-grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
  body.page-profiles .pillars-grid { grid-template-columns: repeat(3, 1fr); max-width: 760px; }
}
@media (max-width: 720px) {
  body.page-profiles .profiles-grid { grid-template-columns: 1fr; max-width: 420px; gap: 18px; }
  body.page-profiles .flip-card { height: 500px; }
  body.page-profiles .pillars-grid { grid-template-columns: repeat(2, 1fr); max-width: 480px; gap: 14px; }
}
@media (max-width: 480px) {
  body.page-profiles .pillars-grid { grid-template-columns: 1fr; max-width: 360px; }
}


/* ===== BUYER-MATCH.HTML (.page-match) — PREMIUM ===== */

/* Sticky progress at top */
body.page-match .match-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--line);
  z-index: 200;
}
body.page-match .match-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green) 0%, #34D058 100%);
  width: 0%;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

body.page-match .match-main {
  padding-top: 0;
  padding-bottom: clamp(56px, 8vw, 96px);
  background: var(--bg);
  min-height: 70vh;
  position: relative;
}
body.page-match .match-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 760px;
  height: 280px;
  background: radial-gradient(ellipse at center, rgba(22,163,74,0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
body.page-match .match-main > .wrap { position: relative; z-index: 1; }

/* Intro screen */
body.page-match .match-intro {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(36px, 4.5vw, 64px) 0 clamp(40px, 6vw, 80px);
}
body.page-match .match-intro-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: var(--bg-tint);
  border: 1px solid var(--green-soft);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 26px;
  font-family: var(--display);
}
body.page-match .match-intro h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--ink);
  margin-bottom: 18px;
  max-width: 16ch;
  margin-left: auto;
  margin-right: auto;
}
body.page-match .match-intro h1 .accent { color: var(--green); }
body.page-match .match-intro-lead {
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 52ch;
  margin: 0 auto 32px;
}
body.page-match .btn-large {
  padding: 16px 32px;
  font-size: 15px;
  box-shadow: 0 6px 18px -4px rgba(22,163,74,0.4);
}
body.page-match .match-intro-trust {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}
body.page-match .match-intro-trust span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
body.page-match .match-intro-trust svg {
  width: 13px;
  height: 13px;
  color: var(--green);
  stroke: currentColor;
  opacity: 0.8;
}
body.page-match .match-intro-trust .dot {
  color: var(--ink-muted);
  opacity: 0.4;
}

/* Question screen — premium card container */
body.page-match .match-question-screen,
body.page-match .match-contact-screen {
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(36px, 4.5vw, 64px) 0 clamp(40px, 6vw, 80px);
}
body.page-match .match-question-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(28px, 4vw, 44px);
  box-shadow:
    0 1px 3px rgba(26,31,37,0.04),
    0 24px 48px -24px rgba(26,31,37,0.14);
  transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  transform: translateY(0);
}
body.page-match .match-question-card.is-fading {
  opacity: 0;
  transform: translateY(8px);
}

body.page-match .match-question-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
body.page-match .match-question-count {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
body.page-match .match-pillar-tag {
  display: inline-block;
  padding: 5px 12px;
  background: var(--bg-tint);
  border: 1px solid var(--green-soft);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--display);
}
body.page-match .match-question-text {
  font-family: var(--display);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 26px;
}
body.page-match .match-options {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}
body.page-match .match-option {
  width: 100%;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
  font-family: var(--body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.4;
  transition: all 0.18s ease;
}
body.page-match .match-option:hover {
  border-color: var(--green-soft);
  background: var(--bg-tint);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(22,163,74,0.18);
}
body.page-match .match-option.is-selected {
  border-color: var(--green);
  background: var(--bg-tint);
  box-shadow: 0 0 0 1px var(--green);
}
body.page-match .match-question-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px dashed var(--line);
  padding-top: 16px;
}
body.page-match .btn-text-nav {
  background: transparent;
  border: 0;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  transition: color 0.2s;
}
body.page-match .btn-text-nav svg { width: 14px; height: 14px; }
body.page-match .btn-text-nav:hover:not(:disabled) { color: var(--green); }
body.page-match .btn-text-nav:disabled { opacity: 0.35; cursor: not-allowed; }
body.page-match .match-help {
  font-size: 12px;
  color: var(--ink-muted);
  font-style: italic;
}

/* Contact form screen */
body.page-match .match-contact-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: var(--bg-tint);
  border: 1px solid var(--green-soft);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-family: var(--display);
}
body.page-match .match-contact-title {
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 12px;
}
body.page-match .match-contact-title .accent { color: var(--green); }
body.page-match .match-contact-lead {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 24px;
}
body.page-match .match-form { display: grid; gap: 16px; }
body.page-match .match-field { display: flex; flex-direction: column; gap: 7px; }
body.page-match .match-field label {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
body.page-match .match-field label .optional {
  color: var(--ink-muted);
  font-weight: 500;
  letter-spacing: 0;
}
body.page-match .match-field input {
  font-family: var(--body);
  font-size: 14px;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  transition: all 0.2s;
  width: 100%;
}
body.page-match .match-field input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(22,163,74,0.12);
}
body.page-match .match-field-checkbox {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
}
body.page-match .match-field-checkbox input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--green);
  cursor: pointer;
}
body.page-match .match-field-checkbox label {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  font-family: var(--body);
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0;
}
body.page-match .match-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 6px;
}

/* btn / btn-primary */
body.page-match .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 100px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}
body.page-match .btn svg { width: 14px; height: 14px; }
body.page-match .btn-primary { background: var(--green); color: #FFFFFF; }
body.page-match .btn-primary:hover {
  background: var(--green-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(22,163,74,0.5);
}


@media (max-width: 720px) {
  body.page-match .match-intro-trust { gap: 8px; font-size: 11px; }
  body.page-match .match-form-actions { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  body.page-match .match-form-actions .btn { justify-content: center; }
  body.page-match .match-form-actions .btn-text-nav { justify-content: center; }
}

/* ===== RESULT.HTML (.page-result) — PREMIUM ===== */

body.page-result .result-main { background: var(--bg); }

/* Empty state */
body.page-result .result-empty {
  padding: clamp(80px, 12vw, 160px) 0;
  text-align: center;
  background: var(--bg);
}
body.page-result .empty-block {
  max-width: 480px;
  margin: 0 auto;
}
body.page-result .empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bg-tint);
  border: 1px solid var(--green-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
}
body.page-result .empty-icon svg {
  width: 28px;
  height: 28px;
  color: var(--green);
  stroke: currentColor;
}
body.page-result .empty-block h1 {
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 12px;
}
body.page-result .empty-block p {
  font-size: 15px;
  color: var(--ink-soft);
  margin-bottom: 28px;
}

/* Result hero — tighter */
body.page-result .result-hero {
  padding: clamp(36px, 4.5vw, 64px) 0 clamp(40px, 5vw, 60px);
  background: var(--bg-tint);
  border-bottom: 1px solid var(--green-soft);
  text-align: center;
  position: relative;
  overflow: hidden;
}
body.page-result .result-hero::before {
  content: '';
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 280px;
  background: radial-gradient(ellipse at center, rgba(22,163,74,0.10) 0%, transparent 70%);
  pointer-events: none;
}
body.page-result .result-hero > .wrap { position: relative; z-index: 1; }
body.page-result .result-hero-inner { max-width: 720px; margin: 0 auto; }
body.page-result .result-medallion {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--green-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  box-shadow:
    0 1px 3px rgba(22,163,74,0.06),
    0 12px 28px -12px rgba(22,163,74,0.32);
  position: relative;
}
body.page-result .result-medallion::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px dashed rgba(22, 163, 74, 0.22);
  pointer-events: none;
}
body.page-result .result-medallion svg {
  width: 30px;
  height: 30px;
  color: var(--green);
  stroke: currentColor;
}
body.page-result .result-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: var(--bg);
  border: 1px solid var(--green-soft);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-family: var(--display);
}
body.page-result .result-greet {
  font-family: var(--display);
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--ink-soft);
  margin-bottom: 6px;
}
body.page-result .result-headline {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(32px, 4.6vw, 54px);
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--ink);
  margin-bottom: 14px;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
body.page-result .result-headline .accent { color: var(--green); }
body.page-result .result-subfocus {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 14px;
  background: var(--bg);
  border: 1px solid var(--green-soft);
  border-radius: 100px;
  margin: 0 auto 18px;
  box-shadow: 0 4px 14px -6px rgba(22,163,74,0.18);
}
body.page-result .result-subfocus-label {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
body.page-result .result-subfocus-value {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
body.page-result .result-summary {
  font-size: clamp(14px, 1.3vw, 16px);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 auto;
}

/* Result section — tighter padding */
body.page-result .result-section {
  padding: clamp(40px, 6vw, 80px) 0;
}

/* TWO-COLUMN LAYOUT */
body.page-result .result-twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  max-width: 1140px;
  margin: 0 auto;
  align-items: start;
}
body.page-result .result-col-head {
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
body.page-result .result-col-head h2 {
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 4px;
}
body.page-result .result-col-head h2 .accent { color: var(--green); }
body.page-result .result-col-head p {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Profile bars — refined chart style */
body.page-result .result-bars {
  display: grid;
  gap: 10px;
}
body.page-result .result-bar {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.25s ease;
}
body.page-result .result-bar:last-child { border-bottom: 0; }
body.page-result .result-bar.is-primary {
  padding: 14px 14px;
  margin: 0 -14px 4px -14px;
  background: var(--bg-tint);
  border: 1px solid var(--green-soft);
  border-radius: 12px;
}
body.page-result .result-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 3px;
}
body.page-result .result-bar-name {
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
}
body.page-result .result-bar.is-primary .result-bar-name { color: var(--green); }
body.page-result .result-bar-pct {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
}
body.page-result .result-bar.is-primary .result-bar-pct { color: var(--green); font-size: 16px; }
body.page-result .result-bar-tag {
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-bottom: 8px;
  line-height: 1.45;
}
body.page-result .result-bar-track {
  width: 100%;
  height: 6px;
  background: var(--bg-soft);
  border-radius: 100px;
  overflow: hidden;
}
body.page-result .result-bar.is-primary .result-bar-track { background: var(--bg); height: 8px; }
body.page-result .result-bar-fill {
  height: 100%;
  background: var(--green);
  border-radius: 100px;
  transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
body.page-result .result-bar.is-primary .result-bar-fill {
  background: linear-gradient(90deg, var(--green) 0%, #34D058 100%);
}

/* Pillar answers — concrete card style with icon + answer */
body.page-result .result-pillars {
  display: grid;
  gap: 8px;
}
body.page-result .result-pillar {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.25s ease, background 0.25s ease;
  opacity: 0;
  transform: translateY(8px);
  animation: fadeUpPillar 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
body.page-result .result-pillar:hover {
  border-color: var(--green-soft);
  background: var(--bg-tint);
}
@keyframes fadeUpPillar {
  to { opacity: 1; transform: translateY(0); }
}
body.page-result .result-pillar-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bg-tint);
  border: 1px solid var(--green-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
body.page-result .result-pillar-icon svg {
  width: 20px;
  height: 20px;
  color: var(--green);
  stroke: currentColor;
}
body.page-result .result-pillar-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
body.page-result .result-pillar-name {
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body.page-result .result-pillar-answer {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.25;
}

/* Consent block */
body.page-result .consent-section {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  padding-top: clamp(48px, 6vw, 70px);
  padding-bottom: clamp(48px, 6vw, 80px);
}
body.page-result .result-consent {
  max-width: 680px;
  margin: 0 auto;
  background: var(--bg);
  border: 2px solid var(--green-soft);
  border-radius: 18px;
  padding: clamp(32px, 4.5vw, 44px);
  text-align: center;
  box-shadow:
    0 1px 3px rgba(22,163,74,0.06),
    0 24px 48px -22px rgba(22,163,74,0.18);
}
body.page-result .result-consent-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-tint);
  border: 1px solid var(--green-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
body.page-result .result-consent-icon svg { width: 24px; height: 24px; color: var(--green); stroke: currentColor; }
body.page-result .result-consent h2 {
  font-family: var(--display);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 12px;
}
body.page-result .result-consent h2 .accent { color: var(--green); }
body.page-result .result-consent p {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}
body.page-result .result-consent-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
body.page-result .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 100px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}
body.page-result .btn svg { width: 14px; height: 14px; }
body.page-result .btn-primary { background: var(--green); color: #FFFFFF; }
body.page-result .btn-primary:hover:not(:disabled) {
  background: var(--green-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(22,163,74,0.5);
}
body.page-result .btn:disabled { opacity: 0.5; cursor: not-allowed; }
body.page-result .btn-ghost-soft {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
}
body.page-result .btn-ghost-soft:hover:not(:disabled) {
  border-color: var(--green-soft);
  color: var(--ink);
  background: var(--bg-soft);
}
body.page-result .result-consent-note {
  margin-top: 22px;
  padding: 14px 18px;
  background: var(--bg-tint);
  border: 1px solid var(--green-soft);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}
body.page-result .result-consent-note.alt {
  background: var(--bg-soft);
  border-color: var(--line);
}


/* Responsive: stack to 1-col on tablet/mobile */
@media (max-width: 960px) {
  body.page-result .result-twocol {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 640px;
  }
}
@media (max-width: 720px) {
  body.page-result .result-consent-actions { flex-direction: column; }
  body.page-result .result-consent-actions .btn { width: 100%; justify-content: center; }
}


/* =========================================================
   CONSIDERATIONS PAGE (.page-considerations)
   ========================================================= */

/* Hero */
body.page-considerations .cons-hero {
  padding: clamp(36px, 4.5vw, 64px) 0 clamp(48px, 6vw, 80px);
  background: var(--bg);
  text-align: center;
}
body.page-considerations .cons-hero-eyebrow {
  display: inline-block;
  padding: 6px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
body.page-considerations .cons-hero h1 {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 1.05;
  margin-bottom: 16px;
}
body.page-considerations .cons-hero h1 .accent { color: var(--green); }
body.page-considerations .cons-hero-lead {
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 auto;
}


/* ===== REASONS SECTION ===== */
body.page-considerations .cons-reasons {
  background: var(--bg-soft);
  padding-top: clamp(56px, 7vw, 90px);
  padding-bottom: clamp(56px, 7vw, 90px);
}
body.page-considerations .reasons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 22px);
  max-width: 1180px;
  margin: 0 auto;
}
body.page-considerations .reason-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.25s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
body.page-considerations .reason-card:hover {
  border-color: var(--green-soft);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -18px rgba(26, 31, 37, 0.16);
}
body.page-considerations .reason-num {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  width: 38px;
  height: 38px;
  background: var(--green);
  color: #FFFFFF;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 6px 18px -4px rgba(22, 163, 74, 0.55), 0 0 0 1px rgba(255,255,255,0.1) inset;
}
body.page-considerations .reason-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-soft);
  position: relative;
}
body.page-considerations .reason-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 35%);
  pointer-events: none;
}
body.page-considerations .reason-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
body.page-considerations .reason-card:hover .reason-image img {
  transform: scale(1.04);
}
body.page-considerations .reason-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--bg-tint);
  border: 1px solid var(--green-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px 24px 18px;
}
body.page-considerations .reason-icon svg {
  width: 24px;
  height: 24px;
  color: var(--green);
  stroke: var(--green);
}
body.page-considerations .reason-card h3 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 24px 10px;
  line-height: 1.25;
}
body.page-considerations .reason-card p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 24px 24px;
}
body.page-considerations .reason-fineprint {
  font-size: 11.5px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin: auto 24px 24px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

/* ===== CALCULATOR SECTION ===== */
body.page-considerations .cons-calc {
  background: var(--bg-tint);
  padding-top: clamp(56px, 7vw, 90px);
  padding-bottom: clamp(56px, 7vw, 90px);
}
body.page-considerations .calc-card {
  max-width: 1000px;
  margin: 0 auto;
  background: linear-gradient(180deg, #ffffff 0%, #fafaf7 100%);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(20px, 2.4vw, 30px);
  box-shadow:
    0 1px 2px rgba(26,31,37,0.04),
    0 8px 24px -12px rgba(26,31,37,0.08),
    0 24px 56px -28px rgba(26,31,37,0.10);
}

/* Calculator title — sits above the controls */
body.page-considerations .calc-card-title {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-muted);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: clamp(16px, 2vw, 22px);
  padding-bottom: clamp(14px, 1.6vw, 18px);
  border-bottom: 1px solid var(--line);
}

/* ============================================================
   CALCULATOR GRID
   2 columns: inputs (left) + display panel (right)
   Compact — fits in one viewport, no scroll for results
   ============================================================ */
body.page-considerations .calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 36px);
  margin-bottom: 24px;
  align-items: stretch;
}

/* Left column: inputs stack */
body.page-considerations .calc-controls {
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
}
body.page-considerations .control-group {
  display: flex;
  flex-direction: column;
}
body.page-considerations .control-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
  flex-wrap: wrap;
}
body.page-considerations .control-label-row label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.page-considerations .control-value {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* Range slider — green fill on the left of the thumb */
body.page-considerations input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(
    to right,
    var(--green) 0%,
    var(--green) var(--slider-pct, 0%),
    rgba(15,23,42,0.08) var(--slider-pct, 0%),
    rgba(15,23,42,0.08) 100%
  );
  border-radius: 100px;
  outline: none;
  border: 1px solid rgba(15,23,42,0.06);
  transition: background 0.15s ease;
}
body.page-considerations input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: #fff;
  border: 2px solid var(--green);
  border-radius: 50%;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.10),
    0 4px 12px -2px rgba(22,163,74,0.30);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body.page-considerations input[type="range"]::-webkit-slider-thumb:hover,
body.page-considerations input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.10);
  box-shadow:
    0 1px 2px rgba(15,23,42,0.12),
    0 6px 18px -2px rgba(22,163,74,0.45);
}
body.page-considerations input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: #fff;
  border: 2px solid var(--green);
  border-radius: 50%;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.10),
    0 4px 12px -2px rgba(22,163,74,0.30);
}
body.page-considerations .control-scale {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 8px;
  letter-spacing: 0.01em;
}

/* ============================================================
   FOOTER: see assumptions disclosure — centered below the grid
   ============================================================ */
body.page-considerations .calc-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(20px, 2.4vw, 28px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--line);
}

/* "See assumptions" disclosure — refined link-style button */
body.page-considerations .assumptions-toggle {
  background: transparent;
  border: none;
  padding: 6px 14px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.18s ease;
  border-radius: 100px;
}
body.page-considerations .assumptions-toggle:hover {
  color: var(--green);
}
body.page-considerations .assumptions-toggle svg {
  width: 11px;
  height: 11px;
  transition: transform 0.25s cubic-bezier(0.32, 0, 0.16, 1);
  opacity: 0.7;
}
body.page-considerations .assumptions-toggle.is-open svg {
  transform: rotate(180deg);
  opacity: 1;
}
body.page-considerations .assumptions-panel {
  margin-top: 16px;
  padding: 22px 26px;
  background: linear-gradient(180deg, #fdfdfa 0%, #f5f5f0 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  width: 100%;
  max-width: 520px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 1px 2px rgba(26,31,37,0.03);
}
body.page-considerations .assumptions-panel[hidden] {
  display: none;
}
body.page-considerations .assumptions-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.page-considerations .assumptions-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
body.page-considerations .assumptions-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
body.page-considerations .assumptions-row dt {
  color: var(--green);
  font-weight: 700;
  font-family: var(--display);
  margin: 0;
  letter-spacing: 0.005em;
  font-size: 12.5px;
  padding-top: 1px;
}
body.page-considerations .assumptions-row dd {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
body.page-considerations .assumptions-row .a-line {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
}
body.page-considerations .assumptions-row .a-line b {
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Golden Visa pill — warm gold to honor the "Golden" branding */
body.page-considerations .visa-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #d4a017;
  color: #78410f;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 9px 3px 7px;
  border-radius: 100px;
  white-space: nowrap;
  line-height: 1.2;
  text-transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 1px 2px rgba(180, 130, 20, 0.15);
}
body.page-considerations .visa-tag svg {
  width: 11px;
  height: 11px;
  stroke: #b8860b;
  flex-shrink: 0;
}
body.page-considerations .visa-tag[hidden] {
  display: none;
}

/* ============================================================
   SCENARIO TABS — refined segmented control
   ============================================================ */
body.page-considerations .scenario-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  padding: 4px;
}
body.page-considerations .scenario-tab {
  background: transparent;
  border: none;
  padding: 11px 10px;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 9px;
  letter-spacing: 0.025em;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
body.page-considerations .scenario-tab:hover {
  color: var(--ink);
}
body.page-considerations .scenario-tab.is-active {
  background: #ffffff;
  color: var(--green);
  box-shadow:
    0 1px 2px rgba(15,23,42,0.06),
    0 2px 6px -2px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,1);
}

/* ============================================================
   DISPLAY: house (left, wider) + 3 stats stacked (right, tighter)
   Premium centerpiece — every pixel does work
   ============================================================ */
body.page-considerations .calc-display {
  background:
    radial-gradient(ellipse at 50% -5%, rgba(34,197,94,0.10) 0%, rgba(34,197,94,0) 50%),
    radial-gradient(ellipse at 50% 110%, rgba(20,83,45,0.05) 0%, rgba(20,83,45,0) 60%),
    linear-gradient(180deg, #fdfdfa 0%, #f3f3ed 100%);
  border: 1px solid rgba(20, 83, 45, 0.10);
  border-radius: 20px;
  padding: clamp(22px, 2.6vw, 32px) clamp(24px, 2.8vw, 36px);
  display: grid;
  grid-template-columns: minmax(280px, 1.4fr) minmax(0, 1fr);
  gap: clamp(16px, 2.2vw, 28px);
  align-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 0 0 1px rgba(255,255,255,0.5),
    0 1px 2px rgba(26,31,37,0.04),
    0 16px 40px -18px rgba(20,83,45,0.14);
}
body.page-considerations .calc-display-house {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
body.page-considerations .calc-display-stats {
  display: flex;
  flex-direction: column;
  min-width: 0;
  justify-content: center;
}

/* Stat block — used in the right column of calc-display */
body.page-considerations .house-stat {
  text-align: left;
  padding: 13px 0;
  border-bottom: 1px solid rgba(20, 83, 45, 0.10);
}
body.page-considerations .house-stat:first-child {
  padding-top: 0;
}
body.page-considerations .house-stat:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
body.page-considerations .house-stat-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: 6px;
}
body.page-considerations .house-stat-value {
  font-family: var(--display);
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 700;
  color: var(--green);
  letter-spacing: -0.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 5px;
  transition: color 0.2s ease;
}
body.page-considerations .house-stat-sub {
  font-size: 10.5px;
  color: var(--ink-muted);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
}
body.page-considerations .house-svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 12px 24px rgba(15, 23, 42, 0.08));
}

/* House SVG internals — premium, restrained */
body.page-considerations .house-svg .liq {
  transition: y 1.6s cubic-bezier(0.32, 0, 0.16, 1),
              height 1.6s cubic-bezier(0.32, 0, 0.16, 1);
}
body.page-considerations .house-svg .liq-highlight {
  transition: y 1.6s cubic-bezier(0.32, 0, 0.16, 1),
              height 1.6s cubic-bezier(0.32, 0, 0.16, 1);
}
body.page-considerations .house-svg .liq-surface {
  transition: y 1.6s cubic-bezier(0.32, 0, 0.16, 1),
              opacity 0.4s ease;
}
body.page-considerations .house-svg .glass-outline {
  fill: none;
  stroke: rgba(20, 83, 45, 0.55);
  stroke-width: 2;
  stroke-linejoin: round;
}
body.page-considerations .house-svg .glass-shine {
  stroke: rgba(255, 255, 255, 0.65);
  stroke-width: 1.5;
  stroke-linecap: round;
}
body.page-considerations .house-svg .glass-floor {
  stroke: rgba(20, 83, 45, 0.40);
  stroke-width: 1.5;
}
body.page-considerations .house-svg .house-door,
body.page-considerations .house-svg .house-window {
  fill: rgba(255, 255, 255, 0.85);
  stroke: rgba(20, 83, 45, 0.45);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
body.page-considerations .house-svg .house-window-mullion {
  stroke: rgba(0, 130, 70, 0.30);
  stroke-width: 1;
}
body.page-considerations .house-svg .house-doorknob {
  fill: #b8923d; /* warm brass */
}
body.page-considerations .house-svg .roof-line {
  stroke: rgba(20, 83, 45, 0.50);
  stroke-width: 1.5;
  stroke-linecap: round;
}
body.page-considerations .house-svg .roof-dot {
  fill: #b8923d;
  stroke: rgba(20, 83, 45, 0.40);
  stroke-width: 0.8;
}

/* ===== Price stepper input ===== */
body.page-considerations .price-stepper {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.page-considerations .price-stepper:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-tint);
}
body.page-considerations .step-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: var(--bg-soft);
  color: var(--ink-soft);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
body.page-considerations .step-btn:hover {
  background: var(--green-tint);
  color: var(--green);
}
body.page-considerations .step-btn:active {
  transform: scale(0.92);
}
body.page-considerations .step-btn svg {
  width: 14px;
  height: 14px;
}
body.page-considerations .price-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  /* No prefix inside any more — the currency picker moved to the label row
     so the price has the full input width for long numbers like
     200,000,000. We center the input horizontally for visual balance. */
  justify-content: center;
  padding: 0 12px;
  min-width: 0;
}
/* Label-row right cluster — groups optional visa pill + the currency
   picker chip. Uses flex with a small gap so they sit tidily aligned;
   wraps to a second line on narrow viewports. */
body.page-considerations .control-label-row-end {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
body.page-considerations .price-prefix {
  /* The prefix host (#pricePrefix) — the inline currency picker
     mounts inside this span. Reset typography here so the picker
     chip inherits its own (Geist), not the calculator's display
     font, and the chip's pill background reads cleanly. */
  display: inline-flex;
  align-items: center;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  line-height: 1;
}
body.page-considerations #priceInput {
  flex: 1;
  width: 100%;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  padding: 0;
  /* Right-aligned so leading digits of long numbers stay visible
     and the steppers feel symmetrical around a centred amount. */
  text-align: center;
}
/* Disclaimer — refined italic note, centered */
body.page-considerations .calc-disclaimer {
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.6;
  padding: 18px clamp(20px, 3vw, 40px);
  background: transparent;
  border-radius: 0;
  border-left: none;
  margin: 14px auto 0;
  max-width: 720px;
  text-align: center;
  font-style: italic;
  letter-spacing: 0.005em;
}
body.page-considerations .calc-disclaimer strong {
  color: var(--ink-soft);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10.5px;
  display: inline-block;
  margin-left: 4px;
}


/* ===== CTA (tinted) — matches stages/home pattern ===== */
body.page-considerations .cta-band {
  background: var(--bg-tint);
  border-top: 1px solid var(--green-soft);
  border-bottom: 1px solid var(--green-soft);
  padding-top: clamp(64px, 8vw, 96px);
  padding-bottom: clamp(64px, 8vw, 96px);
  text-align: center;
}
body.page-considerations .cta-band h2 {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 18px;
  line-height: 1.1;
}
body.page-considerations .cta-band h2 .accent { color: var(--green); font-weight: 600; }
body.page-considerations .cta-band p {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 auto 32px;
}

/* Responsive */
@media (max-width: 1080px) {
  body.page-considerations .reasons-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 760px;
  }
  body.page-considerations .calc-card {
    max-width: 720px;
  }
  body.page-considerations .calc-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  body.page-considerations .calc-display {
    grid-template-columns: 1.15fr 1fr;
  }
  body.page-considerations .house-svg {
    max-width: 280px;
  }
}
@media (max-width: 720px) {
  body.page-considerations .reasons-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
  body.page-considerations .calc-display {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  body.page-considerations .scenario-tab {
    font-size: 11.5px;
    padding: 10px 6px;
  }
  body.page-considerations .house-svg {
    max-width: 240px;
  }
}

/* ============================================================
   BUYING GUIDE — TOC, considerations grid, calculator link
   ============================================================ */
.guide-toc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
.guide-toc-link {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
  background: var(--green-tint);
  border: 1px solid var(--green-soft);
  border-radius: 100px;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.guide-toc-link:hover {
  color: #fff;
  background: var(--green);
  border-color: var(--green);
  transform: translateY(-1px);
}

/* TOC links inside the dark video hero — filled green pill, white text.
   Strong, brand-aligned, stands out on dark backdrop. */
.hero .guide-toc {
  margin-top: 32px;
}
.hero .guide-toc-link {
  background: var(--green);
  border: 1px solid var(--green);
  color: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero .guide-toc-link:hover {
  background: var(--green-hover);
  border-color: var(--green-hover);
  color: #fff;
  transform: translateY(-1px);
}

.considerations-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.consideration-tile {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.consideration-tile:hover {
  border-color: var(--green-soft);
  transform: translateY(-2px);
}
.consideration-tile-num {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.16em;
  margin-bottom: 4px;
}
.consideration-tile h3 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.consideration-tile p {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 1080px) {
  .considerations-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .considerations-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CALCULATOR PROMO — premium card at top of Considerations section
   Mirrors the actual calculator's display panel so users recognize it
   ============================================================ */
.calculator-promo {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 32px);
  align-items: center;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(34,197,94,0.06) 0%, rgba(34,197,94,0) 55%),
    linear-gradient(180deg, #fdfdfa 0%, #f3f3ed 100%);
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 18px;
  padding: clamp(22px, 2.6vw, 32px);
  margin-bottom: clamp(28px, 3vw, 40px);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 1px 2px rgba(26,31,37,0.04),
    0 12px 32px -16px rgba(26,31,37,0.10);
}
.calculator-promo:hover {
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 1px 2px rgba(22,163,74,0.08),
    0 18px 40px -18px rgba(22,163,74,0.20);
}
.calculator-promo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.calculator-promo-icon svg {
  width: 100%;
  max-width: 180px;
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.06));
}
.calculator-promo-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.calculator-promo-eyebrow {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.2;
}
.calculator-promo h3 {
  font-family: var(--display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.2;
}
.calculator-promo p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}
.calculator-promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  letter-spacing: 0.005em;
  margin-top: 6px;
  transition: gap 0.18s ease;
}
.calculator-promo-cta svg {
  width: 12px;
  height: 12px;
  transition: transform 0.18s ease;
}
.calculator-promo:hover .calculator-promo-cta {
  gap: 10px;
}
.calculator-promo:hover .calculator-promo-cta svg {
  transform: translateX(2px);
}
@media (max-width: 720px) {
  .calculator-promo {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .calculator-promo-icon svg {
    max-width: 140px;
  }
}

/* ============================================================
   "Things to consider" divider between calc and 8 tiles
   ============================================================ */
.considerations-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 clamp(20px, 2.4vw, 28px);
}
.considerations-divider::before,
.considerations-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.considerations-divider span {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================================================
   FEATURED TOC PILL on Buying Guide hero
   ============================================================ */
.guide-toc-link.is-featured {
  background: var(--bg-tint);
  border-color: var(--green-soft);
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.guide-toc-link.is-featured:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.guide-toc-link.is-featured svg {
  display: inline-block;
}

/* ============================================================
   WHY DUBAI — subtle calculator link bar between sections
   ============================================================ */
.why-calc-bar {
  background: linear-gradient(180deg, #ffffff 0%, #fafaf7 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.why-calc-bar-link {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  padding: 8px 4px;
  transition: gap 0.2s ease;
}
.why-calc-bar-link:hover { gap: 20px; }
.why-calc-bar-link:hover .why-calc-bar-arrow svg {
  transform: translateX(3px);
}
.why-calc-bar-eyebrow {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: var(--bg-tint);
  border: 1px solid var(--green-soft);
  border-radius: 100px;
  flex-shrink: 0;
}
.why-calc-bar-text {
  flex: 1;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.why-calc-bar-arrow {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.why-calc-bar-arrow svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}
@media (max-width: 560px) {
  .why-calc-bar-link { flex-wrap: wrap; }
  .why-calc-bar-text { font-size: 13px; }
}

/* ============================================================
   WHY DUBAI — section structure + image-led card grid with SVG illustrations
   Different visual treatment from the Considerations photo cards on purpose:
   Why Dubai uses bespoke SVGs to feel high-level/conceptual,
   Considerations uses photography to feel grounded/concrete.
   ============================================================ */
body.page-why-dubai .why-section {
  padding: clamp(60px, 7vw, 96px) 0;
}
body.page-why-dubai .why-section.alt {
  background: linear-gradient(180deg, #fafaf7 0%, #f3f3ed 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}


/* ============================================================
   DUBAI 2040 — premium 2-column card with stat grid
   ============================================================ */
.dubai-2040-card {
  max-width: 1080px;
  margin: 0 auto;
  background: linear-gradient(180deg, #ffffff 0%, #fafaf7 100%);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(28px, 3.4vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 48px);
  align-items: center;
  box-shadow:
    0 1px 2px rgba(26,31,37,0.04),
    0 12px 32px -16px rgba(26,31,37,0.10);
}
.d2040-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.d2040-stat {
  background: var(--bg-tint);
  border: 1px solid var(--green-soft);
  border-radius: 14px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.d2040-stat-num {
  font-family: var(--display);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 800;
  color: var(--green);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.d2040-stat-label {
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.4;
  letter-spacing: 0.005em;
}
.d2040-body p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.d2040-body p:last-child { margin-bottom: 0; }
.d2040-note {
  margin-top: 20px !important;
  padding: 16px 18px;
  background: var(--bg-soft);
  border-left: 3px solid var(--green);
  border-radius: 0 8px 8px 0;
  font-size: 13.5px !important;
  font-style: italic;
  color: var(--ink-muted) !important;
  line-height: 1.55 !important;
}
.d2040-note strong {
  color: var(--ink);
  font-style: normal;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
  display: block;
  margin-bottom: 6px;
}

@media (max-width: 1080px) {
  .dubai-2040-card {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
@media (max-width: 560px) {
  .d2040-stats { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   ABOUT — Trust & Transparency block
   ============================================================ */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}
.trust-item {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.trust-item-label {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
}
.trust-item-body p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.trust-item-body a {
  color: var(--green);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--green-soft);
}
.trust-item-body a:hover {
  border-bottom-color: var(--green);
}
@media (max-width: 720px) {
  .trust-grid { grid-template-columns: 1fr; }
}


/* =====================================================================
   BUYING GUIDE — added patterns: benefit cards (3×2 with photos)
   and journey timeline (booking → handover sequence).
   Scoped to .page-stages so they don't bleed to other pages.
   ===================================================================== */

/* ---------- BENEFIT CARDS (used by both Why and Realities) ---------- */
body.page-stages .benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
}

@media (max-width: 960px) {
  body.page-stages .benefit-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 600px) {
  body.page-stages .benefit-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

body.page-stages .benefit-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s ease;
}

body.page-stages .benefit-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.06), 0 16px 32px rgba(15, 23, 42, 0.08);
}

body.page-stages .benefit-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--green-tint);
}

body.page-stages .benefit-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

body.page-stages .benefit-card:hover .benefit-card-image img {
  transform: scale(1.04);
}

body.page-stages .benefit-card-body {
  padding: 24px 26px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

body.page-stages .benefit-card-body h3 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.3;
}

body.page-stages .benefit-card-body p {
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

/* ---------- JOURNEY (booking → handover, centred track, alternating) ----------
   Container is `position: relative`. Each row has the card flowing on one
   side and the MARKER absolutely positioned at the row's vertical centre.
   This guarantees the marker is always horizontally aligned with its card.
   ----------------------------------------------------------------------------- */
body.page-stages .journey {
  position: relative;
  margin-top: 40px;
  padding: 8px 0;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

body.page-stages .journey::before {
  /* Vertical track line down the middle */
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--green-soft) 4%,
    var(--green-soft) 96%,
    transparent 100%);
  transform: translateX(-50%);
  z-index: 0;
}

body.page-stages .journey-step {
  position: relative;
  margin-bottom: 28px;
  /* Use a flex shell to keep the card on its side without grid quirks */
  display: flex;
  align-items: stretch;
}

body.page-stages .journey-step:last-child {
  margin-bottom: 0;
}

/* The card is roughly half the journey width minus the central marker zone */
body.page-stages .journey-step-content {
  width: calc(50% - 50px);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 180px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 4px 14px rgba(15, 23, 42, 0.05);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s ease;
  position: relative;
  z-index: 1;
}

body.page-stages .journey-step:hover .journey-step-content {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.06), 0 14px 28px rgba(15, 23, 42, 0.08);
}

/* Odd steps: card on the LEFT */
body.page-stages .journey-step:nth-child(odd) .journey-step-content {
  margin-right: auto;
  margin-left: 0;
}

/* Even steps: card on the RIGHT, image flipped to inner side */
body.page-stages .journey-step:nth-child(even) .journey-step-content {
  margin-left: auto;
  margin-right: 0;
  grid-template-columns: 1fr 220px;
}

body.page-stages .journey-step:nth-child(even) .journey-step-thumb {
  order: 2;
}

body.page-stages .journey-step:nth-child(even) .journey-step-text {
  order: 1;
}

/* MARKER — absolutely positioned at the row's vertical centre,
   on the central track. Guaranteed to align with card centre. */
body.page-stages .journey-step-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--green-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 1);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

body.page-stages .journey-step:hover .journey-step-marker {
  transform: translate(-50%, -50%) scale(1.06);
  border-color: var(--green);
}

body.page-stages .journey-step-marker svg {
  width: 26px;
  height: 26px;
  color: var(--green);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Image */
body.page-stages .journey-step-thumb {
  position: relative;
  background: var(--green-tint);
  overflow: hidden;
  min-height: 180px;
}

body.page-stages .journey-step-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

body.page-stages .journey-step:hover .journey-step-thumb img {
  transform: scale(1.04);
}

/* Text */
body.page-stages .journey-step-text {
  padding: 18px 24px 20px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

body.page-stages .journey-step-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 8px;
}

body.page-stages .journey-step-optional {
  background: var(--green-tint);
  color: var(--green-hover);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--green-soft);
}

/* Ownership badges — make it crystal clear who's leading each step.
   Demara badge = green, Developer badge = neutral. */
body.page-stages .journey-owner {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: none;
  padding: 4px 9px;
  border-radius: 100px;
  border: 1px solid;
  margin-right: 4px;
}
body.page-stages .journey-owner-demara {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
body.page-stages .journey-owner-developer {
  background: var(--green-tint, #DCFCE7);
  color: rgba(0, 130, 70, 1);
  border-color: rgba(0, 130, 70, 0.25);
}

body.page-stages .journey-step-text h4 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.3;
}

body.page-stages .journey-step-text p {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

/* Tablet — narrower image column */
@media (max-width: 960px) {
  body.page-stages .journey-step-content {
    grid-template-columns: 180px 1fr;
    min-height: 160px;
  }
  body.page-stages .journey-step:nth-child(even) .journey-step-content {
    grid-template-columns: 1fr 180px;
  }
  body.page-stages .journey-step-thumb {
    min-height: 160px;
  }
  body.page-stages .journey-step-text {
    padding: 14px 18px 16px 18px;
  }
}

/* Mobile — track on left, all cards on right, image stacks above text */
@media (max-width: 720px) {
  body.page-stages .journey::before {
    left: 28px;
    transform: none;
  }
  body.page-stages .journey-step {
    padding-left: 76px;
    margin-bottom: 28px;
  }
  body.page-stages .journey-step-marker {
    left: 28px;
    top: 90px;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 1);
  }
  body.page-stages .journey-step:hover .journey-step-marker {
    transform: translate(-50%, -50%) scale(1.06);
  }
  body.page-stages .journey-step-marker svg {
    width: 22px;
    height: 22px;
  }
  body.page-stages .journey-step:nth-child(odd) .journey-step-content,
  body.page-stages .journey-step:nth-child(even) .journey-step-content {
    width: 100%;
    margin: 0;
    grid-template-columns: 1fr;
  }
  body.page-stages .journey-step:nth-child(even) .journey-step-thumb {
    order: 0;
  }
  body.page-stages .journey-step:nth-child(even) .journey-step-text {
    order: 0;
  }
  body.page-stages .journey-step-thumb {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
  body.page-stages .journey-step-text {
    padding: 16px 18px 18px;
  }
}


/* ============================================================
   CANONICAL PAGE PATTERNS (used across profiles, buyer-match,
   result, and any future page that needs the same hero+section
   rhythm as buying-guide).
   ============================================================ */

/* ---------- HERO BAND (canonical hero pattern) ---------- */
.page-hero-band {
  padding: clamp(36px, 4.5vw, 64px) 0 clamp(48px, 6vw, 80px);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.page-hero-band .wrap { max-width: 880px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 32px); }

.page-hero-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: var(--bg-tint);
  border: 1px solid var(--green-soft);
  border-radius: 100px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.page-hero-band h1 {
  font-family: var(--display);
  font-size: clamp(34px, 5.2vw, 60px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 22px;
}
.page-hero-band h1 .accent { color: var(--green); }

.page-hero-lead {
  font-size: clamp(15px, 1.55vw, 18px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 720px;
  margin: 0 auto 24px;
}

.page-hero-hint {
  font-size: 12.5px;
  color: var(--ink-muted);
  font-style: italic;
  margin-top: 8px;
}

/* ---------- SECTION WRAPPER (canonical) ---------- */
.page-section {
  padding: clamp(56px, 8vw, 100px) 0;
}
.page-section-alt {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ---------- FADE-UP ANIMATION ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up {
  animation: fadeUp 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}


/* ============================================================
   BUYER-MATCH — additions for new patterns
   ============================================================ */
body.page-match .match-section {
  background: var(--bg);
}
body.page-match .match-section .wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 32px);
}

/* Intro card */
body.page-match .match-intro-card {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 18px;
  padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 48px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 8px 24px rgba(15, 23, 42, 0.05);
  text-align: center;
}
body.page-match .match-intro-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green-tint);
  border: 1px solid var(--green-soft);
  margin-bottom: 20px;
}
body.page-match .match-intro-icon svg {
  width: 26px;
  height: 26px;
  color: var(--green);
  stroke: currentColor;
  fill: none;
}
body.page-match .match-intro-title {
  font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 14px;
  line-height: 1.2;
}
body.page-match .match-intro-lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 480px;
  margin: 0 auto 28px;
}

/* Progress bar */
body.page-match .match-progress {
  margin-bottom: 24px;
}
body.page-match .match-progress-bar {
  height: 4px;
  background: var(--bg-soft);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 12px;
}
body.page-match .match-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green) 0%, var(--green-hover) 100%);
  border-radius: 100px;
  width: 0%;
  transition: width 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
body.page-match .match-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
body.page-match .match-question-count {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
body.page-match .match-pillar-tag {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  background: var(--green-tint);
  border: 1px solid var(--green-soft);
  padding: 4px 10px;
  border-radius: 100px;
  letter-spacing: 0.06em;
}

/* Option button — extend existing .match-option */
body.page-match .match-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  text-align: left;
}
body.page-match .match-option-label {
  flex: 1;
  font-size: 15px;
  line-height: 1.4;
}
body.page-match .match-option-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  opacity: 0.4;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
body.page-match .match-option-arrow svg {
  width: 14px;
  height: 14px;
  color: var(--ink-soft);
  stroke: currentColor;
  fill: none;
}
body.page-match .match-option:hover .match-option-arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* Two-column field row */
body.page-match .match-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 540px) {
  body.page-match .match-field-row { grid-template-columns: 1fr; }
}


/* ============================================================
   RESULT PAGE — additions for new patterns
   ============================================================ */

/* Secondary line under the H1 */
body.page-result .result-secondary-line {
  font-size: 15px;
  color: var(--ink-soft);
  margin-bottom: 18px;
  line-height: 1.5;
}
body.page-result .result-secondary-line strong {
  color: var(--green);
  font-weight: 600;
}

/* Primary profile detail card */
body.page-result .result-primary-card {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 18px;
  padding: clamp(28px, 3.5vw, 40px) clamp(28px, 4vw, 44px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 8px 24px rgba(15, 23, 42, 0.05);
}
body.page-result .result-primary-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
}
body.page-result .result-primary-num {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
body.page-result .result-primary-name {
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
}
body.page-result .result-primary-tag {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  color: var(--green);
  margin-bottom: 16px;
  line-height: 1.4;
}
body.page-result .result-primary-desc {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 22px;
}
body.page-result .result-primary-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
body.page-result .result-primary-pills .pill {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 100px;
  letter-spacing: 0.01em;
}

/* Pillar answer summary — additions */
body.page-result .result-pillar-tag {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
  line-height: 1.3;
}

/* All 9 scores collapsible */
body.page-result .result-allscores {
  max-width: 720px;
  margin: 0 auto;
}
body.page-result .result-allscores-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  padding: 18px 22px;
  cursor: pointer;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.005em;
  transition: border-color 0.2s ease, background 0.2s ease;
}
body.page-result .result-allscores-toggle:hover {
  border-color: var(--green-soft);
  background: var(--green-tint);
  color: var(--green-hover);
}
body.page-result .result-allscores-chev {
  width: 16px;
  height: 16px;
  color: var(--ink-soft);
  transition: transform 0.3s ease;
}
body.page-result .result-allscores-toggle.is-open .result-allscores-chev {
  transform: rotate(180deg);
}
body.page-result .result-allscores-toggle.is-open {
  border-color: var(--green-soft);
  background: var(--green-tint);
  color: var(--green-hover);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
body.page-result .result-allscores-panel {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-top: none;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  padding: 8px 22px 18px;
}
body.page-result .result-bar-rank {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  margin-right: 8px;
}


/* ============================================================
   ============================================================
   PAGE: HOME — Why working with us section
   Dark green cards positioned on the photograph.
   ============================================================
   ============================================================ */

.why-section {
  background: #ffffff;
  padding-top: clamp(72px, 9vw, 120px);
  padding-bottom: clamp(72px, 9vw, 120px);
}

/* Section header now uses canonical .section-head / .section-eyebrow / .section-title /
   .section-subtitle from the global stylesheet — keeps visual continuity with
   the "How it works" section above and other site sections. No bespoke header CSS needed. */

/* ---------- The canvas — photograph as background, cards positioned on top ---------- */
.why-canvas {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  /* 4:3 — matches photograph proportions, faces visible */
  aspect-ratio: 4 / 3;
  max-height: 760px;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f1e8;
}

.why-canvas-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

/* ---------- Cards — clean solid dark green, large faded numbers ---------- */
.why-card {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top:  var(--y);
  /* Slightly wider for better proportions */
  width: 25%;
  min-width: 230px;
  max-width: 290px;
  height: 200px;

  /* Dark variant of the logo green (#00BF62), at 60% opacity (40% transparent)
     so the photograph behind shows through subtly. */
  background: rgba(0, 130, 70, 0.60);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  border-radius: 8px;

  /* Generous padding for breathing room */
  padding: 22px 24px;

  /* Single restrained drop shadow — present but doesn't shout */
  box-shadow:
    0 4px 12px -2px rgba(0, 0, 0, 0.10),
    0 18px 36px -12px rgba(0, 130, 70, 0.30);

  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);

  /* Two-column layout: fixed-width number column on the left + content column on the right.
     Both columns vertically centered so the layout feels balanced regardless of body length. */
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 16px;
  align-items: center;
  box-sizing: border-box;
}

.why-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 6px 16px -2px rgba(0, 0, 0, 0.14),
    0 28px 48px -16px rgba(0, 130, 70, 0.45);
}

/* Centre card — true horizontal centring */
.why-card-centre {
  transform: translateX(-50%);
}
.why-card-centre:hover {
  transform: translateX(-50%) translateY(-3px);
}

/* Right-aligned cards — anchored to the right edge so the right margin
   always matches the left margin regardless of card width clamping. */
.why-card-right {
  left: auto;
  right: 2%;
}

/* The large faded number — anchors the left column, horizontally centered within it.
   Vertically aligns with the content column (centered together via grid). */
.why-card-num {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 44px;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.04em;
  /* Faded green-tinted cream — readable but recedes behind the headline */
  color: rgba(220, 240, 220, 0.42);
  font-feature-settings: "tnum" 1, "lnum" 1;
  /* Centered horizontally within its column */
  text-align: center;
  width: 100%;
  margin: 0;
}

/* Content column — headline + body, vertically centered with the number */
.why-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Headline — solid white, properly sized to lead */
.why-card-head {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.014em;
  margin: 0;
  color: #ffffff;
}

/* Detail — soft cream */
.why-card-detail {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  font-weight: 400;
}

/* ---------- Closing credibility statement ---------- */
.why-credibility {
  max-width: 720px;
  margin: clamp(56px, 7vw, 88px) auto 0;
  text-align: center;
}
.why-credibility-rule {
  width: 32px;
  height: 2px;
  background: var(--green, #16A34A);
  margin: 0 auto clamp(20px, 2.5vw, 28px);
  border-radius: 2px;
}
.why-credibility-text {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  font-weight: 400;
  color: var(--ink-soft, #5a5550);
  margin: 0;
  letter-spacing: -0.005em;
}
.why-credibility-emphasis {
  color: var(--ink, #1a1f1b);
  font-weight: 500;
  display: block;
  margin-top: 6px;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .why-card {
    width: 26%;
    min-width: 195px;
    max-width: 245px;
    height: 188px;
    padding: 18px 18px 18px 16px;
    column-gap: 12px;
  }
  .why-card-num { font-size: 38px; }
  .why-card-head { font-size: 14px; }
  .why-card-detail { font-size: 11.5px; }
}

/* ---------- Mobile — stack cards below the photograph ---------- */
@media (max-width: 760px) {
  .why-canvas {
    aspect-ratio: 4 / 3;
    max-height: none;
    background: transparent;
    border-radius: 8px;
  }
  .why-canvas-img {
    position: relative;
    border-radius: 8px;
  }
  .why-card {
    position: static;
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin: 12px 0 0;
    transform: none;
    padding: 18px 20px;
    /* Mobile cards stack below photograph — solid colour for legibility */
    background: #005C2F;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .why-card-centre,
  .why-card-centre:hover { transform: none; }
  .why-card:first-of-type { margin-top: 24px; }
  .why-card-num { font-size: 40px; }
  .why-card-head { font-size: 16px; }
  .why-card-detail { font-size: 13px; }
}


/* ============================================================
   ============================================================
   PAGE: PROFILES — interactive flip cards + accessibility
   Migrated from inline <style> in profiles.html.
   ============================================================
   ============================================================ */

/* ========= Profiles page — additions on top of styles.css ========= */

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink, #1a1f1b);
  color: #fff;
  padding: 12px 20px;
  z-index: 100;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* Visible focus indicator on flip cards */
.flip-card:focus-visible {
  outline: 2px solid var(--green, #2d7a51);
  outline-offset: 4px;
  border-radius: 12px;
}

/* ========= Smoother flip animation =========
   Overrides any base transition in styles.css.
   - easeOutQuint curve: gentle start, smooth finish, no overshoot
   - 720ms duration: long enough to feel premium, short enough not to feel sluggish
   - subtle hover lift + shadow elevation while flipped, for depth */
.flip-card {
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.flip-card:hover {
  transform: translateY(-3px);
}

.flip-card-inner {
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 720ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Slightly deeper shadow when the card is flipped — adds perceived depth */
.flip-card.is-flipped .flip-card-inner {
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.10);
}

/* Don't lift the card while focused via keyboard — outline already shows focus */
.flip-card:focus-visible:not(:hover) {
  transform: none;
}

/* "How to read this" framing strip */
.profiles-framing {
  background: #fff;
  padding: clamp(60px, 8vw, 100px) 0;
}
.profiles-framing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 28px);
  max-width: 1040px;
  margin: 0 auto;
}
.profiles-framing-item {
  padding: clamp(22px, 2.4vw, 30px);
  background: #fff;
  border: 1px solid var(--green-soft);
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 6px 20px -8px rgba(15, 23, 42, 0.08);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.profiles-framing-item:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 8px rgba(15, 23, 42, 0.06),
    0 14px 28px rgba(15, 23, 42, 0.08);
  border-color: var(--green);
}
.profiles-framing-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.profiles-framing-text {
  text-align: center;
}
.profiles-framing-text strong {
  display: block;
  font-family: var(--display, 'Geist', sans-serif);
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 600;
  color: var(--ink, #1a1f1b);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.profiles-framing-text span {
  display: block;
  font-size: 14px;
  color: var(--ink-soft, #5a625b);
  line-height: 1.6;
}
@media (max-width: 720px) {
  .profiles-framing-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* Reduce-motion support — disable transitions and hover lift entirely */
@media (prefers-reduced-motion: reduce) {
  .flip-card,
  .flip-card-inner {
    transition: none !important;
  }
  .flip-card:hover {
    transform: none !important;
  }
}

/* ===== NETWORK FORM ===== */
/* Used on network.html — buyer-referrer signup form.
   Global rules (no body-class scoping) since the class names are unique. */

.network-form-wrap {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--green-soft);
  border-radius: 12px;
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 6px 20px rgba(15, 23, 42, 0.05);
}

.network-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.network-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 640px) {
  .network-form-row { grid-template-columns: 1fr; }
}

.network-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.network-form-field-full {
  width: 100%;
}

.network-form-label {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #0F172A);
  letter-spacing: -0.005em;
}

.network-form input[type="text"],
.network-form input[type="email"],
.network-form input[type="tel"],
.network-form select,
.network-form textarea {
  font-family: inherit;
  font-size: 15px;
  color: var(--ink, #0F172A);
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}
.network-form input:focus,
.network-form select:focus,
.network-form textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0, 191, 98, 0.15);
}
.network-form textarea {
  resize: vertical;
  min-height: 96px;
  font-family: inherit;
  line-height: 1.55;
}
.network-form select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' stroke='%23475569' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.network-form input:disabled,
.network-form select:disabled,
.network-form textarea:disabled {
  background: rgba(15, 23, 42, 0.03);
  color: rgba(15, 23, 42, 0.5);
  cursor: not-allowed;
}

.network-form-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}
.network-form-actions .btn { font-size: 14px; }

.network-form-note {
  font-size: 12.5px;
  color: rgba(15, 23, 42, 0.55);
  line-height: 1.55;
  margin: 0;
}

.network-form-success {
  background: var(--green-tint);
  border: 1px solid var(--green-soft);
  color: var(--green-deep);
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 14.5px;
  line-height: 1.55;
}
.network-form-success strong {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--green-deep);
}

/* Step number on cards in network.html — reuses existing benefit-card layout. */
.benefit-card .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--green);
  color: #fff;
  border-radius: 50%;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
}

/* Ghost button variant — secondary CTA with no fill */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid var(--green);
  border-radius: 100px;
  background: transparent;
  color: var(--green);
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  cursor: pointer;
}
.btn-ghost:hover {
  background: var(--green);
  color: #fff;
}

/* ===== DISABLED BUTTON VARIANT ===== */
/* Used on buyer-match.html — Results button greys out until assessment is complete */
.btn-disabled {
  background: rgba(15, 23, 42, 0.15) !important;
  color: rgba(15, 23, 42, 0.45) !important;
  cursor: not-allowed !important;
  pointer-events: auto;
  border-color: rgba(15, 23, 42, 0.15) !important;
}
.btn-disabled:hover {
  background: rgba(15, 23, 42, 0.15) !important;
  transform: none !important;
}

/* ===== "WHERE WE DRAW THE LINE" — homepage 3rd section: 4 declaration cards =====
   Used on index.html. Card layout reuses step-card visual rhythm. */
.fit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}
@media (max-width: 1100px) {
  .fit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .fit-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
}

.fit-card {
  display: block;
  padding: clamp(22px, 2.4vw, 30px);
  background: #fff;
  border: 1px solid var(--green-soft);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.fit-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.06), 0 14px 28px rgba(15, 23, 42, 0.08);
  border-color: var(--green);
}

/* Static variant — declaration cards with no hover lift since they're not links */
.fit-card-static {
  cursor: default;
}
.fit-card-static:hover {
  transform: none;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  border-color: var(--green-soft);
}

.fit-card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--green-tint);
  color: var(--green);
  border-radius: 50%;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

.fit-card h3 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ink);
}
.fit-card p {
  font-size: 14px;
  color: rgba(15, 23, 42, 0.72);
  line-height: 1.55;
  margin: 0;
}

.fit-cta {
  text-align: center;
  margin-top: clamp(32px, 4vw, 48px);
}

/* ===== "WHERE YOU ARE RIGHT NOW" — homepage 3rd section: buyer-voice quotes =====
   Distinct visual treatment from .fit-card and .step-card — softer, quote-like,
   with a large oversized quote-mark accent. Used on index.html. */
.voice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  margin-bottom: clamp(36px, 4.5vw, 56px);
}
@media (max-width: 900px) {
  .voice-grid { grid-template-columns: 1fr; max-width: 640px; margin-left: auto; margin-right: auto; }
}

.voice-card {
  position: relative;
  padding: clamp(28px, 3vw, 36px) clamp(24px, 2.6vw, 32px);
  background: var(--green-tint);
  border: 1px solid var(--green-soft);
  border-radius: 12px;
  overflow: hidden;
}

.voice-card-quote-mark {
  position: absolute;
  top: -8px;
  left: 14px;
  font-family: var(--display);
  font-size: 96px;
  font-weight: 700;
  color: var(--green);
  opacity: 0.18;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.voice-card h3 {
  position: relative;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--ink);
  font-style: italic;
}

.voice-card p {
  position: relative;
  font-size: 14.5px;
  color: rgba(15, 23, 42, 0.72);
  line-height: 1.6;
  margin: 0;
}

.voice-closing {
  text-align: center;
  font-family: var(--display);
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 0;
  padding: clamp(8px, 1.2vw, 16px) 0;
}
.voice-closing .accent {
  display: inline-block;
}

/* ===== "PROFILES + PILLARS = BUYER PROFILE" — framework equation visual =====
   Premium centered visual on profiles.html framing section.
   Three blocks separated by + and = pill operators.
   Each block has a top "visual" zone (image-ready, large numeral, or icon)
   and a body zone with label + subtitle. Result block has stronger green treatment. */
.framework-equation {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(14px, 1.8vw, 24px);
  margin: clamp(40px, 5vw, 60px) auto clamp(48px, 5.5vw, 70px);
  max-width: 980px;
}

.framework-block {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  background: #fff;
  border: 1px solid var(--green-soft);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 22px -8px rgba(15, 23, 42, 0.08);
}

/* Visual zone — top portion of card, image-ready */
.framework-block-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(180px, 22vw, 260px);
  background: var(--green-tint, #f0fdf4);
  border-bottom: 1px solid var(--green-soft);
  overflow: hidden;
}

/* Image fills the visual zone with cover crop — premium full-bleed look */
.framework-block-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.framework-block-num {
  font-family: var(--display);
  font-size: clamp(56px, 7vw, 84px);
  font-weight: 700;
  color: var(--green);
  line-height: 1;
  letter-spacing: -0.04em;
  text-shadow: 0 4px 18px rgba(0, 191, 98, 0.18);
}

.framework-block-icon {
  width: clamp(56px, 6vw, 72px);
  height: clamp(56px, 6vw, 72px);
  color: var(--green);
  filter: drop-shadow(0 4px 12px rgba(0, 191, 98, 0.18));
}

/* Body zone — label + sub */
.framework-block-body {
  padding: clamp(20px, 2.4vw, 28px) clamp(14px, 1.8vw, 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
}

.framework-block-label {
  font-family: var(--display);
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.framework-block-label .accent {
  display: inline-block;
  font-size: 1.4em;
  font-weight: 700;
  color: var(--green);
  letter-spacing: -0.02em;
  margin-right: 4px;
  vertical-align: -1px;
}

.framework-block-sub {
  font-size: clamp(13px, 1.3vw, 14.5px);
  color: rgba(15, 23, 42, 0.6);
  font-style: italic;
  line-height: 1.4;
}

/* Result block — anchor the outcome with stronger green */
.framework-block-result {
  border-color: var(--green);
  box-shadow:
    0 2px 6px rgba(0, 191, 98, 0.08),
    0 16px 36px -10px rgba(0, 191, 98, 0.22);
}
.framework-block-result .framework-block-visual {
  background: var(--green-tint, #f0fdf4);
}
.framework-block-result .framework-block-label {
  color: var(--green-deep, #14532d);
}

/* Operator — circular green pill, no longer floating text */
.framework-op {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
}
.framework-op span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(38px, 4vw, 48px);
  height: clamp(38px, 4vw, 48px);
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 4px 14px -3px rgba(0, 191, 98, 0.45);
}

/* Mobile: stack vertically with pill operators between rows */
@media (max-width: 720px) {
  .framework-equation {
    flex-direction: column;
    gap: clamp(8px, 2vw, 12px);
    max-width: 380px;
  }
  .framework-op {
    padding: 0;
  }
  .framework-block-visual {
    height: clamp(110px, 30vw, 140px);
  }
}

/* Override italic on voice cards when used outside buyer-voice context (e.g. profiles framing).
   The green-tint + quote-mark visual is shared, but italic only fits literal buyer quotes. */
.profiles-framing .voice-card h3 {
  font-style: normal;
}

/* ===== Framework explainer notes on profiles.html =====
   Minimal editorial layout — no boxes, no borders, no card frames.
   Just a thin green left-edge accent line, an oversized numeric eyebrow,
   and clean typography. Aligned under the .framework-equation row above. */
.framework-notes {
  display: grid;
  grid-template-columns: 1fr clamp(38px, 4vw, 48px) 1fr clamp(38px, 4vw, 48px) 1fr;
  column-gap: clamp(14px, 1.8vw, 24px);
  max-width: 980px;
  margin: clamp(40px, 5vw, 56px) auto 0;
}
.framework-notes > .framework-note:nth-of-type(1) { grid-column: 1; }
.framework-notes > .framework-note:nth-of-type(2) { grid-column: 3; }
.framework-notes > .framework-note:nth-of-type(3) { grid-column: 5; }

.framework-note {
  position: relative;
  padding: 4px 0 4px clamp(18px, 1.8vw, 24px);
  border-left: 2px solid var(--green);
}

.framework-note-eyebrow {
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  color: var(--green);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: clamp(12px, 1.4vw, 18px);
}

.framework-note h3 {
  font-family: var(--display);
  font-size: clamp(18px, 1.8vw, 20px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.25;
}

.framework-note p {
  font-size: clamp(14px, 1.4vw, 15.5px);
  color: rgba(15, 23, 42, 0.7);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 900px) {
  .framework-notes {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: clamp(24px, 4vw, 32px);
    max-width: 640px;
  }
  .framework-notes > .framework-note:nth-of-type(1),
  .framework-notes > .framework-note:nth-of-type(2),
  .framework-notes > .framework-note:nth-of-type(3) {
    grid-column: 1;
  }
}

/* ===== Back of flip-card header — mini avatar + name + thin divider line =====
   Used on profiles.html. Echoes the front's avatar so the buyer keeps context
   on which type they're reading, with a thin green-soft divider below. */
body.page-profiles .flip-card-back-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1.5px solid rgba(0, 130, 70, 0.45);
}
body.page-profiles .flip-card-back-avatar {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--green-tint, #F0FDF4);
}
body.page-profiles .flip-card-back-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Reset the name margin since we're now in a header row */
body.page-profiles .flip-card-back-header .flip-card-name {
  margin: 0;
  text-align: left;
}

/* ===== Pull-quote line in middle of back card =====
   Fills the band between intro paragraph and the 3 check boxes.
   Italic, slightly larger than body, green-accent left border bar. */
body.page-profiles .flip-card-pull {
  position: relative;
  margin: 4px 0 16px;
  padding: 10px 0 10px 14px;
  border-left: 3px solid var(--green);
  font-family: var(--display);
  font-size: 14.5px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -0.005em;
  min-height: calc(14.5px * 1.5 * 2 + 20px);
  display: flex;
  align-items: center;
}

/* ===== Global "Flip all cards" toggle =====
   Sits above the 6-card grid on profiles.html. Toggles all cards together. */
body.page-profiles .profiles-flip-all-wrap {
  display: flex;
  justify-content: center;
  margin: 0 0 clamp(24px, 3vw, 36px);
}

body.page-profiles .profiles-flip-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 24px;
  background: var(--green);
  color: #fff;
  border: 1.5px solid var(--green);
  border-radius: 100px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    0 2px 6px rgba(0, 191, 98, 0.20),
    0 8px 22px -6px rgba(0, 191, 98, 0.30);
  transition: all 0.25s ease;
}

body.page-profiles .profiles-flip-all:hover {
  background: var(--green-hover);
  border-color: var(--green-hover);
  transform: translateY(-1px);
  box-shadow:
    0 4px 12px rgba(0, 191, 98, 0.28),
    0 14px 32px -6px rgba(0, 191, 98, 0.40);
}

body.page-profiles .profiles-flip-all:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.30);
}

body.page-profiles .profiles-flip-all[aria-pressed="true"] {
  background: var(--green-deep, #14532d);
  border-color: var(--green-deep, #14532d);
}
body.page-profiles .profiles-flip-all[aria-pressed="true"]:hover {
  background: var(--green-hover);
  border-color: var(--green-hover);
}

/* ===== Journey thumb badge — premium overlay top-left on the image =====
   Used on guide.html for labels like "For buyers moving forward" and "Optional"
   that sit on the step's image rather than inside the text block. */
body.page-stages .journey-thumb-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-block;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--green-deep, #14532d);
  border-radius: 100px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 8px 20px -4px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

/* Green variant of the journey thumb badge — for "Optional" label on Step 06 */
body.page-stages .journey-thumb-badge-green {
  background: var(--green-tint, #DCFCE7);
  color: var(--green-deep, #14532d);
}

/* ===== Benefits page — editorial numbered notes layout =====
   Used on benefits.html for both "Why people buy off-plan" and
   "Why the full picture matters" sections. Minimal, no boxes, just
   a thin green left-edge line and an oversized green numeral. */
body.page-considerations .benefits-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(28px, 3.5vw, 48px);
  row-gap: clamp(36px, 4.5vw, 56px);
  max-width: 1180px;
  margin: 0 auto;
}

body.page-considerations .benefits-note {
  position: relative;
  padding: 4px 0 4px clamp(18px, 1.8vw, 24px);
  border-left: 2px solid var(--green);
}

body.page-considerations .benefits-note-num {
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  color: var(--green);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: clamp(12px, 1.4vw, 18px);
}

body.page-considerations .benefits-note h3 {
  font-family: var(--display);
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.25;
}

body.page-considerations .benefits-note p {
  font-size: clamp(14px, 1.4vw, 15.5px);
  color: rgba(15, 23, 42, 0.7);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 900px) {
  body.page-considerations .benefits-notes {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: clamp(28px, 5vw, 36px);
    max-width: 640px;
  }
}

/* ===== Benefits page — alternating side-by-side rows (Option A) =====
   Each benefit is a full-width row with image on one side, text on the other.
   Rows alternate direction (image-left, image-right, image-left...) for
   editorial rhythm. Used on benefits.html for both "Why people buy off-plan"
   and "Why the full picture matters" sections. */
body.page-considerations .benefits-rows {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 7vw, 96px);
  max-width: 1100px;
  margin: 0 auto;
}

body.page-considerations .benefits-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

body.page-considerations .benefits-row-reverse {
  direction: rtl;
}

body.page-considerations .benefits-row-reverse > * {
  direction: ltr;
}

body.page-considerations .benefits-row-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--green-tint, #DCFCE7);
}

body.page-considerations .benefits-row-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.page-considerations .benefits-row:hover .benefits-row-image img {
  transform: scale(1.03);
}

body.page-considerations .benefits-row-text {
  padding: 8px 0 8px clamp(20px, 2vw, 28px);
  border-left: 2px solid var(--green);
}

body.page-considerations .benefits-row-num {
  font-family: var(--display);
  font-size: clamp(32px, 3.4vw, 42px);
  font-weight: 700;
  color: var(--green);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: clamp(14px, 1.6vw, 20px);
}

body.page-considerations .benefits-row-text h3 {
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1.2;
}

body.page-considerations .benefits-row-text p {
  font-size: clamp(15px, 1.5vw, 16.5px);
  color: rgba(15, 23, 42, 0.7);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 900px) {
  body.page-considerations .benefits-rows {
    gap: clamp(40px, 6vw, 56px);
  }
  body.page-considerations .benefits-row,
  body.page-considerations .benefits-row-reverse {
    grid-template-columns: 1fr;
    gap: 24px;
    direction: ltr;
  }
}

/* ===== Benefits page — Section 2 ("Why the full picture matters") =====
   Compact 3-column grid with image-top + numbered cards.
   Deliberately distinct from Section 1's full-width alternating rows.
   Signals "considerations" rather than "headline benefits". */
body.page-considerations .reality-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(20px, 2.5vw, 32px);
  row-gap: clamp(36px, 4vw, 52px);
  max-width: 1180px;
  margin: 0 auto;
}

body.page-considerations .reality-card {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.6vw, 20px);
}

body.page-considerations .reality-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: 12px;
  overflow: hidden;
  background: var(--green-tint, #DCFCE7);
}

body.page-considerations .reality-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.page-considerations .reality-card:hover .reality-card-image img {
  transform: scale(1.04);
}

body.page-considerations .reality-card-num {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--green);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 11px;
  border-radius: 100px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

body.page-considerations .reality-card-body {
  padding-left: clamp(14px, 1.4vw, 18px);
  border-left: 2px solid var(--green);
}

body.page-considerations .reality-card-body h3 {
  font-family: var(--display);
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.3;
}

body.page-considerations .reality-card-body p {
  font-size: clamp(13.5px, 1.35vw, 14.5px);
  color: rgba(15, 23, 42, 0.7);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 980px) {
  body.page-considerations .reality-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  body.page-considerations .reality-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
  }
}

/* ============================================================
   TYPOGRAPHY SYSTEM — site-wide unified scale
   ============================================================
   Applied as the last layer so it overrides accumulated drift
   across pages without rewriting individual rules.
   
   Canonical scale:
   - H1 (hero):     clamp(36px, 5.5vw, 60px)
   - H2 (section):  clamp(28px, 3.6vw, 42px)
   - H3 (card):     clamp(18px, 1.8vw, 22px)
   - Subtitle:      clamp(15px, 1.5vw, 17px)
   - Body:          clamp(14.5px, 1.4vw, 16px)
   - Eyebrow:       11px / uppercase / letter-spacing 0.14em
   ============================================================ */

/* H2 section headings — unified across all pages */
body.page-stages .stage-section-head h2,
body.page-considerations .stage-section-head h2,
body.page-profiles .section-head h2,
body.page-considerations .cons-calc .section-head h2,
body.page-stages .cta-band h2,
body.page-considerations .cta-band h2,
body.page-profiles .cta-band h2,
body.page-about .cta-band h2 {
  font-family: var(--display);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

/* H2 section titles when using .section-title class */
.section-title {
  font-family: var(--display);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

/* Section subtitles — unified */
.stage-section-subtitle,
.section-subtitle {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.7);
}

/* Eyebrow consistency */
.section-eyebrow {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
}

/* ===== Benefits page Section 2 — Text-led editorial layout (Layout Z) =====
   One large hero image at the top sets the mood, then 6 numbered text-only
   notes in a 2-column editorial grid below. Visually very distinct from
   Section 1's alternating image rows, signals "considerations / fine print"
   rather than "headline benefits". */

body.page-considerations .reality-hero {
  max-width: 1180px;
  margin: 0 auto clamp(48px, 6vw, 80px);
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 21 / 8;
  background: var(--green-tint, #DCFCE7);
  position: relative;
}

body.page-considerations .reality-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.page-considerations .reality-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0) 40%, rgba(0, 60, 30, 0.18) 100%);
  pointer-events: none;
}

body.page-considerations .reality-notes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(48px, 6vw, 80px);
  row-gap: clamp(40px, 5vw, 56px);
  max-width: 1080px;
  margin: 0 auto;
}

body.page-considerations .reality-note {
  position: relative;
  padding: 8px 0 8px clamp(22px, 2vw, 28px);
  border-left: 2px solid var(--green);
}

body.page-considerations .reality-note-num {
  font-family: var(--display);
  font-size: clamp(32px, 3.4vw, 42px);
  font-weight: 700;
  color: var(--green);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: clamp(14px, 1.6vw, 20px);
}

body.page-considerations .reality-note h3 {
  font-family: var(--display);
  font-size: clamp(19px, 1.9vw, 23px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 12px;
  line-height: 1.25;
}

body.page-considerations .reality-note p {
  font-size: clamp(14.5px, 1.45vw, 16px);
  color: rgba(15, 23, 42, 0.7);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 820px) {
  body.page-considerations .reality-notes {
    grid-template-columns: 1fr;
    max-width: 600px;
  }
  body.page-considerations .reality-hero {
    aspect-ratio: 16 / 9;
  }
}

/* ===== Benefits page Section 1 — Compressed 2-column card grid =====
   Replaces the alternating full-width rows with a denser layout that
   reduces total page scroll while still giving each benefit room to breathe. */

body.page-considerations .benefits-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(32px, 4vw, 56px);
  row-gap: clamp(40px, 4.5vw, 60px);
  max-width: 1100px;
  margin: 0 auto;
}

body.page-considerations .benefits-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.2vw, 28px);
  align-items: stretch;
}

body.page-considerations .benefits-card-image {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 180px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--green-tint, #DCFCE7);
}

body.page-considerations .benefits-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.page-considerations .benefits-card:hover .benefits-card-image img {
  transform: scale(1.04);
}

body.page-considerations .benefits-card-text {
  padding: 4px 0 4px clamp(18px, 1.8vw, 22px);
  border-left: 2px solid var(--green);
}

body.page-considerations .benefits-card-num {
  font-family: var(--display);
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 700;
  color: var(--green);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: clamp(10px, 1.2vw, 14px);
}

body.page-considerations .benefits-card-text h3 {
  font-family: var(--display);
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.25;
}

body.page-considerations .benefits-card-text p {
  font-size: clamp(13.5px, 1.35vw, 14.5px);
  color: rgba(15, 23, 42, 0.7);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 980px) {
  body.page-considerations .benefits-cards-grid {
    grid-template-columns: 1fr;
    max-width: 640px;
  }
}

@media (max-width: 560px) {
  body.page-considerations .benefits-card {
    grid-template-columns: 1fr;
  }
  body.page-considerations .benefits-card-text {
    padding-left: 16px;
  }
}

/* ===== Hero anchor links — quick-jump navigation in the hero =====
   Helps users skip directly to the calculator (the page's most valuable
   interactive element) without scrolling through the full benefits section. */

body.page-considerations .hero-anchors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(28px, 3vw, 40px);
}

body.page-considerations .hero-anchor {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 130, 70, 0.15);
  border-radius: 100px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

body.page-considerations .hero-anchor:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 130, 70, 0.4);
  transform: translateY(-1px);
}

body.page-considerations .hero-anchor-primary {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

body.page-considerations .hero-anchor-primary:hover {
  background: var(--green-deep, #14532d);
  border-color: var(--green-deep, #14532d);
  color: #fff;
}

@media (max-width: 540px) {
  body.page-considerations .hero-anchors {
    gap: 8px;
  }
  body.page-considerations .hero-anchor {
    font-size: 12px;
    padding: 9px 14px;
  }
}

/* ===== Benefits page Section 2 — Cards-on-canvas pattern (mirror of index .why-canvas) =====
   Uses the same visual treatment as the homepage "Where we differ" section:
   a large photograph as the canvas with dark green semi-transparent cards
   positioned over it. Creates visual continuity between index and benefits.
   5 cards (Costs, Handover delays, Snagging, Market timing, Missed payments).
   Currency exposure dropped — least actionable of the 6 considerations. */

body.page-considerations .reality-canvas-section {
  padding: clamp(80px, 9vw, 140px) 0 clamp(80px, 9vw, 140px);
  background: var(--bg);
}

body.page-considerations .reality-canvas {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  aspect-ratio: 4 / 3;
  max-height: 760px;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f1e8;
}

body.page-considerations .reality-canvas-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
  /* Warm beige tint via filter — shifts cool Marina blues toward the
     site's warm palette (matches index hero, calculator section tints). */
  filter: sepia(0.18) saturate(0.85) brightness(0.92);
}

/* Soft overlay on the canvas — uses a beige tone to harmonize with the
   site's warm palette and gently dims the image so the green semi-transparent
   cards above remain readable. */
body.page-considerations .reality-canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 14, 6, 0.18) 0%, rgba(20, 14, 6, 0.28) 50%, rgba(20, 14, 6, 0.18) 100%),
    rgba(245, 230, 200, 0.12);
  z-index: 1;
  pointer-events: none;
}

/* Cards — same dark green pattern as the homepage */
body.page-considerations .reality-canvas-card {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  width: 28%;
  min-width: 260px;
  max-width: 340px;
  height: auto;
  min-height: 220px;
  background: rgba(0, 130, 70, 0.60);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  border-radius: 8px;
  padding: 22px 24px;
  box-shadow:
    0 4px 12px -2px rgba(0, 0, 0, 0.10),
    0 18px 36px -12px rgba(0, 130, 70, 0.30);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 16px;
  align-items: center;
  box-sizing: border-box;
}

body.page-considerations .reality-canvas-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 6px 16px -2px rgba(0, 0, 0, 0.14),
    0 28px 48px -16px rgba(0, 130, 70, 0.45);
}

body.page-considerations .reality-canvas-card-centre {
  transform: translateX(-50%);
}
body.page-considerations .reality-canvas-card-centre:hover {
  transform: translateX(-50%) translateY(-3px);
}

body.page-considerations .reality-canvas-card-right {
  left: auto;
  right: 2%;
}

/* Bottom-row cards anchor from the canvas bottom (not the top).
   This keeps the gap from canvas bottom equal to the side margin (2%),
   regardless of how tall a card grows to fit its content. */
body.page-considerations .reality-canvas-card-bottom {
  top: auto;
  bottom: 2%;
}

body.page-considerations .reality-canvas-card-num {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 44px;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: rgba(220, 240, 220, 0.42);
  font-feature-settings: "tnum" 1, "lnum" 1;
  text-align: center;
  width: 100%;
  margin: 0;
}

body.page-considerations .reality-canvas-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.page-considerations .reality-canvas-card-head {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0;
  color: #ffffff;
  white-space: nowrap;
}

body.page-considerations .reality-canvas-card-detail {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  font-weight: 400;
}

/* Mobile — stack cards below the image (mirrors index .why-canvas pattern) */
@media (max-width: 900px) {
  body.page-considerations .reality-canvas {
    aspect-ratio: 4 / 3;
    max-height: none;
    background: transparent;
  }
  body.page-considerations .reality-canvas-img {
    position: relative;
    border-radius: 8px;
  }
  body.page-considerations .reality-canvas-card {
    position: static;
    width: auto;
    max-width: 100%;
    min-width: 0;
    height: auto;
    margin: 12px 0 0;
    transform: none;
    padding: 18px 20px;
    background: #005C2F;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.page-considerations .reality-canvas-card-centre,
  body.page-considerations .reality-canvas-card-centre:hover {
    transform: none;
  }
  body.page-considerations .reality-canvas-card:first-of-type {
    margin-top: 24px;
  }
  body.page-considerations .reality-canvas-card:hover {
    transform: translateY(-2px);
  }
}

/* ============================================================
   ABOUT page — Network section + Team v2 additions (May 2026)
   ============================================================ */

/* Network section: tinted background to separate from neighbouring sections */
body.page-about .network-section {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Authorised Agent band: centered card, DAMAC prominent */
body.page-about .authorised-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 520px;
  margin: 0 auto clamp(48px, 6vw, 72px);
  padding: clamp(30px, 3.5vw, 42px) clamp(24px, 3vw, 36px);
  background: var(--bg);
  border: 1px solid var(--green-soft, rgba(22,163,74,0.25));
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(22,163,74,0.06), 0 18px 40px -18px rgba(22,163,74,0.18);
}

body.page-about .authorised-band-eyebrow {
  display: inline-block;
  padding: 5px 13px;
  background: var(--bg-tint, rgba(22,163,74,0.06));
  border: 1px solid var(--green-soft, rgba(22,163,74,0.25));
  border-radius: 100px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--green, #16a34a);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--display, 'Geist', sans-serif);
  margin-bottom: 22px;
}

body.page-about .authorised-band-logo {
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

body.page-about .authorised-band-logo img {
  max-height: 56px;
  width: auto;
  display: block;
}

body.page-about .authorised-band-note {
  font-size: 14px;
  color: var(--ink-soft, #475569);
  line-height: 1.55;
  margin: 0;
  max-width: 44ch;
}

/* Watchlist band: 8-logo greyscale grid with hover-to-color */
body.page-about .watchlist-band {
  text-align: center;
}

body.page-about .watchlist-eyebrow {
  display: inline-block;
  padding: 5px 13px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-muted, #64748b);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--display, 'Geist', sans-serif);
  margin-bottom: 28px;
}

body.page-about .watchlist-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.5vw, 32px);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}

body.page-about .watchlist-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  min-height: 72px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

body.page-about .watchlist-cell:hover {
  border-color: var(--green-soft, rgba(22,163,74,0.3));
  transform: translateY(-1px);
}

body.page-about .watchlist-cell img {
  width: 100%;
  max-height: 36px;
  object-fit: contain;
  display: block;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

body.page-about .watchlist-cell:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

@media (max-width: 900px) {
  body.page-about .watchlist-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  body.page-about .watchlist-grid { grid-template-columns: repeat(2, 1fr); }
}

body.page-about .watchlist-note {
  font-size: 14px;
  color: var(--ink-soft, #475569);
  line-height: 1.6;
  margin: clamp(24px, 3vw, 32px) auto 0;
  max-width: 60ch;
}

body.page-about .watchlist-disclaimer {
  font-size: 11.5px;
  color: var(--ink-muted, #64748b);
  font-style: italic;
  letter-spacing: 0.005em;
  line-height: 1.6;
  margin: 14px auto 0;
  max-width: 68ch;
}

/* Team — initials avatar fallback (for Brandon, Majed) */
body.page-about .team-avatar.is-initials {
  background: linear-gradient(135deg, rgba(22,163,74,0.10), rgba(22,163,74,0.04));
  color: var(--green, #16a34a);
  font-family: var(--display, 'Geist', sans-serif);
  font-weight: 600;
  font-size: 36px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  line-height: 1;
}

body.page-about .team-card.is-ceo .team-avatar.is-initials {
  font-size: 44px;
}

/* Team — 5-column deputies grid (override existing 4-col rule) */
body.page-about .team-departments {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1100px) {
  body.page-about .team-departments {
    grid-template-columns: repeat(3, 1fr);
    max-width: 760px;
  }
}

@media (max-width: 640px) {
  body.page-about .team-departments {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 400px) {
  body.page-about .team-departments {
    grid-template-columns: 1fr;
    max-width: 320px;
  }
}

/* ============================================================
   ABOUT page v3 — Chapter system (May 2026)
   Replaces the v2 sections. Structure: hero → I. Principle (founder's
   letter) → II. People (team) → III. Network (DAMAC + watchlist).
   ============================================================ */

/* Chapter wrapper — base spacing */
body.page-about .about-chapter {
  padding: clamp(80px, 9vw, 130px) 0;
  position: relative;
}

body.page-about .about-chapter-tint {
  background: var(--bg-soft, #f8fafb);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Chapter head — roman numeral + italic kicker + title */
body.page-about .chapter-head {
  max-width: 760px;
  margin: 0 auto clamp(48px, 5vw, 72px);
  text-align: center;
}

body.page-about .chapter-numeral {
  font-family: 'Cormorant Garamond', 'Geist', serif;
  font-size: clamp(56px, 7vw, 88px);
  font-weight: 500;
  font-style: italic;
  line-height: 1;
  color: var(--green, #16a34a);
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  opacity: 0.85;
}

body.page-about .chapter-kicker {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(15px, 1.4vw, 18px);
  font-style: italic;
  color: var(--ink-soft, #475569);
  letter-spacing: 0.005em;
  margin-bottom: 14px;
  font-weight: 400;
}

body.page-about .chapter-title {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink, #0f172a);
  margin: 0;
}

/* Chapter prose — intro paragraphs for sections II and III */
body.page-about .chapter-prose {
  max-width: 720px;
  margin: 0 auto clamp(48px, 5vw, 68px);
  text-align: center;
}

body.page-about .chapter-prose p {
  font-size: clamp(15.5px, 1.4vw, 17px);
  line-height: 1.7;
  color: var(--ink-soft, #334155);
  margin: 0 0 16px;
}

body.page-about .chapter-prose p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   I. PRINCIPLE — Founder's Letter
   ============================================================ */

body.page-about .founder-letter {
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 56px);
  background: var(--bg, #ffffff);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.03), 0 30px 60px -28px rgba(15,23,42,0.10);
  position: relative;
}

/* Subtle paper-edge accent on left */
body.page-about .founder-letter::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 2px;
  background: var(--green, #16a34a);
  opacity: 0.5;
  border-radius: 0 2px 2px 0;
}

body.page-about .founder-letter p {
  font-size: clamp(16px, 1.5vw, 17.5px);
  line-height: 1.75;
  color: var(--ink, #1e293b);
  margin: 0 0 22px;
  font-weight: 400;
  letter-spacing: -0.005em;
}

body.page-about .founder-letter p em {
  font-style: italic;
  color: var(--ink, #0f172a);
}

body.page-about .letter-lede {
  margin-top: 0;
}

/* Drop cap on first paragraph */
body.page-about .drop-cap {
  float: left;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(58px, 6vw, 76px);
  line-height: 0.85;
  font-weight: 500;
  color: var(--green, #16a34a);
  margin: 6px 12px 0 0;
  padding: 0;
}

/* Pull quote */
body.page-about .letter-quote {
  margin: clamp(28px, 3.5vw, 40px) 0;
  padding: clamp(20px, 2.5vw, 28px) clamp(22px, 3vw, 32px);
  border-left: 3px solid var(--green, #16a34a);
  background: rgba(22, 163, 74, 0.04);
  border-radius: 0 8px 8px 0;
}

body.page-about .letter-quote em {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.5;
  color: var(--ink, #1e293b);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.005em;
}

/* Sign-off block */
body.page-about .letter-signoff {
  margin-top: clamp(32px, 4vw, 44px);
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--line);
}

body.page-about .letter-signoff-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 2.2vw, 30px);
  font-style: italic;
  font-weight: 500;
  color: var(--ink, #0f172a);
  letter-spacing: 0.005em;
  line-height: 1.1;
  margin-bottom: 6px;
}

body.page-about .letter-signoff-role {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted, #64748b);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ============================================================
   III. NETWORK — Authorised band + watchlist refinements
   ============================================================ */

body.page-about .authorised-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 560px;
  margin: 0 auto clamp(56px, 6vw, 80px);
  padding: clamp(36px, 4vw, 52px) clamp(28px, 3.5vw, 44px);
  background: var(--bg, #ffffff);
  border: 1px solid rgba(22,163,74,0.30);
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(22,163,74,0.05), 0 24px 50px -20px rgba(22,163,74,0.22);
  position: relative;
}

body.page-about .authorised-band-eyebrow {
  display: inline-block;
  padding: 5px 13px;
  background: rgba(22,163,74,0.07);
  border: 1px solid rgba(22,163,74,0.28);
  border-radius: 100px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--green, #16a34a);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--display, 'Geist', sans-serif);
  margin-bottom: 26px;
}

body.page-about .authorised-band-logo {
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
}

body.page-about .authorised-band-logo img {
  max-height: 60px;
  width: auto;
  display: block;
}

body.page-about .authorised-band-headline {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 600;
  color: var(--ink, #0f172a);
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

body.page-about .authorised-band-note {
  font-size: 14.5px;
  color: var(--ink-soft, #475569);
  line-height: 1.65;
  margin: 0;
  max-width: 46ch;
}

/* Watchlist refinements */
body.page-about .watchlist-band {
  text-align: center;
  max-width: 1080px;
  margin: 0 auto;
}

body.page-about .watchlist-eyebrow {
  display: inline-block;
  padding: 5px 13px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-muted, #64748b);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--display, 'Geist', sans-serif);
  margin-bottom: 18px;
}

body.page-about .watchlist-lede {
  font-size: 14.5px;
  color: var(--ink-soft, #475569);
  line-height: 1.65;
  margin: 0 auto clamp(28px, 3vw, 36px);
  max-width: 56ch;
}

body.page-about .watchlist-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.5vw, 28px);
  align-items: center;
}

body.page-about .watchlist-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 14px;
  background: var(--bg, #ffffff);
  border: 1px solid var(--line);
  border-radius: 12px;
  min-height: 80px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

body.page-about .watchlist-cell:hover {
  border-color: rgba(22,163,74,0.30);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px rgba(15,23,42,0.10);
}

body.page-about .watchlist-cell img {
  width: 100%;
  max-height: 38px;
  object-fit: contain;
  display: block;
  filter: grayscale(100%);
  opacity: 0.58;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

body.page-about .watchlist-cell:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

@media (max-width: 900px) {
  body.page-about .watchlist-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 580px) {
  body.page-about .watchlist-grid { grid-template-columns: repeat(2, 1fr); }
}

body.page-about .watchlist-disclaimer {
  font-size: 11.5px;
  color: var(--ink-muted, #64748b);
  font-style: italic;
  letter-spacing: 0.005em;
  line-height: 1.65;
  margin: clamp(22px, 2.8vw, 32px) auto 0;
  max-width: 70ch;
}

/* ============================================================
   II. PEOPLE — team grid refinements (5-col deputies + initials avatar)
   ============================================================ */

body.page-about .team-avatar.is-initials {
  background: linear-gradient(135deg, rgba(22,163,74,0.10), rgba(22,163,74,0.04));
  color: var(--green, #16a34a);
  font-family: var(--display, 'Geist', sans-serif);
  font-weight: 600;
  font-size: 36px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  line-height: 1;
}

body.page-about .team-card.is-ceo .team-avatar.is-initials {
  font-size: 44px;
}

body.page-about .team-departments {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1100px) {
  body.page-about .team-departments {
    grid-template-columns: repeat(3, 1fr);
    max-width: 760px;
  }
}

@media (max-width: 640px) {
  body.page-about .team-departments {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 400px) {
  body.page-about .team-departments {
    grid-template-columns: 1fr;
    max-width: 320px;
  }
}

/* ============================================================
   ABOUT v3.1 — Letterhead Record (Offices + Agent Network)
   Sits inside .founder-letter, below .letter-signoff
   ============================================================ */

body.page-about .letter-record {
  margin-top: clamp(28px, 3.5vw, 38px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 28px);
}

body.page-about .letter-record-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.page-about .letter-record-label {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-muted, #64748b);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

body.page-about .letter-record-count {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted, #94a3b8);
}

body.page-about .letter-record-value {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink, #0f172a);
  letter-spacing: -0.005em;
  line-height: 1.6;
}

body.page-about .letter-record-mark {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 13.5px;
  color: var(--green, #16a34a);
  letter-spacing: 0;
}

body.page-about .letter-record-geo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

body.page-about .letter-record-geo-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dotted rgba(15,23,42,0.06);
}

body.page-about .letter-record-geo-row:last-child {
  border-bottom: none;
}

body.page-about .letter-record-geo-tag {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--green, #16a34a);
  letter-spacing: 0.01em;
  font-weight: 500;
}

body.page-about .letter-record-geo-list {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #1e293b);
  line-height: 1.55;
  letter-spacing: -0.005em;
}

@media (max-width: 580px) {
  body.page-about .letter-record-geo-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 0;
  }
  body.page-about .letter-record-geo-tag {
    font-size: 13px;
  }
}

/* ============================================================
   ABOUT v3.2 — Section-tint variant (matches site pattern)
   The chapter-system styles above remain in the file (harmless) but
   the page now uses .about-section / .about-section-tint to align
   with index/profiles/guide/benefits.
   ============================================================ */

body.page-about .about-section-tint {
  background: var(--bg-soft, #f8fafb);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ============================================================
   ABOUT v4 — "The firm / The team / The network" theme
   ============================================================ */

/* ---- 1. THE FIRM — Executive Summary block ---- */

body.page-about .exec-summary {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.6fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  max-width: 1120px;
  margin: 0 auto clamp(40px, 5vw, 60px);
}

body.page-about .exec-summary-photo {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

body.page-about .exec-summary-photo-frame {
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(22,163,74,0.08), rgba(22,163,74,0.02));
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 24px 50px -22px rgba(15,23,42,0.18);
  position: relative;
}

body.page-about .exec-summary-photo-frame::after {
  content: '';
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 36px;
  height: 2px;
  background: var(--green, #16a34a);
  border-radius: 2px;
}

body.page-about .exec-summary-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.page-about .exec-summary-photo-caption {
  padding: 0 4px;
}

body.page-about .exec-summary-photo-name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.15;
  color: var(--ink, #0f172a);
  letter-spacing: 0.005em;
  margin-bottom: 4px;
}

body.page-about .exec-summary-photo-role {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted, #64748b);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.page-about .exec-summary-content {
  padding-top: 8px;
}

body.page-about .exec-summary-content p {
  font-size: clamp(15.5px, 1.4vw, 17px);
  line-height: 1.75;
  color: var(--ink, #1e293b);
  margin: 0 0 18px;
  letter-spacing: -0.005em;
}

body.page-about .exec-summary-content p:last-child { margin-bottom: 0; }

body.page-about .exec-summary-content p em {
  font-style: italic;
  color: var(--ink, #0f172a);
  font-weight: 500;
}

body.page-about .exec-summary-statement {
  position: relative;
  padding: clamp(22px, 2.5vw, 30px) clamp(24px, 3vw, 36px);
  margin-bottom: clamp(24px, 3vw, 32px);
  background: linear-gradient(135deg, rgba(22,163,74,0.06), rgba(22,163,74,0.015));
  border-left: 3px solid var(--green, #16a34a);
  border-radius: 0 12px 12px 0;
}

body.page-about .exec-summary-statement-mark {
  position: absolute;
  top: -8px;
  left: 14px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 70px;
  line-height: 1;
  color: var(--green, #16a34a);
  opacity: 0.30;
  font-weight: 500;
  pointer-events: none;
}

body.page-about .exec-summary-statement p {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.55;
  font-style: italic;
  font-weight: 500;
  color: var(--ink, #1e293b);
  margin: 0;
  letter-spacing: 0.003em;
}

body.page-about .exec-summary-statement em {
  font-style: italic;
  color: var(--green, #16a34a);
  font-weight: 600;
}

@media (max-width: 820px) {
  body.page-about .exec-summary {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  body.page-about .exec-summary-photo {
    max-width: 320px;
    margin: 0 auto;
  }
}

/* ---- 2. THE FIRM — Fact strip (Offices + Agent Network) ---- */

body.page-about .firm-record {
  display: grid;
  grid-template-columns: 1fr auto 2.2fr;
  gap: clamp(20px, 2.5vw, 36px);
  align-items: start;
  max-width: 1120px;
  margin: 0 auto clamp(60px, 7vw, 90px);
  padding: clamp(24px, 3vw, 32px) clamp(24px, 3vw, 36px);
  background: var(--bg, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
}

body.page-about .firm-record-divider {
  width: 1px;
  align-self: stretch;
  background: var(--line);
}

body.page-about .firm-record-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.page-about .firm-record-label {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-muted, #64748b);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

body.page-about .firm-record-count {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--green, #16a34a);
}

body.page-about .firm-record-value {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--ink, #0f172a);
  letter-spacing: -0.005em;
}

body.page-about .firm-record-mark {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 13.5px;
  color: var(--green, #16a34a);
}

@media (max-width: 820px) {
  body.page-about .firm-record {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  body.page-about .firm-record-divider {
    width: 100%;
    height: 1px;
  }
}

/* ---- 3. THE FIRM — Three Pillars ---- */

body.page-about .pillars-section { margin-top: clamp(40px, 5vw, 60px); }

body.page-about .pillars-section-head {
  text-align: center;
  margin-bottom: clamp(36px, 4vw, 48px);
}

body.page-about .pillars-section-eyebrow {
  display: inline-block;
  padding: 5px 13px;
  background: var(--bg, #fff);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-muted, #64748b);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

body.page-about .pillars-section-title {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink, #0f172a);
  margin: 0;
}

body.page-about .pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 28px);
  max-width: 1120px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  body.page-about .pillars-grid { grid-template-columns: 1fr; max-width: 560px; }
}

body.page-about .pillar-card {
  background: var(--bg, #fff);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
}

body.page-about .pillar-card:hover {
  transform: translateY(-2px);
  border-color: rgba(22,163,74,0.25);
  box-shadow: 0 8px 24px -10px rgba(15,23,42,0.12);
}

body.page-about .pillar-card-visual {
  aspect-ratio: 5 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  color: var(--green, #16a34a);
}

body.page-about .pillar-card-visual svg { width: 100%; height: 100%; display: block; }

body.page-about .pillar-visual-1 { background: linear-gradient(135deg, #eaf3ec 0%, #c8dccd 100%); }
body.page-about .pillar-visual-2 { background: linear-gradient(135deg, #ecf0e8 0%, #d4d8c8 100%); }
body.page-about .pillar-visual-3 { background: linear-gradient(135deg, #e8efef 0%, #c8d4d4 100%); }

body.page-about .pillar-card-content {
  padding: clamp(22px, 2.6vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

body.page-about .pillar-card-number {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 500;
  color: var(--green, #16a34a);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

body.page-about .pillar-card-title {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink, #0f172a);
  margin: 0 0 4px;
  line-height: 1.25;
}

body.page-about .pillar-card-body {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft, #475569);
  margin: 0;
}

/* ============================================================
   ABOUT v4 — Team Tree (CEO → 3 Divisions → Reports)
   ============================================================ */

body.page-about .team-tree-v2 {
  max-width: 1120px;
  margin: 0 auto;
}

body.page-about .team-ceo-v2 {
  display: flex;
  justify-content: center;
}

body.page-about .team-ceo-v2 .team-card-v2 {
  max-width: 340px;
  background: var(--bg, #fff);
  border: 1px solid rgba(22,163,74,0.30);
  box-shadow: 0 1px 3px rgba(22,163,74,0.06), 0 18px 40px -20px rgba(22,163,74,0.20);
}

body.page-about .team-trunk {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(22,163,74,0.30), rgba(22,163,74,0.10));
  margin: 0 auto;
}

body.page-about .team-divisions {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: clamp(18px, 2.2vw, 26px);
  align-items: stretch;
  position: relative;
}

body.page-about .team-divisions::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 17%;
  right: 17%;
  height: 1px;
  background: rgba(22,163,74,0.18);
}

@media (max-width: 1000px) {
  body.page-about .team-divisions {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  body.page-about .team-divisions::before { display: none; }
  body.page-about .team-trunk { display: none; }
}

body.page-about .team-division {
  background: var(--bg, #fff);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(18px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

body.page-about .team-division::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  width: 1px;
  height: 20px;
  background: rgba(22,163,74,0.18);
  transform: translateX(-0.5px);
}

@media (max-width: 1000px) {
  body.page-about .team-division::before { display: none; }
}

body.page-about .team-division-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

body.page-about .team-division-marker {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green, #16a34a);
  flex-shrink: 0;
}

body.page-about .team-division-label {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink, #0f172a);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body.page-about .team-division-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

body.page-about .team-card-v2 {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: var(--bg-soft, #f8fafb);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.25s ease, background 0.25s ease;
}

body.page-about .team-card-v2:hover {
  border-color: rgba(22,163,74,0.25);
}

body.page-about .team-card-v2 .team-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(22,163,74,0.10), rgba(22,163,74,0.04));
}

body.page-about .team-card-v2 .team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.page-about .team-card-v2 .team-avatar.is-initials {
  font-size: 22px;
  font-weight: 600;
  color: var(--green, #16a34a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display, 'Geist', sans-serif);
  letter-spacing: -0.02em;
}

body.page-about .team-card-v2 .team-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

body.page-about .team-card-v2 .team-name {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink, #0f172a);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

body.page-about .team-card-v2 .team-role {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-soft, #475569);
  line-height: 1.35;
}

body.page-about .team-card-v2 .team-location {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted, #64748b);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

body.page-about .team-card-v2 .team-location .flag-icon {
  width: 14px;
  height: auto;
  border-radius: 1.5px;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.06);
  flex-shrink: 0;
}

/* Division head (Majed) — slightly elevated */
body.page-about .team-card-v2.is-division-head {
  background: var(--bg, #fff);
  border-color: rgba(22,163,74,0.25);
  box-shadow: 0 1px 2px rgba(15,23,42,0.03), 0 8px 20px -12px rgba(15,23,42,0.10);
}

/* CEO card */
body.page-about .team-card-v2.is-ceo-v2 .team-avatar {
  width: 60px;
  height: 60px;
}

body.page-about .team-card-v2.is-ceo-v2 {
  grid-template-columns: 60px 1fr;
}

body.page-about .team-card-v2.is-ceo-v2 .team-name {
  font-size: 16px;
}

/* Reports block (under Majed) */
body.page-about .team-reports {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px dashed rgba(15,23,42,0.10);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

body.page-about .team-reports-label {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-muted, #94a3b8);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

body.page-about .team-card-v2.is-report {
  padding: 10px 12px;
}

body.page-about .team-card-v2.is-report .team-avatar {
  width: 40px;
  height: 40px;
}

body.page-about .team-card-v2.is-report {
  grid-template-columns: 40px 1fr;
  gap: 12px;
}

body.page-about .team-card-v2.is-report .team-name {
  font-size: 13.5px;
}

body.page-about .team-card-v2.is-report .team-role {
  font-size: 11px;
}

/* ============================================================
   ABOUT v5 — Site-aligned typography + Premium polish (May 2026)
   Overrides v3/v4 where needed. Removes Cormorant Garamond entirely.
   ============================================================ */

/* ---- KILL CORMORANT EVERYWHERE — site uses Geist + Plus Jakarta only ---- */

body.page-about .exec-summary-photo-name,
body.page-about .exec-summary-statement,
body.page-about .exec-summary-statement p,
body.page-about .exec-summary-statement em,
body.page-about .firm-record-count,
body.page-about .firm-record-mark,
body.page-about .pillar-card-number,
body.page-about .letter-signoff-name,
body.page-about .letter-record-count,
body.page-about .letter-record-mark,
body.page-about .letter-record-geo-tag,
body.page-about .letter-quote em,
body.page-about .chapter-numeral,
body.page-about .chapter-kicker {
  font-family: var(--display, 'Geist', sans-serif) !important;
  font-style: normal !important;
}

/* ---- 1. EXECUTIVE SUMMARY: tighter site-aligned typography ---- */

body.page-about .exec-summary {
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: clamp(36px, 5vw, 72px);
}

body.page-about .exec-summary-photo-frame {
  aspect-ratio: 4 / 5;
  border-radius: 14px;
}

body.page-about .exec-summary-photo-frame::after { display: none; }

body.page-about .exec-summary-photo-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink, #0f172a);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-bottom: 5px;
}

body.page-about .exec-summary-photo-role {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--green, #16a34a);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body.page-about .exec-summary-lede {
  font-size: clamp(17px, 1.5vw, 19px) !important;
  font-weight: 500;
  color: var(--ink, #0f172a) !important;
  line-height: 1.6 !important;
  letter-spacing: -0.005em;
  border-left: 3px solid var(--green, #16a34a);
  padding-left: 20px;
  margin-bottom: 24px !important;
}

body.page-about .exec-summary-content p {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-soft, #334155);
  font-weight: 400;
}

/* ---- 2. FACT STRIP: refined ---- */

body.page-about .firm-record {
  background: var(--bg-soft, #f8fafb);
  border: 1px solid var(--line);
  padding: clamp(26px, 3vw, 36px) clamp(28px, 3.2vw, 40px);
  border-radius: 14px;
}

body.page-about .firm-record-mark {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--green, #16a34a) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.page-about .firm-record-count {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--green, #16a34a) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.page-about .firm-record-value {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.75;
}

/* ---- 3. PILLAR CARDS: clean numbering, no Cormorant ---- */

body.page-about .pillar-card {
  border-radius: 14px;
}

body.page-about .pillar-card-visual {
  aspect-ratio: 16 / 9;
}

body.page-about .pillar-card-content {
  padding: clamp(24px, 2.8vw, 32px);
  gap: 12px;
}

body.page-about .pillar-card-number {
  display: inline-block;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--green, #16a34a);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  margin-bottom: 2px;
  padding: 0;
}

body.page-about .pillar-card-title {
  font-size: clamp(18px, 1.6vw, 20px);
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0;
}

body.page-about .pillar-card-body {
  font-size: 14.5px;
  line-height: 1.7;
}

body.page-about .pillars-section-eyebrow {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--green, #16a34a);
  letter-spacing: 0.20em;
  margin-bottom: 10px;
}

body.page-about .pillars-section-title {
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ============================================================
   ABOUT v5 — PREMIUM ORG CHART
   Bigger photos, more breathing room, refined visual hierarchy
   ============================================================ */

body.page-about .team-tree-v2 {
  max-width: 1180px;
  padding: clamp(20px, 3vw, 40px) 0 0;
}

/* CEO card — larger, prominent presence */
body.page-about .team-ceo-v2 .team-card-v2 {
  max-width: 420px;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  padding: 22px 26px;
  background: var(--bg, #fff);
  border: 1px solid rgba(22,163,74,0.25);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(22,163,74,0.04), 0 24px 50px -22px rgba(22,163,74,0.20);
  position: relative;
}

body.page-about .team-ceo-v2 .team-card-v2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 26px;
  right: 26px;
  height: 2px;
  background: var(--green, #16a34a);
  border-radius: 0 0 2px 2px;
}

body.page-about .team-ceo-v2 .team-avatar,
body.page-about .team-card-v2.is-ceo-v2 .team-avatar {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50%;
}

body.page-about .team-ceo-v2 .team-name,
body.page-about .team-card-v2.is-ceo-v2 .team-name {
  font-size: 18px !important;
  font-weight: 600;
  letter-spacing: -0.018em;
}

body.page-about .team-ceo-v2 .team-role,
body.page-about .team-card-v2.is-ceo-v2 .team-role {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--green, #16a34a) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-top: 2px;
}

/* Trunk + branch — subtle, refined */
body.page-about .team-trunk {
  height: 52px;
  background: linear-gradient(to bottom, rgba(22,163,74,0.35), rgba(22,163,74,0.10));
}

body.page-about .team-divisions {
  gap: clamp(20px, 2.4vw, 30px);
  grid-template-columns: 1.3fr 1fr 1fr;
}

body.page-about .team-divisions::before {
  top: -26px;
  left: 16%;
  right: 16%;
  background: rgba(22,163,74,0.20);
}

body.page-about .team-division::before {
  top: -26px;
  height: 26px;
  background: rgba(22,163,74,0.20);
}

/* Division panel — more presence */
body.page-about .team-division {
  padding: clamp(22px, 2.4vw, 28px);
  background: var(--bg, #fff);
  border-radius: 18px;
  gap: 18px;
}

body.page-about .team-division-header {
  padding-bottom: 16px;
  gap: 12px;
}

body.page-about .team-division-marker {
  width: 8px;
  height: 8px;
}

body.page-about .team-division-label {
  font-size: 11.5px;
  letter-spacing: 0.20em;
}

/* Team card — larger, more refined */
body.page-about .team-card-v2 {
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--bg-soft, #f8fafb);
}

body.page-about .team-card-v2 .team-avatar {
  width: 56px;
  height: 56px;
}

body.page-about .team-card-v2 .team-avatar.is-initials {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

body.page-about .team-card-v2 .team-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.25;
}

body.page-about .team-card-v2 .team-role {
  font-size: 11.5px;
  color: var(--ink-soft, #475569);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}

body.page-about .team-card-v2 .team-location {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-muted, #94a3b8);
}

body.page-about .team-card-v2 .team-location .flag-icon {
  width: 15px;
}

/* Division-head (Majed) — distinct treatment */
body.page-about .team-card-v2.is-division-head {
  background: var(--bg, #fff);
  border: 1px solid rgba(22,163,74,0.25);
  box-shadow: 0 1px 2px rgba(22,163,74,0.04), 0 12px 28px -16px rgba(22,163,74,0.18);
  padding: 18px 20px;
}

body.page-about .team-card-v2.is-division-head .team-role {
  color: var(--green, #16a34a) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 10.5px !important;
}

/* Direct reports under Majed */
body.page-about .team-reports {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  gap: 12px;
}

body.page-about .team-reports::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--green, #16a34a);
  margin-bottom: 6px;
  opacity: 0.5;
}

body.page-about .team-reports-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-muted, #94a3b8);
  letter-spacing: 0.22em;
  margin-bottom: 6px;
}

body.page-about .team-card-v2.is-report {
  background: transparent;
  border: 1px solid var(--line);
  padding: 12px 14px;
  grid-template-columns: 44px 1fr;
  gap: 12px;
}

body.page-about .team-card-v2.is-report .team-avatar {
  width: 44px;
  height: 44px;
}

body.page-about .team-card-v2.is-report .team-name {
  font-size: 14px;
}

body.page-about .team-card-v2.is-report .team-role {
  font-size: 11px;
}

/* ============================================================
   ABOUT v5 — DEVELOPER NETWORK (unified, all 8 equal)
   ============================================================ */

body.page-about .developer-network {
  max-width: 1120px;
  margin: 0 auto;
}

body.page-about .developer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 22px);
  margin-bottom: clamp(28px, 3.2vw, 40px);
}

@media (max-width: 900px) {
  body.page-about .developer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 420px) {
  body.page-about .developer-grid { grid-template-columns: 1fr; }
}

body.page-about .developer-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: clamp(26px, 2.8vw, 34px) clamp(18px, 2vw, 24px);
  background: var(--bg, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  text-align: center;
  min-height: 152px;
}

body.page-about .developer-card:hover {
  border-color: rgba(22,163,74,0.30);
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(15,23,42,0.03), 0 16px 32px -16px rgba(15,23,42,0.12);
}

body.page-about .developer-card-logo {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

body.page-about .developer-card-logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

body.page-about .developer-card-name {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink, #0f172a);
  letter-spacing: -0.005em;
  line-height: 1.3;
}

body.page-about .developer-disclaimer {
  font-size: 11.5px;
  color: var(--ink-muted, #94a3b8);
  letter-spacing: 0.005em;
  line-height: 1.65;
  text-align: center;
  margin: 0 auto;
  max-width: 60ch;
}

/* ============================================================
   FOOTER — Legal entity disclosure line (May 2026)
   Sits under .footer-brand-text in the footer brand column.
   Small, italic, muted — reads as corporate-disclosure footnote.
   ============================================================ */

.footer-legal-entity {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--footer-text);
  margin: 14px 0 0;
  max-width: 320px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   ABOUT v5.1 — Exec summary photo matches text-column height
   ============================================================ */

body.page-about .exec-summary {
  align-items: stretch;
}

body.page-about .exec-summary-photo {
  height: 100%;
  display: flex;
  flex-direction: column;
}

body.page-about .exec-summary-photo-frame {
  aspect-ratio: auto;
  flex: 1;
  min-height: 420px;
}

body.page-about .exec-summary-photo-frame img {
  object-position: center 25%;
}

@media (max-width: 820px) {
  body.page-about .exec-summary-photo-frame {
    min-height: 0;
    aspect-ratio: 4 / 5;
    flex: none;
  }
}

/* Strong tag inside exec-summary — for parent company name */
body.page-about .exec-summary-content p strong {
  font-weight: 600;
  color: var(--ink, #0f172a);
  letter-spacing: -0.005em;
}

/* ============================================================
   ABOUT v5.2 — Integrated pillars row (inside exec-summary content)
   Tight 3-up row sitting under the prose. Replaces standalone section.
   ============================================================ */

body.page-about .exec-pillars {
  margin-top: clamp(24px, 3vw, 32px);
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--line);
}

body.page-about .exec-pillars-label {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--green, #16a34a);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

body.page-about .exec-pillars-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
}

@media (max-width: 640px) {
  body.page-about .exec-pillars-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

body.page-about .exec-pillar {
  padding: clamp(14px, 1.6vw, 18px);
  background: var(--bg-soft, #f8fafb);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.25s ease, background 0.25s ease;
}

body.page-about .exec-pillar:hover {
  border-color: rgba(22,163,74,0.25);
  background: var(--bg, #fff);
}

body.page-about .exec-pillar-num {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 10px;
  font-weight: 700;
  color: var(--green, #16a34a);
  letter-spacing: 0.18em;
  margin-bottom: 2px;
}

body.page-about .exec-pillar-title {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink, #0f172a);
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin-bottom: 2px;
}

body.page-about .exec-pillar-body {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft, #475569);
  margin: 0;
}

/* Italic em inside exec-summary — for the etymology mention of marra */
body.page-about .exec-summary-content p em {
  font-style: italic;
  color: var(--green, #16a34a);
  font-weight: 500;
}

/* Photo frame: now that text column is longer, raise the min-height floor */
body.page-about .exec-summary-photo-frame {
  min-height: 540px;
}

@media (max-width: 820px) {
  body.page-about .exec-summary-photo-frame {
    min-height: 0;
  }
}

/* ============================================================
   ABOUT v6 — Floating portrait + Stacked steps with placeholders
   Replaces v5/v5.1/v5.2 exec-summary grid + integrated pillars.
   ============================================================ */

/* ---- Exec summary: single-column wrapper (no more grid) ---- */

body.page-about .exec-summary {
  display: block;
  max-width: 920px;
  margin: 0 auto clamp(48px, 5vw, 64px);
  grid-template-columns: none;
}

/* ---- Floating portrait, hugs the first two paragraphs only ---- */

body.page-about .exec-portrait {
  float: right;
  width: clamp(220px, 28%, 280px);
  margin: 4px 0 18px clamp(20px, 3vw, 32px);
  padding: 0;
}

body.page-about .exec-portrait-frame {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(22,163,74,0.08), rgba(22,163,74,0.02));
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(15,23,42,0.03), 0 18px 36px -18px rgba(15,23,42,0.16);
  position: relative;
}

body.page-about .exec-portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

body.page-about .exec-portrait-caption {
  margin-top: 12px;
  padding: 0 2px;
}

body.page-about .exec-portrait-name {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #0f172a);
  letter-spacing: -0.018em;
  line-height: 1.2;
  margin-bottom: 4px;
}

body.page-about .exec-portrait-role {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 10px;
  font-weight: 600;
  color: var(--green, #16a34a);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Clearfix paragraph — once we hit the 3rd paragraph, push it below the photo */
body.page-about .exec-clearfix {
  clear: right;
}

/* Mobile — portrait stacks on top, no float */
@media (max-width: 640px) {
  body.page-about .exec-portrait {
    float: none;
    width: 100%;
    max-width: 240px;
    margin: 0 auto clamp(22px, 4vw, 28px);
  }
  body.page-about .exec-portrait-caption {
    text-align: center;
  }
}

/* ---- Exec summary prose ---- */

body.page-about .exec-summary-content {
  padding-top: 0;
}

body.page-about .exec-summary-content p {
  font-size: clamp(15px, 1.4vw, 16.5px);
  line-height: 1.78;
  color: var(--ink-soft, #334155);
  margin: 0 0 18px;
  font-weight: 400;
  letter-spacing: -0.003em;
}

body.page-about .exec-summary-content p:last-child {
  margin-bottom: 0;
}

body.page-about .exec-summary-lede {
  font-size: clamp(17px, 1.5vw, 19px) !important;
  font-weight: 500 !important;
  color: var(--ink, #0f172a) !important;
  line-height: 1.6 !important;
  border-left: none !important;
  padding-left: 0 !important;
  margin-bottom: 20px !important;
}

body.page-about .exec-summary-content p em {
  font-style: italic;
  color: var(--green, #16a34a);
  font-weight: 500;
}

body.page-about .exec-summary-content p strong {
  font-weight: 600;
  color: var(--ink, #0f172a);
  letter-spacing: -0.005em;
}

/* ============================================================
   "How we work" — premium stacked steps with alternating sides
   ============================================================ */

body.page-about .how-we-work {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 60px) 0 0;
}

body.page-about .how-we-work-head {
  text-align: center;
  margin-bottom: clamp(40px, 4vw, 52px);
}

body.page-about .how-we-work-eyebrow {
  display: inline-block;
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--green, #16a34a);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

body.page-about .how-we-work-title {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink, #0f172a);
  margin: 0;
  line-height: 1.1;
}

body.page-about .how-we-work-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 30px);
}

/* Step row — alternating image left/right on desktop, stacked on mobile */
body.page-about .step-row {
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  gap: clamp(28px, 3.5vw, 48px);
  align-items: center;
  padding: clamp(24px, 3vw, 36px);
  background: var(--bg, #fff);
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

body.page-about .step-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: var(--green, #16a34a);
  opacity: 0;
  transition: opacity 0.3s ease;
}

body.page-about .step-row:hover {
  border-color: rgba(22,163,74,0.25);
  box-shadow: 0 1px 2px rgba(15,23,42,0.03), 0 20px 40px -20px rgba(15,23,42,0.12);
}

body.page-about .step-row:hover::before {
  opacity: 1;
}

body.page-about .step-row-reverse {
  grid-template-columns: 1fr minmax(220px, 360px);
}

body.page-about .step-row-reverse .step-visual {
  order: 2;
}

body.page-about .step-row-reverse .step-content {
  order: 1;
}

body.page-about .step-row-reverse::before {
  left: auto;
  right: 0;
}

@media (max-width: 760px) {
  body.page-about .step-row,
  body.page-about .step-row-reverse {
    grid-template-columns: 1fr;
    gap: clamp(18px, 3vw, 24px);
  }
  body.page-about .step-row-reverse .step-visual { order: 0; }
  body.page-about .step-row-reverse .step-content { order: 0; }
}

/* Visual side — image placeholder with subtle gradient */
body.page-about .step-visual {
  aspect-ratio: 5 / 4;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

body.page-about .step-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--green, #16a34a);
  background:
    radial-gradient(circle at 30% 30%, rgba(22,163,74,0.10), transparent 55%),
    linear-gradient(135deg, #f1f5f3 0%, #e2e8e3 100%);
}

body.page-about .step-placeholder::before {
  content: attr(data-step);
  position: absolute;
  top: 14px;
  left: 16px;
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 10px;
  font-weight: 700;
  color: var(--green, #16a34a);
  letter-spacing: 0.22em;
  opacity: 0.7;
}

body.page-about .step-placeholder::after {
  content: 'IMAGE';
  position: absolute;
  bottom: 14px;
  right: 16px;
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-muted, #94a3b8);
  letter-spacing: 0.28em;
  opacity: 0.55;
}

body.page-about .step-placeholder svg {
  width: 38%;
  max-width: 96px;
  height: auto;
  opacity: 0.55;
}

/* Content side */
body.page-about .step-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.page-about .step-num {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--green, #16a34a);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

body.page-about .step-title {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: clamp(19px, 1.8vw, 22px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink, #0f172a);
  margin: 0 0 6px;
  line-height: 1.2;
}

body.page-about .step-body {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft, #475569);
  margin: 0;
}

/* ============================================================
   ABOUT v7 — Photo LEFT-aligned, smaller, with green accent line
   Plus: How-we-work cards in voice-style light-green theme
   Overrides v6 step-row styles.
   ============================================================ */

/* ---- PORTRAIT: left-aligned, smaller, green accent line restored ---- */

body.page-about .exec-portrait {
  float: left;
  width: clamp(180px, 22%, 220px);
  margin: 4px clamp(22px, 3vw, 32px) 12px 0;
  padding: 0;
}

body.page-about .exec-portrait-frame {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(22,163,74,0.08), rgba(22,163,74,0.02));
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(15,23,42,0.03), 0 16px 32px -18px rgba(15,23,42,0.16);
  position: relative;
}

/* Green accent line — restored, bottom-left of frame */
body.page-about .exec-portrait-frame::after {
  content: '';
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 32px;
  height: 2px;
  background: var(--green, #16a34a);
  border-radius: 2px;
  z-index: 2;
}

/* Clearfix paragraph — clears LEFT now since photo floats left */
body.page-about .exec-clearfix {
  clear: left;
}

/* Mobile — portrait stacks on top, no float */
@media (max-width: 640px) {
  body.page-about .exec-portrait {
    float: none;
    width: 100%;
    max-width: 200px;
    margin: 0 auto clamp(22px, 4vw, 28px);
  }
  body.page-about .exec-portrait-caption {
    text-align: center;
  }
}

/* ---- HOW WE WORK: voice-style light-green cards ---- */

/* Reset/cancel v6 step-row styles by hiding the old class hooks (defensive) */
body.page-about .how-we-work-stack { display: none; }

body.page-about .how-we-work {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(48px, 5.5vw, 72px) 0 0;
}

body.page-about .how-we-work-head {
  text-align: center;
  margin-bottom: clamp(36px, 4vw, 48px);
}

body.page-about .how-we-work-eyebrow {
  display: inline-block;
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--green, #16a34a);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

body.page-about .how-we-work-title {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink, #0f172a);
  margin: 0;
  line-height: 1.1;
}

body.page-about .how-we-work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 28px);
}

@media (max-width: 900px) {
  body.page-about .how-we-work-grid {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin: 0 auto;
  }
}

/* Card — matches the voice-card styling from index.html */
body.page-about .how-card {
  position: relative;
  padding: clamp(28px, 3vw, 36px) clamp(24px, 2.6vw, 32px);
  background: var(--green-tint, rgba(22,163,74,0.06));
  border: 1px solid var(--green-soft, rgba(22,163,74,0.20));
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

body.page-about .how-card:hover {
  transform: translateY(-2px);
  border-color: rgba(22,163,74,0.35);
  box-shadow: 0 1px 2px rgba(22,163,74,0.05), 0 18px 36px -18px rgba(22,163,74,0.18);
}

body.page-about .how-card-num {
  position: absolute;
  top: -4px;
  right: 16px;
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 76px;
  font-weight: 700;
  color: var(--green, #16a34a);
  opacity: 0.14;
  line-height: 1;
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
}

body.page-about .how-card h4 {
  position: relative;
  font-family: var(--display, 'Geist', sans-serif);
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--ink, #0f172a);
  line-height: 1.25;
}

body.page-about .how-card p {
  position: relative;
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 14.5px;
  color: rgba(15, 23, 42, 0.72);
  line-height: 1.65;
  margin: 0;
}

/* ============================================================
   ABOUT v7.1 — Portrait overlay caption + tighter head space
   Name + title moved inside the photo with gradient backdrop.
   ============================================================ */

/* Frame: drop the gradient background — image fills entirely now */
body.page-about .exec-portrait-frame {
  background: none;
  position: relative;
}

/* Raise the image crop so Afnan's head sits near the top, less empty space above */
body.page-about .exec-portrait-frame img {
  object-position: center 8%;
}

/* Overlay caption — sits inside the photo at the bottom */
body.page-about .exec-portrait-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(28px, 3vw, 36px) clamp(14px, 1.6vw, 18px) clamp(12px, 1.4vw, 16px);
  background: linear-gradient(
    to top,
    rgba(15, 23, 42, 0.86) 0%,
    rgba(15, 23, 42, 0.62) 55%,
    rgba(15, 23, 42, 0) 100%
  );
  z-index: 2;
  pointer-events: none;
}

body.page-about .exec-portrait-overlay .exec-portrait-name {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 4px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

body.page-about .exec-portrait-overlay .exec-portrait-role {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--green, #16a34a);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Hide the old outside caption if it lingers anywhere */
body.page-about .exec-portrait > .exec-portrait-caption {
  display: none;
}

/* Reposition the green accent so it sits cleanly above the overlay gradient */
body.page-about .exec-portrait-frame::after {
  left: 14px;
  bottom: auto;
  top: 14px;
  width: 28px;
  z-index: 3;
}

/* Mobile — overlay stays, just adjust photo crop */
@media (max-width: 640px) {
  body.page-about .exec-portrait-frame img {
    object-position: center 10%;
  }
}

/* ============================================================
   ABOUT v7.2 — Tighter head crop + Green pull-quote + Premium how-cards
   ============================================================ */

/* ---- Tighter head space on Afnan portrait ---- */
body.page-about .exec-portrait-frame img {
  object-position: center top;
  transform: translateY(-4%);
}

@media (max-width: 640px) {
  body.page-about .exec-portrait-frame img {
    object-position: center top;
    transform: translateY(-2%);
  }
}

/* ---- Green pull-quote: the founding statement / mission line ---- */
body.page-about .exec-summary-quote {
  position: relative;
  margin: clamp(20px, 2.5vw, 26px) 0;
  padding: clamp(20px, 2.4vw, 26px) clamp(24px, 2.8vw, 32px);
  background: linear-gradient(135deg, rgba(22,163,74,0.07) 0%, rgba(22,163,74,0.02) 100%);
  border-left: 3px solid var(--green, #16a34a);
  border-radius: 0 10px 10px 0;
}

body.page-about .exec-summary-quote::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 14px;
  width: 16px;
  height: 16px;
  background: var(--green, #16a34a);
  border-radius: 50%;
  opacity: 0.15;
}

body.page-about .exec-summary-quote p {
  font-family: var(--display, 'Geist', sans-serif) !important;
  font-size: clamp(14.5px, 1.35vw, 16px) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: 1.65 !important;
  color: var(--ink, #0f172a) !important;
  margin: 0 !important;
  letter-spacing: -0.005em !important;
}

/* ============================================================
   v7.2 — Premium "How we work" cards
   Replace flat light-green boxes with refined white cards
   featuring left accent rail, large numerals, breathing room.
   ============================================================ */

/* Add bottom padding so the how-we-work block doesn't touch the next section */
body.page-about .how-we-work {
  padding-bottom: clamp(28px, 3.5vw, 48px);
}

/* Header tightening */
body.page-about .how-we-work-head {
  margin-bottom: clamp(40px, 4.5vw, 56px);
}

/* Card grid spacing */
body.page-about .how-we-work-grid {
  gap: clamp(22px, 2.4vw, 28px);
}

/* Override the previous flat-green card style */
body.page-about .how-card {
  position: relative;
  padding: clamp(36px, 3.5vw, 44px) clamp(28px, 3vw, 36px) clamp(34px, 3.2vw, 40px);
  background: var(--bg, #ffffff);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}

/* Vertical accent rail on the left edge */
body.page-about .how-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--green, #16a34a) 0%, rgba(22,163,74,0.25) 100%);
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Subtle green tint on top-right corner */
body.page-about .how-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle at top right, rgba(22,163,74,0.06) 0%, transparent 70%);
  pointer-events: none;
  transition: opacity 0.35s ease;
}

body.page-about .how-card:hover {
  transform: translateY(-4px);
  border-color: rgba(22,163,74,0.30);
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 24px 48px -20px rgba(15,23,42,0.18),
    0 12px 24px -16px rgba(22,163,74,0.12);
}

body.page-about .how-card:hover::before {
  width: 5px;
}

/* Large numeral — top-right, refined */
body.page-about .how-card-num {
  position: absolute;
  top: clamp(20px, 2.2vw, 26px);
  right: clamp(20px, 2.2vw, 28px);
  font-family: var(--display, 'Geist', sans-serif);
  font-size: clamp(40px, 3.8vw, 52px);
  font-weight: 700;
  color: var(--green, #16a34a);
  opacity: 0.18;
  line-height: 1;
  letter-spacing: -0.035em;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  transition: opacity 0.35s ease;
}

body.page-about .how-card:hover .how-card-num {
  opacity: 0.28;
}

/* Title */
body.page-about .how-card h4 {
  position: relative;
  font-family: var(--display, 'Geist', sans-serif);
  font-size: clamp(18px, 1.6vw, 20px);
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0 60px 14px 0;
  color: var(--ink, #0f172a);
  line-height: 1.25;
  z-index: 2;
}

/* Body */
body.page-about .how-card p {
  position: relative;
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 14.5px;
  color: var(--ink-soft, #475569);
  line-height: 1.7;
  margin: 0;
  font-weight: 400;
  z-index: 2;
}

/* Connecting flow dot beneath the title (subtle premium detail) */
body.page-about .how-card h4::after {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--green, #16a34a);
  border-radius: 2px;
  margin-top: 14px;
  opacity: 0.55;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

body.page-about .how-card:hover h4::after {
  width: 44px;
  opacity: 1;
}

/* Bottom margin around exec-summary so it breathes before how-we-work */
body.page-about .exec-summary {
  margin-bottom: clamp(24px, 3vw, 36px);
}

/* ============================================================
   ABOUT v8 — Borrow the three-stages pattern from guide.html
   Fixes the broken how-card design with the proven pattern.
   Also: proper top-crop for Afnan's portrait (no more lift hack).
   ============================================================ */

/* ---- PORTRAIT: clean top-crop, no transform ---- */
body.page-about .exec-portrait-frame img {
  transform: none;
  object-position: center 0%;
}

/* Aspect ratio tighter to crop chest-up cleanly */
body.page-about .exec-portrait-frame {
  aspect-ratio: 3 / 4;
}

@media (max-width: 640px) {
  body.page-about .exec-portrait-frame {
    aspect-ratio: 3 / 4;
  }
  body.page-about .exec-portrait-frame img {
    transform: none;
    object-position: center 0%;
  }
}

/* ---- HIDE v7/v7.2 how-card styles by cancelling the rules that target .how-card ---- */
/* The .how-card class is no longer used in the HTML; the new structure uses .three-stage-card */

/* ---- THREE-STAGE CARDS: scoped to about page (mirrors guide.html) ---- */

body.page-about .how-we-work {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(48px, 5.5vw, 72px) 0 clamp(28px, 3.5vw, 48px);
}

body.page-about .how-we-work-head {
  text-align: center;
  margin-bottom: clamp(36px, 4vw, 48px);
}

body.page-about .how-we-work-title {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink, #0f172a);
  margin: 10px 0 0;
  line-height: 1.1;
}

body.page-about .three-stages {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  body.page-about .three-stages {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
}

body.page-about .three-stage-card {
  background: var(--bg, #fff);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

body.page-about .three-stage-card:hover {
  border-color: var(--green-soft, rgba(22,163,74,0.30));
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(26, 31, 37, 0.18);
}

body.page-about .three-stage-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-soft, #f8fafb);
}

body.page-about .three-stage-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

body.page-about .three-stage-card:hover .three-stage-banner img {
  transform: scale(1.04);
}

body.page-about .three-stage-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

body.page-about .three-stage-num {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--green, #16a34a);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 6px 18px -4px rgba(22, 163, 74, 0.55), 0 0 0 1px rgba(255,255,255,0.1) inset;
}

body.page-about .three-stage-tag {
  position: absolute;
  bottom: 14px;
  left: 16px;
  z-index: 2;
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

body.page-about .three-stage-body {
  padding: 22px 24px 26px;
}

body.page-about .three-stage-card h3 {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink, #0f172a);
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  line-height: 1.25;
}

body.page-about .three-stage-card p {
  font-size: 13.5px;
  color: var(--ink-soft, #475569);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   ABOUT v9 — Proper grid composition (no more floats, no overlap)
   Section 1 layout: section-head → photo+prose grid → corporate block → how-we-work
   ============================================================ */

/* ---- Hide all the legacy float/exec-summary rules ---- */
body.page-about .exec-summary { display: none; }

/* ============================================================
   PHOTO + PROSE GRID
   ============================================================ */

body.page-about .exec-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: clamp(36px, 4.5vw, 68px);
  align-items: start;
  max-width: 1080px;
  margin: 0 auto clamp(40px, 4.5vw, 56px);
}

@media (max-width: 820px) {
  body.page-about .exec-grid {
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 36px);
    max-width: 600px;
  }
}

/* ---- LEFT COL: Premium portrait ---- */

body.page-about .exec-portrait-col {
  position: relative;
}

body.page-about .exec-portrait {
  margin: 0;
  position: relative;
}

/* Decorative green accent square behind the photo (premium offset) */
body.page-about .exec-portrait::before {
  content: '';
  position: absolute;
  top: 18px;
  left: -18px;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(22,163,74,0.22) 0%, rgba(22,163,74,0.06) 100%);
  border-radius: 14px;
  z-index: 0;
}

@media (max-width: 820px) {
  body.page-about .exec-portrait::before {
    left: 14px;
    top: 14px;
  }
}

body.page-about .exec-portrait-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-soft, #f8fafb);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 22px 50px -22px rgba(15,23,42,0.22);
  z-index: 1;
}

body.page-about .exec-portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 5%;
  display: block;
  transform: none;
}

/* Overlay: lower-third gradient with name + role */
body.page-about .exec-portrait-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(40px, 4vw, 56px) clamp(18px, 2vw, 24px) clamp(18px, 2vw, 22px);
  background: linear-gradient(
    to top,
    rgba(15, 23, 42, 0.92) 0%,
    rgba(15, 23, 42, 0.70) 45%,
    rgba(15, 23, 42, 0) 100%
  );
  z-index: 2;
  pointer-events: none;
}

body.page-about .exec-portrait-overlay-rule {
  width: 32px;
  height: 2px;
  background: var(--green, #16a34a);
  border-radius: 2px;
  margin-bottom: 12px;
}

body.page-about .exec-portrait-overlay .exec-portrait-name {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.018em;
  line-height: 1.15;
  margin-bottom: 6px;
}

body.page-about .exec-portrait-overlay .exec-portrait-role {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--green, #16a34a);
  letter-spacing: 0.20em;
  text-transform: uppercase;
}

/* Hide any legacy ::after green pill from v7 */
body.page-about .exec-portrait-frame::after { display: none; }

/* ---- RIGHT COL: Prose ---- */

body.page-about .exec-prose-col {
  padding-top: 6px;
}

body.page-about .exec-prose-label {
  display: inline-block;
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--green, #16a34a);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--green, #16a34a);
}

body.page-about .exec-summary-lede {
  font-family: var(--display, 'Geist', sans-serif) !important;
  font-size: clamp(16.5px, 1.5vw, 18.5px) !important;
  font-weight: 500 !important;
  color: var(--ink, #0f172a) !important;
  line-height: 1.62 !important;
  letter-spacing: -0.008em !important;
  margin: 0 0 clamp(20px, 2.4vw, 28px) !important;
  border: none !important;
  padding: 0 !important;
}

body.page-about .exec-prose-body {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 14.5px;
  color: var(--ink-soft, #475569);
  line-height: 1.75;
  margin: clamp(20px, 2.4vw, 26px) 0 0;
  font-weight: 400;
  letter-spacing: -0.003em;
}

body.page-about .exec-prose-body em,
body.page-about .exec-summary-lede em {
  font-style: italic;
  color: var(--green, #16a34a);
  font-weight: 500;
}

/* ---- MISSION CARD (green) inside prose column ---- */

body.page-about .exec-mission {
  position: relative;
  padding: clamp(22px, 2.5vw, 28px) clamp(24px, 2.8vw, 32px);
  background: linear-gradient(135deg, rgba(22,163,74,0.09) 0%, rgba(22,163,74,0.02) 100%);
  border-left: 3px solid var(--green, #16a34a);
  border-radius: 0 12px 12px 0;
  margin: 0;
}

body.page-about .exec-mission-tag {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--green, #16a34a);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

body.page-about .exec-mission p {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink, #0f172a);
  line-height: 1.7;
  letter-spacing: -0.005em;
  margin: 0;
}

/* ---- CORPORATE BLOCK: full-width, below the grid ---- */

body.page-about .exec-corporate {
  max-width: 1080px;
  margin: 0 auto clamp(32px, 4vw, 48px);
  padding-top: clamp(28px, 3.2vw, 36px);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.page-about .exec-corporate p {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 14.5px;
  color: var(--ink-soft, #475569);
  line-height: 1.75;
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.003em;
}

body.page-about .exec-corporate p strong {
  font-weight: 600;
  color: var(--ink, #0f172a);
  letter-spacing: -0.005em;
}

/* ============================================================
   ABOUT v9.1 — Larger portrait + refined name/title overlay
   ============================================================ */

/* Wider photo column */
body.page-about .exec-grid {
  grid-template-columns: minmax(340px, 440px) 1fr;
  gap: clamp(40px, 5vw, 76px);
}

@media (max-width: 820px) {
  body.page-about .exec-grid {
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 36px);
    max-width: 480px;
  }
}

/* Slightly taller frame aspect for more presence */
body.page-about .exec-portrait-frame {
  aspect-ratio: 5 / 6;
}

/* Larger offset green block to match the bigger photo */
body.page-about .exec-portrait::before {
  top: 22px;
  left: -22px;
  border-radius: 14px;
}

@media (max-width: 820px) {
  body.page-about .exec-portrait::before {
    top: 16px;
    left: 16px;
  }
}

/* ---- Overlay refinements ---- */

/* More generous lower-third with deeper gradient blend */
body.page-about .exec-portrait-overlay {
  padding: clamp(56px, 5.5vw, 80px) clamp(22px, 2.5vw, 30px) clamp(22px, 2.6vw, 28px);
  background: linear-gradient(
    to top,
    rgba(15, 23, 42, 0.96) 0%,
    rgba(15, 23, 42, 0.80) 35%,
    rgba(15, 23, 42, 0.40) 70%,
    rgba(15, 23, 42, 0) 100%
  );
}

/* Wider, brighter green rule */
body.page-about .exec-portrait-overlay-rule {
  width: 40px;
  height: 2.5px;
  margin-bottom: 16px;
}

/* Larger, more confident name */
body.page-about .exec-portrait-overlay .exec-portrait-name {
  font-size: clamp(20px, 1.9vw, 24px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 8px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Refined role with more letter-spacing and better contrast */
body.page-about .exec-portrait-overlay .exec-portrait-role {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Add a thin green accent dot before the role text */
body.page-about .exec-portrait-overlay .exec-portrait-role::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--green, #16a34a);
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* ============================================================
   ABOUT v9.2 — Larger photo + caption moved below the frame
   ============================================================ */

/* Photo column grows substantially */
body.page-about .exec-grid {
  grid-template-columns: minmax(420px, 540px) 1fr;
  gap: clamp(44px, 5vw, 72px);
}

@media (max-width: 920px) {
  body.page-about .exec-grid {
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 36px);
    max-width: 560px;
  }
}

/* Aspect ratio squarer for more photo presence */
body.page-about .exec-portrait-frame {
  aspect-ratio: 4 / 5;
}

/* Larger offset green block */
body.page-about .exec-portrait::before {
  top: 24px;
  left: -24px;
}

@media (max-width: 920px) {
  body.page-about .exec-portrait::before {
    top: 18px;
    left: 18px;
  }
}

/* Hide the old overlay (no longer rendered, but defensive) */
body.page-about .exec-portrait-overlay { display: none; }

/* ---- New caption block BELOW the frame ---- */

body.page-about .exec-portrait-caption {
  margin: clamp(22px, 2.5vw, 28px) 0 0;
  padding: 0 4px;
  position: relative;
  z-index: 1;
}

body.page-about .exec-portrait-rule {
  width: 40px;
  height: 2px;
  background: var(--green, #16a34a);
  border-radius: 2px;
  margin-bottom: 14px;
}

body.page-about .exec-portrait-caption .exec-portrait-name {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: clamp(20px, 1.8vw, 23px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink, #0f172a);
  line-height: 1.15;
  margin-bottom: 8px;
  text-shadow: none;
}

body.page-about .exec-portrait-caption .exec-portrait-role {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 11px;
  font-weight: 600;
  color: var(--green, #16a34a);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

body.page-about .exec-portrait-caption .exec-portrait-role::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--green, #16a34a);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ============================================================
   ABOUT v9.3 — FINAL OVERRIDE: kills legacy v7 float + width caps
   Multiple older rules are still active on .exec-portrait. This
   block sits last in the cascade and explicitly resets them so
   the v9 grid composition actually renders as designed.
   ============================================================ */

/* RESET: kill float + width-cap from v7 era */
body.page-about .exec-portrait {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  display: block !important;
}

/* Frame fills its column at 4:5 — no more 220px cap */
body.page-about .exec-portrait-frame {
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: var(--bg-soft, #f8fafb) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 22px 50px -22px rgba(15,23,42,0.22) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* KILL all legacy ::after green pills and overlay green-line artifacts */
body.page-about .exec-portrait-frame::after {
  display: none !important;
  content: none !important;
}

/* Image fills frame cleanly, head crop from top */
body.page-about .exec-portrait-frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 5% !important;
  display: block !important;
  transform: none !important;
}

/* Offset green accent block behind photo */
body.page-about .exec-portrait::before {
  content: '' !important;
  position: absolute !important;
  top: 24px !important;
  left: -24px !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, rgba(22,163,74,0.22) 0%, rgba(22,163,74,0.06) 100%) !important;
  border-radius: 14px !important;
  z-index: 0 !important;
}

/* KILL any leftover overlay rendering */
body.page-about .exec-portrait-overlay {
  display: none !important;
}

/* CAPTION BELOW PHOTO — explicit, wins all priors */
body.page-about .exec-portrait-caption {
  display: block !important;
  margin: clamp(22px, 2.5vw, 28px) 0 0 !important;
  padding: 0 4px !important;
  position: relative !important;
  z-index: 1 !important;
  text-align: left !important;
}

body.page-about .exec-portrait-rule {
  display: block !important;
  width: 40px !important;
  height: 2px !important;
  background: var(--green, #16a34a) !important;
  border-radius: 2px !important;
  margin: 0 0 14px !important;
}

body.page-about .exec-portrait-caption .exec-portrait-name {
  font-family: var(--display, 'Geist', sans-serif) !important;
  font-size: clamp(20px, 1.8vw, 23px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink, #0f172a) !important;
  line-height: 1.15 !important;
  margin: 0 0 8px !important;
  text-shadow: none !important;
  text-transform: none !important;
}

body.page-about .exec-portrait-caption .exec-portrait-role {
  font-family: var(--display, 'Geist', sans-serif) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--green, #16a34a) !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
}

body.page-about .exec-portrait-caption .exec-portrait-role::before {
  content: '' !important;
  display: inline-block !important;
  width: 4px !important;
  height: 4px !important;
  background: var(--green, #16a34a) !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* Grid sizing — make photo column substantial */
body.page-about .exec-grid {
  display: grid !important;
  grid-template-columns: minmax(420px, 500px) 1fr !important;
  gap: clamp(44px, 5vw, 72px) !important;
  align-items: start !important;
  max-width: 1080px !important;
  margin: 0 auto clamp(40px, 4.5vw, 56px) !important;
}

@media (max-width: 920px) {
  body.page-about .exec-grid {
    grid-template-columns: 1fr !important;
    gap: clamp(28px, 4vw, 36px) !important;
    max-width: 480px !important;
  }
  body.page-about .exec-portrait::before {
    top: 18px !important;
    left: 18px !important;
  }
}

/* ============================================================
   ABOUT v9.4 — Zoom out portrait to show full image + Demara logo
   ============================================================ */

body.page-about .exec-portrait-frame img {
  object-fit: contain !important;
  object-position: center center !important;
  background: #2a2d33 !important;
}

/* Match frame background to the photo's dark backdrop so contain shows seamlessly */
body.page-about .exec-portrait-frame {
  background: #2a2d33 !important;
}

/* ============================================================
   ABOUT v9.5 — Photo fills frame edge-to-edge + Quote card
   ============================================================ */

/* PHOTO: back to cover so it fills the frame with no letterboxing,
   positioned to keep Afnan and the Demara logo behind her visible */
body.page-about .exec-portrait-frame img {
  object-fit: cover !important;
  object-position: center 35% !important;
  background: transparent !important;
}

/* Frame back to neutral background (image fills it anyway) */
body.page-about .exec-portrait-frame {
  background: var(--bg-soft, #f8fafb) !important;
}

/* Slightly squarer aspect ratio so the photo's natural proportions
   align better with cover-fit and we see more of her plus the logo */
body.page-about .exec-portrait-frame {
  aspect-ratio: 1 / 1 !important;
}

/* ============================================================
   QUOTE CARD: light-green, sits under the portrait caption
   ============================================================ */

body.page-about .exec-quote {
  position: relative;
  margin: clamp(24px, 2.8vw, 32px) 0 0;
  padding: clamp(26px, 2.8vw, 32px) clamp(24px, 2.6vw, 30px) clamp(22px, 2.5vw, 26px);
  background: linear-gradient(135deg, rgba(22,163,74,0.08) 0%, rgba(22,163,74,0.02) 100%);
  border: 1px solid rgba(22,163,74,0.20);
  border-radius: 14px;
  overflow: hidden;
}

body.page-about .exec-quote-mark {
  position: absolute;
  top: 4px;
  left: 16px;
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 84px;
  line-height: 1;
  color: var(--green, #16a34a);
  opacity: 0.18;
  font-weight: 700;
  pointer-events: none;
  user-select: none;
}

body.page-about .exec-quote p {
  position: relative;
  font-family: var(--display, 'Geist', sans-serif);
  font-size: clamp(14px, 1.3vw, 15.5px);
  font-weight: 500;
  font-style: italic;
  color: var(--ink, #0f172a);
  line-height: 1.65;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
}

body.page-about .exec-quote-attribution {
  position: relative;
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--green, #16a34a);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}

body.page-about .exec-quote-attribution::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1.5px;
  background: var(--green, #16a34a);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ============================================================
   ABOUT v9.6 — Remove offset green panel, no crop, height-matched column
   ============================================================ */

/* Kill the offset green panel behind the photo */
body.page-about .exec-portrait::before {
  display: none !important;
  content: none !important;
}

/* Photo: fit (no crop), with matching dark background */
body.page-about .exec-portrait-frame img {
  object-fit: contain !important;
  object-position: center center !important;
}

body.page-about .exec-portrait-frame {
  background: #2a2d33 !important;
  aspect-ratio: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Make the left column stretch to match the right column's height */
body.page-about .exec-grid {
  align-items: stretch !important;
}

body.page-about .exec-portrait-col {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

body.page-about .exec-portrait {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Caption — fixed size, doesn't flex */
body.page-about .exec-portrait-caption {
  flex: 0 0 auto !important;
}

/* Quote card — fixed size, doesn't flex */
body.page-about .exec-quote {
  flex: 0 0 auto !important;
  margin-top: clamp(20px, 2.4vw, 28px) !important;
}

@media (max-width: 920px) {
  body.page-about .exec-grid {
    align-items: start !important;
  }
  body.page-about .exec-portrait-frame {
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 auto !important;
  }
}

/* ============================================================
   ABOUT v9.7 — Perfect column-height alignment
   The prose column on the right defines the total height.
   On the left, caption + quote take natural height, and the photo
   fills exactly what's left so left-col total = right-col total.
   ============================================================ */

/* Stretch grid rows to equal heights */
body.page-about .exec-grid {
  align-items: stretch !important;
}

/* Both columns become flex containers with the same total height */
body.page-about .exec-portrait-col {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
}

body.page-about .exec-portrait {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
}

/* Photo frame: this is the ONLY flex-grow element on the left.
   It fills whatever vertical space is left after the caption + quote
   have taken their natural heights. */
body.page-about .exec-portrait-frame {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  aspect-ratio: auto !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #f0f0f2 !important; /* matches the light grey backdrop in afnan-ceo.png */
  border: 1px solid var(--line) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 22px 50px -22px rgba(15,23,42,0.22) !important;
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
}

/* Photo uses contain so the new portrait isn't cropped */
body.page-about .exec-portrait-frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  transform: none !important;
  background: transparent !important;
}

/* Caption: fixed natural height, no flex-grow */
body.page-about .exec-portrait-caption {
  flex: 0 0 auto !important;
  margin: clamp(20px, 2.2vw, 26px) 0 0 !important;
  padding: 0 4px !important;
}

/* Quote: fixed natural height, no flex-grow */
body.page-about .exec-quote {
  flex: 0 0 auto !important;
  margin: clamp(18px, 2vw, 22px) 0 0 !important;
}

/* On mobile, return to natural sizing (no height-matching) */
@media (max-width: 920px) {
  body.page-about .exec-grid {
    align-items: start !important;
  }
  body.page-about .exec-portrait-col {
    height: auto !important;
  }
  body.page-about .exec-portrait {
    flex: 0 0 auto !important;
  }
  body.page-about .exec-portrait-frame {
    flex: 0 0 auto !important;
    aspect-ratio: 4 / 5 !important;
  }
}

/* ============================================================
   ABOUT v9.8 — Refinements after moving corporate text into prose col
   With more prose on the right, the photo flex-grows substantially.
   Cap its max-height so it stays proportional on wide viewports.
   ============================================================ */

/* Photo frame: cap max-height so the portrait stays well-proportioned
   even when the right column gets tall */
body.page-about .exec-portrait-frame {
  max-height: 620px !important;
}

/* Tighten paragraph spacing in the prose column so the column doesn't
   become disproportionately tall vs. the photo */
body.page-about .exec-prose-body {
  margin: clamp(16px, 1.8vw, 22px) 0 0 !important;
}

/* Slightly larger lede margin since the column is now longer */
body.page-about .exec-summary-lede {
  margin: 0 0 clamp(18px, 2.2vw, 24px) !important;
}

/* Wider exec-grid to accommodate more text on the right */
body.page-about .exec-grid {
  max-width: 1140px !important;
}

/* ============================================================
   ABOUT v9.9 — Photo fills frame completely (cover, no letterboxing)
   ============================================================ */

body.page-about .exec-portrait-frame img {
  object-fit: cover !important;
  object-position: center 30% !important;
}

body.page-about .exec-portrait-frame {
  background: transparent !important;
}

/* ============================================================
   VISUAL EQUALISATION — May 2026
   Card-grid min-heights so titles and bodies reserve consistent
   vertical space regardless of character count. Stops 1-line vs
   2-line title mismatch and short-body-vs-long-body card stunting.
   ============================================================ */

/* ---- index.html: HOW IT WORKS step-cards (5 cards) ---- */
body.page-home .step-card {
  display: flex;
  flex-direction: column;
}
body.page-home .step-card h3 {
  min-height: 2.6em;
  display: flex;
  align-items: flex-end;
}
body.page-home .step-card > p {
  min-height: 5.2em;
  flex: 1;
}

/* ---- index.html: WHY WE DIFFER why-cards (5 cards on canvas) ---- */
body.page-home .why-card-head {
  min-height: 2.6em;
  display: flex;
  align-items: flex-end;
}
body.page-home .why-card-detail {
  min-height: 4.8em;
}

/* ---- index.html: VOICE CARDS (3 cards, "Where you are right now?") ---- */
body.page-home .voice-card h3 {
  min-height: 1.4em;
}
body.page-home .voice-card p {
  min-height: 4.5em;
}

/* ---- guide.html: 3-stage cards (Launch / Construction / Handover) ---- */
body.page-stages .three-stage-card h3 {
  min-height: 1.4em;
}
body.page-stages .three-stage-card p {
  min-height: 7.5em;
}

/* ---- guide.html: 5-step "How we work with you" cards ---- */
body.page-stages .with-demara-step h4 {
  min-height: 2.6em;
  display: flex;
  align-items: flex-end;
}
body.page-stages .with-demara-step p {
  min-height: 7em;
}

/* ---- guide.html: 5-step "Developer process" cards
        Booking / Purchase Agreement / Payment Plan / Completion / Handover ---- */
body.page-stages .developer-step h4 {
  min-height: 2.6em;
  display: flex;
  align-items: flex-end;
}
body.page-stages .developer-step p {
  min-height: 9em;
}

/* ---- benefits.html: 6 benefit cards (Flexible Payments, etc.) ---- */
body.page-benefits .benefit-card h3 {
  min-height: 1.4em;
}
body.page-benefits .benefit-card p,
body.page-benefits .benefit-card .benefit-card-body {
  min-height: 4.8em;
}

/* ---- benefits.html: 5 considerations cards ---- */
body.page-considerations .reality-canvas-card-head {
  min-height: 1.4em;
}
body.page-considerations .reality-canvas-card p,
body.page-considerations .reality-canvas-card .reality-canvas-card-body {
  min-height: 8em;
}

/* ---- profiles.html: 3 framework note cards ---- */
body.page-profiles .framework-note h3 {
  min-height: 1.4em;
}
body.page-profiles .framework-note p {
  min-height: 4.6em;
}

/* ---- profiles.html: 6 flip cards (Resident Buyer, etc.) ---- */
body.page-profiles .flip-card h3,
body.page-profiles .flip-card-front h3 {
  min-height: 1.4em;
}

/* ---- profiles.html: 5 factor cards (Goal, Budget, Timeline, etc.) ---- */
body.page-profiles .factor-card h3 {
  min-height: 1.4em;
}
body.page-profiles .factor-card p {
  min-height: 4.2em;
}

/* ---- about.html: 3 stage cards (Buyer file / One intro / Developer) ---- */
body.page-about .three-stage-card h3 {
  min-height: 2.6em;
  display: flex;
  align-items: flex-end;
}
body.page-about .three-stage-card p {
  min-height: 7.5em;
}

/* ---- about.html: 8 developer logo cards (already even, defensive) ---- */
body.page-about .developer-card-name {
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   VISUAL EQUALISATION v2 — Corrected selectors (May 2026)
   Previous v1 block above used speculative class names.
   This block uses real selectors verified against the HTML.
   ============================================================ */

/* ---- benefits.html: 6 benefit cards (Flexible Payments, etc.) ---- */
body.page-stages .benefits-card .benefits-card-text {
  min-height: 5em;
}

/* ---- benefits.html: 5 considerations (reality-canvas cards) ---- */
body.page-considerations .reality-canvas-card-head {
  min-height: 1.4em;
}
body.page-considerations .reality-canvas-card-detail {
  min-height: 8em;
}

/* ---- profiles.html: 5 buying factor cards (Goal/Budget/Timeline/Type/Stage) ---- */
body.page-profiles .pillar-card h3 {
  min-height: 1.4em;
}
body.page-profiles .pillar-card p,
body.page-profiles .pillar-body p {
  min-height: 4.4em;
}

/* ---- profiles.html: 3 framework-note cards (already targeted in v1 but reaffirmed) ---- */
body.page-profiles .framework-note h3 {
  min-height: 1.4em;
}
body.page-profiles .framework-note p {
  min-height: 4.5em;
}

/* ---- profiles.html: 6 buyer flip cards (Resident Buyer, etc.) ---- */
body.page-profiles .flip-card-front .flip-card-name {
  min-height: 1.4em;
}
body.page-profiles .flip-card-front .flip-card-tag {
  min-height: 2.4em;
}

/* ---- guide.html: 5-step "How we work with you" journey steps ---- */
body.page-stages .journey-step-text h4 {
  min-height: 1.4em;
}
body.page-stages .journey-step-text p {
  min-height: 7em;
}

/* ---- index.html: step-card h3 fix (some sites use h3 alone, others h3 inside link) ---- */
body.page-home .step-card .step-eyebrow {
  min-height: 1.2em;
}


/* ============================================================
   Step-cards on index: tighten top spacing
   Pull the h3 closer to the eyebrow above it.
   ============================================================ */

body.page-home .step-card .step-eyebrow {
  margin-bottom: 4px;
}

body.page-home .step-card h3 {
  margin-top: 0;
  margin-bottom: 8px;
  padding-top: 0;
}

/* ============================================================
   STEP-CARDS — Force identical height via CSS, not character count
   Body uses fixed line-height + min-height that fits exactly 5 lines.
   The cards now look identical regardless of body text length.
   ============================================================ */

body.page-home .step-card > p {
  line-height: 1.65;
  /* Reserve space for 5 lines so all cards stay equal-height */
  min-height: calc(1.65em * 5);
}

/* And ensure all step-cards stretch to equal height in the grid */
body.page-home .how-it-works-grid,
body.page-home .steps-grid {
  align-items: stretch;
}

body.page-home .step-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Pull body text slightly up under the title for a tighter compact look */
body.page-home .step-card > p {
  margin-top: 0;
}

/* ============================================================
   v10 — Global section alternation + tighter step-card title
   ============================================================ */

/* New CSS variable: very light green for zebra-striped sections.
   Lighter than --bg-tint (#F0FDF4) used in benefits. */
:root {
  --bg-section-tint: #F5FBF6;
}

/* Push step-card titles closer to the eyebrow */
body.page-home .step-card .step-eyebrow {
  margin-bottom: 2px !important;
  letter-spacing: 0.18em;
}

body.page-home .step-card h3 {
  margin-top: 2px !important;
  padding-top: 0 !important;
  line-height: 1.2;
}

/* ============================================================
   GLOBAL section alternation: every other content section gets
   the very-light-green tint. Pattern: white → tint → white → tint
   ============================================================ */

/* Home page (page-home) */
body.page-home .home-section:nth-of-type(even) {
  background: var(--bg-section-tint);
  border-top: 1px solid rgba(22, 163, 74, 0.06);
  border-bottom: 1px solid rgba(22, 163, 74, 0.06);
}

/* If sections use generic <section> not .home-section, fallback to nth-child */
body.page-home > section:nth-of-type(even):not(.hero):not(.cta-band):not(.site-footer) {
  background: var(--bg-section-tint);
}

/* About page */
body.page-about .about-section:nth-of-type(even) {
  background: var(--bg-section-tint);
  border-top: 1px solid rgba(22, 163, 74, 0.06);
  border-bottom: 1px solid rgba(22, 163, 74, 0.06);
}

/* Override the existing .about-section-tint to match the new lighter shade */
body.page-about .about-section.about-section-tint,
body.page-about .about-section-tint {
  background: var(--bg-section-tint) !important;
  border-top: 1px solid rgba(22, 163, 74, 0.06) !important;
  border-bottom: 1px solid rgba(22, 163, 74, 0.06) !important;
}

/* Override the existing .stage-section.alt to use the new lighter shade
   (this applies to both guide.html and benefits.html since they both use page-stages) */
body.page-stages .stage-section.alt {
  background: var(--bg-section-tint) !important;
  border-top: 1px solid rgba(22, 163, 74, 0.06) !important;
  border-bottom: 1px solid rgba(22, 163, 74, 0.06) !important;
}

/* Profiles page */
body.page-profiles .stage-section.alt,
body.page-profiles section:nth-of-type(even):not(.hero):not(.cta-band) {
  background: var(--bg-section-tint);
  border-top: 1px solid rgba(22, 163, 74, 0.06);
  border-bottom: 1px solid rgba(22, 163, 74, 0.06);
}

/* ============================================================
   v10.1 — Single utility class for section alternation
   Replaces speculative selectors above with explicit class.
   ============================================================ */

.section-alt-light {
  background: var(--bg-section-tint) !important;
  border-top: 1px solid rgba(22, 163, 74, 0.06) !important;
  border-bottom: 1px solid rgba(22, 163, 74, 0.06) !important;
}

/* ============================================================
   v10.2 — Corrections per user feedback:
   • Tint slightly darker (more visible green)
   • Full zebra: every other section alternates
   • Eyebrows slightly darker green
   ============================================================ */

/* Darker tint — closer to the original benefits feel */
:root {
  --bg-section-tint: #EFF8F1;
  --green-darker: #15803D;
}

/* Darker green for all eyebrows site-wide */
.section-eyebrow,
.about-section-eyebrow,
.stage-section-eyebrow,
.step-eyebrow,
.how-we-work-eyebrow,
.pillars-section-eyebrow,
.exec-prose-label,
.exec-mission-tag,
.exec-portrait-role,
.framework-note-eyebrow,
.guide-toc-link,
.benefit-card-eyebrow,
.three-stage-tag {
  color: var(--green-darker) !important;
}

/* But white-on-dark labels (like inside team-card-v2 with green badge) stay light */
.team-division-label {
  color: var(--ink, #0f172a) !important;
}

/* ============================================================
   v10.3 — Unify section tint with CTA tint exactly
   Both use --bg-tint so the zebra rhythm is one consistent green.
   ============================================================ */

.section-alt-light {
  background: var(--bg-tint) !important;
  border-top: 1px solid rgba(22, 163, 74, 0.10) !important;
  border-bottom: 1px solid rgba(22, 163, 74, 0.10) !important;
}

body.page-stages .stage-section.alt,
body.page-about .about-section.about-section-tint,
body.page-about .about-section-tint {
  background: var(--bg-tint) !important;
  border-top: 1px solid rgba(22, 163, 74, 0.10) !important;
  border-bottom: 1px solid rgba(22, 163, 74, 0.10) !important;
}

/* ============================================================
   v10.4 — Slightly darker section tint (final)
   ============================================================ */

.section-alt-light,
body.page-stages .stage-section.alt,
body.page-about .about-section.about-section-tint,
body.page-about .about-section-tint {
  background: #E5F5E9 !important;
  border-top: 1px solid rgba(22, 163, 74, 0.15) !important;
  border-bottom: 1px solid rgba(22, 163, 74, 0.15) !important;
}

body.page-home .cta-band,
body.page-about .cta-band,
body.page-stages .cta-band,
body.page-profiles .cta-band {
  background: #E5F5E9 !important;
}

/* ============================================================
   v10.5 — KILL the greedy nth-of-type rules
   Zebra striping must use the explicit .section-alt-light class only.
   ============================================================ */

/* Force every content section to white by default — only explicit
   .section-alt-light, .about-section-tint, .stage-section.alt get green */
body.page-home > section:nth-of-type(even):not(.hero):not(.cta-band):not(.site-footer),
body.page-home .home-section:nth-of-type(even),
body.page-about .about-section:nth-of-type(even),
body.page-profiles section:nth-of-type(even):not(.hero):not(.cta-band) {
  background: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* Restore green ONLY for sections that have the explicit class */
body.page-home .section-alt-light,
body.page-about .about-section-tint,
body.page-about .about-section.about-section-tint,
body.page-profiles .section-alt-light,
body.page-stages .stage-section.alt,
body.page-stages .section-alt-light,
.section-alt-light {
  background: #E5F5E9 !important;
  border-top: 1px solid rgba(22, 163, 74, 0.15) !important;
  border-bottom: 1px solid rgba(22, 163, 74, 0.15) !important;
}

/* Keep CTA bands green */
body.page-home .cta-band,
body.page-about .cta-band,
body.page-stages .cta-band,
body.page-profiles .cta-band {
  background: #E5F5E9 !important;
}

/* ============================================================
   v10.6 — Restore original CTA background + darken section tint
   ============================================================ */

/* Restore CTA bands to their original lighter tint (--bg-tint = #F0FDF4) */
body.page-home .cta-band,
body.page-about .cta-band,
body.page-stages .cta-band,
body.page-profiles .cta-band {
  background: var(--bg-tint) !important;
}

/* Darken the section-alt-light tint further */
body.page-home .section-alt-light,
body.page-about .about-section-tint,
body.page-about .about-section.about-section-tint,
body.page-profiles .section-alt-light,
body.page-stages .stage-section.alt,
body.page-stages .section-alt-light,
.section-alt-light {
  background: #D7EEDD !important;
  border-top: 1px solid rgba(22, 163, 74, 0.20) !important;
  border-bottom: 1px solid rgba(22, 163, 74, 0.20) !important;
}

/* ============================================================
   v10.7 — Restore white text on hero TOC pill buttons
   The earlier eyebrow-darken rule wrongly caught .guide-toc-link.
   ============================================================ */

/* Hero TOC pills: white text on green pill (filled) */
.hero .guide-toc-link,
.hero .guide-toc-link:hover,
.hero .guide-toc-link:visited {
  color: #ffffff !important;
}

/* Non-hero (in-page) TOC pills: green pill outline style, keep readable dark-green text */
.guide-toc-link {
  color: var(--green-darker) !important;
}

/* ============================================================
   v10.8 — Darken CTA band to match the section tint depth
   ============================================================ */

body.page-home .cta-band,
body.page-about .cta-band,
body.page-stages .cta-band,
body.page-profiles .cta-band {
  background: #D7EEDD !important;
  border-top: 1px solid rgba(22, 163, 74, 0.20) !important;
  border-bottom: 1px solid rgba(22, 163, 74, 0.20) !important;
}

/* ============================================================
   v10.9 — FINAL section tint: very light, premium restraint
   Applied to alternating sections AND all CTA bands globally.
   ============================================================ */

/* Section alt tint */
body.page-home .section-alt-light,
body.page-about .about-section-tint,
body.page-about .about-section.about-section-tint,
body.page-profiles .section-alt-light,
body.page-stages .stage-section.alt,
body.page-stages .section-alt-light,
.section-alt-light {
  background: #F4FAF6 !important;
  border-top: 1px solid rgba(22, 163, 74, 0.08) !important;
  border-bottom: 1px solid rgba(22, 163, 74, 0.08) !important;
}

/* CTA bands — same tint as section alt for unified rhythm */
body.page-home .cta-band,
body.page-about .cta-band,
body.page-stages .cta-band,
body.page-profiles .cta-band {
  background: #F4FAF6 !important;
  border-top: 1px solid rgba(22, 163, 74, 0.08) !important;
  border-bottom: 1px solid rgba(22, 163, 74, 0.08) !important;
}

/* ============================================================
   v10.10 — Darker eyebrows for visibility on green sections
   ============================================================ */

:root {
  --green-darker: #0F5F2C;
  --green-line: rgba(15, 95, 44, 0.55);
}

/* Re-apply (override) with the new darker value + slightly bolder */
.section-eyebrow,
.about-section-eyebrow,
.stage-section-eyebrow,
.step-eyebrow,
.how-we-work-eyebrow,
.pillars-section-eyebrow,
.exec-prose-label,
.exec-mission-tag,
.framework-note-eyebrow,
.benefit-card-eyebrow,
.three-stage-tag {
  color: #0F5F2C !important;
  font-weight: 700 !important;
}

/* Keep hero TOC pills white */
.hero .guide-toc-link,
.hero .guide-toc-link:hover,
.hero .guide-toc-link:visited {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Keep exec-portrait-role (small role text under names) more subtle but readable */
.exec-portrait-role {
  color: #0F5F2C !important;
}

/* In-page TOC links: darker green */
.guide-toc-link:not(.hero .guide-toc-link) {
  color: #0F5F2C !important;
}

/* ============================================================
   v10.11 — Darker journey line + opaque eyebrow pills on green sections
   ============================================================ */

/* Darker journey track line (was too faint against green section) */
body.page-stages .journey::before {
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(22, 163, 74, 0.45) 4%,
    rgba(22, 163, 74, 0.45) 96%,
    transparent 100%) !important;
  width: 2px !important;
}

/* Eyebrow pills: solid white background + darker border + darker text
   so they stand out on green section backgrounds. */
.stage-section-eyebrow,
.about-section-eyebrow,
.section-eyebrow,
.framework-section-eyebrow {
  background: #ffffff !important;
  border: 1px solid rgba(15, 95, 44, 0.30) !important;
  color: #0F5F2C !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(15, 95, 44, 0.04) !important;
}

/* ============================================================
   v10.12 — Marker circles match line colour + lift-on-hover
   ============================================================ */

/* Marker circle border now matches the journey line's green */
body.page-stages .journey-step-marker {
  border: 2px solid rgba(22, 163, 74, 0.45) !important;
  /* Smooth combined transition for transform (translate+scale) */
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease !important;
}

/* Hover: lift up like the boxes do, plus a subtle scale and stronger border */
body.page-stages .journey-step:hover .journey-step-marker {
  transform: translate(-50%, calc(-50% - 4px)) scale(1.06) !important;
  border-color: rgba(22, 163, 74, 0.85) !important;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 1),
              0 10px 24px -8px rgba(22, 163, 74, 0.35) !important;
}

/* ============================================================
   v10.13 — Restore white text on three-stage-tag overlays
   These sit on dark photo backgrounds and need white, not dark green.
   ============================================================ */

body.page-stages .three-stage-tag,
body.page-about .three-stage-tag,
.three-stage-tag {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6),
               0 0 12px rgba(0, 0, 0, 0.4) !important;
  background: rgba(15, 95, 44, 0.85) !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  letter-spacing: 0.18em !important;
}

/* ============================================================
   v11 — About: Where we operate / footprint block
   Premium editorial section inside the team area.
   ============================================================ */

body.page-about .footprint {
  max-width: 1080px;
  margin: clamp(56px, 7vw, 96px) auto 0;
  padding: clamp(40px, 5vw, 56px) clamp(28px, 4vw, 48px);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(22, 163, 74, 0.18);
  border-radius: 16px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

body.page-about .footprint-head {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 44px);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

body.page-about .footprint-eyebrow {
  display: inline-block;
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  color: #0F5F2C;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding: 6px 14px;
  background: #ffffff;
  border: 1px solid rgba(15, 95, 44, 0.30);
  border-radius: 100px;
}

body.page-about .footprint-title {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--ink, #0f172a);
  line-height: 1.15;
  margin: 0 0 14px;
}

body.page-about .footprint-lede {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft, #475569);
  margin: 0;
  letter-spacing: -0.003em;
}

/* Region groups: 2-col on desktop, 1-col on mobile */
body.page-about .footprint-groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.5vw, 32px) clamp(28px, 4vw, 56px);
  padding: clamp(28px, 3vw, 36px) 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

@media (max-width: 720px) {
  body.page-about .footprint-groups {
    grid-template-columns: 1fr;
  }
}

body.page-about .footprint-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.page-about .footprint-group-label {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: #0F5F2C;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 2px solid #0F5F2C;
  display: inline-flex;
  align-self: flex-start;
}

body.page-about .footprint-group-list {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #0f172a);
  letter-spacing: -0.005em;
  line-height: 1.7;
}

/* GDPR / Ireland compliance note: subtle, refined */
body.page-about .footprint-compliance {
  margin-top: clamp(24px, 2.8vw, 32px);
  padding: clamp(18px, 2vw, 22px) clamp(20px, 2.4vw, 26px);
  background: rgba(15, 95, 44, 0.04);
  border: 1px solid rgba(15, 95, 44, 0.12);
  border-radius: 10px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

body.page-about .footprint-compliance-icon {
  width: 20px;
  height: 20px;
  color: #0F5F2C;
  flex-shrink: 0;
  margin-top: 2px;
}

body.page-about .footprint-compliance-text {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft, #475569);
  letter-spacing: -0.003em;
}

/* ============================================================
   v11.1 — Premium org chart v3
   Larger photos, Afnan at the apex, dotted external flows
   showing agent network feeding in + developer network receiving.
   ============================================================ */

body.page-about .team-tree-v3 {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* ---- External source cards (top & bottom) ---- */

body.page-about .team-external {
  display: flex;
  justify-content: center;
  width: 100%;
}

body.page-about .team-external-card {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 18px 28px;
  background: #ffffff;
  border: 1.5px dashed rgba(15, 95, 44, 0.45);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 8px 24px -12px rgba(15, 23, 42, 0.10);
  max-width: 520px;
  position: relative;
}

body.page-about .team-external-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 95, 44, 0.08);
  border-radius: 10px;
  color: #0F5F2C;
}

body.page-about .team-external-icon svg {
  width: 22px;
  height: 22px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.page-about .team-external-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}

body.page-about .team-external-label {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 9.5px;
  font-weight: 700;
  color: #0F5F2C;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

body.page-about .team-external-title {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #0f172a);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

body.page-about .team-external-meta {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 12px;
  color: var(--ink-soft, #475569);
  font-weight: 400;
}

/* ---- Dotted flow lines ---- */

body.page-about .team-flow-line {
  width: 2px;
  height: 56px;
  position: relative;
}

body.page-about .team-flow-line-dotted {
  background-image: linear-gradient(to bottom, rgba(15, 95, 44, 0.45) 50%, transparent 50%);
  background-size: 2px 8px;
  background-repeat: repeat-y;
}

body.page-about .team-flow-line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid rgba(15, 95, 44, 0.55);
}

/* ---- CEO at the apex ---- */

body.page-about .team-ceo-v3 {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
}

body.page-about .team-card-v3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #ffffff;
  border: 1px solid var(--line, rgba(15, 23, 42, 0.10));
  border-radius: 16px;
  padding: 24px 22px 22px;
  width: 200px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

body.page-about .team-card-v3:hover {
  transform: translateY(-3px);
  border-color: rgba(22, 163, 74, 0.30);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 40px -16px rgba(22, 163, 74, 0.20);
}

body.page-about .team-card-v3.is-ceo {
  width: 260px;
  padding: 28px 24px 24px;
  border: 2px solid rgba(22, 163, 74, 0.30);
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.04) 0%, #ffffff 60%);
}

body.page-about .team-avatar-v3 {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--bg-soft, #f4faf6);
  border: 3px solid #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  flex-shrink: 0;
}

body.page-about .team-avatar-v3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.page-about .team-avatar-v3.is-ceo-avatar {
  width: 160px;
  height: 160px;
  border: 4px solid #ffffff;
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.18), 0 0 0 2px rgba(22, 163, 74, 0.20);
}

body.page-about .team-avatar-v3.is-initials-v3 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 48px;
  font-weight: 600;
  color: #0F5F2C;
  background: rgba(15, 95, 44, 0.06);
}

body.page-about .team-card-v3-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

body.page-about .team-name-v3 {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #0f172a);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

body.page-about .team-card-v3.is-ceo .team-name-v3 {
  font-size: 19px;
}

body.page-about .team-role-v3 {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 12.5px;
  font-weight: 500;
  color: #0F5F2C;
  letter-spacing: -0.003em;
  line-height: 1.3;
}

body.page-about .team-card-v3.is-ceo .team-role-v3 {
  font-size: 13.5px;
  font-weight: 600;
}

body.page-about .team-location-v3 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  color: var(--ink-soft, #475569);
  margin-top: 4px;
}

body.page-about .team-location-v3 .flag-icon {
  width: 14px;
  height: 10px;
  border-radius: 1px;
}

/* ---- Trunk: vertical line from CEO down to divisions ---- */

body.page-about .team-trunk-v3 {
  width: 2px;
  height: 48px;
  background: rgba(15, 95, 44, 0.55);
}

/* ---- 3 Divisions ---- */

body.page-about .team-divisions-v3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  width: 100%;
  position: relative;
  padding-top: 32px;
}

/* Horizontal connector line above divisions */
body.page-about .team-divisions-v3::before {
  content: '';
  position: absolute;
  top: 0;
  left: 16.67%;
  right: 16.67%;
  height: 2px;
  background: rgba(15, 95, 44, 0.55);
}

/* Vertical connector going up from each division top */
body.page-about .team-division-v3 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

body.page-about .team-division-v3::before {
  content: '';
  position: absolute;
  top: -32px;
  left: 50%;
  width: 2px;
  height: 32px;
  background: rgba(15, 95, 44, 0.55);
  transform: translateX(-50%);
}

body.page-about .team-division-header-v3 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: #ffffff;
  border: 1px solid rgba(15, 95, 44, 0.30);
  border-radius: 100px;
  margin-bottom: 4px;
}

body.page-about .team-division-marker-v3 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0F5F2C;
}

body.page-about .team-division-label-v3 {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: #0F5F2C;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body.page-about .team-division-body-v3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}

/* Direct reports area under a division head */
body.page-about .team-reports-v3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding-top: 14px;
  border-top: 1px dashed rgba(15, 95, 44, 0.25);
  margin-top: 6px;
}

body.page-about .team-reports-label-v3 {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-soft, #64748b);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

body.page-about .team-card-v3.is-report .team-avatar-v3 {
  width: 110px;
  height: 110px;
}

body.page-about .team-card-v3.is-report {
  width: 180px;
  padding: 18px 18px 16px;
}

body.page-about .team-card-v3.is-report .team-name-v3 {
  font-size: 14.5px;
}

body.page-about .team-card-v3.is-report .team-role-v3 {
  font-size: 11.5px;
}

/* Division head card slightly emphasised */
body.page-about .team-card-v3.is-division-head {
  border-color: rgba(22, 163, 74, 0.20);
}

/* Developer external card uses different accent */
body.page-about .team-external-card-dev .team-external-icon {
  background: rgba(15, 23, 42, 0.06);
  color: var(--ink, #0f172a);
}

/* ---- Mobile ---- */
@media (max-width: 880px) {
  body.page-about .team-divisions-v3 {
    grid-template-columns: 1fr;
    padding-top: 0;
    gap: 36px;
  }
  body.page-about .team-divisions-v3::before {
    display: none;
  }
  body.page-about .team-division-v3::before {
    display: none;
  }
  body.page-about .team-trunk-v3 {
    height: 32px;
  }
  body.page-about .team-flow-line {
    height: 40px;
  }
}

/* ============================================================
   v11.2 — Jovy bridge: agents → Jovy → developers
   ============================================================ */

/* The horizontal bridge containing left-external + Jovy + right-external */
body.page-about .team-jovy-bridge {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 720px;
  margin: 8px auto 0;
}

body.page-about .team-external-side {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}

body.page-about .team-external-side-left {
  justify-content: flex-end;
}

body.page-about .team-external-side-right {
  justify-content: flex-start;
}

/* Smaller side card for the bridge — fits compactly beside Jovy */
body.page-about .team-external-card-side {
  padding: 12px 16px;
  gap: 12px;
  max-width: 220px;
  flex-shrink: 0;
}

body.page-about .team-external-card-side .team-external-icon {
  width: 36px;
  height: 36px;
}

body.page-about .team-external-card-side .team-external-icon svg {
  width: 18px;
  height: 18px;
}

body.page-about .team-external-card-side .team-external-title {
  font-size: 14px;
}

body.page-about .team-external-card-side .team-external-meta {
  font-size: 11px;
}

body.page-about .team-external-card-side .team-external-label {
  font-size: 9px;
}

/* Horizontal dotted flow line connecting external card ↔ Jovy
   With arrow head pointing toward Jovy (left side) or away (right side) */
body.page-about .team-external-flow {
  flex: 1;
  height: 2px;
  min-width: 24px;
  max-width: 60px;
  background-image: linear-gradient(to right, rgba(15, 95, 44, 0.45) 50%, transparent 50%);
  background-size: 8px 2px;
  background-repeat: repeat-x;
  position: relative;
}

/* Arrow on the LEFT flow points right (toward Jovy) */
body.page-about .team-external-side-left .team-external-flow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid rgba(15, 95, 44, 0.55);
}

/* Arrow on the RIGHT flow points right (away from Jovy → developer) */
body.page-about .team-external-side-right .team-external-flow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid rgba(15, 95, 44, 0.55);
}

/* Jovy as the bridge card — accent it slightly */
body.page-about .team-card-v3.is-bridge {
  border-color: rgba(22, 163, 74, 0.30);
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.03) 0%, #ffffff 60%);
}

/* On mobile, the bridge stacks vertically: agent → Jovy → developer */
@media (max-width: 880px) {
  body.page-about .team-jovy-bridge {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 280px;
  }
  body.page-about .team-external-side {
    flex-direction: column;
    gap: 8px;
  }
  body.page-about .team-external-side-left,
  body.page-about .team-external-side-right {
    justify-content: center;
  }
  body.page-about .team-external-flow {
    width: 2px;
    height: 24px;
    min-width: 2px;
    max-width: 2px;
    background-image: linear-gradient(to bottom, rgba(15, 95, 44, 0.45) 50%, transparent 50%);
    background-size: 2px 6px;
    background-repeat: repeat-y;
  }
  /* Arrows on mobile point downward */
  body.page-about .team-external-side-left .team-external-flow::after,
  body.page-about .team-external-side-right .team-external-flow::after {
    left: 50%;
    right: auto;
    bottom: 0;
    top: auto;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid rgba(15, 95, 44, 0.55);
    border-bottom: 0;
  }
  /* Reverse order on right side so flow reads: developer card → arrow → Jovy */
  body.page-about .team-external-side-right {
    flex-direction: column-reverse;
  }
}

/* ============================================================
   v11.3 — Partner network band (below the org chart)
   Clean horizontal flow: Agent → Jovy → Developer.
   Lives below the divisions grid, full-width, no overlap.
   ============================================================ */

/* Reset legacy bridge rules that no longer match HTML (defensive) */
body.page-about .team-jovy-bridge { display: none !important; }

body.page-about .partner-network-band {
  margin: clamp(48px, 6vw, 80px) 0 0;
  padding: clamp(40px, 5vw, 56px) clamp(28px, 4vw, 44px);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 95, 44, 0.15);
  border-radius: 16px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

body.page-about .partner-network-head {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 44px);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

body.page-about .partner-network-eyebrow {
  display: inline-block;
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  color: #0F5F2C;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding: 6px 14px;
  background: #ffffff;
  border: 1px solid rgba(15, 95, 44, 0.30);
  border-radius: 100px;
}

body.page-about .partner-network-lede {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft, #475569);
  margin: 0;
  letter-spacing: -0.003em;
}

body.page-about .partner-network-lede strong {
  font-weight: 600;
  color: var(--ink, #0f172a);
}

/* The horizontal flow: 5 columns (card · arrow · hub · arrow · card) */
body.page-about .partner-network-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  max-width: 1080px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  body.page-about .partner-network-flow {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 360px;
  }
}

/* External cards (left + right) */
body.page-about .partner-network-card-external {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: #ffffff;
  border: 1.5px dashed rgba(15, 95, 44, 0.40);
  border-radius: 12px;
  min-height: 110px;
}

body.page-about .partner-network-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 95, 44, 0.08);
  border-radius: 10px;
  color: #0F5F2C;
}

body.page-about .partner-network-icon svg {
  width: 22px;
  height: 22px;
}

body.page-about .partner-network-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  min-width: 0;
}

body.page-about .partner-network-label {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 9.5px;
  font-weight: 700;
  color: #0F5F2C;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

body.page-about .partner-network-title {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #0f172a);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

body.page-about .partner-network-meta {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 11.5px;
  color: var(--ink-soft, #64748b);
  line-height: 1.4;
  font-weight: 400;
}

/* Arrow */
body.page-about .partner-network-arrow {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(15, 95, 44, 0.55);
  flex-shrink: 0;
}

body.page-about .partner-network-arrow svg {
  width: 28px;
  height: 28px;
}

@media (max-width: 900px) {
  body.page-about .partner-network-arrow {
    transform: rotate(90deg);
    margin: 0 auto;
  }
}

/* Hub card (Jovy, centre) */
body.page-about .partner-network-card-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 18px 20px;
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.06) 0%, #ffffff 70%);
  border: 1.5px solid rgba(22, 163, 74, 0.30);
  border-radius: 14px;
  min-height: 110px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(22, 163, 74, 0.20);
}

body.page-about .partner-network-hub-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 10px;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);
  flex-shrink: 0;
}

body.page-about .partner-network-hub-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.page-about .partner-network-hub-name {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #0f172a);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 4px;
}

body.page-about .partner-network-hub-role {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 11.5px;
  font-weight: 500;
  color: #0F5F2C;
  letter-spacing: -0.003em;
  line-height: 1.3;
  max-width: 180px;
}

/* ============================================================
   v11.4 — Direct reports each connected to their own network
   Rose → Agent Network  |  Jovy → Developer Network
   Side-by-side columns inside the Commercial division.
   Each column: person card + dotted vertical connector + network card.
   ============================================================ */

/* Kill the old partner-network-band styles (no longer used) */
body.page-about .partner-network-band { display: none !important; }

/* Widen the Commercial division so both connection columns fit gracefully */
body.page-about .team-divisions-v3 {
  grid-template-columns: 1.6fr 1fr 1fr;
}

/* The container holding the two direct-report + network columns */
body.page-about .team-reports-with-networks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
  width: 100%;
  margin-top: 4px;
}

/* Each column: person card on top, dotted connector, network card below */
body.page-about .team-report-with-network {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Person card adopts is-report sizing - already styled but reset width here for column fit */
body.page-about .team-report-with-network .team-card-v3.is-report {
  width: 100%;
  max-width: 200px;
}

body.page-about .team-report-with-network .team-card-v3.is-report .team-avatar-v3 {
  width: 96px;
  height: 96px;
}

/* The dotted vertical connector between person and network card */
body.page-about .team-network-connector {
  width: 2px;
  height: 36px;
  background-image: linear-gradient(to bottom, rgba(15, 95, 44, 0.50) 50%, transparent 50%);
  background-size: 2px 6px;
  background-repeat: repeat-y;
  position: relative;
}

/* Arrow at the bottom of the connector pointing into the network card */
body.page-about .team-network-connector::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid rgba(15, 95, 44, 0.60);
}

/* Network card — premium dashed-border box matching the person above */
body.page-about .team-network-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 18px 16px 16px;
  background: #ffffff;
  border: 1.5px dashed rgba(15, 95, 44, 0.40);
  border-radius: 12px;
  width: 100%;
  max-width: 200px;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

body.page-about .team-network-card:hover {
  border-color: rgba(15, 95, 44, 0.60);
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 28px -14px rgba(15, 95, 44, 0.20);
}

body.page-about .team-network-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 95, 44, 0.08);
  border-radius: 10px;
  color: #0F5F2C;
  flex-shrink: 0;
}

body.page-about .team-network-icon svg {
  width: 22px;
  height: 22px;
}

body.page-about .team-network-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

body.page-about .team-network-label {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 9px;
  font-weight: 700;
  color: #0F5F2C;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

body.page-about .team-network-title {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink, #0f172a);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

body.page-about .team-network-meta {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  color: var(--ink-soft, #64748b);
  font-weight: 400;
  line-height: 1.3;
}

/* Mobile: stack the two columns vertically */
@media (max-width: 720px) {
  body.page-about .team-divisions-v3 {
    grid-template-columns: 1fr;
  }
  body.page-about .team-reports-with-networks {
    grid-template-columns: 1fr;
    max-width: 280px;
    margin: 0 auto;
  }
}

/* ============================================================
   v11.5 — Ensure team-report-with-network renders consistently
   whether in the Commercial direct-reports grid (Rose/Jovy)
   or as a single column in Governance (Khalid).
   ============================================================ */

body.page-about .team-division-body-v3 > .team-report-with-network {
  width: 100%;
  align-items: center;
}

/* Khalid's column has a single network connection, so let his card use
   the same compact width as Rose/Jovy for visual consistency */
body.page-about .team-division-body-v3 > .team-report-with-network > .team-card-v3 {
  width: 100%;
  max-width: 200px;
}

body.page-about .team-division-body-v3 > .team-report-with-network > .team-card-v3 .team-avatar-v3 {
  width: 110px;
  height: 110px;
}

/* ============================================================
   v11.6 — Clean line geometry between Afnan and the divisions
   Replaces fragmented pseudo-element connectors with a coherent
   trunk + horizontal bar + drop-down lines that visually anchor
   every card. Premium feel, like the profiles page system.
   ============================================================ */

/* Trunk: deeper green, slightly wider */
body.page-about .team-trunk-v3 {
  width: 2px;
  height: 56px;
  background: rgba(15, 95, 44, 0.55);
  margin: 0 auto;
}

/* Reset legacy ::before lines so we can rebuild cleanly */
body.page-about .team-divisions-v3::before,
body.page-about .team-division-v3::before {
  display: none !important;
  content: none !important;
}

/* New container: holds the horizontal bar + drop-lines + divisions */
body.page-about .team-divisions-v3 {
  position: relative;
  padding-top: 56px;
}

/* Horizontal bar across the divisions — spans the centres of the three columns */
body.page-about .team-divisions-v3::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: transparent !important;
  pointer-events: none !important;
}

/* Use a real visible bar instead - placed via a real DOM-like SVG approach via background */
body.page-about .team-divisions-v3 {
  background-image:
    /* Horizontal bar centered, spans columns */
    linear-gradient(to right, transparent calc(16.67% - 1px), rgba(15, 95, 44, 0.55) calc(16.67% - 1px), rgba(15, 95, 44, 0.55) calc(83.33% + 1px), transparent calc(83.33% + 1px));
  background-size: 100% 2px;
  background-position: 0 0;
  background-repeat: no-repeat;
}

/* Each division: vertical drop-line from horizontal bar down to the first card.
   The drop line attaches visually to the top of the division-header-v3 pill. */
body.page-about .team-division-v3 {
  position: relative;
}

body.page-about .team-division-v3::after {
  content: '';
  position: absolute;
  top: -56px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 56px;
  background: rgba(15, 95, 44, 0.55);
  pointer-events: none;
}

/* Division header pill — make it visually "land" on the line by removing its border 
   on the top and slightly elevating */
body.page-about .team-division-header-v3 {
  position: relative;
  z-index: 1;
  margin-top: 0;
  padding: 9px 20px;
  background: #ffffff;
  border: 1.5px solid rgba(15, 95, 44, 0.35);
  border-radius: 100px;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 4px 12px -6px rgba(15, 95, 44, 0.18);
}

/* Each division: a SECONDARY drop-line from the pill down to the first card */
body.page-about .team-division-body-v3 {
  position: relative;
}

body.page-about .team-division-body-v3::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 12px;
  background: rgba(15, 95, 44, 0.40);
  pointer-events: none;
}

/* Cards: lift styling closer to profiles' framework-block aesthetic */
body.page-about .team-card-v3 {
  border: 1px solid rgba(15, 95, 44, 0.15);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 6px 18px -8px rgba(15, 23, 42, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

body.page-about .team-card-v3:hover {
  border-color: rgba(22, 163, 74, 0.35);
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 14px 32px -12px rgba(22, 163, 74, 0.18);
}

/* CEO card emphasis preserved */
body.page-about .team-card-v3.is-ceo {
  border: 2px solid rgba(22, 163, 74, 0.35);
  box-shadow:
    0 1px 2px rgba(22, 163, 74, 0.06),
    0 18px 40px -14px rgba(22, 163, 74, 0.22);
}

/* Mobile: revert horizontal bar + drop-lines to vertical stacks */
@media (max-width: 880px) {
  body.page-about .team-divisions-v3 {
    background-image: none;
    padding-top: 0;
  }
  body.page-about .team-division-v3::after {
    display: none;
  }
  body.page-about .team-division-body-v3::before {
    display: none;
  }
}

/* ============================================================
   v11.7 — Our Network split panel
   Agent network (left) | green divider | Developer network (right)
   ============================================================ */

/* ============================================================
   v12 — Premium banner-led Our Network section
   Each side opens with a full-bleed photographic banner, an editorial
   title block, a 3-stat callout row, and the supporting content
   (regions list for agents, logo grid for developers).
   ============================================================ */

body.page-about .network-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  max-width: 1180px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 24px 64px -32px rgba(15, 23, 42, 0.18);
}

@media (max-width: 900px) {
  body.page-about .network-split {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ---- Each side ---- */

body.page-about .network-side {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #ffffff;
}/* ---- BANNER: full-bleed photo at top of each side ---- */

body.page-about .network-side-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: #0a0a0a;
}

body.page-about .network-side-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.02);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

body.page-about .network-side-banner:hover img {
  transform: scale(1.04);
}

/* Subtle dark gradient overlay so eyebrow text reads cleanly */
body.page-about .network-side-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 45%,
    rgba(0, 0, 0, 0.55) 100%
  );
  pointer-events: none;
}

/* Eyebrow text positioned bottom-left of banner */
body.page-about .network-side-banner-meta {
  position: absolute;
  left: clamp(20px, 3vw, 28px);
  bottom: clamp(16px, 2.5vw, 22px);
  z-index: 2;
}

body.page-about .network-side-banner-eyebrow {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding: 6px 12px;
  background: rgba(15, 95, 44, 0.92);
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* ---- TITLE BLOCK below banner ---- */

body.page-about .network-side-head {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(28px, 3.5vw, 40px) clamp(24px, 3vw, 36px) clamp(16px, 2.5vw, 24px);
}

body.page-about .network-side-title {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  color: var(--ink, #0f172a);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
}

body.page-about .network-side-subtitle {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft, #475569);
  margin: 0;
  max-width: 420px;
}

/* ---- STAT ROW: 3 callouts ---- */

body.page-about .network-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 0 clamp(24px, 3vw, 36px);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(15, 95, 44, 0.025);
}

body.page-about .network-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: clamp(18px, 2.5vw, 24px) 0;
  position: relative;
  text-align: center;
}

/* Hairline divider between stats */
body.page-about .network-stat + .network-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 28%;
  bottom: 28%;
  width: 1px;
  background: rgba(15, 23, 42, 0.08);
}

body.page-about .network-stat + .network-stat {
  padding-left: clamp(18px, 2.5vw, 28px);
}

body.page-about .network-stat-number {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 600;
  color: #0F5F2C;
  letter-spacing: -0.04em;
  line-height: 1;
}

body.page-about .network-stat-pct {
  font-size: 0.6em;
  margin-left: 1px;
  font-weight: 500;
}

body.page-about .network-stat-label {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-soft, #475569);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 6px;
}

/* ---- Vertical green divider between the two sides ---- */

body.page-about .network-divider {
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(15, 95, 44, 0.18) 12%,
    rgba(15, 95, 44, 0.18) 88%,
    transparent 100%
  );
  position: relative;
}

body.page-about .network-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: #ffffff;
  border: 2px solid rgba(15, 95, 44, 0.45);
  border-radius: 50%;
  z-index: 2;
}

@media (max-width: 900px) {
  body.page-about .network-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(15, 95, 44, 0.18) 12%,
      rgba(15, 95, 44, 0.18) 88%,
      transparent 100%
    );
    margin: 0;
  }
  body.page-about .network-divider::before {
    display: none;
  }
}

/* ---- AGENT side: regions list (premium) ---- */

body.page-about .network-regions {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(24px, 3vw, 32px) clamp(24px, 3vw, 36px) clamp(28px, 3.5vw, 40px);
  flex: 1;
  min-height: 0;
}

body.page-about .network-region {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Region head: label + count, on opposite ends */
body.page-about .network-region-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(15, 95, 44, 0.18);
}

body.page-about .network-region-label {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  color: #0F5F2C;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

body.page-about .network-region-count {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-muted, #94a3b8);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Country list: strict 2-column grid (mirrors the developer logo grid) */
body.page-about .network-region-countries {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

body.page-about .network-country {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(15, 95, 44, 0.04);
  border: 1px solid rgba(15, 95, 44, 0.10);
  border-radius: 8px;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  min-height: 36px;
}

body.page-about .network-country:hover {
  background: rgba(15, 95, 44, 0.08);
  border-color: rgba(15, 95, 44, 0.22);
  transform: translateY(-1px);
}

body.page-about .network-country-flag {
  width: 22px;
  height: 16px;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04);
  flex-shrink: 0;
}

body.page-about .network-country-flag svg {
  width: 100%;
  height: 100%;
  display: block;
}

body.page-about .network-country-name {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink, #0f172a);
  letter-spacing: -0.005em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Backward compat: hide old single-line region-list if it's still present */
body.page-about .network-region-list {
  display: none;
}

/* ---- DEVELOPER side: logo grid ---- */

body.page-about .developer-logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 10px;
  padding: clamp(24px, 3vw, 32px) clamp(24px, 3vw, 36px) clamp(28px, 3.5vw, 40px);
  flex: 1;
  min-height: 0;
}

body.page-about .developer-logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 18px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 12px;
  min-height: 76px;
  transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

body.page-about .developer-logo-cell:hover {
  border-color: rgba(15, 95, 44, 0.30);
  transform: translateY(-3px);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 14px 32px -14px rgba(15, 23, 42, 0.22);
}

body.page-about .developer-logo-cell img {
  max-width: 100%;
  max-height: 44px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter 0.4s ease, opacity 0.4s ease;
}

body.page-about .developer-logo-cell:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* ---- Disclaimer ---- */

body.page-about .network-disclaimer {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  color: var(--ink-muted, #94a3b8);
  text-align: center;
  margin: clamp(20px, 2.5vw, 28px) auto 0;
  max-width: 760px;
  line-height: 1.5;
  font-style: italic;
}

/* Hide legacy developer-card / developer-grid styles since the markup changed */
body.page-about .developer-network,
body.page-about .developer-grid,
body.page-about .developer-card,
body.page-about .developer-disclaimer { display: none !important; }

/* ============================================================
   v11.8 — Board of Directors + line + card cleanup
   • All cards solid white (no gradients)
   • All arrows removed from connectors
   • Board card to Afnan's right with dotted line + Danish flag
   • Ireland flag in the EU Rep external card
   ============================================================ */

/* --- All cards solid white, no gradients --- */
body.page-about .team-card-v3.is-ceo {
  background: #ffffff !important;
}

body.page-about .team-card-v3.is-bridge {
  background: #ffffff !important;
}

body.page-about .partner-network-card-hub {
  background: #ffffff !important;
}

/* --- Remove all arrows from connectors --- */
body.page-about .team-flow-line::after,
body.page-about .team-network-connector::after,
body.page-about .team-external-side-left .team-external-flow::after,
body.page-about .team-external-side-right .team-external-flow::after {
  display: none !important;
  content: none !important;
}

/* --- CEO + Board cluster (horizontal arrangement) --- */

body.page-about .team-ceo-v3 {
  display: flex;
  justify-content: center;
  width: 100%;
}

body.page-about .team-ceo-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

/* Dotted horizontal connector between Afnan and Board */
body.page-about .team-ceo-board-connector {
  width: 56px;
  height: 2px;
  background-image: linear-gradient(to right, rgba(15, 95, 44, 0.45) 50%, transparent 50%);
  background-size: 8px 2px;
  background-repeat: repeat-x;
}

/* Board card: smaller than CEO, white with dashed border, Danish flag */
body.page-about .team-board-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  width: 180px;
  padding: 22px 18px 20px;
  background: #ffffff;
  border: 1.5px dashed rgba(15, 95, 44, 0.40);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 6px 18px -10px rgba(15, 23, 42, 0.10);
}

body.page-about .team-board-flag {
  width: 42px;
  height: 30px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10);
  margin-bottom: 10px;
}

body.page-about .team-board-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

body.page-about .team-board-label {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink, #0f172a);
  letter-spacing: -0.012em;
  line-height: 1.2;
  margin-bottom: 8px;
}

body.page-about .team-board-meta {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 9.5px;
  font-weight: 700;
  color: #0F5F2C;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}

body.page-about .team-board-meta-sub {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  color: var(--ink-soft, #64748b);
  line-height: 1.3;
  margin-top: 2px;
}

/* Mobile: board card stacks below Afnan */
@media (max-width: 720px) {
  body.page-about .team-ceo-cluster {
    flex-direction: column;
    gap: 0;
  }
  body.page-about .team-ceo-board-connector {
    width: 2px;
    height: 32px;
    background-image: linear-gradient(to bottom, rgba(15, 95, 44, 0.45) 50%, transparent 50%);
    background-size: 2px 8px;
    background-repeat: repeat-y;
    margin: 8px 0;
  }
}

/* --- Ireland flag icon in EU Rep card --- */
body.page-about .team-network-icon-flag {
  background: transparent !important;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 4px;
  padding: 0;
  overflow: hidden;
  width: 42px !important;
  height: 30px !important;
}

body.page-about .team-network-icon-flag svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* --- Line geometry: tighten the trunk + horizontal bar + drops --- */
body.page-about .team-trunk-v3 {
  background: rgba(15, 95, 44, 0.55) !important;
}

body.page-about .team-divisions-v3 {
  background-image: linear-gradient(
    to right,
    transparent calc(16.67% - 1px),
    rgba(15, 95, 44, 0.55) calc(16.67% - 1px),
    rgba(15, 95, 44, 0.55) calc(83.33% + 1px),
    transparent calc(83.33% + 1px)
  ) !important;
  background-size: 100% 2px !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
}

body.page-about .team-division-v3::after {
  background: rgba(15, 95, 44, 0.55) !important;
}

body.page-about .team-division-body-v3::before {
  background: rgba(15, 95, 44, 0.55) !important;
}

/* ============================================================
   v11.9 — Center Afnan + Director Board to her right
   Plus: consistent flag-row pattern across all network cards
   ============================================================ */

/* CENTER AFNAN: cluster is centered, board card is absolutely positioned
   to Afnan's right so it doesn't shift the centerline */
body.page-about .team-ceo-v3 {
  display: flex !important;
  justify-content: center !important;
  width: 100%;
}

body.page-about .team-ceo-cluster {
  position: relative;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Afnan stays in normal flow, centered */
body.page-about .team-ceo-cluster > .team-card-v3.is-ceo {
  position: relative;
  z-index: 2;
}

/* Dotted connector: absolutely positioned, runs from Afnan's right edge to the board card */
body.page-about .team-ceo-board-connector {
  position: absolute !important;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  width: 56px !important;
  height: 2px !important;
  background-image: linear-gradient(to right, rgba(15, 95, 44, 0.45) 50%, transparent 50%) !important;
  background-size: 8px 2px !important;
  background-repeat: repeat-x !important;
  z-index: 1;
}

/* Board card: absolutely positioned to the right of Afnan */
body.page-about .team-board-card {
  position: absolute !important;
  top: 50%;
  left: calc(100% + 56px);
  transform: translateY(-50%);
  width: 180px;
  z-index: 1;
}

/* Mobile fallback: board card and connector go back to flow, stacked below */
@media (max-width: 1080px) {
  body.page-about .team-ceo-board-connector {
    position: relative !important;
    top: auto;
    left: auto;
    transform: none;
    width: 2px !important;
    height: 32px !important;
    background-image: linear-gradient(to bottom, rgba(15, 95, 44, 0.45) 50%, transparent 50%) !important;
    background-size: 2px 8px !important;
    background-repeat: repeat-y !important;
    margin: 8px 0;
  }
  body.page-about .team-board-card {
    position: relative !important;
    top: auto;
    left: auto;
    transform: none;
  }
}

/* ============================================================
   FLAG ROW pattern for network cards
   Replaces the previous icon tiles. Same height as the icon area.
   ============================================================ */

body.page-about .team-network-flags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

body.page-about .team-network-flag {
  display: inline-block;
  width: 28px;
  height: 20px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  flex-shrink: 0;
}

body.page-about .team-network-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Hide the old icon container if any HTML still has it */
body.page-about .team-network-icon {
  display: none !important;
}

/* Network card layout: now uses column flex with the flag row on top */
body.page-about .team-network-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 20px 16px 16px;
}

body.page-about .team-network-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* DIRECTOR BOARD card: same flag dimensions as network cards for consistency */
body.page-about .team-board-flag {
  width: 28px !important;
  height: 20px !important;
  border-radius: 3px !important;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  margin-bottom: 10px;
}

/* ============================================================
   LINE CONTINUITY: ensure all org-chart connector lines meet
   cleanly without gaps. Pull all line elements to identical
   opacity, colour and width.
   ============================================================ */

body.page-about .team-trunk-v3,
body.page-about .team-division-v3::after,
body.page-about .team-division-body-v3::before {
  background: rgba(15, 95, 44, 0.55) !important;
  width: 2px !important;
}

/* Horizontal bar uses the same green via background gradient,
   plus a slight vertical fix so it sits exactly at the bottom of
   the trunk and top of the division drops */
body.page-about .team-divisions-v3 {
  padding-top: 56px !important;
  background-image: linear-gradient(
    to right,
    transparent calc(16.67% - 1px),
    rgba(15, 95, 44, 0.55) calc(16.67% - 1px),
    rgba(15, 95, 44, 0.55) calc(83.33% + 1px),
    transparent calc(83.33% + 1px)
  ) !important;
  background-size: 100% 2px !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
}

/* Ensure no gap between trunk bottom and horizontal bar top */
body.page-about .team-trunk-v3 {
  margin-bottom: 0 !important;
}

/* Drop lines from horizontal bar down to each division pill */
body.page-about .team-division-v3::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  height: 56px !important;
  display: block !important;
}

/* Short drop from each division pill down to its first card */
body.page-about .team-division-body-v3::before {
  content: '' !important;
  position: absolute !important;
  top: -12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  height: 12px !important;
  display: block !important;
}

/* The dotted vertical line from Rose/Jovy/Khalid down to their network card */
body.page-about .team-network-connector {
  width: 2px !important;
  height: 36px !important;
  background-image: linear-gradient(to bottom, rgba(15, 95, 44, 0.50) 50%, transparent 50%) !important;
  background-size: 2px 6px !important;
  background-repeat: repeat-y !important;
}

/* ============================================================
   DIRECTION PREVIEWS (temporary)
   Three different premium approaches to the org chart.
   Once chosen, this entire block + the unused HTML gets removed.
   ============================================================ */

body.page-about .direction-label {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: #0F5F2C;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 14px;
  background: #ffffff;
  border: 1.5px solid rgba(15, 95, 44, 0.30);
  border-radius: 100px;
  display: inline-block;
  margin-bottom: clamp(36px, 4vw, 48px);
}

body.page-about .direction-preview {
  border-top: 1px dashed rgba(15, 23, 42, 0.15);
}

/* ============================================================
   DIRECTION A — THE BENCH
   Editorial / institutional, photo-led, no connector lines.
   ============================================================ */

body.page-about .bench {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 5vw, 64px);
}

/* Hero: Afnan as the lead */
body.page-about .bench-hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(36px, 4vw, 56px);
  align-items: center;
  padding-bottom: clamp(40px, 4vw, 52px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
}

@media (max-width: 760px) {
  body.page-about .bench-hero {
    grid-template-columns: 1fr;
    text-align: left;
  }
}

body.page-about .bench-hero-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-soft, #f4faf6);
}

body.page-about .bench-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

body.page-about .bench-hero-eyebrow {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  color: #0F5F2C;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

body.page-about .bench-hero-name {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink, #0f172a);
  line-height: 1.1;
  margin: 0 0 6px;
}

body.page-about .bench-hero-role {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 14px;
  color: var(--ink-soft, #475569);
  margin: 0 0 24px;
}

body.page-about .bench-hero-quote {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: clamp(15px, 1.4vw, 17px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink, #0f172a);
  padding-left: 18px;
  border-left: 2px solid #0F5F2C;
  margin: 0 0 28px;
  letter-spacing: -0.005em;
}

body.page-about .bench-hero-board {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(15, 95, 44, 0.04);
  border: 1px dashed rgba(15, 95, 44, 0.30);
  border-radius: 10px;
  max-width: 360px;
}

body.page-about .bench-hero-board-flag {
  width: 28px;
  height: 20px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  flex-shrink: 0;
}

body.page-about .bench-hero-board-flag svg {
  width: 100%;
  height: 100%;
  display: block;
}

body.page-about .bench-hero-board-label {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #0f172a);
  letter-spacing: -0.012em;
  line-height: 1.2;
}

body.page-about .bench-hero-board-meta {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  color: var(--ink-soft, #64748b);
  margin-top: 2px;
}

/* Division rows */
body.page-about .bench-division {
  display: grid;
  grid-template-columns: 3px 280px 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

@media (max-width: 760px) {
  body.page-about .bench-division {
    grid-template-columns: 3px 1fr;
  }
  body.page-about .bench-division .bench-people {
    grid-column: 2;
    margin-top: 16px;
  }
}

body.page-about .bench-division-rail {
  width: 3px;
  background: #0F5F2C;
  border-radius: 2px;
  align-self: stretch;
  min-height: 80px;
}

body.page-about .bench-division-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
}

body.page-about .bench-division-num {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: #0F5F2C;
  letter-spacing: 0.22em;
  margin-bottom: 4px;
}

body.page-about .bench-division-name {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--ink, #0f172a);
  line-height: 1.15;
}

body.page-about .bench-division-desc {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 13.5px;
  color: var(--ink-soft, #475569);
  line-height: 1.5;
  margin-top: 8px;
  max-width: 240px;
}

body.page-about .bench-people {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 4px;
}

body.page-about .bench-person {
  display: flex;
  align-items: center;
  gap: 16px;
}

body.page-about .bench-person-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(15, 95, 44, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

body.page-about .bench-person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.page-about .bench-person-photo.is-initials {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 22px;
  font-weight: 600;
  color: #0F5F2C;
}

body.page-about .bench-person-name {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #0f172a);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

body.page-about .bench-person-role {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 12.5px;
  color: var(--ink-soft, #475569);
  margin-top: 2px;
}

/* ============================================================
   DIRECTION B — THE SPINE
   Single vertical green spine with alternating node clusters.
   ============================================================ */

body.page-about .spine {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  padding: 20px 0;
}

body.page-about .spine-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(15, 95, 44, 0.55) 6%,
    rgba(15, 95, 44, 0.55) 94%,
    transparent 100%
  );
  z-index: 0;
}

body.page-about .spine-node {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  margin-bottom: clamp(36px, 4vw, 48px);
  z-index: 1;
}

body.page-about .spine-node:last-child {
  margin-bottom: 0;
}

body.page-about .spine-node-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #0F5F2C;
  z-index: 2;
}

body.page-about .spine-node-arm {
  position: absolute;
  top: 50%;
  height: 2px;
  background: rgba(15, 95, 44, 0.55);
  z-index: 1;
}

body.page-about .spine-node-left .spine-node-arm {
  right: 50%;
  width: 50px;
  margin-right: 6px;
}

body.page-about .spine-node-right .spine-node-arm {
  left: 50%;
  width: 50px;
  margin-left: 6px;
}

body.page-about .spine-node-content {
  display: flex;
}

body.page-about .spine-node-left .spine-node-content {
  grid-column: 1;
  justify-content: flex-end;
  padding-right: 70px;
}

body.page-about .spine-node-right .spine-node-content {
  grid-column: 2;
  justify-content: flex-start;
  padding-left: 70px;
}

body.page-about .spine-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: #ffffff;
  border: 1px solid rgba(15, 95, 44, 0.18);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 8px 22px -10px rgba(15, 23, 42, 0.10);
  max-width: 360px;
}

body.page-about .spine-card-ceo {
  padding: 20px 26px;
}

body.page-about .spine-card-small {
  padding: 14px 18px;
  max-width: 280px;
}

body.page-about .spine-card-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

body.page-about .spine-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.page-about .spine-card-flag {
  width: 32px;
  height: 22px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  flex-shrink: 0;
}

body.page-about .spine-card-flag svg {
  width: 100%;
  height: 100%;
  display: block;
}

body.page-about .spine-card-eyebrow {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 9.5px;
  font-weight: 700;
  color: #0F5F2C;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

body.page-about .spine-card-name {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink, #0f172a);
  line-height: 1.2;
}

body.page-about .spine-card-role {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 12.5px;
  color: var(--ink-soft, #475569);
  margin-top: 4px;
}

/* Division cluster (inside a spine node) */
body.page-about .spine-division {
  background: #ffffff;
  border: 1px solid rgba(15, 95, 44, 0.18);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 8px 22px -10px rgba(15, 23, 42, 0.10);
  width: 100%;
  max-width: 380px;
}

body.page-about .spine-division-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

body.page-about .spine-division-num {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: #0F5F2C;
  letter-spacing: 0.22em;
}

body.page-about .spine-division-name {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink, #0f172a);
}

body.page-about .spine-people {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.page-about .spine-person {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
}

body.page-about .spine-person-photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(15, 95, 44, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

body.page-about .spine-person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.page-about .spine-person-photo.is-initials {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 16px;
  font-weight: 600;
  color: #0F5F2C;
}

body.page-about .spine-person-name {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink, #0f172a);
}

body.page-about .spine-person-role {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 11.5px;
  color: var(--ink-soft, #475569);
  text-align: right;
}

@media (max-width: 760px) {
  body.page-about .spine-line { left: 24px; }
  body.page-about .spine-node { grid-template-columns: 1fr; }
  body.page-about .spine-node-dot { left: 24px; }
  body.page-about .spine-node-left .spine-node-arm,
  body.page-about .spine-node-right .spine-node-arm { left: 24px; right: auto; width: 36px; margin: 0; }
  body.page-about .spine-node-left .spine-node-content,
  body.page-about .spine-node-right .spine-node-content { grid-column: 1; padding-left: 78px; padding-right: 0; justify-content: flex-start; }
}

/* ============================================================
   DIRECTION C — THE FLOOR PLAN
   Annual-report grid layout, "rooms" instead of branches.
   ============================================================ */

body.page-about .floorplan {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1px;
  max-width: 1180px;
  margin: 0 auto;
  background: rgba(15, 95, 44, 0.18);
  border: 1px solid rgba(15, 95, 44, 0.18);
  border-radius: 16px;
  overflow: hidden;
}

body.page-about .floorplan-room {
  background: #ffffff;
  padding: clamp(24px, 3vw, 36px) clamp(20px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 280px;
}

body.page-about .is-room-leadership {
  grid-column: 1 / span 3;
  background: #ffffff;
}

body.page-about .floorplan-room-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

body.page-about .floorplan-room-num {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: #0F5F2C;
  letter-spacing: 0.22em;
}

body.page-about .floorplan-room-name {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink, #0f172a);
}

body.page-about .floorplan-room-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}

body.page-about .is-room-leadership .floorplan-room-body {
  flex-direction: row;
  align-items: center;
  gap: 36px;
}

body.page-about .floorplan-person {
  display: flex;
  align-items: center;
  gap: 14px;
}

body.page-about .floorplan-person.is-large {
  flex: 1;
  gap: 22px;
}

body.page-about .floorplan-person-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(15, 95, 44, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.page-about .floorplan-person.is-large .floorplan-person-photo {
  width: 110px;
  height: 110px;
}

body.page-about .floorplan-person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.page-about .floorplan-person-photo.is-initials {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 22px;
  font-weight: 600;
  color: #0F5F2C;
}

body.page-about .floorplan-person-name {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink, #0f172a);
  line-height: 1.2;
}

body.page-about .floorplan-person.is-large .floorplan-person-name {
  font-size: 22px;
}

body.page-about .floorplan-person-role {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 12px;
  color: var(--ink-soft, #475569);
  margin-top: 2px;
}

body.page-about .floorplan-person.is-large .floorplan-person-role {
  font-size: 14px;
}

body.page-about .floorplan-board {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(15, 95, 44, 0.05);
  border: 1px dashed rgba(15, 95, 44, 0.30);
  border-radius: 10px;
  flex-shrink: 0;
}

body.page-about .floorplan-board-flag {
  width: 28px;
  height: 20px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  flex-shrink: 0;
}

body.page-about .floorplan-board-flag svg {
  width: 100%;
  height: 100%;
  display: block;
}

body.page-about .floorplan-board-name {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #0f172a);
}

body.page-about .floorplan-board-meta {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  color: var(--ink-soft, #64748b);
  margin-top: 2px;
}

@media (max-width: 900px) {
  body.page-about .floorplan {
    grid-template-columns: 1fr;
  }
  body.page-about .is-room-leadership {
    grid-column: 1;
  }
  body.page-about .is-room-leadership .floorplan-room-body {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   v12 — Horizontal spine org chart for about page
   Replaces all v11.x team-tree-v3 / team-divisions-v3 styles.
   Afnan + Director Board on top, main spine, 4 division columns
   (Majed, Marlon, Nyan, Khalid), sub-tree under Majed for
   Rose+Jovy+external networks, sub-tree under Khalid for EU Rep.
   ============================================================ */

  body.page-about .org {
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 0;
    /* The cross-section (Jovy, Rose, networks) is absolutely positioned
       and hangs below Khalid's column. Reserve that overhang here so the
       global .about-section padding handles between-section rhythm naturally. */
    padding-bottom: 260px;
  }

  /* Mobile: cross-section stacks vertically instead of absolutely positioned,
     so no reserved bottom-padding needed (the section flows naturally) */

  /* === Shared: dot at line junction === */
  body.page-about .dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--green-darker);
    z-index: 5;
  }

  /* Standard "between rows" arm size — kept consistent throughout */
  /* (so all vertical drops are the same height visually) */

  /* === TOP: Afnan + Director Board lateral === */
  /* Afnan sits centered on the page; the Board floats to her right.
     We achieve this by centering Afnan herself and absolutely
     positioning the lateral connector + Board card to her right. */
  body.page-about .org-top {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 4;
  }
  body.page-about .org-top-cluster {
    position: relative;
    display: inline-block;
  }
  /* Lateral connector: absolutely positioned starting from Afnan's right edge */
  body.page-about .org-top-lateral {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    width: 56px;
    height: 2px;
    background: var(--green-line);
  }
  /* Dot at the point where the lateral line meets Afnan's card */
  body.page-about .org-top-lateral .dot.dot-left {
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  /* Dot at the point where the lateral line meets the Board card */
  body.page-about .org-top-lateral .dot.dot-right {
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
  }

  /* === DROP 1: From Afnan down to the main spine === */
  body.page-about .org-drop-afnan {
    position: relative;
    width: 2px;
    height: 57px; /* 56 + 1 overlap into the main spine */
    background: var(--green-line);
    margin: 0 auto -1px; /* negative bottom margin pulls spine up 1px */
  }
  body.page-about .org-drop-afnan .dot {
    /* sits at the bottom where it meets the main spine */
    left: 50%;
    bottom: 1px; /* offset by the overlap */
    transform: translate(-50%, 50%);
  }

  /* === CROSS-COLUMN SUB-TREE under Majed ===
     Majed's column has a long drop that stretches via flex:1 to reach
     the bottom of the divisions grid. The cross-spine + Jovy/Rose live
     in a separate .cross-section sibling block below the grid, so they
     sit at the same vertical level as Khalid's EU Rep card. */

  /* Majed's column: card + fixed drop matching Afnan's drop length (56px).
     Column does NOT stretch (align-items: start on grid). */
  body.page-about .org-division-majed {
    overflow: visible;
    position: relative; /* anchor point for the absolutely-positioned cross-section */
  }

  /* Vertical drop from Majed's card down to where the cross-spine sits.
     Same length as Afnan's drop above for visual consistency.
     Extra 1px height ensures it overlaps with the cross-spine below
     (preventing any sub-pixel gap at the junction). */
  body.page-about .majed-drop {
    width: 2px;
    background: var(--green-line);
    height: 57px; /* 56 + 1 overlap into the cross-spine */
    margin: 0 auto;
  }

  /* === CROSS-SECTION (absolutely positioned relative to Majed's column) ===
     The cross-section is anchored to the bottom of Majed's column (which
     is at card_bottom + 56px drop), guaranteeing the cross-spine touches
     Majed's drop with zero gap, regardless of Khalid's column height. */
  body.page-about .cross-section {
    position: absolute;
    top: calc(100% - 1px); /* shift up 1px so cross-spine overlaps with Majed-drop bottom */
    left: 0;
    /* Full width of the org container — Majed's column is 25% wide,
       so we need width = 400% of the column to span the full container. */
    width: 400%;
    z-index: 4;
  }

  /* The cross-spine sits at the very top of cross-section,
     so it connects flush to the bottom of Majed's drop above. */
  body.page-about .cross-spine-row {
    position: relative;
    width: 100%;
    height: 2px;
  }

  body.page-about .cross-spine {
    position: relative;
    height: 2px;
    background: var(--green-line);
    /* Spans from column 1 center (12.5% of container) to column 3 center (62.5%) */
    margin-left: 12.5%;
    width: 50%; /* 62.5% - 12.5% */
  }
  body.page-about .cross-spine .dot.dot-left { left: 0;    top: 50%; transform: translate(-50%, -50%); }
  body.page-about .cross-spine .dot.dot-mid { left: 50%;  top: 50%; transform: translate(-50%, -50%); }
  body.page-about .cross-spine .dot.dot-right { left: 100%; top: 50%; transform: translate(-50%, -50%); }

  /* 4-column grid for Jovy / Rose cards beneath the cross-spine */
  body.page-about .cross-sub-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  body.page-about .cross-sub-col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Vertical drops from the cross-spine down to Jovy/Rose cards.
     Same 56px length as Afnan and Majed's drops for consistency.
     Negative margin pulls the drop up 1px to overlap with the cross-spine,
     preventing any sub-pixel gap. */
  body.page-about .cross-sub-drop {
    width: 2px;
    height: 57px;
    background: var(--green-line);
    margin-top: -1px;
  }

  /* === MAIN SPINE (horizontal, connects all 4 division columns) === */
  body.page-about .org-spine {
    position: relative;
    height: 2px;
    /* Span from column 1 center (12.5%) to column 4 center (87.5%) = 75% */
    margin: 0 auto;
    width: 75%;
    background: var(--green-line);
    z-index: 3;
  }
  /* Center dot on the spine (where Afnan's drop meets) */
  body.page-about .org-spine .dot.dot-center-top {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  /* Dots at the 4 division column centers */
  body.page-about .org-spine .dot.dot-1 { left: 0;       top: 50%; transform: translate(-50%, -50%); }
  body.page-about .org-spine .dot.dot-2 { left: 33.33%;  top: 50%; transform: translate(-50%, -50%); }
  body.page-about .org-spine .dot.dot-3 { left: 66.67%;  top: 50%; transform: translate(-50%, -50%); }
  body.page-about .org-spine .dot.dot-4 { left: 100%;    top: 50%; transform: translate(-50%, -50%); }

  /* === DIVISIONS ROW === */
  /* 4 equal columns so each column-center aligns with a spine dot.
     Marlon and Nyan now sit on the same row as Majed and Khalid.
     align-items: start prevents columns from stretching to match the tallest. */
  body.page-about .org-divisions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    gap: 0;
    margin-top: 0;
    position: relative;
  }
  /* Majed's column uses flex to push the cross-spine to the bottom,
     keeping his card at the top while the spine sits near where
     Jovy/Rose will appear below. */
  body.page-about .org-division-majed {
    justify-content: flex-start;
  }
  /* Drop lines from spine down to each division-head card */
  body.page-about .org-division {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  body.page-about .org-division-drop {
    width: 2px;
    height: 57px; /* 56 + 1px overlap into main spine above */
    background: var(--green-line);
    margin-top: -1px; /* pull up to overlap with spine */
  }

  /* === CARDS === */
  /* Standard card — matches Afnan's formatting exactly.
     All cards in the chart use this baseline (except Director Board).
     Photo → name → role → flag at bottom. */

  body.page-about .card {
    background: #fff;
    border: 2px solid rgba(15, 95, 44, 0.30);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 8px 22px -10px rgba(15, 23, 42, 0.10);
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 4;
    width: 170px;
  }

  /* Photo */
  body.page-about .card-photo {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(15, 95, 44, 0.08);
    margin-bottom: 8px;
    display: flex; align-items: center; justify-content: center;
    order: 1;
  }
  body.page-about .card-photo img { width: 100%; height: 100%; object-fit: cover; }
  body.page-about .card-photo.is-initials {
    font-family: var(--display); font-size: 22px; font-weight: 600;
    color: var(--green-darker);
  }

  /* Name */
  body.page-about .card-name {
    font-family: var(--display); font-size: 13px; font-weight: 600;
    letter-spacing: -0.015em; line-height: 1.2;
    order: 2;
  }

  /* Role */
  body.page-about .card-role {
    font-size: 11px; color: var(--ink-soft); margin-top: 2px;
    order: 3;
  }

  /* Flag at bottom */
  body.page-about .card-flag {
    width: 28px;
    height: 20px;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    margin-top: 8px;
    margin-bottom: 0;
    order: 4;
  }
  body.page-about .card-flag svg { width: 100%; height: 100%; display: block; }

  /* AFNAN — identical to base card */
  body.page-about .card-ceo {
    min-height: 190px;
    justify-content: center;
  }

  /* BOARD — inherits Afnan card format (170px, solid green border, etc.);
     only difference is absolute positioning to Afnan's right via lateral connector. */
  body.page-about .card-board {
    position: absolute;
    top: 50%;
    left: calc(100% + 56px);
    transform: translateY(-50%);
    min-height: 190px;
    justify-content: center;
  }

  /* DIVISION HEAD CARD — same as base */
  body.page-about .card-division {
    /* Fixed min-height so cards with 1-line vs 2-line roles render identically.
       Ensures Majed's column bottom equals Khalid's column bottom (modulo
       the EU Rep sub-tree), keeping the cross-section anchor consistent
       and Jovy/Rose top aligned with EU Rep top. */
    min-height: 190px;
    justify-content: center;
  }

  /* DIRECT REPORTS (Rose, Jovy) — same as base, fixed min-height for alignment */
  body.page-about .card-report {
    min-height: 190px;
    justify-content: center;
  }

  /* EXTERNAL NETWORK CARDS — same dimensions, but dashed border to signal "external".
     Fixed min-height so EU Rep, Developer Network, and Agent Network all align
     on the same horizontal row at the bottom of the chart. Slightly taller than
     division cards to comfortably fit the flag-row at the bottom. */
  body.page-about .card-external {
    border: 2px dashed rgba(15, 95, 44, 0.40);
    min-height: 210px;
    justify-content: center;
  }

  /* Network initials avatar (DN, AN) — same circle as person photos */
  body.page-about .card-photo.is-network {
    background: rgba(15, 95, 44, 0.06);
    font-size: 22px;
    letter-spacing: 0.05em;
  }

  /* Flag row at bottom of a card (used by Agent Network with 4 country flags) */
  body.page-about .card-flagrow {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    order: 4;
  }
  body.page-about .card-flagrow .card-flag {
    margin-top: 0;
    width: 22px;
    height: 16px;
  }

  /* Dotted link line between two cards — no dots, touches both flush */
  body.page-about .dotted-link {
    width: 2px;
    height: 56px;
    margin: 0 auto;
    background-image: linear-gradient(to bottom, rgba(15, 95, 44, 0.55) 50%, transparent 50%);
    background-size: 2px 6px;
    background-repeat: repeat-y;
  }
  body.page-about .card-external-flagrow {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    align-items: center;
    justify-content: center;
  }
  body.page-about .card-external-flagrow .card-flag {
    width: 22px;
    height: 16px;
    margin-bottom: 0;
  }
  body.page-about .card-external-label {
    font-family: var(--display); font-size: 9px; font-weight: 700;
    color: var(--green-darker); letter-spacing: 0.22em; text-transform: uppercase;
  }
  body.page-about .card-external-name {
    font-family: var(--display); font-size: 12.5px; font-weight: 600;
    letter-spacing: -0.012em; margin-top: 4px; line-height: 1.2;
  }
  body.page-about .card-external-meta { font-size: 10.5px; color: var(--ink-soft); margin-top: 3px; }

  /* === COMMERCIAL SUB-TREE (under Majed → Rose+Jovy → Agent/Dev Nets) === */

  /* Vertical line from Majed down to a horizontal sub-spine */
  body.page-about .sub-drop {
    width: 2px;
    height: 40px;
    background: var(--green-line);
    position: relative;
    margin: 0 auto;
  }
  body.page-about .sub-drop .dot.dot-bottom {
    left: 50%; bottom: 0; transform: translate(-50%, 50%);
  }
  body.page-about .sub-drop .dot.dot-top {
    left: 50%; top: 0; transform: translate(-50%, -50%);
  }

  /* Horizontal sub-spine connecting Rose and Jovy */
  body.page-about .sub-spine {
    position: relative;
    height: 2px;
    background: var(--green-line);
    margin: 0 auto;
    width: 50%; /* spans centers of Rose and Jovy columns within Majed's column */
  }
  body.page-about .sub-spine .dot.dot-left { left: 0; top: 50%; transform: translate(-50%, -50%); }
  body.page-about .sub-spine .dot.dot-mid { left: 50%; top: 50%; transform: translate(-50%, -50%); }
  body.page-about .sub-spine .dot.dot-right { left: 100%; top: 50%; transform: translate(-50%, -50%); }

  /* Two columns under the sub-spine */
  body.page-about .sub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 0;
    gap: 0;
    width: 100%;
  }
  body.page-about .sub-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
  }

  /* === KHALID SUB-TREE (Khalid → EU Rep) === */

  /* Dotted vertical line from Khalid's card down to EU Rep card.
     Length tuned so EU Rep ends up at the same Y as Jovy/Rose row.
     No dots at either end — line touches both cards directly. */
  body.page-about .khalid-dotted-drop {
    width: 2px;
    height: 114px; /* 56 (cross-spine offset from Majed bottom) + 56 (Jovy/Rose drop) + 2 (cross-spine) */
    background-image: linear-gradient(to bottom, rgba(15, 95, 44, 0.55) 50%, transparent 50%);
    background-size: 2px 6px;
    background-repeat: repeat-y;
    margin: 0 auto;
  }

  /* EU Rep card uses card-external (dashed border) + is-network initials */

  /* === MOBILE === */
  @media (max-width: 900px) {
    body.page-about .org { padding: 16px 0; padding-bottom: 0; }
    body.page-about .org-divisions { grid-template-columns: 1fr; gap: 32px; }
    body.page-about .org-spine { display: none; }
    body.page-about .org-division-drop { display: none; }
    body.page-about .org-drop-afnan { display: none; }
    body.page-about .org-top-cluster { display: flex; flex-direction: column; gap: 0; align-items: center; }
    body.page-about .org-top-lateral {
      position: relative;
      top: auto; left: auto; transform: none;
      width: 2px; height: 32px; margin: 8px auto;
    }
    body.page-about .org-top-lateral .dot.dot-left { top: 0; left: 50%; transform: translate(-50%, -50%); }
    body.page-about .org-top-lateral .dot.dot-right { top: auto; bottom: 0; right: auto; left: 50%; transform: translate(-50%, 50%); }
    body.page-about .card-board {
      position: relative;
      top: auto; left: auto; transform: none;
    }
    body.page-about .sub-spine { display: none; }
    body.page-about .sub-drop { display: none; }
    body.page-about .sub-grid { grid-template-columns: 1fr; gap: 20px; }
    body.page-about .cross-section {
      position: relative;
      top: auto; left: auto;
      width: 100%;
    }
    body.page-about .cross-spine, body.page-about .cross-spine-drop, body.page-about .cross-sub-drop { display: none; }
    body.page-about .cross-sub-grid { grid-template-columns: 1fr; gap: 20px; }
    body.page-about .cross-sub-col:empty { display: none; }
    body.page-about .dotted-link, body.page-about .khalid-dotted-drop { height: 32px; }
    body.page-about .majed-drop { display: none; }
  }




/* ==========================================================================
   Page styles consolidated from assessment.html (scoped to body.page-buyer-match)
   ========================================================================== */
:root {
  --bm-green: #2d7a51;
  --bm-green-bright: #3aa96b;
  --bm-green-soft: rgba(45, 122, 81, 0.09);
  --bm-green-line: rgba(45, 122, 81, 0.24);
  --bm-blue: #1d4ed8;
  --bm-sage: #6f8a79;
  --bm-purple: #6d5bd0;
  --bm-pink: #b84f76;
  --bm-cyan: #087a92;
  --bm-ink: #1a1f1b;
  --bm-ink-soft: #5a625b;
  --bm-muted: #7b857f;
  --bm-line: #e3ebe6;
  --bm-paper: #ffffff;
  --bm-paper-2: #f3f8f4;
  --bm-bg: #f7faf8;
  --bm-shadow: 0 24px 70px rgba(26, 31, 27, 0.10);
  --bm-header-h: 64px;
  --bm-footer-h: 46px;
}
body.page-buyer-match * { box-sizing: border-box; }
body.page-buyer-match, body { min-height: 100%; }
body.page-buyer-match {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 0%, rgba(45, 122, 81, 0.12), transparent 34%),
    radial-gradient(circle at 92% 95%, rgba(45, 122, 81, 0.08), transparent 32%),
    linear-gradient(135deg, #ffffff 0%, #f3f8f4 100%);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--bm-ink);
}
body.page-buyer-match .site-header {
  height: var(--bm-header-h);
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(45, 122, 81, 0.14);
  backdrop-filter: blur(18px);
}
body.page-buyer-match .header-inner { height: 100%; }
body.page-buyer-match .nav-cta { cursor: default; }
body.page-buyer-match .bm-shell {
  height: calc(100vh - var(--bm-header-h) - var(--bm-footer-h));
  max-width: var(--max-w, 1280px);
  margin: 0 auto;
  display: grid;
  
  grid-template-columns: 1fr auto;
  gap: clamp(20px, 2.2vw, 32px);
  padding: clamp(20px, 2.4vw, 32px) clamp(20px, 4vw, 56px);
  overflow: hidden;
  box-sizing: border-box;
}
body.page-buyer-match .bm-question-panel, body.page-buyer-match .bm-report-panel {
  min-height: 0;
  border: 1px solid rgba(45, 122, 81, 0.15);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--bm-shadow);
  backdrop-filter: blur(22px);
  overflow: hidden;
}
body.page-buyer-match .bm-report-panel {
  height: 100%;
  aspect-ratio: 210 / 297;
  max-width: 100%;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
}
body.page-buyer-match .bm-report-panel > .bm-canvas-stage {
  flex: 1;
  min-height: 0;
}
body.page-buyer-match .bm-report-panel > .bm-pagination {
  flex-shrink: 0;
}
body.page-buyer-match .bm-flip-ear {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bm-green, #00BF62);
  color: #ffffff;
  border: none;
  cursor: pointer;
  z-index: 28;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 12px rgba(0, 191, 98, 0.32),
    0 1px 3px rgba(13, 23, 18, 0.14);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease 0.8s, transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, left 0.18s ease, right 0.18s ease;
}
body.is-book-open.is-form-ready:not(.is-book-complete) .bm-flip-ear {
  opacity: 0.85;
  pointer-events: auto;
}
body.is-form-ready:not(.is-book-complete) .bm-flip-ear.is-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-50%) scale(0.7);
}
body.is-submit-flying .bm-flip-ear {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-50%) scale(0.7) !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}
body.page-buyer-match .bm-flip-ear-prev {
  left: 6px;
}
body.page-buyer-match .bm-flip-ear-next {
  right: 6px;
}
body.page-buyer-match .bm-flip-ear:hover {
  opacity: 1;
  background: #00A356;
  transform: translateY(-50%) scale(1.15);
  box-shadow:
    0 6px 16px rgba(0, 191, 98, 0.48),
    0 2px 4px rgba(13, 23, 18, 0.18);
}
body.page-buyer-match .bm-flip-ear-prev:hover { left: 4px; }
body.page-buyer-match .bm-flip-ear-next:hover { right: 4px; }
body.page-buyer-match .bm-flip-ear:active {
  transform: translateY(-50%) scale(0.92);
}
body.page-buyer-match .bm-flip-ear svg {
  width: 11px;
  height: 11px;
  stroke-width: 3;
}
body.page-buyer-match .bm-question-panel {
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
}
body.page-buyer-match .bm-question-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 10px;
}
body.page-buyer-match .bm-kicker {
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bm-green);
}
body.page-buyer-match .bm-progress-copy {
  font-family: 'Geist', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bm-muted);
  white-space: nowrap;
}
body.page-buyer-match .bm-progress-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(13, 23, 18, 0.08);
  overflow: hidden;
  margin-bottom: 12px;
}
body.page-buyer-match .bm-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bm-green), var(--bm-green-bright), var(--bm-sage));
  transition: width 0.35s ease;
}
body.page-buyer-match .bm-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
}
body.page-buyer-match .bm-question-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid var(--line, #ECEEF0);
  padding: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(26, 31, 37, 0.05),
    0 20px 46px -28px rgba(26, 31, 37, 0.22);
}
body.page-buyer-match .bm-question-head, body.page-buyer-match .bm-options {
  transition:
    opacity 0.42s cubic-bezier(0.32, 0.72, 0.24, 1),
    transform 0.42s cubic-bezier(0.32, 0.72, 0.24, 1);
}
body.page-buyer-match .is-entering .bm-question-head, body.page-buyer-match .is-entering .bm-options {
  opacity: 0;
  transform: translateY(8px);
}
body.page-buyer-match .bm-question-head, body.page-buyer-match .bm-options {
  opacity: 1;
  transform: translateY(0);
}
body.page-buyer-match .bm-options > * {
  animation: bmOptionFadeIn 0.5s cubic-bezier(0.32, 0.72, 0.24, 1) both;
}
body.page-buyer-match .bm-options > *:nth-child(1) { animation-delay: 0.05s; }
body.page-buyer-match .bm-options > *:nth-child(2) { animation-delay: 0.10s; }
body.page-buyer-match .bm-options > *:nth-child(3) { animation-delay: 0.15s; }
body.page-buyer-match .bm-options > *:nth-child(4) { animation-delay: 0.20s; }
body.page-buyer-match .bm-options > *:nth-child(5) { animation-delay: 0.25s; }
body.page-buyer-match .bm-options > *:nth-child(6) { animation-delay: 0.30s; }
@keyframes bmOptionFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.page-buyer-match .bm-card-banner {
  position: relative;
  flex-shrink: 0;
  min-height: 142px;
  overflow: hidden;
  background: linear-gradient(135deg, #0E5A2A 0%, #16A34A 50%, #22C55E 100%);
}
body.page-buyer-match .bm-card-banner-img {
  position: absolute;
  inset: 0;
  background-image: url('../images/home/dubai-skyline1.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: grayscale(0.55) contrast(1.08) brightness(0.62);
  z-index: 1;
}
body.page-buyer-match .bm-card-banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(6, 25, 13, 0.55) 0%, rgba(6, 25, 13, 0.40) 50%, rgba(6, 25, 13, 0.60) 100%),
    linear-gradient(135deg, rgba(0, 100, 50, 0.25) 0%, transparent 55%);
}
body.page-buyer-match .bm-masthead {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 28px 28px 0;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
}
body.page-buyer-match .bm-masthead::before { display: none; }
body.page-buyer-match .bm-masthead::after { display: none; }
body.page-buyer-match .bm-masthead-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.page-buyer-match .bm-masthead-title {
  margin: 0;
  font-family: 'Geist', sans-serif;
  font-size: clamp(20px, 1.85vw, 25px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.04;
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}
body.page-buyer-match .bm-progress-step {
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  align-self: flex-start;
}
body.page-buyer-match .bm-progress-shell {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 18px;
  z-index: 3;
}
body.page-buyer-match .bm-progress-bar {
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
body.page-buyer-match .bm-progress-bar::before { display: none; }
body.page-buyer-match .bm-progress-fill {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #26D97F 0%, #00BF62 50%, #26D97F 100%);
  box-shadow: 0 0 14px rgba(38, 217, 127, 0.65), 0 0 4px rgba(38, 217, 127, 0.9);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
body.page-buyer-match .bm-progress-marks { display: none; }
body.page-buyer-match .bm-masthead .bm-reset-btn {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.30);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
body.page-buyer-match .bm-masthead .bm-reset-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.48);
  transform: rotate(-180deg);
}
body.page-buyer-match .bm-masthead .bm-reset-btn svg {
  width: 15px;
  height: 15px;
}
body.page-buyer-match .bm-question-head {
  margin: 0;
  padding: 22px 32px 0;
  min-height: 78px;
  flex-shrink: 0;
}
body.page-buyer-match .bm-options {
  flex: 1;
  min-height: 0;
  padding: 10px 32px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-buyer-match .bm-options > * { width: 100%; }
body.page-buyer-match .bm-question-number {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bm-green);
  margin-bottom: 8px;
}
body.page-buyer-match .bm-question-number::before {
  content: '';
  width: 18px;
  height: 1px;
  background: currentColor;
}
body.page-buyer-match .bm-question-title {
  margin: 0 0 6px;
  font-family: 'Geist', sans-serif;
  font-size: clamp(19px, 2.05vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--bm-ink);
  
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.page-buyer-match .bm-question-title .accent { color: var(--bm-green); }
body.page-buyer-match .bm-question-help {
  max-width: 100%;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--bm-ink-soft);
  
}
body.page-buyer-match .bm-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
body.page-buyer-match .bm-options-grid.is-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.page-buyer-match .bm-options-grid.is-locked {
  pointer-events: none;
}
body.page-buyer-match .bm-options-grid.is-locked .bm-option:not(.is-selected) {
  opacity: 0.55;
  transition: opacity 0.4s cubic-bezier(0.32, 0.72, 0.24, 1);
}
body.page-buyer-match .bm-option {
  min-height: 86px;
  border: 1px solid rgba(45, 122, 81, 0.18);
  border-radius: 18px;
  background: rgba(255,255,255,0.74);
  padding: 15px 15px 14px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--bm-ink);
  position: relative;
  overflow: hidden;
  
  transition:
    transform 0.32s cubic-bezier(0.32, 0.72, 0.24, 1),
    border-color 0.32s cubic-bezier(0.32, 0.72, 0.24, 1),
    background 0.32s cubic-bezier(0.32, 0.72, 0.24, 1),
    box-shadow 0.32s cubic-bezier(0.32, 0.72, 0.24, 1);
}
body.page-buyer-match .bm-option::after {
  content: '';
  position: absolute;
  inset: auto 14px 10px auto;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(13,23,18,0.16);
  background: rgba(255,255,255,0.65);
  transition:
    border-color 0.32s cubic-bezier(0.32, 0.72, 0.24, 1),
    background 0.32s cubic-bezier(0.32, 0.72, 0.24, 1),
    box-shadow 0.32s cubic-bezier(0.32, 0.72, 0.24, 1);
}
body.page-buyer-match .bm-option:hover {
  transform: translateY(-3px);
  border-color: var(--bm-green-line);
  background: rgba(255,255,255,0.98);
  box-shadow: 0 16px 34px rgba(26, 31, 27, 0.09);
}
body.page-buyer-match .bm-option:active {
  transform: translateY(-1px) scale(0.985);
  transition-duration: 0.12s;
}
body.page-buyer-match .bm-option.is-selected {
  border-color: var(--bm-green);
  background: linear-gradient(135deg, rgba(45,122,81,0.11), rgba(255,255,255,0.96));
  box-shadow: 0 13px 28px rgba(45,122,81,0.13);
}
body.page-buyer-match .bm-option.is-selected::after {
  border-color: var(--bm-green);
  background: var(--bm-green);
  box-shadow: inset 0 0 0 5px #fff;
}
body.page-buyer-match .bm-option-title {
  display: block;
  font-family: 'Geist', sans-serif;
  font-weight: 750;
  font-size: 15px;
  letter-spacing: -0.01em;
  margin-bottom: 5px;
  padding-right: 24px;
}
body.page-buyer-match .bm-option-copy {
  display: block;
  color: var(--bm-muted);
  font-size: 12.5px;
  line-height: 1.35;
  padding-right: 22px;
}
body.page-buyer-match .bm-options-grid.is-icons {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
body.page-buyer-match .bm-options-grid.is-icons.is-six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
body.page-buyer-match .bm-review-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
body.page-buyer-match .bm-celebrate-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bm-green, #00BF62) 0%, var(--bm-green-bright, #00A356) 100%);
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
  box-shadow:
    0 6px 18px -4px rgba(0, 191, 98, 0.55),
    0 2px 4px -2px rgba(0, 0, 0, 0.10),
    inset 0 -2px 4px -2px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  animation: bmCelebrateCheckPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}
@keyframes bmCelebrateCheckPop {
  0%   { transform: scale(0.2) rotate(-30deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
body.page-buyer-match .bm-form-donut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0 0 14px;
  vertical-align: middle;
}
body.page-buyer-match .bm-form-donut svg { display: block; }
body.page-buyer-match .bm-form-donut-pct, body.page-buyer-match .bm-form-donut-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.35s ease;
}
body.page-buyer-match .bm-form-donut-pct {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--bm-green, #00BF62);
  letter-spacing: -0.03em;
  font-feature-settings: "tnum";
  line-height: 1;
}
body.page-buyer-match .bm-form-donut-check {
  opacity: 0;
  color: var(--bm-green, #00BF62);
}
body.page-buyer-match .bm-form-donut.is-complete .bm-form-donut-pct { opacity: 0; }
body.page-buyer-match .bm-form-donut.is-complete .bm-form-donut-check {
  opacity: 1;
  animation: bmFormDonutCheckPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bmFormDonutCheckPop {
  0%   { transform: scale(0.2); }
  100% { transform: scale(1); }
}
body.page-buyer-match .bm-form-title-text {
  display: block;
}
body.page-buyer-match .bm-sealing-spacer {
  height: 40px;
}
body.page-buyer-match .bm-sealing-flow {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin: 0 auto;
  animation: bmSealingFlowIn 0.4s ease-out;
}
@keyframes bmSealingFlowIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.page-buyer-match .bm-sealing-donut {
  position: relative;
  width: 192px;
  height: 192px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-buyer-match .bm-sealing-donut svg {
  display: block;
}
body.page-buyer-match .bm-sealing-donut #bmSealingDonutArc {
  transition: stroke-dashoffset 0.1s linear;
}
body.page-buyer-match .bm-sealing-donut-pct {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Geist', sans-serif;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--bm-green-bright, #00A356);
  font-feature-settings: "tnum";
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.page-buyer-match .bm-sealing-donut-pct.is-sent {
  transform: translate(-50%, -50%) scale(1.1);
}
body.page-buyer-match .bm-sealing-donut-pct.is-sent svg {
  display: block;
  animation: bmSealingSentCheckIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bmSealingSentCheckIn {
  0%   { transform: scale(0); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
body.page-buyer-match .bm-sealing-label {
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bm-ink, #1a1f1b);
  text-align: center;
  min-height: 22px;
  transition: opacity 0.2s ease, color 0.3s ease, font-size 0.3s ease;
}
body.page-buyer-match .bm-sealing-label.is-sent {
  color: var(--bm-green-bright, #00A356);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  animation: bmSealingSentLabelIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bmSealingSentLabelIn {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
body.page-buyer-match .bm-post-submit-ref-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(0, 191, 98, 0.06) 0%, rgba(0, 191, 98, 0.02) 100%);
  border: 1px solid rgba(0, 191, 98, 0.22);
  border-radius: 14px;
  box-shadow: 0 4px 14px -8px rgba(0, 191, 98, 0.25);
  margin-top: 4px;
}
body.page-buyer-match .bm-post-submit-ref-label {
  font-family: 'Geist', sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(13, 23, 18, 0.55);
}
body.page-buyer-match .bm-post-submit-ref-value {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bm-ink, #1a1f1b);
  user-select: all;
  cursor: text;
}
body.page-buyer-match .bm-post-submit-close-line {
  margin-top: 14px;
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: rgba(13, 23, 18, 0.42);
  text-align: center;
  opacity: 0;
  animation: bmCloseLineIn 0.7s ease-out 0.6s forwards;
}
@keyframes bmCloseLineIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.page-buyer-match .bm-post-submit-centered {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  margin: 0 auto;
  animation: bmPostSubmitIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bmPostSubmitIn {
  0%   { opacity: 0; transform: translateY(20px) scale(0.96); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
body.page-buyer-match .bm-post-submit-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: nowrap;
}
body.page-buyer-match .bm-post-submit-title {
  margin: 0;
  font-family: 'Geist', sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--bm-ink, #1a1f1b);
  text-align: left;
}
body.page-buyer-match .bm-post-submit-title .accent {
  color: var(--bm-green, #00BF62);
}
body.page-buyer-match .bm-post-submit-message {
  margin: 0;
  font-family: 'Geist', sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bm-ink-soft, #4a5256);
  max-width: 420px;
  letter-spacing: -0.005em;
}
body.page-buyer-match .bm-post-submit-message strong {
  color: var(--bm-green-bright, #00A356);
  font-weight: 700;
}
body.page-buyer-match .bm-post-submit-summary {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 18px;
  background: linear-gradient(135deg, rgba(0, 191, 98, 0.06) 0%, rgba(0, 191, 98, 0.02) 100%);
  border: 1px solid rgba(0, 191, 98, 0.20);
  border-radius: 14px;
  box-shadow: 0 4px 14px -8px rgba(0, 191, 98, 0.22);
  text-align: left;
}
body.page-buyer-match .bm-post-submit-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px dashed rgba(0, 191, 98, 0.16);
}
body.page-buyer-match .bm-post-submit-row:last-child { border-bottom: none; }
body.page-buyer-match .bm-post-submit-row-label {
  font-family: 'Geist', sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(13, 23, 18, 0.55);
}
body.page-buyer-match .bm-post-submit-row-value {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--bm-ink, #1a1f1b);
  letter-spacing: -0.005em;
}
body.page-buyer-match .bm-post-submit-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bm-green-bright, #00A356);
  font-weight: 700;
}
body.page-buyer-match .bm-post-submit-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bm-green, #00BF62);
  box-shadow: 0 0 0 3px rgba(0, 191, 98, 0.20);
  animation: bmStatusDotPulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes bmStatusDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(0, 191, 98, 0.20); }
  50%      { box-shadow: 0 0 0 6px rgba(0, 191, 98, 0.08); }
}
body.page-buyer-match .bm-post-submit-ref {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bm-ink, #1a1f1b);
  background: rgba(13, 23, 18, 0.04);
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid rgba(13, 23, 18, 0.08);
  user-select: all;
  cursor: text;
}
body.page-buyer-match .bm-post-submit-footnote {
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  font-style: italic;
  color: rgba(13, 23, 18, 0.45);
  letter-spacing: -0.005em;
  margin-top: 2px;
}
body.is-book-complete .bm-options {
  align-items: center;
  justify-content: center;
}
@keyframes bmReviewIn {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
body.page-buyer-match .bm-review-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--bm-green-soft, #DCFCE7);
  color: var(--bm-green, #00BF62);
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 191, 98, 0.18);
}
body.page-buyer-match .bm-review-icon svg {
  width: 36px;
  height: 36px;
}
body.page-buyer-match .bm-review-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}
body.page-buyer-match .bm-review-title {
  font-family: 'Geist', sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--bm-ink, #1a1f1b);
}
body.page-buyer-match .bm-review-copy {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(13, 23, 18, 0.62);
  max-width: 380px;
}
body.page-buyer-match .bm-review-stats {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 18px;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px dashed rgba(0, 191, 98, 0.20);
  width: 100%;
}
body.page-buyer-match .bm-review-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 84px;
}
body.page-buyer-match .bm-review-stat-num {
  font-family: 'Geist', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--bm-green, #00BF62);
  letter-spacing: -0.02em;
  line-height: 1;
}
body.page-buyer-match .bm-review-stat-label {
  font-family: 'Geist', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(13, 23, 18, 0.45);
}
body.page-buyer-match .bm-review-stat-divider {
  width: 1px;
  background: rgba(13, 23, 18, 0.10);
}
body.page-buyer-match .bm-options-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
body.page-buyer-match .bm-multi-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 14px;
  padding: 7px 14px;
  background: var(--bm-green-soft, #DCFCE7);
  border: 1px solid rgba(0, 191, 98, 0.22);
  border-radius: 999px;
  color: var(--bm-green, #00BF62);
  font-family: 'Geist', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  width: fit-content;
}
body.page-buyer-match .bm-multi-hint svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
body.page-buyer-match .bm-options-grid.is-multi .bm-option { position: relative; }
body.page-buyer-match .bm-option-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border: 1.5px solid #C7CED4;
  border-radius: 6px;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: border-color 0.15s ease, background 0.15s ease;
}
body.page-buyer-match .bm-option-check svg {
  width: 14px;
  height: 14px;
  color: var(--bm-green, #00BF62);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
body.page-buyer-match .bm-options-grid.is-multi .bm-option:hover .bm-option-check {
  border-color: rgba(0, 191, 98, 0.42);
}
body.page-buyer-match .bm-options-grid.is-multi .bm-option.is-selected .bm-option-check {
  border-color: var(--bm-green, #00BF62);
  background: #ffffff;
}
body.page-buyer-match .bm-options-grid.is-multi .bm-option.is-selected .bm-option-check svg {
  opacity: 1;
  transform: scale(1);
}
body.page-buyer-match .bm-options-grid.is-icons .bm-option {
  min-height: 124px;
  padding: 12px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  position: relative;
}
body.page-buyer-match .bm-options-grid.is-icons .bm-option-icon {
  width: 34px;
  height: 34px;
  margin-bottom: 4px;
  color: var(--bm-ink-soft);
  flex-shrink: 0;
  transition: color 0.2s ease, transform 0.2s ease;
}
body.page-buyer-match .bm-options-grid.is-icons .bm-option:hover .bm-option-icon {
  color: var(--bm-green);
  transform: scale(1.05);
}
body.page-buyer-match .bm-options-grid.is-icons .bm-option.is-selected .bm-option-icon {
  color: var(--bm-green);
}
body.page-buyer-match .bm-options-grid.is-icons .bm-option-title {
  font-size: 13.5px;
  margin-bottom: 2px;
  padding-right: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
body.page-buyer-match .bm-options-grid.is-icons .bm-option-copy {
  font-size: 11px;
  line-height: 1.3;
  padding-right: 0;
}
body.page-buyer-match .bm-options-grid.is-icons .bm-option::after {
  inset: 10px 10px auto auto;
  width: 14px;
  height: 14px;
}
body.page-buyer-match .bm-options-grid.is-icons .bm-option.is-selected::after {
  box-shadow: inset 0 0 0 3.5px #fff;
}
body.page-buyer-match .bm-slider-wrap {
  padding: 32px 36px 24px;
  background: #ffffff;
  border: 1px solid var(--line, #ECEEF0);
  border-radius: 18px;
  margin: 0;
  align-self: stretch;
  width: 100%;
  box-shadow: 0 1px 3px rgba(26, 31, 37, 0.04);
  position: relative;
  overflow: hidden;
}
body.page-buyer-match .bm-slider-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 0%, rgba(0,191,98,0.03) 0%, transparent 45%);
  pointer-events: none;
}
body.page-buyer-match .bm-slider-display {
  text-align: center;
  margin-bottom: 28px;
  min-height: 54px;
  position: relative;
}
body.page-buyer-match .bm-slider-big {
  font-family: 'Geist', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--bm-green);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 6px;
}
body.page-buyer-match .bm-slider-sub {
  font-size: 14px;
  color: var(--bm-muted);
  font-weight: 500;
  line-height: 1.4;
}
body.page-buyer-match .bm-slider {
  position: relative;
  margin: 0 12px;
  padding: 18px 0 0;
  user-select: none;
  touch-action: none;
}
body.page-buyer-match .bm-slider-track {
  position: relative;
  height: 8px;
  background: linear-gradient(180deg, rgba(13,23,18,0.06) 0%, rgba(13,23,18,0.10) 100%);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(13,23,18,0.08);
}
body.page-buyer-match .bm-slider-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #22C55E 0%, var(--bm-green, #00BF62) 60%, var(--bm-green-bright, #00A356) 100%);
  border-radius: 999px;
  width: 0%;
  transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 12px rgba(0,191,98,0.5);
}
body.page-buyer-match .bm-slider-stops {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
}
body.page-buyer-match .bm-slider-stop {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  background: #fff;
  border: 2px solid rgba(13,23,18,0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 4px rgba(13,23,18,0.08);
}
body.page-buyer-match .bm-slider-stop.is-passed {
  border-color: var(--bm-green);
  background: var(--bm-green);
  transform: translate(-50%, -50%) scale(0.9);
}
body.page-buyer-match .bm-slider-thumb {
  position: absolute;
  top: 50%;
  width: 34px;
  height: 34px;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #f4faf7 100%);
  border: 4px solid var(--bm-green, #00BF62);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  box-shadow:
    0 8px 20px rgba(0,191,98,0.32),
    0 2px 4px rgba(0,0,0,0.08),
    inset 0 1px 1px rgba(255,255,255,0.9);
  transition: left 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s ease, box-shadow 0.15s ease;
  z-index: 3;
  left: 0%;
}
body.page-buyer-match .bm-slider-thumb:hover {
  box-shadow: 0 12px 28px rgba(0,191,98,0.42), 0 2px 4px rgba(0,0,0,0.1);
}
body.page-buyer-match .bm-slider-thumb:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.18);
}
body.page-buyer-match .bm-slider-labels {
  display: block;
  margin-top: 22px;
  font-family: 'Geist', sans-serif;
  font-size: 10.5px;
  color: var(--bm-muted);
  position: relative;
  height: 36px;
}
body.page-buyer-match .bm-slider-label {
  position: absolute;
  transform: translateX(-50%);
  text-align: center;
  font-weight: 600;
  transition: color 0.25s ease, font-weight 0.25s ease;
  cursor: pointer;
  line-height: 1.25;
  width: 90px;
  word-wrap: break-word;
}
body.page-buyer-match .bm-slider-label:first-child { transform: translateX(-8%); text-align: left; }
body.page-buyer-match .bm-slider-label:last-child { transform: translateX(-92%); text-align: right; }
body.page-buyer-match .bm-slider-label.is-active { color: var(--bm-green); font-weight: 800; }
body.page-buyer-match .bm-slider-alt {
  text-align: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(13,23,18,0.06);
  position: relative;
}
body.page-buyer-match .bm-slider-alt-btn {
  background: none;
  border: none;
  color: var(--bm-muted);
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
  font-weight: 600;
}
body.page-buyer-match .bm-slider-alt-btn:hover { color: var(--bm-green); background: var(--bm-green-soft); }
body.page-buyer-match .bm-slider-alt-btn.is-active {
  color: var(--bm-green);
  background: var(--bm-green-soft);
  font-weight: 700;
}
body.page-buyer-match .bm-form-grid {
  display: grid;
  gap: 10px;
  width: 100%;
}
body.page-buyer-match .bm-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
body.page-buyer-match .bm-form-row-pair {
  
  grid-template-columns: 1.15fr 1fr;
}
body.page-buyer-match .bm-field label {
  display: block;
  font-family: 'Geist', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bm-muted);
  margin-bottom: 4px;
}
body.page-buyer-match .bm-field input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line, #ECEEF0);
  border-radius: 10px;
  background: #ffffff;
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  color: var(--bm-ink);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.page-buyer-match .bm-field input:focus {
  border-color: var(--bm-green);
  box-shadow: 0 0 0 3px var(--bm-green-soft);
}
body.page-buyer-match .bm-field input::placeholder {
  color: rgba(13, 23, 18, 0.32);
}
body.page-buyer-match .bm-form-note {
  font-family: 'Geist', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.4;
  color: rgba(13, 23, 18, 0.55);
  padding: 2px 4px;
  margin-top: -2px;
}
body.page-buyer-match .bm-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  margin: 0;
  padding: 8px 4px;
  border-radius: 0;
  border: none;
  background: transparent;
  font-size: 11px;
  line-height: 1.45;
  color: var(--bm-ink-soft);
  cursor: pointer;
  transition: color 0.18s ease;
}
body.page-buyer-match .bm-consent + .bm-consent {
  border-top: 1px dashed rgba(0, 0, 0, 0.06);
  padding-top: 10px;
  margin-top: 4px;
}
body.page-buyer-match .bm-consent:hover {
  background: transparent;
  color: var(--bm-ink);
}
body.page-buyer-match .bm-consent input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid rgba(13, 23, 18, 0.18);
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  box-shadow:
    0 1px 2px rgba(13, 23, 18, 0.06),
    inset 0 0 0 0 rgba(0, 191, 98, 0);
  transition:
    border-color 0.2s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.15s ease;
}
body.page-buyer-match .bm-consent input[type="checkbox"]:hover {
  border-color: var(--bm-green, #00BF62);
  box-shadow:
    0 2px 6px rgba(0, 191, 98, 0.18),
    inset 0 0 0 1px rgba(0, 191, 98, 0.08);
  transform: scale(1.05);
}
body.page-buyer-match .bm-consent input[type="checkbox"]:checked {
  border-color: var(--bm-green-bright, #00A356);
  background: linear-gradient(135deg, var(--bm-green, #00BF62) 0%, var(--bm-green-bright, #00A356) 100%);
  box-shadow:
    0 4px 10px rgba(0, 191, 98, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
body.page-buyer-match .bm-consent input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 1.5px;
  width: 6px;
  height: 11px;
  border: solid #ffffff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(1);
  transform-origin: center;
  animation: bmConsentTickPop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bmConsentTickPop {
  0%   { transform: rotate(45deg) scale(0); opacity: 0; }
  60%  { transform: rotate(45deg) scale(1.18); opacity: 1; }
  100% { transform: rotate(45deg) scale(1); opacity: 1; }
}
body.page-buyer-match .bm-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--bm-green, #00BF62);
  outline-offset: 3px;
}
body.page-buyer-match .bm-consent a {
  color: var(--bm-green);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 191, 98, 0.4);
  font-weight: 600;
  transition: border-color 0.18s ease;
}
body.page-buyer-match .bm-consent a:hover { border-bottom-color: var(--bm-green); }
body.page-buyer-match .bm-consent.is-locked {
  opacity: 0.5;
  cursor: not-allowed;
}
body.page-buyer-match .bm-consent.is-locked input[type="checkbox"] {
  cursor: not-allowed;
  background: rgba(13, 23, 18, 0.04);
  border-color: rgba(13, 23, 18, 0.14);
  box-shadow: none;
}
body.page-buyer-match .bm-consent.is-locked input[type="checkbox"]:hover {
  transform: none;
  border-color: rgba(13, 23, 18, 0.14);
  box-shadow: none;
}
body.page-buyer-match .bm-consent.is-locked span {
  color: rgba(13, 23, 18, 0.45);
}
body.page-buyer-match .bm-consent.is-locked a {
  pointer-events: none;
  color: rgba(13, 23, 18, 0.45);
  border-bottom-color: transparent;
}
body.page-buyer-match .bm-select-wrap {
  position: relative;
}
body.page-buyer-match .bm-field select {
  width: 100%;
  height: 44px;
  border: 1px solid var(--line, #ECEEF0);
  border-radius: 12px;
  background: #ffffff;
  padding: 0 36px 0 14px;
  font: inherit;
  font-size: 14px;
  color: var(--bm-ink);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.page-buyer-match .bm-field select:focus {
  border-color: var(--bm-green);
  box-shadow: 0 0 0 3px var(--bm-green-soft);
}
body.page-buyer-match .bm-select-chev {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  color: var(--bm-muted);
  pointer-events: none;
}
body.page-buyer-match .bm-phone-wrap {
  position: relative;
  display: block;
}
body.page-buyer-match .bm-country-picker {
  position: relative;
  width: 100%;
}
body.page-buyer-match .bm-country-trigger {
  width: 100%;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line, #ECEEF0);
  border-radius: 10px;
  background: #ffffff;
  font: inherit;
  font-size: 13px;
  color: var(--bm-ink);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.page-buyer-match .bm-country-trigger:hover {
  border-color: rgba(0, 191, 98, 0.32);
}
body.page-buyer-match .bm-country-picker.is-open .bm-country-trigger {
  border-color: var(--bm-green, #00BF62);
  box-shadow: 0 0 0 3px var(--bm-green-soft, #DCFCE7);
}
body.page-buyer-match .bm-country-trigger-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
body.page-buyer-match .bm-country-placeholder {
  color: rgba(13, 23, 18, 0.32);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-buyer-match .bm-country-trigger .bm-country-flag {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
body.page-buyer-match .bm-country-name-trigger {
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
body.page-buyer-match .bm-country-dial-trigger {
  
  display: none;
}
body.page-buyer-match .bm-country-chev {
  width: 12px;
  height: 12px;
  color: var(--bm-muted);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
body.page-buyer-match .bm-country-picker.is-open .bm-country-chev {
  transform: rotate(180deg);
}
body.page-buyer-match .bm-country-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 340px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--line, #ECEEF0);
  border-radius: 14px;
  box-shadow:
    0 1px 3px rgba(26, 31, 37, 0.06),
    0 20px 48px rgba(26, 31, 37, 0.18);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top center;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  overflow: hidden;
}
body.page-buyer-match .bm-country-menu-detached {
  position: fixed;
  top: auto;
  left: auto;
  right: auto;
}
body.page-buyer-match .bm-country-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}
body.page-buyer-match .bm-country-search-wrap {
  position: relative;
  flex-shrink: 0;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--line, #ECEEF0);
}
body.page-buyer-match .bm-country-search-icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: rgba(13, 23, 18, 0.40);
  pointer-events: none;
}
body.page-buyer-match .bm-country-search {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line, #ECEEF0);
  border-radius: 10px;
  background: #fafcfb;
  padding: 0 12px 0 36px;
  font: inherit;
  font-size: 13.5px;
  color: var(--bm-ink);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
body.page-buyer-match .bm-country-search:focus {
  border-color: var(--bm-green, #00BF62);
  background: #ffffff;
  box-shadow: 0 0 0 3px var(--bm-green-soft, #DCFCE7);
}
body.page-buyer-match .bm-country-search::placeholder {
  color: rgba(13, 23, 18, 0.36);
}
body.page-buyer-match .bm-country-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
}
body.page-buyer-match .bm-country-empty {
  display: none;
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--bm-muted);
  font-style: italic;
}
body.page-buyer-match .bm-country-list::-webkit-scrollbar { width: 6px; }
body.page-buyer-match .bm-country-list::-webkit-scrollbar-track { background: transparent; }
body.page-buyer-match .bm-country-list::-webkit-scrollbar-thumb {
  background: rgba(0, 191, 98, 0.20);
  border-radius: 999px;
}
body.page-buyer-match .bm-country-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 191, 98, 0.32);
}
body.page-buyer-match .bm-country-option {
  width: 100%;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: 14px;
  color: var(--bm-ink);
  transition: background 0.12s ease;
}
body.page-buyer-match .bm-country-option:hover {
  background: var(--bg-tint, #F0FDF4);
}
body.page-buyer-match .bm-country-option.is-keyboard-highlight {
  background: rgba(0, 191, 98, 0.14);
  box-shadow: inset 3px 0 0 var(--bm-green, #00BF62);
}
body.page-buyer-match .bm-country-option.is-selected {
  background: rgba(0, 191, 98, 0.10);
  color: var(--bm-ink);
}
body.page-buyer-match .bm-country-option.is-selected::before {
  
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--bm-green, #00BF62);
  border-radius: 50%;
  margin-left: -14px;
  margin-top: 8px;
  align-self: flex-start;
}
body.page-buyer-match .bm-country-option .bm-country-flag {
  font-size: 18px;
  line-height: 1;
}
body.page-buyer-match .bm-country-option .bm-country-name {
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-buyer-match .bm-country-option .bm-country-dial {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--bm-muted);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
body.page-buyer-match .bm-country-option.is-selected .bm-country-dial {
  color: var(--bm-green, #00BF62);
}
body.page-buyer-match .bm-select-wrap { display: none; }
body.page-buyer-match .bm-phone-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--bm-muted);
  pointer-events: none;
  z-index: 1;
  padding-right: 8px;
  border-right: 1px solid var(--line, #ECEEF0);
  height: 22px;
  display: flex;
  align-items: center;
  letter-spacing: -0.01em;
  transition: color 0.2s ease, border-color 0.2s ease;
}
body.page-buyer-match .bm-phone-wrap input {
  padding-left: 70px;
}
body.page-buyer-match .bm-phone-wrap input:focus {
  border-color: var(--bm-green);
  box-shadow: 0 0 0 3px var(--bm-green-soft);
}
body.page-buyer-match .bm-phone-wrap:focus-within .bm-phone-prefix {
  color: var(--bm-green, #00BF62);
  border-right-color: var(--green-soft, #DCFCE7);
}
body.page-buyer-match .bm-phone-row { display: none; }
body.page-buyer-match .bm-field-error {
  font-family: 'Geist', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  color: #DC2626;
  margin-top: 4px;
  min-height: 0;
  line-height: 1.3;
}
body.page-buyer-match .bm-field-error:empty { display: none; }
body.page-buyer-match .bm-nav {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 16px 32px 22px;
  margin-top: 0;
  border-top: 1px solid var(--line, #ECEEF0);
}
body.page-buyer-match .bm-nav .bm-btn-back { grid-column: 1; }
body.page-buyer-match .bm-nav .bm-mini-note { display: none !important; }
body.page-buyer-match .bm-nav .bm-btn-next { grid-column: 3; justify-self: end; }
body.is-intro .bm-mini-note { display: none !important; }
body.is-first-question .bm-btn-back { display: none !important; }
body.page-buyer-match .bm-btn {
  border: 0;
  
  border-radius: 100px;
  min-height: 42px;
  min-width: 110px;
  padding: 0 22px;
  font-family: 'Geist', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
body.page-buyer-match .bm-btn:disabled { cursor: not-allowed; opacity: 0.4; box-shadow: none; }
body.page-buyer-match .bm-btn.is-blurred-disabled {
  opacity: 0.35;
  filter: blur(0.4px) saturate(0.7);
  transition: opacity 0.25s ease, filter 0.25s ease;
}
body.page-buyer-match .bm-btn-back {
  background: #ffffff;
  color: var(--bm-ink-soft);
  border: 1px solid var(--line, #ECEEF0);
}
body.page-buyer-match .bm-btn-back:not(:disabled):hover {
  background: #fafafa;
  border-color: rgba(13, 23, 18, 0.18);
}
body.page-buyer-match .bm-btn-next {
  background: linear-gradient(135deg, var(--bm-green, #00BF62) 0%, var(--bm-green-bright, #00A356) 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 163, 86, 0.28), inset 0 1px 0 rgba(255,255,255,0.24);
}
body.page-buyer-match .bm-btn-next:not(:disabled):hover {
  background: linear-gradient(135deg, var(--bm-green-bright, #00A356) 0%, #009249 100%);
  box-shadow: 0 12px 26px rgba(0, 163, 86, 0.4), inset 0 1px 0 rgba(255,255,255,0.24);
  transform: translateY(-1px);
}
body.page-buyer-match .bm-top-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
body.page-buyer-match .bm-mini-note {
  text-align: center;
  font-size: 12px;
  color: var(--bm-muted);
}
body.page-buyer-match .bm-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: rgba(0, 191, 98, 0.08);
  border: 1px solid rgba(0, 191, 98, 0.18);
  color: var(--bm-green, #00BF62);
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
body.page-buyer-match .bm-reset-btn:hover {
  background: rgba(0, 191, 98, 0.14);
  border-color: rgba(0, 191, 98, 0.32);
  color: var(--bm-green-bright, #00A356);
}
body.page-buyer-match .bm-reset-btn svg {
  width: 14px;
  height: 14px;
}
body.page-buyer-match .bm-done-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 26px;
  background: linear-gradient(135deg, rgba(0,191,98,0.08) 0%, rgba(0,163,86,0.04) 100%);
  border: 1px solid rgba(0,163,86,0.25);
  border-radius: 18px;
  box-shadow: 0 8px 24px -12px rgba(0,163,86,0.20);
}
body.page-buyer-match .bm-done-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  color: var(--bm-green, #00BF62);
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,163,86,0.18);
}
body.page-buyer-match .bm-done-icon svg { width: 30px; height: 30px; }
body.page-buyer-match .bm-done-body { flex: 1; min-width: 0; }
body.page-buyer-match .bm-done-title {
  font-family: 'Geist', sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--bm-ink);
  margin-bottom: 4px;
}
body.page-buyer-match .bm-done-copy {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bm-ink-soft);
}
body.page-buyer-match .bm-report-panel {
  padding: 0;
  display: block;
  background: #ffffff;
  overflow: hidden;
}
body.page-buyer-match .bm-report-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 34px;
}
body.page-buyer-match .bm-report-title {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--bm-green);
  text-transform: uppercase;
}
body.page-buyer-match .bm-report-state {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 750;
  color: var(--bm-muted);
}
body.page-buyer-match .bm-paper-spread {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
body.page-buyer-match .bm-paper {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%),
    var(--bm-paper);
  border: 1px solid rgba(45, 122, 81, 0.14);
  box-shadow: 0 20px 50px rgba(26, 31, 27, 0.08), inset 0 1px 0 rgba(255,255,255,0.95);
  padding: clamp(15px, 1.7vw, 22px);
  display: flex;
  flex-direction: column;
}
body.page-buyer-match .bm-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(45,122,81,0.08), transparent 10%, transparent 90%, rgba(45,122,81,0.05)),
    radial-gradient(circle at 12% 10%, rgba(45,122,81,0.07), transparent 30%);
  opacity: 0.38;
}
body.page-buyer-match .bm-paper::after {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--bm-green), transparent);
  opacity: 0.72;
}
body.page-buyer-match .bm-paper > * { position: relative; z-index: 1; }
body.page-buyer-match .bm-paper-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(45, 122, 81, 0.12);
}
body.page-buyer-match .bm-paper-label {
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.18em;
  color: var(--bm-green);
  text-transform: uppercase;
}
body.page-buyer-match .bm-paper-page {
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  color: var(--bm-muted);
  font-weight: 700;
}
body.page-buyer-match .bm-paper-headline {
  margin: clamp(14px, 2vh, 22px) 0 8px;
  font-family: 'Geist', sans-serif;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 0.92;
  letter-spacing: -0.07em;
  color: var(--bm-ink);
}
body.page-buyer-match .bm-paper-headline span { color: var(--bm-green); }
body.page-buyer-match .bm-paper-lede {
  margin: 0 0 14px;
  color: var(--bm-ink-soft);
  font-size: 12.5px;
  line-height: 1.55;
}
body.page-buyer-match .bm-owner-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 12px;
}
body.page-buyer-match .bm-owner-item {
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(45, 122, 81, 0.12);
}
body.page-buyer-match .bm-owner-key {
  font-family: 'Geist', sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  color: var(--bm-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
body.page-buyer-match .bm-owner-value {
  margin-top: 3px;
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: var(--bm-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-buyer-match .bm-owner-value.is-empty { color: #a8b2ac; font-weight: 600; }
body.page-buyer-match .bm-feature-card {
  border-radius: 18px;
  background: linear-gradient(135deg, #0f7a4f, #073b2b 76%);
  color: #fff;
  padding: 16px;
  min-height: 122px;
  box-shadow: 0 18px 40px rgba(45, 122, 81, 0.24);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
body.page-buyer-match .bm-feature-card.is-empty {
  background: linear-gradient(135deg, #f3f8f4, #ffffff);
  color: var(--bm-muted);
  box-shadow: none;
}
body.page-buyer-match .bm-feature-label {
  font-family: 'Geist', sans-serif;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.82;
}
body.page-buyer-match .bm-feature-name {
  margin-top: 5px;
  font-family: 'Geist', sans-serif;
  font-size: 23px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -0.04em;
}
body.page-buyer-match .bm-feature-copy {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.4;
  opacity: 0.86;
}
body.page-buyer-match .bm-score-ring {
  width: 82px;
  height: 82px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: conic-gradient(#fff var(--ring, 0%), rgba(255,255,255,0.22) 0);
  position: relative;
}
body.page-buyer-match .bm-score-ring::after {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: inherit;
  background: rgba(6, 59, 43, 0.96);
}
body.page-buyer-match .bm-feature-card.is-empty .bm-score-ring { background: conic-gradient(#d0c7b8 0%, rgba(255,255,255,0.45) 0); }
body.page-buyer-match .bm-feature-card.is-empty .bm-score-ring::after { background: #f3f8f4; }
body.page-buyer-match .bm-ring-text {
  position: relative;
  z-index: 1;
  font-family: 'Geist', sans-serif;
  font-size: 18px;
  font-weight: 850;
}
body.page-buyer-match .bm-insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}
body.page-buyer-match .bm-insight {
  min-height: 54px;
  padding: 9px 10px;
  border-radius: 13px;
  border: 1px solid rgba(45, 122, 81, 0.12);
  background: rgba(255,255,255,0.63);
}
body.page-buyer-match .bm-insight-label {
  font-family: 'Geist', sans-serif;
  font-size: 8.5px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bm-muted);
}
body.page-buyer-match .bm-insight-value {
  margin-top: 4px;
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: var(--bm-ink);
  line-height: 1.2;
}
body.page-buyer-match .bm-insight-value.is-empty { color: #a8b2ac; font-weight: 600; }
body.page-buyer-match .bm-bar-list {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}
body.page-buyer-match .bm-bar-row {
  display: grid;
  grid-template-columns: 82px 1fr 28px;
  gap: 8px;
  align-items: center;
}
body.page-buyer-match .bm-bar-name {
  font-family: 'Geist', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--bm-ink-soft);
}
body.page-buyer-match .bm-track {
  height: 7px;
  border-radius: 999px;
  background: rgba(13, 23, 18, 0.07);
  overflow: hidden;
}
body.page-buyer-match .bm-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bm-green), var(--bm-green-bright));
  transition: width 0.45s ease;
}
body.page-buyer-match .bm-bar-value {
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: var(--bm-muted);
  text-align: right;
}
body.page-buyer-match .bm-section-title {
  margin: 14px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 850;
  color: var(--bm-ink);
  letter-spacing: -0.01em;
}
body.page-buyer-match .bm-section-title span:last-child {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bm-green);
}
body.page-buyer-match .bm-detail-list {
  display: grid;
  gap: 7px;
}
body.page-buyer-match .bm-detail {
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(45, 122, 81, 0.12);
}
body.page-buyer-match .bm-detail-key {
  font-family: 'Geist', sans-serif;
  font-size: 8.5px;
  font-weight: 850;
  letter-spacing: 0.12em;
  color: var(--bm-muted);
  text-transform: uppercase;
}
body.page-buyer-match .bm-detail-value {
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--bm-ink);
  line-height: 1.35;
}
body.page-buyer-match .bm-detail-value.is-empty { color: #a8b2ac; font-weight: 600; }
body.page-buyer-match .bm-next-steps {
  margin-top: auto;
  padding-top: 12px;
  display: grid;
  gap: 7px;
}
body.page-buyer-match .bm-step-line {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 7px;
  align-items: start;
  font-size: 11px;
  line-height: 1.35;
  color: var(--bm-ink-soft);
}
body.page-buyer-match .bm-step-line b {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--bm-green-soft);
  color: var(--bm-green);
  font-family: 'Geist', sans-serif;
  font-size: 10px;
}
body.page-buyer-match .bm-blank-line {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(45, 122, 81, 0.16), rgba(45, 122, 81, 0.05));
  margin: 8px 0;
}
body.page-buyer-match .bm-blank-line.small { width: 62%; }
body.page-buyer-match .bm-blank-line.medium { width: 78%; }
body.page-buyer-match .bm-blank-line.large { width: 92%; }
body.is-complete .bm-paper {
  background:
    radial-gradient(circle at 90% 0%, rgba(45,122,81,0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
}
body.is-complete .bm-paper::before { opacity: 0.55; }
body.is-complete .bm-report-title::after {
  content: ' · final brief ready';
  color: var(--bm-sage);
}
body.page-buyer-match .site-footer {
  height: var(--bm-footer-h);
  padding: 0 24px;
  
  background: transparent;
  border-top: none;
  display: flex;
  align-items: center;
}
body.page-buyer-match .bm-foot-inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--bm-muted);
  font-family: 'Geist', sans-serif;
  font-size: 12px;
}
body.page-buyer-match .bm-foot-inner a { color: var(--bm-muted); text-decoration: none; margin-left: 16px; }
body.page-buyer-match .bm-foot-inner a:hover { color: var(--bm-green); }
@media (max-width: 880px) {
body.page-buyer-match { overflow: auto; }
body.page-buyer-match .bm-shell { height: auto; min-height: calc(100vh - var(--bm-header-h) - var(--bm-footer-h)); grid-template-columns: 1fr; }
body.page-buyer-match .bm-report-panel { min-height: 600px; }
}
@media (max-width: 680px) {
body.page-buyer-match .bm-shell { padding: 12px; }
body.page-buyer-match .bm-options-grid, body.page-buyer-match .bm-options-grid.is-six, body.page-buyer-match .bm-form-row, body.page-buyer-match .bm-paper-spread { grid-template-columns: 1fr; }
body.page-buyer-match .bm-question-panel, body.page-buyer-match .bm-report-panel { border-radius: 20px; }
body.page-buyer-match .bm-question-card { min-height: 0; }
body.page-buyer-match .bm-paper { min-height: 560px; }
}
body.page-buyer-match .bm-canvas-stage {
  position: relative;
  height: 100%;
  min-height: 0;
  perspective: 1800px;
  perspective-origin: center center;
  border-radius: 18px;
  overflow: hidden;
}
body.page-buyer-match .bm-canvas-stage > .bm-canvas { position: absolute; inset: 0; }
body.page-buyer-match .bm-cover-card {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  transform-style: preserve-3d;
  transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.4s ease 0.9s;
  transform-origin: left center;
  z-index: 10;
  cursor: default;
}
body.is-book-open .bm-cover-card {
  transform: rotateY(-168deg);
  pointer-events: none;
  opacity: 0;
}
body.is-book-complete .bm-cover-card {
  transform: rotateY(0deg);
  pointer-events: auto;
  opacity: 1;
  transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.4s ease;
  z-index: 12;
}
body.page-buyer-match .bm-cover-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 170px;
  height: 170px;
  transform: translate(-50%, -50%) rotate(-12deg) scale(0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 14;
  visibility: hidden;
  transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s linear 0.7s;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.is-book-complete .bm-cover-stamp {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-12deg) scale(1);
  visibility: visible;
  
  transition: opacity 0.45s ease 1.3s, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.3s, visibility 0s linear 1.3s;
}
body.page-buyer-match .bm-stamp-inner {
  width: 100%;
  height: 100%;
  border: 3.5px solid #B91C1C;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 18px 14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(185, 28, 28, 0.05) 0%, transparent 60%),
    rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 0 0 1.5px rgba(185, 28, 28, 0.30),
    0 0 0 0 transparent;
  filter: drop-shadow(0 2px 1px rgba(185, 28, 28, 0.18));
}
body.page-buyer-match .bm-stamp-top, body.page-buyer-match .bm-stamp-mid {
  font-family: 'Geist', sans-serif;
  font-weight: 900;
  color: #B91C1C;
  letter-spacing: 0.14em;
  text-shadow: 0 0 2px rgba(185, 28, 28, 0.20);
  line-height: 1;
  opacity: 0.92;
}
body.page-buyer-match .bm-stamp-top {
  font-size: 14px;
}
body.page-buyer-match .bm-stamp-mid {
  font-size: 21px;
  letter-spacing: 0.20em;
}
body.page-buyer-match .bm-stamp-rule {
  width: 44px;
  height: 1.2px;
  background: #B91C1C;
  margin: 3px 0 1px;
  opacity: 0.85;
}
body.page-buyer-match .bm-stamp-date {
  font-family: 'Geist', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  color: #B91C1C;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.78;
}
body.page-buyer-match .bm-cover-face {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
body.page-buyer-match .bm-cover-front {
  background: #0e1f15;
  color: #fff;
  display: block;
  padding: 0;
  overflow: hidden;
}
body.page-buyer-match .bm-cover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  
  filter: grayscale(0.7) contrast(1.05) brightness(0.85);
  transition: filter 0.9s ease 0.8s, opacity 2.5s cubic-bezier(0.4, 0, 0.6, 1);
}
body.is-book-complete .bm-cover-video {
  filter: grayscale(1) contrast(1.1) brightness(0.38);
}
body.page-buyer-match .bm-cover-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(10, 14, 19, 0.20) 0%, rgba(10, 14, 19, 0.55) 100%),
    linear-gradient(180deg, rgba(10, 14, 19, 0.40) 0%, rgba(10, 14, 19, 0.15) 35%, rgba(10, 14, 19, 0.28) 65%, rgba(10, 14, 19, 0.60) 100%);
  transition: background 0.9s ease 0.8s;
}
body.is-book-complete .bm-cover-video-overlay {
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(10, 14, 19, 0.45) 0%, rgba(10, 14, 19, 0.75) 100%),
    linear-gradient(180deg, rgba(10, 14, 19, 0.65) 0%, rgba(10, 14, 19, 0.45) 50%, rgba(10, 14, 19, 0.70) 100%);
}
body.page-buyer-match .bm-cover-shape {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
body.page-buyer-match .bm-cover-shape-corners {
  
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
}
body.page-buyer-match .bm-cover-shape-glow {
  
  bottom: -20%;
  left: -15%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(184, 245, 208, 0.18) 0%, transparent 60%);
  filter: blur(22px);
}
body.page-buyer-match .bm-cover-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: clamp(36px, 4.5vw, 56px) clamp(28px, 3.6vw, 42px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}
body.page-buyer-match .bm-cover-spine {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.12) 60%, transparent 100%);
  pointer-events: none;
}
body.page-buyer-match .bm-cover-logo-mark {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  
  animation: bmCoverLogoEntrance 1.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
  
  transition:
    transform 1.6s cubic-bezier(0.7, 0, 0.3, 1) 1.4s,
    width 1.4s cubic-bezier(0.7, 0, 0.3, 1) 1.4s,
    height 1.4s cubic-bezier(0.7, 0, 0.3, 1) 1.4s,
    margin 1.4s cubic-bezier(0.7, 0, 0.3, 1) 1.4s;
}
@keyframes bmCoverLogoEntrance {
  0%   { transform: scale(0.1); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
body.page-buyer-match .bm-cover-logo-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.92) 50%,
      rgba(255, 255, 255, 0.78) 75%,
      rgba(255, 255, 255, 0.55) 90%,
      rgba(255, 255, 255, 0.30) 100%);
  box-shadow:
    0 0 40px rgba(255, 255, 255, 0.45),
    0 12px 36px rgba(0, 0, 0, 0.35);
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.6, 1) 0.6s, transform 1.1s cubic-bezier(0.55, 0, 0.45, 1) 0.6s;
}
body.page-buyer-match .bm-cover-logo-mark::before {
  
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(13, 23, 18, 0.10);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.6, 1) 0.6s;
}
body.page-buyer-match .bm-cover-logo-mark::after {
  
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.42);
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.6, 1) 0.6s;
}
body.page-buyer-match .bm-cover-logo-img {
  position: relative;
  z-index: 2;
  width: 96px;
  height: 96px;
  object-fit: contain;
  transition:
    width 1.4s cubic-bezier(0.7, 0, 0.3, 1) 1.4s,
    height 1.4s cubic-bezier(0.7, 0, 0.3, 1) 1.4s,
    filter 0.7s ease 1.4s;
}
body.is-book-complete .bm-cover-logo-mark {
  position: absolute;
  top: 32px;
  right: 36px;
  width: 96px;
  height: 96px;
  margin: 0;
  align-self: flex-end;
  z-index: 4;
}
body.is-book-complete .bm-cover-logo-img {
  width: 60px;
  height: 60px;
}
body.page-buyer-match .bm-cover-mid {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  gap: 6px;
  
  margin-top: -10%;
  transition: transform 1.6s cubic-bezier(0.25, 0.9, 0.4, 1) 1.1s, margin-top 1.6s cubic-bezier(0.25, 0.9, 0.4, 1) 1.1s;
}
body.is-book-complete .bm-cover-mid {
  margin-top: 32%;
  transform: translateY(78px) scale(0.92);
}
body.is-book-complete .bm-cover-owner-rule, body.is-book-complete .bm-cover-owner-meta {
  opacity: 0 !important;
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.6, 1) 1.2s;
}
body.is-book-complete .bm-cover-owner-name {
  font-size: 19px;
  letter-spacing: -0.02em;
  transition: font-size 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s, letter-spacing 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s;
}
body.page-buyer-match .bm-cover-submitted {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Geist', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.70);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.6, 1) 2.0s,
              max-height 0.7s cubic-bezier(0.4, 0, 0.6, 1) 2.0s,
              margin-top 0.7s cubic-bezier(0.4, 0, 0.6, 1) 2.0s;
}
body.is-book-complete .bm-cover-submitted.is-visible {
  opacity: 1;
  max-height: 30px;
  margin-top: 10px;
}
body.page-buyer-match .bm-cover-submitted-dot {
  color: var(--bm-green, #00BF62);
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 0 8px rgba(0, 191, 98, 0.55);
}
body.page-buyer-match .bm-cover-submitted-label {
  font-style: italic;
  letter-spacing: 0.22em;
}
body.page-buyer-match .bm-cover-submitted-date {
  font-feature-settings: "tnum";
  letter-spacing: 0.18em;
}
body.page-buyer-match .bm-cover-eyebrow {
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  position: relative;
  padding: 0 28px;
  margin-bottom: 8px;
}
body.page-buyer-match .bm-cover-eyebrow::before, body.page-buyer-match .bm-cover-eyebrow::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 18px;
  height: 1px;
  background: rgba(255, 255, 255, 0.30);
}
body.page-buyer-match .bm-cover-eyebrow::before { left: 0; }
body.page-buyer-match .bm-cover-eyebrow::after { right: 0; }
body.page-buyer-match .bm-cover-script {
  font-family: 'Geist', sans-serif;
  font-size: clamp(14px, 1.8vw, 22px);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
  line-height: 1;
  margin-bottom: -2px;
  position: relative;
}
body.page-buyer-match .bm-cover-title {
  font-family: 'Geist', sans-serif;
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
  color: var(--bm-green, #00BF62);
  text-shadow: 0 4px 24px rgba(0, 191, 98, 0.35), 0 8px 40px rgba(0, 0, 0, 0.5);
  text-align: center;
  white-space: nowrap;
}
body.page-buyer-match .bm-cover-title em {
  font-style: italic;
  font-weight: 400;
  color: #B8F5D0;
  letter-spacing: -0.04em;
}
body.page-buyer-match .bm-cover-owner-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
body.page-buyer-match .bm-cover-owner-rule {
  width: 36px;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
}
body.page-buyer-match .bm-cover-owner-name {
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #ffffff;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  max-width: 280px;
  text-align: center;
  
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
body.page-buyer-match .bm-cover-owner-name.is-empty {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 700;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
body.page-buyer-match .bm-cover-owner-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.4s ease, margin-top 0.4s ease;
}
body.page-buyer-match .bm-cover-owner-meta.is-visible {
  opacity: 1;
  max-height: 80px;
  margin-top: 4px;
}
body.page-buyer-match .bm-cover-owner-country {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
body.page-buyer-match .bm-cover-owner-flag {
  font-size: 16px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
body.page-buyer-match .bm-cover-owner-countryname {
  letter-spacing: 0.02em;
}
body.page-buyer-match .bm-cover-owner-contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Geist', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.015em;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  max-width: 320px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.page-buyer-match .bm-cover-owner-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
}
body.page-buyer-match .bm-cover-owner-sep:empty {
  display: inline-block;
}
body.page-buyer-match .bm-cover-owner-contact:not(.has-email) #bmCoverOwnerEmail, body.page-buyer-match .bm-cover-owner-contact:not(.has-phone) #bmCoverOwnerPhone {
  display: none;
}
body.page-buyer-match .bm-cover-owner-contact:not(.has-email) .bm-cover-owner-sep, body.page-buyer-match .bm-cover-owner-contact:not(.has-phone) .bm-cover-owner-sep {
  display: none;
}
body.page-buyer-match .bm-cover-cta {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  background: var(--bm-green, #00BF62);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow:
    0 8px 24px rgba(0, 191, 98, 0.42),
    0 2px 4px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
body.page-buyer-match .bm-cover-cta:hover {
  background: #00A356;
  transform: translateY(-1px);
  box-shadow:
    0 12px 32px rgba(0, 191, 98, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
body.page-buyer-match .bm-cover-cta:active { transform: translateY(0); }
body.page-buyer-match .bm-cover-cta svg {
  width: 12px;
  height: 12px;
}
body.page-buyer-match .bm-cover-back {
  background: linear-gradient(135deg, #0a4a22 0%, #0e5a2a 100%);
  transform: rotateY(180deg);
}
body.page-buyer-match .bm-canvas {
  position: relative;
  inset: 0;
  height: 100%;
  border-radius: 18px;
  background: #ffffff;
  border: none;
  box-shadow: none;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.6s ease 0.5s;
}
body.is-book-open .bm-canvas { opacity: 0; pointer-events: none; }
body.page-buyer-match .bm-flipbook-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease 0.7s, visibility 0s linear 1.3s;
  pointer-events: none;
}
body.is-book-open .bm-flipbook-wrap {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.6s ease 0.7s, visibility 0s linear 0.7s;
}
body.page-buyer-match .bm-flipbook {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
body.page-buyer-match .bm-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease 0.7s;
}
body.is-book-open .bm-pagination {
  opacity: 1;
  pointer-events: auto;
}
body.is-submit-flying .bm-pagination {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.18s ease !important;
}
body.page-buyer-match .bm-pagination-dots {
  display: flex;
  align-items: center;
  gap: 9px;
}
body.page-buyer-match .bm-pag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(0, 191, 98, 0.38);
  cursor: pointer;
  padding: 0;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
body.page-buyer-match .bm-pag-dot:hover {
  border-color: var(--bm-green, #00BF62);
  transform: scale(1.2);
}
body.page-buyer-match .bm-pag-dot.is-active {
  background: var(--bm-green, #00BF62);
  border-color: var(--bm-green, #00BF62);
  width: 22px;
  border-radius: 999px;
}
body.page-buyer-match .bm-flip-hint {
  position: absolute;
  right: 38px;                       
  top: 50%;
  width: 56px;
  height: 78px;
  z-index: 25;
  
  opacity: 0;
  transform: translate(48px, -22%) scale(0.5) rotate(18deg);
  filter: blur(2px);
  pointer-events: none;
  transition:
    opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.55s ease;
}
body.is-form-ready:not(.is-book-complete).is-on-hero .bm-flip-hint {
  opacity: 1;
  transform: translate(0, -22%) scale(1) rotate(0deg);
  filter: blur(0);
  transition:
    opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1) 1.2s,
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s,
    filter 0.55s ease 1.2s;
}
body.is-submit-flying .bm-flip-hint {
  opacity: 0 !important;
  transform: translate(20px, -22%) scale(0.85) !important;
  filter: blur(2px) !important;
  transition: opacity 0.18s ease, transform 0.18s ease, filter 0.18s ease !important;
  pointer-events: none !important;
}
body.page-buyer-match .bm-flip-hint-img {
  display: block;
  width: 100%;
  height: auto;
  
  animation: bmFlipHintSway 2.4s ease-in-out infinite;
  filter: drop-shadow(0 6px 14px rgba(13, 23, 18, 0.20));
}
@keyframes bmFlipHintSway {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}
body.page-buyer-match .bm-flip-hint-label {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Geist', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--bm-green, #00BF62);
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.95), 0 0 8px rgba(255, 255, 255, 0.7);
  pointer-events: none;
  animation: bmFlipHintLabelSway 2.4s ease-in-out infinite;
}
@keyframes bmFlipHintLabelSway {
  0%, 100% { transform: translateX(-50%); }
  50%      { transform: translateX(calc(-50% + 5px)); }
}
body.page-buyer-match .bm-submit-hint {
  position: absolute;
  
  right: 138px;
  bottom: 22px;
  width: 64px;
  height: 46px;
  z-index: 25;
  
  opacity: 0;
  transform: translate(30px, 20px) scale(0.5) rotate(38deg);
  filter: blur(2px);
  pointer-events: none;
  transition:
    opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.55s ease;
}
body.page-buyer-match .bm-submit-hint-img {
  display: block;
  width: 100%;
  height: auto;
  animation: bmSubmitHintSway 2.4s ease-in-out infinite;
  filter: drop-shadow(0 6px 14px rgba(13, 23, 18, 0.20));
}
@keyframes bmSubmitHintSway {
  0%, 100% { transform: rotate(18deg) translateX(0); }
  50%      { transform: rotate(18deg) translateX(5px); }
}
body.page-buyer-match .bm-submit-hint-label {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Geist', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.15;
  color: var(--bm-green, #00BF62);
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.95), 0 0 8px rgba(255, 255, 255, 0.7);
  pointer-events: none;
  animation: bmSubmitHintLabelSway 2.4s ease-in-out infinite;
}
@keyframes bmSubmitHintLabelSway {
  0%, 100% { transform: translateX(-50%); }
  50%      { transform: translateX(calc(-50% + 5px)); }
}
body.is-form-ready.is-flip-hint-dismissed:not(.is-book-complete) .bm-submit-hint {
  opacity: 1;
  transform: translate(0, 0) scale(1) rotate(0deg);
  filter: blur(0);
}
body.is-submit-flying .bm-submit-hint {
  opacity: 0 !important;
  transform: translate(20px, 0) scale(0.85) !important;
  filter: blur(2px) !important;
  transition: opacity 0.18s ease, transform 0.18s ease, filter 0.18s ease !important;
  pointer-events: none !important;
}
@keyframes bmInsideSpread {
  0%   { opacity: 0;    transform: scale(0.6); }
  35%  { opacity: 1;    transform: scale(1.0); }
  100% { opacity: 0;    transform: scale(1.0); }
}
@keyframes bmOuterBloom {
  0%   { opacity: 0;    transform: scale(0.35); }
  30%  { opacity: 1;    transform: scale(0.65); }
  70%  { opacity: 0.55; transform: scale(1.15); }
  100% { opacity: 0;    transform: scale(1.5); }
}
body.is-contact-form:not(.is-form-ready) #bmFlipbook, body.is-contact-form:not(.is-form-ready) .bm-page {
  cursor: not-allowed;
}
body.page-buyer-match .bm-consent.is-shake {
  animation: bmConsentShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes bmConsentShake {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-4px); }
  30%      { transform: translateX(4px); }
  45%      { transform: translateX(-3px); }
  60%      { transform: translateX(3px); }
  75%      { transform: translateX(-2px); }
  90%      { transform: translateX(2px); }
}
body.page-buyer-match .bm-consent.is-shake input[type="checkbox"] {
  border-color: var(--bm-green, #00BF62);
  box-shadow: 0 0 0 3px rgba(0, 191, 98, 0.18);
}
body:not(.is-form-ready):not(.is-post-submit-reveal) .bm-flipbook, body:not(.is-form-ready):not(.is-post-submit-reveal) .bm-flipbook * {
  pointer-events: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}
body.page-buyer-match .bm-flipbook-lock {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: transparent;
}
body.is-contact-form:not(.is-form-ready) .bm-flipbook-lock {
  pointer-events: auto !important;
  cursor: not-allowed;
}
body.is-form-ready:not(.is-book-complete) .bm-btn-next:not(:disabled) {
  animation: bmSubmitBreathe 3.2s ease-in-out 0.5s infinite;
}
@keyframes bmSubmitBreathe {
  0%, 100% { box-shadow: 0 4px 12px rgba(0, 191, 98, 0.30); }
  50%      { box-shadow: 0 8px 22px rgba(0, 191, 98, 0.55), 0 0 0 4px rgba(0, 191, 98, 0.12); }
}
body.page-buyer-match .bm-btn-next.is-submit-attention {
  animation: bmSubmitAttention 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes bmSubmitAttention {
  0%   { transform: scale(1); box-shadow: 0 4px 12px rgba(0, 191, 98, 0.30); }
  30%  { transform: scale(1.05); box-shadow: 0 14px 32px rgba(0, 191, 98, 0.65), 0 0 0 8px rgba(0, 191, 98, 0.18); }
  100% { transform: scale(1); box-shadow: 0 4px 12px rgba(0, 191, 98, 0.30); }
}
body.page-buyer-match .bm-page {
  position: relative;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0, 191, 98, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 100% 100%, rgba(0, 191, 98, 0.03) 0%, transparent 55%),
    linear-gradient(180deg, #fdfcf8 0%, #faf8f0 100%);
  background-color: #fdfcf8;
  
  background-image:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0, 191, 98, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 100% 100%, rgba(0, 191, 98, 0.03) 0%, transparent 55%),
    repeating-linear-gradient(180deg, transparent 0px, transparent 1px, rgba(13, 23, 18, 0.012) 1px, rgba(13, 23, 18, 0.012) 2px);
  box-shadow:
    inset 0 0 0 1px rgba(13, 23, 18, 0.05),
    inset 6px 0 14px -10px rgba(13, 23, 18, 0.12);
  overflow: hidden;
  font-family: 'Geist', sans-serif;
}
body.page-buyer-match .bm-page-inner {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 30px 32px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.page-buyer-match .bm-page-seal {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 78px;
  height: 78px;
  border: 2.5px solid rgba(179, 33, 33, 0.65);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  transform: rotate(-14deg) scale(0.9);
  opacity: 0;
  pointer-events: none;
  font-family: 'Geist', sans-serif;
  color: rgba(179, 33, 33, 0.72);
  text-align: center;
  background:
    radial-gradient(ellipse at 30% 25%, transparent 0%, transparent 30%, rgba(179, 33, 33, 0.04) 70%),
    radial-gradient(ellipse at 70% 75%, rgba(179, 33, 33, 0.06) 0%, transparent 50%);
  box-shadow:
    inset 0 0 0 1px rgba(179, 33, 33, 0.10),
    0 0 0 0.5px rgba(179, 33, 33, 0.18);
  
  mix-blend-mode: multiply;
  z-index: 10;
}
body.page-buyer-match .bm-page-seal::before, body.page-buyer-match .bm-page-seal::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(179, 33, 33, 0.18);
  pointer-events: none;
}
body.page-buyer-match .bm-page-seal::after {
  inset: 3px;
  border: 0.5px dashed rgba(179, 33, 33, 0.22);
}
body.page-buyer-match .bm-page-seal-top {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  line-height: 1;
}
body.page-buyer-match .bm-page-seal-mid {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 2px;
}
body.page-buyer-match .bm-page-seal-rule {
  width: 50%;
  height: 1px;
  background: rgba(179, 33, 33, 0.40);
  margin: 3px 0 2px;
}
body.page-buyer-match .bm-page-seal-date {
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  opacity: 0.85;
}
body.is-book-complete .bm-page-seal {
  opacity: 0.85;
  transform: rotate(-14deg) scale(1);
  transition: opacity 0.5s ease 0.3s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
}
body.page-buyer-match .bm-page::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  background:
    linear-gradient(135deg,
      transparent 49.5%,
      rgba(13, 23, 18, 0.14) 50%,
      rgba(13, 23, 18, 0.05) 50.6%,
      #ede4cc 52%,
      #d9ceb0 100%);
  box-shadow:
    inset 2px 2px 4px rgba(13, 23, 18, 0.05);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transform-origin: top left;
  transition: opacity 0.4s ease, width 0.3s ease, height 0.3s ease;
}
body.is-form-ready:not(.is-book-complete) .bm-page::after {
  opacity: 1;
  width: 30px;
  height: 30px;
  animation: bmPageCornerFloat 2.4s ease-in-out infinite;
}
@keyframes bmPageCornerFloat {
  0%, 100% {
    width: 26px;
    height: 26px;
    filter: drop-shadow(-0.5px -0.5px 1px rgba(13, 23, 18, 0.06));
  }
  50% {
    width: 38px;
    height: 38px;
    filter: drop-shadow(-2px -2px 3px rgba(13, 23, 18, 0.14));
  }
}
body.is-form-ready:not(.is-book-complete) .bm-page:hover::after {
  
  animation-play-state: paused;
  width: 40px;
  height: 40px;
}
body.page-buyer-match .bm-page[data-page-id="21"]::after {
  display: none !important;
}
body.page-buyer-match .bm-page[data-page-id="1"] .bm-page-inner, body.page-buyer-match .bm-page[data-page-id="2"] .bm-page-inner {
  background:
    radial-gradient(circle 480px at 0% 0%, rgba(0, 191, 98, 0.022) 0%, transparent 60%),
    radial-gradient(circle 480px at 100% 100%, rgba(0, 191, 98, 0.018) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fcfffd 100%) !important;
}
body.page-buyer-match .bm-page-inner {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 38px 40px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(255, 255, 255, 0.55) 0%, transparent 70%),
    radial-gradient(circle 380px at 50% 30%, rgba(0, 191, 98, 0.045) 0%, transparent 70%),
    radial-gradient(circle 480px at 0% 0%, rgba(0, 191, 98, 0.028) 0%, transparent 60%),
    radial-gradient(circle 480px at 100% 100%, rgba(0, 191, 98, 0.022) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fcfffd 50%, #f8fefa 100%);
  
  box-shadow: inset 0 0 80px -40px rgba(0, 191, 98, 0.06);
}
body.page-buyer-match .bm-page-inner:not(.is-divider)::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  opacity: 0.65;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 0;
}
body.page-buyer-match .bm-page-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 6px;
  flex-shrink: 0;
  padding-right: 78px;
  z-index: 2;
}
body.page-buyer-match .bm-page-head::after {
  
  content: none;
}
body.page-buyer-match .bm-page-head::before {
  content: attr(data-chapter-num);
  position: absolute;
  top: -18px;
  left: -10px;
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 124px;
  font-weight: 400;
  font-style: italic;
  line-height: 1;
  color: rgba(0, 191, 98, 0.075);
  letter-spacing: -0.06em;
  pointer-events: none;
  user-select: none;
  z-index: -1;
}
body.page-buyer-match .bm-page-num {
  font-family: 'Geist', sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.40em;
  color: rgba(0, 163, 86, 0.85);
  line-height: 1;
  font-feature-settings: "tnum";
  text-transform: uppercase;
  margin-bottom: 0;
}
body.page-buyer-match .bm-page-num::before {
  content: 'CHAPTER ';
}
body.page-buyer-match .bm-page-title {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--bm-ink, #1a1f1b);
  font-style: italic;
  text-transform: none;
  line-height: 1;
  
  text-shadow: 0 0 24px rgba(0, 191, 98, 0.06);
}
body.page-buyer-match .bm-chapter-img-wrap {
  position: relative;
  display: block;
  width: calc(100% + 56px);
  margin-left: -28px;
  margin-right: -28px;
  margin-top: 22px;        
  margin-bottom: 14px;
  padding: 0;
  overflow: hidden;
  flex-shrink: 0;
  flex-grow: 0;
  
  box-shadow:
    inset 0 0 0 1px rgba(0, 191, 98, 0.08),
    inset 0 -40px 60px -30px rgba(0, 0, 0, 0.08),
    0 8px 28px -16px rgba(0, 191, 98, 0.20),
    0 2px 8px -4px rgba(13, 23, 18, 0.06);
}
body.page-buyer-match .bm-chapter-img-wrap > .bm-chapter-img-top-rule {
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(0, 191, 98, 0.55) 0%,
    rgba(0, 191, 98, 0.40) 18%,
    rgba(0, 191, 98, 0.18) 42%,
    rgba(0, 191, 98, 0.06) 75%,
    transparent 100%);
  pointer-events: none;
  z-index: 6;
  opacity: 0.85;
}
body.page-buyer-match .bm-chapter-img-wrap > .bm-chapter-img-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 100%);
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 4;
}
body.page-buyer-match .bm-chapter-img {
  display: block;
  width: 100%;
  height: 200px;
  min-height: 200px;
  max-height: 200px;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
  flex-grow: 0;
  
  filter: saturate(1.10) contrast(1.04) brightness(1.02);
}
body.page-buyer-match .bm-chapter-img-wrap > .bm-chapter-img-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(0, 191, 98, 0.18) 0%,
    rgba(0, 191, 98, 0.06) 50%,
    rgba(0, 191, 98, 0.14) 100%);
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 2;
}
body.page-buyer-match .bm-chapter-img-wrap > .bm-chapter-img-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 110% 90% at 50% 50%,
    transparent 50%,
    rgba(0, 0, 0, 0.10) 90%,
    rgba(0, 0, 0, 0.18) 100%);
  pointer-events: none;
  z-index: 3;
}
body.page-buyer-match .bm-chapter-img-wrap > .bm-chapter-img-frame {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.30);
  box-shadow:
    0 0 0 1px rgba(0, 191, 98, 0.18),
    inset 0 0 24px rgba(0, 0, 0, 0.08);
  pointer-events: none;
  z-index: 4;
}
body.page-buyer-match .bm-chapter-img-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(255, 255, 255, 0.12) 40%,
      rgba(246, 254, 250, 0.94) 100%);
  pointer-events: none;
  z-index: 5;
}
body.page-buyer-match .bm-chapter-img-wrap > .bm-chapter-img-top-fade {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50px;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(255, 255, 255, 0.30) 50%,
      transparent 100%);
  pointer-events: none;
  z-index: 5;
}
body.page-buyer-match .bm-chapter-img-wrap::before {
  content: '';
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 191, 98, 0.30) 25%,
    rgba(0, 191, 98, 0.50) 50%,
    rgba(0, 191, 98, 0.30) 75%,
    transparent 100%);
  z-index: 6;
}
@keyframes bmChapterImgIn {
  to { opacity: 1; transform: scale(1); }
}
body.page-buyer-match .bm-page-logo {
  position: absolute;
  top: 26px;
  right: 30px;
  height: 28px;
  width: auto;
  opacity: 0.92;
  z-index: 4;
  filter: drop-shadow(0 1px 2px rgba(0, 191, 98, 0.10));
}
body.page-buyer-match .bm-page-inner > .bm-page-logo::after {
  
}
body.page-buyer-match .bm-page-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
}
body.page-buyer-match .bm-insight {
  margin-top: auto;
  background: linear-gradient(135deg, rgba(0, 191, 98, 0.07) 0%, rgba(0, 191, 98, 0.03) 100%);
  border: 1px solid rgba(0, 191, 98, 0.20);
  border-radius: 10px;
  padding: 10px 12px 11px;
  flex-shrink: 0;
}
body.page-buyer-match .bm-insight-label {
  font-family: 'Geist', sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.24em;
  color: var(--bm-green, #00BF62);
  margin-bottom: 8px;
  text-transform: uppercase;
}
body.page-buyer-match .bm-insight-body {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 14px;
  align-items: stretch;
}
body.page-buyer-match .bm-insight-viz {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
body.page-buyer-match .bm-insight-bar-row {
  display: grid;
  grid-template-columns: 1fr 56px 22px;
  align-items: center;
  gap: 7px;
}
body.page-buyer-match .bm-insight-bar-label {
  font-family: 'Geist', sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: rgba(13, 23, 18, 0.72);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-buyer-match .bm-insight-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(0, 191, 98, 0.15);
  overflow: hidden;
}
body.page-buyer-match .bm-insight-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--bm-green, #00BF62);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
body.page-buyer-match .bm-insight-bar-pct {
  font-family: 'Geist', sans-serif;
  font-size: 9px;
  font-weight: 800;
  color: var(--bm-green, #00BF62);
  text-align: right;
  letter-spacing: -0.01em;
  font-feature-settings: "tnum";
}
body.page-buyer-match .bm-insight-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 12px;
  border-left: 1px solid rgba(0, 191, 98, 0.22);
}
body.page-buyer-match .bm-insight-stat-label {
  font-family: 'Geist', sans-serif;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: rgba(0, 191, 98, 0.70);
  margin-bottom: 4px;
  text-transform: uppercase;
}
body.page-buyer-match .bm-insight-stat-value {
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: var(--bm-ink, #1a1f1b);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
body.page-buyer-match .bm-insight-stat-pct {
  font-family: 'Geist', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--bm-green, #00BF62);
  letter-spacing: -0.03em;
  line-height: 1;
}
body.page-buyer-match .bm-page-inner.is-divider {
  
  background:
    
    radial-gradient(ellipse 65% 50% at 50% 30%, rgba(255, 255, 255, 0.85) 0%, transparent 75%),
    
    radial-gradient(circle 320px at 50% 38%, rgba(0, 191, 98, 0.10) 0%, rgba(0, 191, 98, 0.04) 40%, transparent 75%),
    
    radial-gradient(ellipse 50% 30% at 50% 0%, rgba(0, 191, 98, 0.05) 0%, transparent 60%),
    
    linear-gradient(180deg, #ffffff 0%, #fafffc 60%, #f3fdf6 100%);
  
  box-shadow: inset 0 0 120px -50px rgba(0, 191, 98, 0.08);
  position: relative;
  overflow: hidden;
}
body.page-buyer-match .bm-page-inner.is-divider .bm-page-head { visibility: hidden; }
body.page-buyer-match .bm-page-inner.is-divider > .bm-page-logo { display: none; }
body.page-buyer-match .bm-page-inner.is-divider::before, body.page-buyer-match .bm-page-inner.is-divider::after {
  content: '';
  position: absolute;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(0, 191, 98, 0.45);
  pointer-events: none;
  z-index: 1;
}
body.page-buyer-match .bm-page-inner.is-divider::before {
  top: 26px;
  left: 26px;
  border-right: none;
  border-bottom: none;
}
body.page-buyer-match .bm-page-inner.is-divider::after {
  bottom: 26px;
  right: 26px;
  border-left: none;
  border-top: none;
}
body.page-buyer-match .bm-divider {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 24px;
  padding: 38px 26px;
  position: relative;
  z-index: 2;
  animation: bmDividerIn 1.0s cubic-bezier(0.2, 0, 0.2, 1);
}
@keyframes bmDividerIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.page-buyer-match .bm-divider-mark {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, #ffffff 0%, #fdfffe 60%, #f5fdf8 100%);
  border: 1.5px solid var(--bm-green, #00BF62);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  
  box-shadow:
    
    0 0 60px -10px rgba(0, 191, 98, 0.40),
    
    0 24px 56px -16px rgba(0, 191, 98, 0.42),
    0 8px 20px -6px rgba(0, 191, 98, 0.18),
    
    0 2px 6px rgba(13, 23, 18, 0.06),
    
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 -3px 8px rgba(0, 191, 98, 0.08);
}
body.page-buyer-match .bm-divider-mark::before {
  content: '';
  width: 60px;
  height: 60px;
  background-image: url('../images/demara-logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 2px 4px rgba(0, 191, 98, 0.22));
  z-index: 2;
}
body.page-buyer-match .bm-divider-mark::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(0, 191, 98, 0.30);
  background: radial-gradient(circle at center, transparent 65%, rgba(0, 191, 98, 0.05) 100%);
}
body.page-buyer-match .bm-divider-mark-halo {
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 191, 98, 0.20);
  pointer-events: none;
  
  box-shadow:
    0 0 0 14px rgba(255, 255, 255, 0.40),
    0 0 0 15px rgba(0, 191, 98, 0.08);
}
body.page-buyer-match .bm-divider-eyebrow {
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.54em;
  color: rgba(0, 163, 86, 0.90);
  text-transform: uppercase;
  margin-top: 12px;
  padding-left: 0.54em;
  position: relative;
}
body.page-buyer-match .bm-divider-title {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--bm-ink, #1a1f1b);
  font-style: italic;
  line-height: 1.05;
  margin-top: 2px;
  margin-bottom: 2px;
  
  text-shadow:
    0 0 0 rgba(255, 255, 255, 1),
    0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 36px rgba(0, 191, 98, 0.10);
}
body.page-buyer-match .bm-divider-copy {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(13, 23, 18, 0.58);
  line-height: 1.65;
  max-width: 300px;
  font-style: italic;
  margin-top: 4px;
}
body.page-buyer-match .bm-divider-ornament {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}
body.page-buyer-match .bm-divider-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bm-green, #00BF62);
  
  box-shadow:
    0 0 0 2px rgba(0, 191, 98, 0.10),
    0 0 12px rgba(0, 191, 98, 0.45),
    0 0 24px rgba(0, 191, 98, 0.18);
}
body.page-buyer-match .bm-divider-dot.is-hollow {
  width: 8px;
  height: 8px;
  background: transparent;
  border: 1px solid var(--bm-green, #00BF62);
  transform: rotate(45deg);
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(0, 191, 98, 0.25);
}
body.page-buyer-match .bm-divider-line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bm-green, #00BF62) 50%, transparent);
  position: relative;
  box-shadow: 0 0 6px rgba(0, 191, 98, 0.30);
}
body.page-buyer-match .bm-divider-line::before {
  content: none;
}
body.page-buyer-match .bm-analysis-headline {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(120deg, rgba(0, 191, 98, 0.10) 0%, rgba(0, 191, 98, 0.02) 100%);
  border: 1.5px solid var(--bm-green, #00BF62);
  border-radius: 12px;
  box-shadow: 0 6px 18px -10px rgba(0, 191, 98, 0.30);
  margin-bottom: 12px;
}
body.page-buyer-match .bm-analysis-headline-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2.5px solid var(--bm-green, #00BF62);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 10px -3px rgba(0, 191, 98, 0.30);
}
body.page-buyer-match .bm-analysis-headline-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.page-buyer-match .bm-analysis-headline-meta { min-width: 0; }
body.page-buyer-match .bm-analysis-headline-eyebrow {
  font-family: 'Geist', sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--bm-green, #00BF62);
  text-transform: uppercase;
  margin-bottom: 2px;
}
body.page-buyer-match .bm-analysis-headline-name {
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--bm-ink, #1a1f1b);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 2px;
}
body.page-buyer-match .bm-analysis-headline-copy {
  font-family: 'Geist', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  font-style: italic;
  color: rgba(13, 23, 18, 0.65);
  line-height: 1.35;
}
body.page-buyer-match .bm-analysis-headline-pct {
  font-family: 'Geist', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--bm-green, #00BF62);
  letter-spacing: -0.035em;
  line-height: 1;
  font-feature-settings: "tnum";
}
body.page-buyer-match .bm-analysis-headline-pct span {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.7;
  margin-left: 1px;
}
body.page-buyer-match .bm-analysis-summary {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
body.page-buyer-match .bm-analysis-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px 9px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.015);
  border-left: 3px solid var(--bm-green, #00BF62);
}
body.page-buyer-match .bm-analysis-block-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(0, 191, 98, 0.12);
  margin-bottom: 4px;
}
body.page-buyer-match .bm-analysis-block-num {
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: var(--bm-green, #00BF62);
  letter-spacing: -0.01em;
  opacity: 0.55;
  font-feature-settings: "tnum";
}
body.page-buyer-match .bm-analysis-block-title {
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: var(--bm-ink, #1a1f1b);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.page-buyer-match .bm-analysis-block-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body.page-buyer-match .bm-analysis-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: baseline;
  gap: 10px;
}
body.page-buyer-match .bm-analysis-item-label {
  font-family: 'Geist', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(13, 23, 18, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-buyer-match .bm-analysis-item-value {
  font-family: 'Geist', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--bm-ink, #1a1f1b);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
body.page-buyer-match .bm-analysis-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
}
body.page-buyer-match .bm-analysis-row {
  display: grid;
  grid-template-columns: 24px 1fr 70px 96px;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: linear-gradient(90deg, rgba(0, 191, 98, 0.05) 0%, rgba(0, 191, 98, 0.02) 100%);
  border: 1px solid rgba(0, 191, 98, 0.14);
  border-radius: 8px;
  animation: bmAnswerIn 0.45s cubic-bezier(0.2, 0, 0.2, 1);
}
body.page-buyer-match .bm-analysis-row.is-empty {
  opacity: 0.5;
  background: rgba(0, 0, 0, 0.015);
}
body.page-buyer-match .bm-analysis-row-num {
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: var(--bm-green, #00BF62);
  letter-spacing: -0.02em;
  opacity: 0.55;
  text-align: center;
  font-feature-settings: "tnum";
}
body.page-buyer-match .bm-analysis-row-meta { min-width: 0; }
body.page-buyer-match .bm-analysis-row-title {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: var(--bm-ink, #1a1f1b);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: 2px;
}
body.page-buyer-match .bm-analysis-row-factor {
  font-family: 'Geist', sans-serif;
  font-size: 8.5px;
  font-weight: 500;
  color: rgba(13, 23, 18, 0.50);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.page-buyer-match .bm-analysis-row-factor strong {
  color: var(--bm-green, #00BF62);
  font-weight: 800;
}
body.page-buyer-match .bm-analysis-row-viz { padding: 0 4px; }
body.page-buyer-match .bm-analysis-row-bar {
  height: 5px;
  background: rgba(0, 191, 98, 0.12);
  border-radius: 999px;
  overflow: hidden;
}
body.page-buyer-match .bm-analysis-row-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--bm-green, #00BF62) 0%, #00A356 100%);
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
body.page-buyer-match .bm-analysis-row-stat {
  text-align: right;
  min-width: 0;
}
body.page-buyer-match .bm-analysis-row-profile {
  font-family: 'Geist', sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: rgba(13, 23, 18, 0.65);
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-buyer-match .bm-analysis-row-pct {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--bm-green, #00BF62);
  letter-spacing: -0.02em;
  line-height: 1;
  font-feature-settings: "tnum";
}
body.page-buyer-match .bm-analysis-row-empty {
  grid-column: 2 / -1;
  font-family: 'Geist', sans-serif;
  font-size: 9px;
  font-style: italic;
  color: rgba(13, 23, 18, 0.40);
}
body.page-buyer-match .bm-analysis-foot {
  font-family: 'Geist', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  color: rgba(13, 23, 18, 0.50);
  text-align: center;
  font-style: italic;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0, 191, 98, 0.20);
}
body.page-buyer-match .bm-analysis-foot strong { color: var(--bm-green, #00BF62); font-weight: 800; font-style: normal; }
body.page-buyer-match .bm-analysis-section-title {
  font-family: 'Geist', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.28em;
  color: var(--bm-green, #00BF62);
  text-transform: uppercase;
  margin: 10px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(0, 191, 98, 0.18);
}
body.page-buyer-match .bm-analysis-section-title:first-child { margin-top: 6px; }
body.page-buyer-match .bm-analysis-profile-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
body.page-buyer-match .bm-analysis-profile-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: center;
  padding: 6px 10px 6px 6px;
  background: rgba(0, 191, 98, 0.025);
  border: 1px solid rgba(0, 191, 98, 0.10);
  border-radius: 8px;
  animation: bmAnswerIn 0.45s cubic-bezier(0.2, 0, 0.2, 1);
}
body.page-buyer-match .bm-analysis-profile-row:first-child {
  background: linear-gradient(90deg, rgba(0, 191, 98, 0.08) 0%, rgba(0, 191, 98, 0.02) 100%);
  border-color: rgba(0, 191, 98, 0.28);
}
body.page-buyer-match .bm-analysis-profile-id {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
body.page-buyer-match .bm-analysis-profile-photo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--bm-green, #00BF62);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 6px -2px rgba(0, 191, 98, 0.25);
}
body.page-buyer-match .bm-analysis-profile-row:first-child .bm-analysis-profile-photo {
  width: 34px;
  height: 34px;
  border-width: 2px;
}
body.page-buyer-match .bm-analysis-profile-info { min-width: 0; }
body.page-buyer-match .bm-analysis-profile-name {
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: var(--bm-ink, #1a1f1b);
  letter-spacing: -0.01em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-buyer-match .bm-analysis-profile-pct {
  font-family: 'Geist', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  color: var(--bm-green, #00BF62);
  letter-spacing: -0.005em;
  margin-top: 1px;
}
body.page-buyer-match .bm-analysis-profile-factors {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.page-buyer-match .bm-analysis-factor-chip {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 8px;
}
body.page-buyer-match .bm-analysis-factor-label {
  font-family: 'Geist', sans-serif;
  font-size: 8.5px;
  font-weight: 600;
  color: rgba(13, 23, 18, 0.65);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-buyer-match .bm-analysis-factor-bar {
  height: 3px;
  border-radius: 999px;
  background: rgba(0, 191, 98, 0.12);
  overflow: hidden;
}
body.page-buyer-match .bm-analysis-factor-fill {
  height: 100%;
  background: var(--bm-green, #00BF62);
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
body.page-buyer-match .bm-toc-eyebrow {
  font-family: 'Geist', sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.30em;
  color: var(--bm-green, #00BF62);
  text-transform: uppercase;
  margin: 2px 0 4px;
}
body.page-buyer-match .bm-pag-dot.is-intro {
  background: transparent !important;
  border: 1.5px solid rgba(0, 191, 98, 0.45);
  width: 6px;
  height: 6px;
}
body.page-buyer-match .bm-pag-dot.is-intro.is-active {
  background: var(--bm-green, #00BF62) !important;
  border-color: var(--bm-green, #00BF62);
  width: 18px;
}
body.page-buyer-match .bm-insight-donut-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
body.page-buyer-match .bm-insight-donut {
  --pct: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: conic-gradient(from -90deg,
    var(--bm-green, #00BF62) 0deg calc(var(--pct) * 3.6deg),
    rgba(0, 191, 98, 0.18) calc(var(--pct) * 3.6deg) 360deg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 4px 12px -6px rgba(0, 191, 98, 0.4);
}
body.page-buyer-match .bm-insight-donut-inner {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #f6fdf9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
body.page-buyer-match .bm-insight-donut-pct {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--bm-green, #00BF62);
  letter-spacing: -0.03em;
  line-height: 1;
}
body.page-buyer-match .bm-insight-donut-pct span {
  font-size: 8px;
  font-weight: 700;
  opacity: 0.7;
  margin-left: 1px;
}
body.page-buyer-match .bm-insight-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
body.page-buyer-match .bm-insight-legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Geist', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(13, 23, 18, 0.72);
}
body.page-buyer-match .bm-insight-legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bm-green, #00BF62);
  flex-shrink: 0;
}
body.page-buyer-match .bm-insight-legend-row:nth-child(2) .bm-insight-legend-dot { opacity: 0.6; }
body.page-buyer-match .bm-insight-legend-row:nth-child(3) .bm-insight-legend-dot { opacity: 0.35; }
body.page-buyer-match .bm-insight-vbars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: end;
  height: 70px;
}
body.page-buyer-match .bm-insight-vbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: relative;
}
body.page-buyer-match .bm-insight-vbar-track {
  width: 100%;
  max-width: 22px;
  height: 44px;
  background: rgba(0, 191, 98, 0.12);
  border-radius: 4px 4px 0 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
body.page-buyer-match .bm-insight-vbar-fill {
  width: 100%;
  background: linear-gradient(180deg, var(--bm-green, #00BF62) 0%, #00A356 100%);
  border-radius: 4px 4px 0 0;
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
body.page-buyer-match .bm-insight-vbar-pct {
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: var(--bm-green, #00BF62);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}
body.page-buyer-match .bm-insight-vbar-label {
  font-family: 'Geist', sans-serif;
  font-size: 8px;
  font-weight: 700;
  color: rgba(13, 23, 18, 0.65);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.page-buyer-match .bm-page[data-page-id="1"] .bm-page-head {
  display: none;
}
body.page-buyer-match .bm-hero-v2 {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 14px;
  padding: 0;
}
body.page-buyer-match .bm-hero-v2-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 14px 18px;
  background: linear-gradient(135deg, rgba(0, 191, 98, 0.05) 0%, rgba(0, 191, 98, 0.02) 100%);
  border: 1px solid rgba(0, 191, 98, 0.18);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
body.page-buyer-match .bm-hero-v2-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--bm-green, #00BF62);
}
body.page-buyer-match .bm-hero-v2-eyebrow {
  font-family: 'Geist', sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(13, 23, 18, 0.55);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body.page-buyer-match .bm-hero-v2-eyebrow strong {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--bm-ink, #1a1f1b);
  text-transform: none;
  line-height: 1.1;
}
body.page-buyer-match .bm-hero-v2-title-block {
  margin: 56px 0 4px;
  text-align: left;
}
body.page-buyer-match .bm-hero-v2-big-title {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 42px;
  font-weight: 500;
  font-style: italic;
  color: var(--bm-green, #00BF62);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}
body.page-buyer-match .bm-hero-v2-big-tag {
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(13, 23, 18, 0.55);
  margin-top: 8px;
  font-weight: 500;
}
body.page-buyer-match .bm-hero-v2-pct {
  font-family: 'Geist', sans-serif;
  display: flex;
  align-items: baseline;
  gap: 3px;
  color: var(--bm-green, #00BF62);
  font-feature-settings: "tnum";
}
body.page-buyer-match .bm-hero-v2-pct span {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
body.page-buyer-match .bm-hero-v2-pct small {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.7;
  text-transform: uppercase;
}
body.page-buyer-match .bm-hero-v2-figure {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  align-items: center;
  padding: 6px 0 4px;
}
body.page-buyer-match .bm-hero-v2-photo {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bm-green-soft, #DCFCE7);
  border: 3px solid var(--bm-green, #00BF62);
  box-shadow:
    0 8px 24px -8px rgba(0, 191, 98, 0.35),
    inset 0 -2px 6px -2px rgba(0, 0, 0, 0.10);
}
body.page-buyer-match .bm-hero-v2-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.page-buyer-match .bm-hero-v2-photo-ring {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid rgba(0, 191, 98, 0.20);
  pointer-events: none;
}
body.page-buyer-match .bm-hero-v2-name-block {
  min-width: 0;
}
body.page-buyer-match .bm-hero-v2-name {
  font-family: 'Geist', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--bm-ink, #1a1f1b);
  margin-bottom: 5px;
}
body.page-buyer-match .bm-hero-v2-tagline {
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.4;
  color: rgba(13, 23, 18, 0.62);
}
body.page-buyer-match .bm-hero-v2-identity {
  position: relative;
  margin-top: 4px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(0, 191, 98, 0.04) 0%, rgba(0, 191, 98, 0.01) 100%);
  border: 1px solid rgba(0, 191, 98, 0.18);
  border-radius: 12px;
}
body.page-buyer-match .bm-hero-v2-identity.is-submit-highlight {
  animation: bmIdentityHighlight 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes bmIdentityHighlight {
  0%   {
    background: linear-gradient(135deg, rgba(0, 191, 98, 0.04) 0%, rgba(0, 191, 98, 0.01) 100%);
    border-color: rgba(0, 191, 98, 0.18);
    box-shadow: 0 0 0 0 rgba(0, 191, 98, 0);
  }
  40%  {
    background: linear-gradient(135deg, rgba(0, 191, 98, 0.18) 0%, rgba(0, 191, 98, 0.08) 100%);
    border-color: rgba(0, 191, 98, 0.55);
    box-shadow: 0 0 0 4px rgba(0, 191, 98, 0.18), 0 6px 18px rgba(0, 191, 98, 0.22);
  }
  100% {
    background: linear-gradient(135deg, rgba(0, 191, 98, 0.04) 0%, rgba(0, 191, 98, 0.01) 100%);
    border-color: rgba(0, 191, 98, 0.18);
    box-shadow: 0 0 0 0 rgba(0, 191, 98, 0);
  }
}
body.page-buyer-match .bm-hero-v2-stamps {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin-top: auto;
  margin-bottom: auto;
  padding: 18px 0;
  min-height: 100px;
}
body.page-buyer-match .bm-hero-v2-consent-stamp {
  position: relative;
  width: 84px;
  height: 84px;
  border: 2.5px solid rgba(0, 191, 98, 0.55);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  opacity: 0;
  pointer-events: none;
  font-family: 'Geist', sans-serif;
  color: rgba(0, 191, 98, 0.78);
  text-align: center;
  background:
    radial-gradient(ellipse at 30% 25%, transparent 0%, transparent 30%, rgba(0, 191, 98, 0.04) 70%),
    radial-gradient(ellipse at 70% 75%, rgba(0, 191, 98, 0.06) 0%, transparent 50%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 191, 98, 0.10),
    0 0 0 0.5px rgba(0, 191, 98, 0.18);
  mix-blend-mode: multiply;
  transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}
body.page-buyer-match .bm-hero-v2-consent-stamp::before, body.page-buyer-match .bm-hero-v2-consent-stamp::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(0, 191, 98, 0.18);
  pointer-events: none;
}
body.page-buyer-match .bm-hero-v2-consent-stamp::after {
  inset: 3px;
  border: 0.5px dashed rgba(0, 191, 98, 0.22);
}
body.page-buyer-match .bm-hero-v2-stamp-terms {
  transform: rotate(-10deg) scale(0.7);
}
body.page-buyer-match .bm-hero-v2-stamp-terms.is-active {
  opacity: 0.85;
  transform: rotate(-10deg) scale(1);
}
body.page-buyer-match .bm-hero-v2-stamp-intros {
  transform: rotate(-10deg) scale(0.7);
}
body.page-buyer-match .bm-hero-v2-stamp-intros.is-active {
  opacity: 0.85;
  transform: rotate(-10deg) scale(1);
}
body.page-buyer-match .bm-hero-v2-consent-stamp-check {
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 0;
}
body.page-buyer-match .bm-hero-v2-consent-stamp-label-top {
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 2px;
  opacity: 0.85;
}
body.page-buyer-match .bm-hero-v2-consent-stamp-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 1px;
}
body.page-buyer-match .bm-hero-v2-consent-stamp-rule {
  width: 50%;
  height: 1px;
  background: rgba(0, 191, 98, 0.40);
  margin: 3px 0 2px;
}
body.page-buyer-match .bm-hero-v2-consent-stamp-date {
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  opacity: 0.85;
}
body.page-buyer-match .bm-hero-v2-identity-label {
  font-family: 'Geist', sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bm-green, #00BF62);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(0, 191, 98, 0.20);
}
body.page-buyer-match .bm-hero-v2-identity-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
body.page-buyer-match .bm-hero-id-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 3px 0;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.06);
}
body.page-buyer-match .bm-hero-id-row:last-child { border-bottom: none; }
body.page-buyer-match .bm-hero-id-key {
  font-family: 'Geist', sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(13, 23, 18, 0.45);
}
body.page-buyer-match .bm-hero-id-val {
  font-family: 'Geist', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bm-ink, #1a1f1b);
  word-break: break-word;
  transition: color 0.3s ease;
}
body.page-buyer-match .bm-hero-id-val.is-filled {
  animation: bmHeroIdPulse 0.5s ease-out;
}
@keyframes bmHeroIdPulse {
  0%   { color: var(--bm-green, #00BF62); }
  100% { color: var(--bm-ink, #1a1f1b); }
}
body.page-buyer-match .bm-hero-id-placeholder {
  font-style: italic;
  font-weight: 500;
  color: rgba(13, 23, 18, 0.25);
  letter-spacing: 0;
}
body.page-buyer-match .bm-hero-id-flag {
  font-size: 13px;
  margin-right: 3px;
}
body.page-buyer-match .bm-hero-v2-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: rgba(13, 23, 18, 0.55);
  letter-spacing: -0.005em;
}
body.page-buyer-match .bm-hero-v2-stats strong {
  color: var(--bm-green, #00BF62);
  font-weight: 800;
  font-feature-settings: "tnum";
}
body.page-buyer-match .bm-hero-v2-stat-dot {
  color: rgba(0, 191, 98, 0.40);
  font-weight: 800;
}
body.page-buyer-match .bm-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 8px;
  padding: 4px 0 0;
}
body.page-buyer-match .bm-hero-tag {
  font-family: 'Geist', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.30em;
  color: var(--bm-green, #00BF62);
  text-transform: uppercase;
}
body.page-buyer-match .bm-hero-photo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 3px solid var(--bm-green, #00BF62);
  overflow: hidden;
  box-shadow:
    0 12px 28px -10px rgba(0, 191, 98, 0.40),
    inset 0 -10px 24px -12px rgba(0, 0, 0, 0.12);
  background: #ffffff;
  position: relative;
}
body.page-buyer-match .bm-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.page-buyer-match .bm-hero-photo::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 191, 98, 0.30);
  pointer-events: none;
}
body.page-buyer-match .bm-hero-name {
  font-family: 'Geist', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--bm-ink, #1a1f1b);
  margin-top: 4px;
  text-align: center;
}
body.page-buyer-match .bm-hero-pct {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--bm-green, #00BF62);
}
body.page-buyer-match .bm-hero-pct-num {
  font-family: 'Geist', sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
body.page-buyer-match .bm-hero-pct-unit {
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}
body.page-buyer-match .bm-hero-summary {
  width: 100%;
  margin-top: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(0, 191, 98, 0.08) 0%, rgba(0, 191, 98, 0.02) 100%);
  border: 1px solid rgba(0, 191, 98, 0.22);
  border-radius: 10px;
}
body.page-buyer-match .bm-hero-summary-label {
  font-family: 'Geist', sans-serif;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.26em;
  color: var(--bm-green, #00BF62);
  text-transform: uppercase;
  margin-bottom: 6px;
}
body.page-buyer-match .bm-hero-summary-copy {
  font-family: 'Geist', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(13, 23, 18, 0.72);
  line-height: 1.45;
  margin-bottom: 10px;
}
body.page-buyer-match .bm-hero-summary-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px dashed rgba(0, 191, 98, 0.25);
}
body.page-buyer-match .bm-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}
body.page-buyer-match .bm-hero-stat-num {
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--bm-green, #00BF62);
  letter-spacing: -0.03em;
  line-height: 1;
}
body.page-buyer-match .bm-hero-stat-label {
  font-family: 'Geist', sans-serif;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: rgba(13, 23, 18, 0.55);
  text-transform: uppercase;
}
body.page-buyer-match .bm-hero-stat-divider {
  width: 1px;
  height: 24px;
  background: rgba(0, 191, 98, 0.18);
}
body.page-buyer-match .bm-hero-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 12px;
  text-align: center;
  padding: 20px;
}
body.page-buyer-match .bm-hero-empty-icon {
  font-size: 38px;
  color: rgba(0, 191, 98, 0.30);
  line-height: 1;
}
body.page-buyer-match .bm-hero-empty-title {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: rgba(13, 23, 18, 0.55);
}
body.page-buyer-match .bm-hero-empty-copy {
  font-family: 'Geist', sans-serif;
  font-size: 10.5px;
  color: rgba(13, 23, 18, 0.45);
  max-width: 240px;
  line-height: 1.5;
}
body.page-buyer-match .bm-toc-intro {
  font-family: 'Geist', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(13, 23, 18, 0.65);
  margin: 2px 0 10px;
  border-left: 3px solid var(--bm-green, #00BF62);
  padding-left: 10px;
}
body.page-buyer-match .bm-toc {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.page-buyer-match .bm-toc-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 4px;
  border-bottom: 1px solid rgba(0, 191, 98, 0.08);
  transition: background 0.18s ease;
}
body.page-buyer-match .bm-toc-row:hover {
  background: rgba(0, 191, 98, 0.04);
}
body.page-buyer-match .bm-toc-row:last-child { border-bottom: none; }
body.page-buyer-match .bm-toc-num {
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: var(--bm-green, #00BF62);
  letter-spacing: 0.05em;
  opacity: 0.65;
  font-feature-settings: "tnum";
}
body.page-buyer-match .bm-toc-meta { min-width: 0; }
body.page-buyer-match .bm-toc-title {
  font-family: 'Geist', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bm-ink, #1a1f1b);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
body.page-buyer-match .bm-toc-sub {
  font-family: 'Geist', sans-serif;
  font-size: 9px;
  font-weight: 500;
  color: rgba(13, 23, 18, 0.45);
  font-style: italic;
  margin-top: 1px;
}
body.page-buyer-match .bm-toc-dots {
  flex: 1;
  margin: 0 8px;
  min-width: 40px;
  
}
body.page-buyer-match .bm-toc-page {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--bm-green, #00BF62);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
  min-width: 16px;
  text-align: right;
}
body.page-buyer-match .bm-fb-prepared {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px 8px;
  margin: -4px 0 8px;
  border-bottom: 1px dashed rgba(0, 191, 98, 0.20);
}
body.page-buyer-match .bm-fb-prepared-label {
  font-family: 'Geist', sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--bm-green, #00BF62);
  text-transform: uppercase;
  flex-shrink: 0;
}
body.page-buyer-match .bm-fb-prepared-name {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bm-ink, #1a1f1b);
  transition: color 0.3s ease;
}
body.page-buyer-match .bm-fb-prepared-placeholder {
  font-style: italic;
  font-weight: 500;
  color: rgba(13, 23, 18, 0.30);
}
body.page-buyer-match .bm-fb-prepared-name.is-just-typed {
  animation: bmPreparedPulse 0.6s ease-out;
}
@keyframes bmPreparedPulse {
  0%   { color: var(--bm-green, #00BF62); }
  100% { color: var(--bm-ink, #1a1f1b); }
}
body.page-buyer-match .bm-fb-banner {
  position: relative;
  height: 84px;
  margin: -8px -8px 38px;
  border-radius: 8px 8px 0 0;
  overflow: visible;
}
body.page-buyer-match .bm-fb-cover {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.18) 0%, transparent 60%),
    linear-gradient(135deg, #00BF62 0%, #00925A 55%, #006B43 100%);
  border-radius: 8px 8px 0 0;
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 2px 8px rgba(0, 191, 98, 0.20);
  overflow: hidden;
}
body.page-buyer-match .bm-fb-cover::before, body.page-buyer-match .bm-fb-cover::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}
body.page-buyer-match .bm-fb-cover::before {
  width: 120px;
  height: 120px;
  top: -40px;
  right: -30px;
}
body.page-buyer-match .bm-fb-cover::after {
  width: 60px;
  height: 60px;
  bottom: -20px;
  left: 30%;
  background: rgba(255, 255, 255, 0.12);
}
body.page-buyer-match .bm-fb-summary-label {
  position: absolute;
  top: 14px;
  left: 16px;
  font-family: 'Geist', sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  z-index: 3;
}
body.page-buyer-match .bm-fb-avatar {
  position: absolute;
  bottom: -32px;
  left: 14px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    0 6px 16px -4px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(0, 191, 98, 0.15);
  z-index: 4;
}
body.page-buyer-match .bm-fb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.page-buyer-match .bm-fb-name-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 4px 10px 84px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(0, 191, 98, 0.10);
}
body.page-buyer-match .bm-fb-name {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--bm-ink, #1a1f1b);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
body.page-buyer-match .bm-fb-pct {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--bm-green, #00BF62);
  letter-spacing: -0.02em;
}
body.page-buyer-match .bm-summary-section {
  margin-top: 8px;
}
body.page-buyer-match .bm-summary-section-title {
  font-family: 'Geist', sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.24em;
  color: var(--bm-green, #00BF62);
  text-transform: uppercase;
  margin-bottom: 6px;
}
body.page-buyer-match .bm-summary-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body.page-buyer-match .bm-summary-row {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(0, 191, 98, 0.05) 0%, rgba(0, 191, 98, 0.015) 100%);
  border-left: 2px solid var(--bm-green, #00BF62);
}
body.page-buyer-match .bm-summary-row-tag {
  font-family: 'Geist', sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: rgba(0, 191, 98, 0.85);
}
body.page-buyer-match .bm-summary-row-value {
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--bm-ink, #1a1f1b);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-buyer-match .bm-summary-row-pct {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: var(--bm-green, #00BF62);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}
body.page-buyer-match .bm-summary-ranking {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.page-buyer-match .bm-summary-rank-row {
  display: grid;
  grid-template-columns: 14px 90px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
body.page-buyer-match .bm-summary-rank-row:first-child .bm-summary-rank-name { font-weight: 800; }
body.page-buyer-match .bm-summary-rank-row:first-child .bm-summary-rank-num { opacity: 1; }
body.page-buyer-match .bm-summary-rank-num {
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: var(--bm-green, #00BF62);
  opacity: 0.45;
  text-align: center;
}
body.page-buyer-match .bm-summary-rank-name {
  font-family: 'Geist', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--bm-ink, #1a1f1b);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-buyer-match .bm-summary-rank-bar {
  height: 3px;
  border-radius: 999px;
  background: rgba(0, 191, 98, 0.12);
  overflow: hidden;
}
body.page-buyer-match .bm-summary-rank-fill {
  height: 100%;
  background: var(--bm-green, #00BF62);
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
body.page-buyer-match .bm-summary-rank-pct {
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: var(--bm-green, #00BF62);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
  min-width: 26px;
  text-align: right;
}
body.page-buyer-match .bm-page-foot {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  margin-top: auto;
  position: relative;
  font-family: 'Geist', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(13, 23, 18, 0.35);
}
body.page-buyer-match .bm-page-foot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(0, 191, 98, 0.30) 0%,
    rgba(0, 191, 98, 0.12) 50%,
    rgba(0, 191, 98, 0.30) 100%);
}
body.page-buyer-match .bm-page-foot span:first-child {
  color: rgba(0, 191, 98, 0.75);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.page-buyer-match .bm-page-foot span:last-child {
  font-feature-settings: "tnum";
  color: rgba(13, 23, 18, 0.45);
}
@keyframes bmAnswerIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
body.page-buyer-match .bm-page-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 0;
  margin-top: 6px;
  margin-bottom: 4px;
}
body.page-buyer-match .bm-page-strip-label {
  font-family: 'Geist', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--bm-green, #00BF62);
  text-transform: uppercase;
  flex-shrink: 0;
}
body.page-buyer-match .bm-page-strip-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 191, 98, 0.35) 0%, rgba(0, 191, 98, 0.06) 100%);
}
body.page-buyer-match .bm-page-strip-meta {
  font-family: 'Geist', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(13, 23, 18, 0.42);
  text-transform: uppercase;
  flex-shrink: 0;
}
body.page-buyer-match .bm-chapter-row {
  position: relative;
  
  isolation: isolate;
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 5px;
  padding: 12px 0 12px 10px;
  border-bottom: none;
  
  min-height: 72px;
  flex: 1 1 0;
  align-content: center;
  
  transition:
    flex-basis 0.55s cubic-bezier(0.32, 0.72, 0.24, 1),
    padding 0.55s cubic-bezier(0.32, 0.72, 0.24, 1),
    background 0.45s cubic-bezier(0.32, 0.72, 0.24, 1),
    box-shadow 0.45s cubic-bezier(0.32, 0.72, 0.24, 1);
}
body.page-buyer-match .bm-chapter-row:not(:last-child)::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10px;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(0, 191, 98, 0.05) 0%,
    rgba(0, 191, 98, 0.16) 30%,
    rgba(0, 191, 98, 0.10) 100%);
  pointer-events: none;
}
body.page-buyer-match .bm-fly-clone {
  display: block !important;
  border: 2px solid var(--bm-green, #00BF62) !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf5 60%, #dcfce7 100%) !important;
  padding: 15px 15px 14px !important;
  box-shadow:
    0 28px 72px -16px rgba(0, 191, 98, 0.55),
    0 14px 32px -8px rgba(0, 191, 98, 0.40),
    0 6px 16px rgba(0, 0, 0, 0.12),
    inset 0 0 32px rgba(220, 252, 231, 0.50) !important;
  filter: drop-shadow(0 20px 48px rgba(0, 191, 98, 0.45));
  overflow: visible !important;
  text-align: left !important;
}
body.page-buyer-match .bm-fly-clone .bm-option-icon, body.page-buyer-match .bm-fly-clone .bm-option-title, body.page-buyer-match .bm-fly-clone .bm-option-copy {
  opacity: 1 !important;
  visibility: visible !important;
}
body.page-buyer-match .bm-fly-clone::after {
  display: none !important;
}
@keyframes bmSplashRippleOut {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  20% {
    opacity: 1;
    transform: scale(0.6);
  }
  55% {
    opacity: 0.85;
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
    transform: scale(2.6);
  }
}
@keyframes bmSplashRingOut {
  0% {
    opacity: 0;
    transform: scale(0.4);
    border-width: 3px;
  }
  15% {
    opacity: 0.95;
    transform: scale(0.7);
    border-width: 2.5px;
  }
  60% {
    opacity: 0.5;
    transform: scale(1.7);
    border-width: 1.5px;
  }
  100% {
    opacity: 0;
    transform: scale(2.8);
    border-width: 0.5px;
  }
}
body.page-buyer-match .bm-chapter-row.is-fresh {
  animation: bmRowSplashDrop 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.50s both;
}
body.page-buyer-match .bm-chapter-row.is-fresh-now {
  animation: bmRowSplashDrop 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
body.page-buyer-match .bm-chapter-row.is-fresh-now::before {
  content: '';
  position: absolute;
  inset: 0 -8px 0 0;
  background: radial-gradient(ellipse 60% 100% at 10% 50%,
    rgba(0, 191, 98, 0.32) 0%,
    rgba(0, 191, 98, 0.16) 25%,
    rgba(0, 191, 98, 0.06) 55%,
    transparent 100%);
  border-radius: 10px;
  z-index: -1;
  animation: bmRowSplashRipple 2.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
  transform-origin: 10% 50%;
}
body.page-buyer-match .bm-chapter-row.is-fresh-now .bm-chapter-icon-tile {
  animation: bmIconSplashLand 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.10s both;
  transform-origin: center;
}
body.page-buyer-match .bm-chapter-row.is-fresh-now .bm-chapter-row-question {
  animation: bmTextReveal 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
}
body.page-buyer-match .bm-chapter-row.is-fresh-now .bm-chapter-row-value {
  animation: bmTextReveal 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}
body.page-buyer-match .bm-chapter-row.is-fresh-now .bm-chapter-row-copy {
  animation: bmTextReveal 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
}
body.page-buyer-match .bm-chapter-row.is-fresh-now .bm-chapter-row-num {
  animation: bmNumReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both;
}
body.page-buyer-match .bm-chapter-row.is-fresh::before {
  content: '';
  position: absolute;
  inset: 0 -8px 0 0;
  background: radial-gradient(ellipse 60% 100% at 10% 50%,
    rgba(0, 191, 98, 0.32) 0%,
    rgba(0, 191, 98, 0.16) 25%,
    rgba(0, 191, 98, 0.06) 55%,
    transparent 100%);
  border-radius: 10px;
  z-index: -1;
  animation: bmRowSplashRipple 2.5s cubic-bezier(0.16, 1, 0.3, 1) 1.50s forwards;
  pointer-events: none;
  transform-origin: 10% 50%;
}
body.page-buyer-match .bm-chapter-row.is-fresh .bm-chapter-icon-tile {
  animation: bmIconSplashLand 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.60s both;
  transform-origin: center;
}
body.page-buyer-match .bm-chapter-row.is-fresh .bm-chapter-row-question {
  animation: bmTextReveal 0.45s cubic-bezier(0.16, 1, 0.3, 1) 1.66s both;
}
body.page-buyer-match .bm-chapter-row.is-fresh .bm-chapter-row-value {
  animation: bmTextReveal 0.45s cubic-bezier(0.16, 1, 0.3, 1) 1.72s both;
}
body.page-buyer-match .bm-chapter-row.is-fresh .bm-chapter-row-copy {
  animation: bmTextReveal 0.45s cubic-bezier(0.16, 1, 0.3, 1) 1.78s both;
}
body.page-buyer-match .bm-chapter-row.is-fresh .bm-chapter-row-num {
  animation: bmNumReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.82s both;
}
@keyframes bmRowSplashDrop {
  0% {
    opacity: 0;
    transform: translateX(-60px) scale(0.96);
  }
  60% {
    opacity: 1;
    transform: translateX(0) scale(1.015);
  }
  78% {
    transform: translateX(0) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@keyframes bmIconSplashLand {
  0% {
    opacity: 0;
    transform: scale(0.80) translateY(-8px);
  }
  55% {
    opacity: 1;
    transform: scale(1.06) translateY(0);
  }
  80% {
    transform: scale(0.98) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes bmTextReveal {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes bmNumReveal {
  0%   { opacity: 0; transform: translateX(-6px); }
  100% { opacity: 0.45; transform: translateX(0); }
}
@keyframes bmRowSplashRipple {
  0% {
    opacity: 0;
    transform: scaleX(0.20);
  }
  18% {
    opacity: 1;
    transform: scaleX(0.55);
  }
  38% {
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(1.05);
  }
}
body.page-buyer-match .bm-chapter-row.is-revised::before {
  content: '';
  position: absolute;
  inset: 0 -8px 0 0;
  background: linear-gradient(90deg, rgba(0, 191, 98, 0.12) 0%, transparent 100%);
  border-radius: 8px;
  z-index: -1;
  animation: bmRowRevisedFade 1.5s ease forwards;
  pointer-events: none;
}
@keyframes bmRowRevisedFade {
  0%   { opacity: 0.9; }
  100% { opacity: 0; }
}
body.page-buyer-match .bm-row-ghost {
  pointer-events: none;
  transform-origin: center center;
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
}
body.page-buyer-match .bm-chapter-row.is-focused::after {
  content: '';
  position: absolute;
  inset: 0 -8px 0 0;
  background: linear-gradient(90deg,
    rgba(0, 191, 98, 0.10) 0%,
    rgba(0, 191, 98, 0.05) 45%,
    transparent 100%);
  border-radius: 8px;
  border-left: 3px solid var(--bm-green, #00BF62);
  z-index: -1;
  pointer-events: none;
  
}
body.page-buyer-match .bm-chapter-row:last-child { border-bottom: none; }
body.page-buyer-match .bm-chapter-row-num {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 17px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--bm-green, #00BF62);
  opacity: 0.45;
  line-height: 1;
  padding-top: 3px;
  font-feature-settings: "tnum";
}
body.page-buyer-match .bm-chapter-row-question {
  grid-column: 2;
  grid-row: 1;
  font-family: 'Geist', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(13, 23, 18, 0.65);
  line-height: 1.3;
}
body.page-buyer-match .bm-chapter-row-content {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
}
body.page-buyer-match .bm-chapter-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.page-buyer-match .bm-chapter-icon-tile {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.9) 0%, rgba(220, 252, 231, 0.6) 60%, rgba(220, 252, 231, 0.30) 100%);
  color: var(--bm-green, #00BF62);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 0 0 1px rgba(0, 191, 98, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 8px -2px rgba(0, 191, 98, 0.10),
    0 3px 10px -3px rgba(0, 191, 98, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.03);
}
body.page-buyer-match .bm-chapter-icon-svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.page-buyer-match .bm-chapter-row-desc {
  min-width: 0;
}
body.page-buyer-match .bm-chapter-row-value {
  font-family: 'Geist', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--bm-ink, #1a1f1b);
  line-height: 1.2;
}
body.page-buyer-match .bm-chapter-row-copy {
  font-family: 'Geist', sans-serif;
  font-size: 9.5px;
  font-weight: 400;
  font-style: italic;
  color: rgba(13, 23, 18, 0.55);
  margin-top: 2px;
  line-height: 1.35;
}
body.page-buyer-match .bm-chapter-row-empty {
  font-style: italic;
  font-size: 11px;
  color: rgba(13, 23, 18, 0.32);
}
body.page-buyer-match .bm-chapter-row.is-pending {
  opacity: 0.5;
}
body.page-buyer-match .bm-chapter-row.is-pending .bm-chapter-icon-tile {
  background: rgba(13, 23, 18, 0.03);
  color: rgba(13, 23, 18, 0.25);
  box-shadow: inset 0 0 0 1px rgba(13, 23, 18, 0.08);
}
body.page-buyer-match .bm-chapter-row.is-multi-content, body.page-buyer-match .bm-chapter-row-content.is-multi-content {
  display: block !important;
}
body.page-buyer-match .bm-chapter-multi {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}
body.page-buyer-match .bm-chapter-multi-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px 6px;
  background: linear-gradient(180deg, rgba(0, 191, 98, 0.07) 0%, rgba(0, 191, 98, 0.02) 100%);
  border: 1px solid rgba(0, 191, 98, 0.22);
  border-radius: 8px;
  min-width: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
body.page-buyer-match .bm-chapter-multi-tile:hover {
  transform: translateY(-1px);
  border-color: var(--bm-green, #00BF62);
  box-shadow: 0 4px 10px -4px rgba(0, 191, 98, 0.25);
}
body.page-buyer-match .bm-chapter-multi-icon {
  width: 22px;
  height: 22px;
  color: var(--bm-green, #00BF62);
  display: inline-flex;
  flex-shrink: 0;
}
body.page-buyer-match .bm-chapter-multi-icon .bm-chapter-icon-svg {
  width: 22px;
  height: 22px;
}
body.page-buyer-match .bm-chapter-multi-label {
  font-family: 'Geist', sans-serif;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bm-ink, #1a1f1b);
  text-align: center;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
body.page-buyer-match .bm-page-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-style: italic;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(13, 23, 18, 0.32);
  letter-spacing: 0.01em;
  padding: 24px;
  text-align: center;
}
body.page-buyer-match .bm-cover-v3 {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 4px 0;
  font-family: 'Geist', sans-serif;
}
body.page-buyer-match .bm-cover-v3-eyebrow {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(13, 23, 18, 0.5);
  font-weight: 700;
  margin: 0 0 16px;
}
body.page-buyer-match .bm-cover-v3-title-block {
  margin: 8px 0 24px;
}
body.page-buyer-match .bm-cover-v3-title {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 44px;
  font-weight: 500;
  font-style: italic;
  color: var(--bm-green, #00BF62);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}
body.page-buyer-match .bm-cover-v3-tag {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(13, 23, 18, 0.55);
  margin-top: 12px;
  font-weight: 500;
}
body.page-buyer-match .bm-cover-v3-identity {
  margin-top: auto;
  background: rgba(0, 191, 98, 0.05);
  border: 1px solid rgba(0, 191, 98, 0.18);
  border-radius: 10px;
  padding: 14px 16px;
}
body.page-buyer-match .bm-cover-v3-identity-eyebrow {
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: var(--bm-green, #00BF62);
  font-weight: 700;
  margin-bottom: 8px;
}
body.page-buyer-match .bm-cover-v3-identity-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.page-buyer-match .bm-cover-id-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  padding: 4px 0;
  border-bottom: 1px dotted rgba(13, 23, 18, 0.1);
}
body.page-buyer-match .bm-cover-id-row:last-child { border-bottom: none; }
body.page-buyer-match .bm-cover-id-key {
  font-size: 8.5px;
  letter-spacing: 0.12em;
  color: rgba(13, 23, 18, 0.45);
  font-weight: 600;
}
body.page-buyer-match .bm-cover-id-val {
  font-size: 11px;
  font-weight: 600;
  color: var(--bm-ink, #0D1712);
  text-align: right;
}
body.page-buyer-match .bm-cover-id-val.is-filled { color: var(--bm-green, #00BF62); }
body.page-buyer-match .bm-cover-id-placeholder { color: rgba(13, 23, 18, 0.3); font-weight: 400; }
body.page-buyer-match .bm-cover-v3-footer {
  margin-top: 14px;
  text-align: center;
}
body.page-buyer-match .bm-cover-v3-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 191, 98, 0.3), transparent);
  margin-bottom: 8px;
}
body.page-buyer-match .bm-cover-v3-date {
  font-size: 8.5px;
  letter-spacing: 0.15em;
  color: rgba(13, 23, 18, 0.4);
  font-weight: 500;
  text-transform: uppercase;
}
body.page-buyer-match .bm-toc-v3 {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: 'Geist', sans-serif;
}
body.page-buyer-match .bm-toc-v3-eyebrow {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--bm-green, #00BF62);
  font-weight: 700;
  margin-bottom: 6px;
}
body.page-buyer-match .bm-toc-v3-title {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
  color: var(--bm-ink, #0D1712);
  margin-bottom: 18px;
  line-height: 1;
}
body.page-buyer-match .bm-toc-v3-parts {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.page-buyer-match .bm-toc-v3-part {
  border-left: 2px solid rgba(0, 191, 98, 0.25);
  padding-left: 12px;
}
body.page-buyer-match .bm-toc-v3-part-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
body.page-buyer-match .bm-toc-v3-part-label {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--bm-green, #00BF62);
  font-weight: 700;
}
body.page-buyer-match .bm-toc-v3-part-title {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 14px;
  font-style: italic;
  color: var(--bm-ink, #0D1712);
  font-weight: 500;
}
body.page-buyer-match .bm-toc-v3-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.page-buyer-match .bm-toc-v3-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 10.5px;
}
body.page-buyer-match .bm-toc-v3-num {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  color: rgba(0, 191, 98, 0.6);
  font-weight: 600;
  letter-spacing: 0.06em;
  min-width: 18px;
}
body.page-buyer-match .bm-toc-v3-title {
  font-weight: 600;
  color: var(--bm-ink, #0D1712);
}
body.page-buyer-match .bm-toc-v3-row .bm-toc-v3-title {
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  font-style: normal;
  margin-bottom: 0;
}
body.page-buyer-match .bm-toc-v3-dots {
  flex: 1;
  border-bottom: 1px dotted rgba(13, 23, 18, 0.18);
  margin: 0 4px;
  align-self: center;
  height: 1px;
  margin-top: 4px;
}
body.page-buyer-match .bm-toc-v3-page {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  color: var(--bm-green, #00BF62);
  font-weight: 600;
  min-width: 16px;
  text-align: right;
}
body.page-buyer-match .bm-profileV3 {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: 'Geist', sans-serif;
  gap: 14px;
}
body.page-buyer-match .bm-profileV3-eyebrow {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--bm-green, #00BF62);
  font-weight: 700;
}
body.page-buyer-match .bm-profileV3-hero {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 14px;
  background: linear-gradient(135deg, rgba(0, 191, 98, 0.08), rgba(0, 191, 98, 0.02));
  border: 1px solid rgba(0, 191, 98, 0.2);
  border-radius: 12px;
}
body.page-buyer-match .bm-profileV3-hero-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--bm-green, #00BF62);
  background: white;
  flex-shrink: 0;
}
body.page-buyer-match .bm-profileV3-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.page-buyer-match .bm-profileV3-hero-meta { min-width: 0; }
body.page-buyer-match .bm-profileV3-hero-name {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
  color: var(--bm-ink, #0D1712);
  line-height: 1.1;
  margin-bottom: 4px;
}
body.page-buyer-match .bm-profileV3-hero-copy {
  font-size: 10px;
  color: rgba(13, 23, 18, 0.65);
  line-height: 1.35;
}
body.page-buyer-match .bm-profileV3-hero-pct {
  font-family: 'Geist', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--bm-green, #00BF62);
  line-height: 1;
  letter-spacing: -0.02em;
}
body.page-buyer-match .bm-profileV3-hero-pct span {
  font-size: 14px;
  font-weight: 600;
  vertical-align: super;
  margin-left: -2px;
}
body.page-buyer-match .bm-profileV3-mix-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(13, 23, 18, 0.5);
  font-weight: 600;
  margin-bottom: 6px;
}
body.page-buyer-match .bm-profileV3-mix-bar {
  display: flex;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(13, 23, 18, 0.04);
  margin-bottom: 10px;
}
body.page-buyer-match .bm-profileV3-mix-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: white;
  position: relative;
  transition: flex 0.4s ease;
  min-width: 4px;
}
body.page-buyer-match .bm-profileV3-mix-seg.is-rank-1 { background: #00BF62; }
body.page-buyer-match .bm-profileV3-mix-seg.is-rank-2 { background: #2D7A51; }
body.page-buyer-match .bm-profileV3-mix-seg.is-rank-3 { background: #5BA579; }
body.page-buyer-match .bm-profileV3-mix-seg.is-rank-4 { background: #8FC2A6; }
body.page-buyer-match .bm-profileV3-mix-seg.is-rank-5 { background: #B5D9C4; }
body.page-buyer-match .bm-profileV3-mix-seg.is-rank-6 { background: #D7EBE0; color: rgba(13,23,18,0.5); }
body.page-buyer-match .bm-profileV3-mix-pct {
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}
body.page-buyer-match .bm-profileV3-mix-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}
body.page-buyer-match .bm-profileV3-mix-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
}
body.page-buyer-match .bm-profileV3-mix-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
body.page-buyer-match .bm-profileV3-mix-dot.is-rank-1 { background: #00BF62; }
body.page-buyer-match .bm-profileV3-mix-dot.is-rank-2 { background: #2D7A51; }
body.page-buyer-match .bm-profileV3-mix-dot.is-rank-3 { background: #5BA579; }
body.page-buyer-match .bm-profileV3-mix-dot.is-rank-4 { background: #8FC2A6; }
body.page-buyer-match .bm-profileV3-mix-dot.is-rank-5 { background: #B5D9C4; }
body.page-buyer-match .bm-profileV3-mix-dot.is-rank-6 { background: #D7EBE0; }
body.page-buyer-match .bm-profileV3-mix-legend-name {
  color: rgba(13, 23, 18, 0.75);
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.page-buyer-match .bm-profileV3-mix-legend-pct {
  font-family: 'Geist Mono', monospace;
  color: rgba(13, 23, 18, 0.6);
  font-weight: 600;
  font-size: 9px;
}
body.page-buyer-match .bm-profileV3-why {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed rgba(0, 191, 98, 0.3);
}
body.page-buyer-match .bm-profileV3-why-label {
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: var(--bm-green, #00BF62);
  font-weight: 700;
  margin-bottom: 6px;
}
body.page-buyer-match .bm-profileV3-why-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.page-buyer-match .bm-profileV3-why-item {
  display: flex;
  gap: 6px;
  font-size: 9.5px;
  color: rgba(13, 23, 18, 0.75);
  line-height: 1.35;
}
body.page-buyer-match .bm-profileV3-why-check {
  color: var(--bm-green, #00BF62);
  font-weight: 700;
  flex-shrink: 0;
}
body.page-buyer-match .bm-analysisV3 {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: 'Geist', sans-serif;
}
body.page-buyer-match .bm-analysisV3-eyebrow {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--bm-green, #00BF62);
  font-weight: 700;
  margin-bottom: 4px;
}
body.page-buyer-match .bm-analysisV3-title {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  color: var(--bm-ink, #0D1712);
  line-height: 1.05;
  margin-bottom: 8px;
}
body.page-buyer-match .bm-analysisV3-intro {
  font-size: 10px;
  color: rgba(13, 23, 18, 0.6);
  line-height: 1.4;
  margin-bottom: 16px;
}
body.page-buyer-match .bm-analysisV3-bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  height: 170px;
  margin-bottom: 16px;
}
body.page-buyer-match .bm-analysisV3-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.page-buyer-match .bm-analysisV3-bar-track {
  width: 100%;
  flex: 1;
  background: rgba(13, 23, 18, 0.03);
  border-radius: 4px 4px 0 0;
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
}
body.page-buyer-match .bm-analysisV3-bar-fill {
  width: 100%;
  background: linear-gradient(180deg, #00BF62 0%, #2D7A51 100%);
  border-radius: 4px 4px 0 0;
  position: relative;
  min-height: 4px;
  transition: height 0.6s ease;
  display: flex;
  justify-content: center;
  padding-top: 4px;
}
body.page-buyer-match .bm-analysisV3-bar-pct {
  font-family: 'Geist', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  color: white;
}
body.page-buyer-match .bm-analysisV3-bar-label {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--bm-ink, #0D1712);
  margin-top: 6px;
  text-align: center;
}
body.page-buyer-match .bm-analysisV3-bar-sub {
  font-size: 8px;
  color: rgba(13, 23, 18, 0.4);
  margin-top: 2px;
}
body.page-buyer-match .bm-analysisV3-insight {
  margin-top: auto;
  padding: 10px 12px;
  background: rgba(0, 191, 98, 0.06);
  border-left: 3px solid var(--bm-green, #00BF62);
  border-radius: 0 6px 6px 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
body.page-buyer-match .bm-analysisV3-insight-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bm-green, #00BF62);
  color: white;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Tan Pearl', 'Geist', serif;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
body.page-buyer-match .bm-analysisV3-insight-text {
  font-size: 10px;
  color: var(--bm-ink, #0D1712);
  line-height: 1.45;
}
body.page-buyer-match .bm-analysisV3-insight-text strong {
  color: var(--bm-green, #00BF62);
  font-weight: 700;
}
body.page-buyer-match .bm-meansV3 {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: 'Geist', sans-serif;
}
body.page-buyer-match .bm-meansV3-eyebrow {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--bm-green, #00BF62);
  font-weight: 700;
  margin-bottom: 4px;
}
body.page-buyer-match .bm-meansV3-title {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  color: var(--bm-ink, #0D1712);
  line-height: 1.05;
  margin-bottom: 8px;
}
body.page-buyer-match .bm-meansV3-intro {
  font-size: 10px;
  color: rgba(13, 23, 18, 0.6);
  line-height: 1.4;
  margin-bottom: 14px;
}
body.page-buyer-match .bm-meansV3-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.page-buyer-match .bm-meansV3-card {
  background: white;
  border: 1px solid rgba(0, 191, 98, 0.18);
  border-radius: 10px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 6px;
}
body.page-buyer-match .bm-meansV3-card-num {
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bm-green, #00BF62);
  color: white;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Tan Pearl', 'Geist', serif;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-buyer-match .bm-meansV3-card-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--bm-ink, #0D1712);
  align-self: center;
}
body.page-buyer-match .bm-meansV3-card-tags {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
body.page-buyer-match .bm-meansV3-tag {
  font-size: 9px;
  padding: 3px 8px;
  background: rgba(0, 191, 98, 0.1);
  color: var(--bm-green, #00BF62);
  border-radius: 4px;
  font-weight: 600;
}
body.page-buyer-match .bm-meansV3-cta {
  margin-top: auto;
  text-align: center;
  padding-top: 14px;
}
body.page-buyer-match .bm-meansV3-cta-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 191, 98, 0.3), transparent);
  margin-bottom: 8px;
}
body.page-buyer-match .bm-meansV3-cta-text {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 11px;
  font-style: italic;
  color: rgba(13, 23, 18, 0.7);
  line-height: 1.4;
  padding: 0 16px;
}
body.page-buyer-match .bm-conclusionV3 {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: 'Geist', sans-serif;
}
body.page-buyer-match .bm-conclusionV3-title {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  color: var(--bm-ink, #0D1712);
  line-height: 1.05;
  margin-top: 0;
  margin-bottom: 2px;
  flex-shrink: 0;
}
body.page-buyer-match .bm-conclusionV3-eyebrow {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--bm-green, #00BF62);
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0;
  flex-shrink: 0;
}
body.page-buyer-match .bm-conclusionV3-blocks {
  display: flex;
  flex-direction: column;
  gap: 14px;
  
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 18px;
}
body.page-buyer-match .bm-conclusionV3-block {
  padding-left: 12px;
  border-left: 2px solid rgba(0, 191, 98, 0.25);
  
  flex: 1 1 auto;
}
body.page-buyer-match .bm-conclusionV3-block-head {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 500;
  color: var(--bm-green, #00BF62);
  margin-bottom: 4px;
}
body.page-buyer-match .bm-conclusionV3-block-prose {
  font-size: 10.5px;
  line-height: 1.55;
  color: rgba(13, 23, 18, 0.85);
}
body.page-buyer-match .bm-conclusionV3-block-prose strong {
  font-weight: 700;
  color: var(--bm-ink, #0D1712);
}
body.page-buyer-match .bm-conclusionV3-sig {
  margin-top: auto;
  text-align: right;
  padding-top: 14px;
}
body.page-buyer-match .bm-conclusionV3-sig-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 191, 98, 0.3), transparent);
  margin-bottom: 6px;
}
body.page-buyer-match .bm-conclusionV3-sig-text {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 10.5px;
  font-style: italic;
  color: rgba(13, 23, 18, 0.55);
}
body.page-buyer-match .bm-conclusionV3-block-dontneed {
  border-left-color: rgba(0, 191, 98, 0.18);
}
body.page-buyer-match .bm-conclusionV3-block-dontneed .bm-conclusionV3-block-prose {
  font-style: italic;
  color: rgba(13, 23, 18, 0.72);
}
body.page-buyer-match .bm-closing {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: 'Geist', sans-serif;
  padding-top: 4px;
  position: relative;
}
body.page-buyer-match .bm-closing-top-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
  flex-shrink: 0;
}
body.page-buyer-match .bm-closing-top-rule {
  flex: 0 0 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 191, 98, 0.42), transparent);
}
body.page-buyer-match .bm-closing-top-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bm-green, #00BF62);
  box-shadow: 0 0 0 3px rgba(0, 191, 98, 0.12);
}
body.page-buyer-match .bm-closing-thanks {
  text-align: center;
  margin-bottom: 22px;
  flex-shrink: 0;
}
body.page-buyer-match .bm-closing-eyebrow {
  font-family: 'Geist', sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bm-green, #00BF62);
  margin-bottom: 12px;
}
body.page-buyer-match .bm-closing-headline {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 38px;
  font-style: italic;
  font-weight: 500;
  color: var(--bm-ink, #0D1712);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
body.page-buyer-match .bm-closing-name {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--bm-green, #00BF62);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-buyer-match .bm-closing-name--xl { font-size: 38px; }
body.page-buyer-match .bm-closing-name--lg { font-size: 32px; }
body.page-buyer-match .bm-closing-name--md { font-size: 26px; }
body.page-buyer-match .bm-closing-name--sm { font-size: 21px; }
body.page-buyer-match .bm-closing-name--xs { font-size: 17px; }
body.page-buyer-match .bm-closing-name--fallback { font-size: 38px; }
body.page-buyer-match .bm-closing-subhead {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 500;
  color: rgba(13, 23, 18, 0.65);
  line-height: 1.4;
  padding: 0 30px;
}
body.page-buyer-match .bm-closing-disclaimer {
  background: rgba(245, 241, 232, 0.55);
  border-left: 2px solid rgba(0, 191, 98, 0.4);
  padding: 14px 16px;
  margin-bottom: 22px;
  flex-shrink: 0;
}
body.page-buyer-match .bm-closing-disclaimer-eyebrow {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 500;
  color: var(--bm-green, #00BF62);
  margin-bottom: 5px;
}
body.page-buyer-match .bm-closing-disclaimer-text {
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(13, 23, 18, 0.78);
}
body.page-buyer-match .bm-closing-invitation {
  text-align: center;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
body.page-buyer-match .bm-closing-invitation-rule {
  width: 30px;
  height: 1px;
  background: var(--bm-green, #00BF62);
  margin-bottom: 14px;
  opacity: 0.5;
}
body.page-buyer-match .bm-closing-invitation-headline {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 26px;
  font-style: italic;
  font-weight: 500;
  color: var(--bm-ink, #0D1712);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
body.page-buyer-match .bm-closing-invitation-headline-2 {
  color: var(--bm-green, #00BF62);
  margin-bottom: 16px;
}
body.page-buyer-match .bm-closing-submit {
  border: 0;
  
  border-radius: 100px;
  min-height: 42px;
  min-width: 110px;
  padding: 0 22px;
  font-family: 'Geist', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  background: linear-gradient(135deg, var(--bm-green, #00BF62) 0%, var(--bm-green-bright, #00A356) 100%);
  color: #fff;
  box-shadow:
    0 6px 16px rgba(0, 163, 86, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  margin-top: 6px;
}
body.page-buyer-match .bm-closing-submit:not(:disabled):hover {
  background: linear-gradient(135deg, var(--bm-green-bright, #00A356) 0%, #009249 100%);
  box-shadow:
    0 12px 26px rgba(0, 163, 86, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
}
body.page-buyer-match .bm-closing-submit:disabled {
  cursor: not-allowed;
  opacity: 0.4;
  box-shadow: none;
}
body.page-buyer-match .bm-closing-submit.is-launching {
  visibility: hidden !important;
  opacity: 0 !important;
}
body.page-buyer-match .bm-closing-submitted-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 10px 16px;
  background: rgba(0, 191, 98, 0.08);
  border: 1px solid rgba(0, 191, 98, 0.28);
  border-radius: 999px;
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(0, 130, 68, 0.95);
}
body.page-buyer-match .bm-closing-submitted-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bm-green, #00BF62);
  color: white;
  flex-shrink: 0;
}
body.page-buyer-match .bm-submit-burst {
  animation: bmSubmitBurstPulse 0.40s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
@keyframes bmSubmitBurstPulse {
  0%   { transform: scale(1); box-shadow: 0 6px 16px rgba(0, 163, 86, 0.28), inset 0 1px 0 rgba(255,255,255,0.24), 0 0 0 0 rgba(0, 191, 98, 0); }
  40%  { transform: scale(1.03); box-shadow: 0 8px 22px rgba(0, 163, 86, 0.45), inset 0 1px 0 rgba(255,255,255,0.24), 0 0 0 4px rgba(0, 191, 98, 0.28); }
  100% { transform: scale(1); box-shadow: 0 6px 16px rgba(0, 163, 86, 0.28), inset 0 1px 0 rgba(255,255,255,0.24), 0 0 0 8px rgba(0, 191, 98, 0); }
}
body.page-buyer-match .bm-closing-signature {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  flex-shrink: 0;
}
body.page-buyer-match .bm-closing-signature-mark {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bm-green, #00BF62);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(0, 191, 98, 0.12);
}
body.page-buyer-match .bm-closing-signature-text {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 500;
  color: rgba(13, 23, 18, 0.6);
}
body.page-buyer-match .bm-dnaV3 {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: 'Geist', sans-serif;
}
body.page-buyer-match .bm-dnaV3-eyebrow {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--bm-green, #00BF62);
  font-weight: 700;
  margin-bottom: 4px;
}
body.page-buyer-match .bm-dnaV3-title {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
  color: var(--bm-ink, #0D1712);
  line-height: 1;
  margin-bottom: 14px;
}
body.page-buyer-match .bm-dnaV3-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 12px;
  background: linear-gradient(135deg, rgba(0, 191, 98, 0.08), rgba(0, 191, 98, 0.02));
  border: 1px solid rgba(0, 191, 98, 0.2);
  border-radius: 12px;
  margin-bottom: 14px;
}
body.page-buyer-match .bm-dnaV3-card-photo {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--bm-green, #00BF62);
  background: white;
  margin-bottom: 8px;
}
body.page-buyer-match .bm-dnaV3-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.page-buyer-match .bm-dnaV3-card-name {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
  color: var(--bm-ink, #0D1712);
  line-height: 1.1;
}
body.page-buyer-match .bm-dnaV3-card-tag {
  font-size: 8.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--bm-green, #00BF62);
  margin-top: 4px;
}
body.page-buyer-match .bm-dnaV3-section-label {
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: rgba(13, 23, 18, 0.5);
  font-weight: 700;
  margin: 0 0 6px;
}
body.page-buyer-match .bm-dnaV3-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 14px;
}
body.page-buyer-match .bm-dnaV3-trait {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  background: rgba(0, 191, 98, 0.1);
  border-radius: 14px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--bm-green, #00BF62);
}
body.page-buyer-match .bm-dnaV3-trait-icon {
  font-size: 9px;
  opacity: 0.85;
}
body.page-buyer-match .bm-dnaV3-meters {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.page-buyer-match .bm-dnaV3-meter {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body.page-buyer-match .bm-dnaV3-meter-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9.5px;
}
body.page-buyer-match .bm-dnaV3-meter-label {
  color: rgba(13, 23, 18, 0.75);
  font-weight: 600;
}
body.page-buyer-match .bm-dnaV3-meter-pct {
  font-family: 'Geist Mono', monospace;
  color: var(--bm-green, #00BF62);
  font-weight: 700;
  font-size: 9px;
}
body.page-buyer-match .bm-dnaV3-meter-track {
  height: 5px;
  background: rgba(13, 23, 18, 0.05);
  border-radius: 3px;
  overflow: hidden;
}
body.page-buyer-match .bm-dnaV3-meter-fill {
  height: 100%;
  background: linear-gradient(90deg, #00BF62 0%, #2D7A51 100%);
  border-radius: 3px;
  transition: width 0.5s ease;
}
body.page-buyer-match .bm-portrait {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: 'Geist', sans-serif;
}
body.page-buyer-match .bm-portrait-eyebrow {
  font-family: 'Geist', sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bm-green, #00BF62);
  margin-bottom: 12px;
}
body.page-buyer-match .bm-portrait-title {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 26px;
  font-style: italic;
  font-weight: 500;
  color: var(--bm-ink, #0D1712);
  line-height: 1.05;
  margin-bottom: 14px;
}
body.page-buyer-match .bm-portrait-spread {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(0, 191, 98, 0.18);
}
body.page-buyer-match .bm-portrait-photo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.page-buyer-match .bm-portrait-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid var(--bm-green, #00BF62);
  background: white;
  margin-bottom: 8px;
  box-shadow: 0 2px 12px rgba(0, 191, 98, 0.15);
}
body.page-buyer-match .bm-portrait-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.page-buyer-match .bm-portrait-photo-caption {
  text-align: center;
}
body.page-buyer-match .bm-portrait-photo-name {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 600;
  color: var(--bm-ink, #0D1712);
  line-height: 1;
}
body.page-buyer-match .bm-portrait-photo-archetype {
  font-size: 8.5px;
  letter-spacing: 0.12em;
  color: var(--bm-green, #00BF62);
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 4px;
}
body.page-buyer-match .bm-portrait-notes {
  display: flex;
  flex-direction: column;
}
body.page-buyer-match .bm-portrait-notes-label {
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: rgba(13, 23, 18, 0.5);
  font-weight: 700;
  margin-bottom: 8px;
}
body.page-buyer-match .bm-portrait-notes-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.page-buyer-match .bm-portrait-note {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 4px;
  font-size: 10px;
  line-height: 1.4;
}
body.page-buyer-match .bm-portrait-note-mark {
  color: var(--bm-green, #00BF62);
  font-weight: 700;
  font-size: 11px;
}
body.page-buyer-match .bm-portrait-note-text {
  color: rgba(13, 23, 18, 0.82);
  font-family: 'Tan Pearl', 'Geist', serif;
  font-style: italic;
  font-size: 11px;
}
body.page-buyer-match .bm-portrait-compass-wrap {
  display: flex;
  flex-direction: column;
  margin-top: auto;
}
body.page-buyer-match .bm-portrait-compass-label {
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: rgba(13, 23, 18, 0.5);
  font-weight: 700;
  margin-bottom: 4px;
}
body.page-buyer-match .bm-portrait-compass-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  align-items: center;
}
body.page-buyer-match .bm-portrait-compass {
  background: linear-gradient(135deg, rgba(0,191,98,0.04), rgba(0,191,98,0.01));
  border: 1px solid rgba(0, 191, 98, 0.12);
  border-radius: 10px;
  padding: 4px;
}
body.page-buyer-match .bm-portrait-compass-svg {
  width: 100%;
  height: auto;
  display: block;
}
body.page-buyer-match .bm-portrait-compass-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body.page-buyer-match .bm-portrait-compass-line {
  font-size: 10.5px;
  color: var(--bm-ink, #0D1712);
  line-height: 1.3;
}
body.page-buyer-match .bm-portrait-compass-line strong {
  color: var(--bm-green, #00BF62);
  font-weight: 700;
  font-family: 'Geist', sans-serif;
}
body.page-buyer-match .bm-portrait-compass-line.is-muted { color: rgba(13, 23, 18, 0.6); font-size: 9.5px; }
body.page-buyer-match .bm-portrait-compass-bench {
  font-size: 8.5px;
  color: rgba(13, 23, 18, 0.55);
  font-style: italic;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(0, 191, 98, 0.2);
  line-height: 1.35;
}
body.page-buyer-match .bm-portrait.bm-portrait-360 {
  display: flex;
  flex-direction: column;
  height: 100%;
}
body.page-buyer-match .bm-portrait-360 .bm-portrait-title {
  margin-bottom: 12px;
}
body.page-buyer-match .bm-portrait360 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  min-height: 0;
}
body.page-buyer-match .bm-portrait360-identity {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(0, 191, 98, 0.07) 0%, rgba(0, 191, 98, 0.015) 100%);
  border: 1px solid rgba(0, 191, 98, 0.22);
  border-radius: 10px;
  position: relative;
}
body.page-buyer-match .bm-portrait360-identity::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--bm-green, #00BF62);
  border-radius: 10px 0 0 10px;
}
body.page-buyer-match .bm-portrait360-id-photo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid var(--bm-green, #00BF62);
  background: white;
  box-shadow: 0 3px 14px rgba(0, 191, 98, 0.22);
  flex-shrink: 0;
}
body.page-buyer-match .bm-portrait360-id-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.page-buyer-match .bm-portrait360-id-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
body.page-buyer-match .bm-portrait360-id-eyebrow {
  
  font-family: 'Geist', sans-serif;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(13, 23, 18, 0.5);
  margin-bottom: 2px;
}
body.page-buyer-match .bm-portrait360-id-name {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-style: italic;
  font-weight: 600;
  color: var(--bm-ink, #0D1712);
  line-height: 1.05;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
}
body.page-buyer-match .bm-portrait360-id-name.is-name-lg { font-size: 26px; }
body.page-buyer-match .bm-portrait360-id-name.is-name-md { font-size: 20px; }
body.page-buyer-match .bm-portrait360-id-name.is-name-sm { font-size: 16px; }
body.page-buyer-match .bm-portrait360-id-name.is-name-xs {
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.page-buyer-match .bm-portrait360-id-rule {
  width: 28px;
  height: 1px;
  background: var(--bm-green, #00BF62);
  margin: 7px 0 6px;
  opacity: 0.55;
}
body.page-buyer-match .bm-portrait360-id-archetype {
  
  font-family: 'Geist', sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bm-green, #00BF62);
}
body.page-buyer-match .bm-portrait360-id-match {
  text-align: right;
  flex-shrink: 0;
  padding-left: 14px;
  border-left: 1px dashed rgba(0, 191, 98, 0.25);
}
body.page-buyer-match .bm-portrait360-id-match-num {
  font-family: 'Geist', sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--bm-green, #00BF62);
  line-height: 1;
}
body.page-buyer-match .bm-portrait360-id-match-num span {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-left: 1px;
}
body.page-buyer-match .bm-portrait360-id-match-lbl {
  
  font-family: 'Geist', sans-serif;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(13, 23, 18, 0.5);
  margin-top: 4px;
}
body.page-buyer-match .bm-portrait360-quote {
  position: relative;
  padding: 10px 18px 10px 36px;
  background: linear-gradient(90deg, rgba(245, 241, 232, 0.85) 0%, rgba(245, 241, 232, 0.35) 100%);
  border-radius: 6px;
}
body.page-buyer-match .bm-portrait360-quote-mark {
  position: absolute;
  top: -4px;
  left: 8px;
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 46px;
  font-style: italic;
  color: var(--bm-green, #00BF62);
  line-height: 1;
  font-weight: 600;
  opacity: 0.5;
}
body.page-buyer-match .bm-portrait360-quote-text {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.35;
  color: rgba(13, 23, 18, 0.82);
  
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.page-buyer-match .bm-portrait360-money {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr;
  gap: 14px;
  align-items: stretch;
  padding: 8px 14px;
  
  background: linear-gradient(135deg, rgba(0, 163, 86, 0.16) 0%, rgba(0, 163, 86, 0.08) 100%);
  border: 1px solid rgba(0, 163, 86, 0.32);
  border-radius: 8px;
  position: relative;
}
body.page-buyer-match .bm-portrait360-money::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--bm-green, #00BF62);
  opacity: 0.9;
  border-radius: 8px 0 0 8px;
}
body.page-buyer-match .bm-portrait360-money-headline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 14px;
  border-right: 1px dashed rgba(0, 163, 86, 0.42);
}
body.page-buyer-match .bm-portrait360-money-label {
  
  font-family: 'Geist', sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bm-green, #00BF62);
  margin-bottom: 3px;
}
body.page-buyer-match .bm-portrait360-money-value {
  
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 700;
  color: var(--bm-ink, #0D1712);
  line-height: 1.05;
  white-space: nowrap;
}
body.page-buyer-match .bm-portrait360-money-sub {
  
  font-family: 'Geist', sans-serif;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(13, 23, 18, 0.5);
  margin-top: 3px;
}
body.page-buyer-match .bm-portrait360-money-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: center;
}
body.page-buyer-match .bm-portrait360-chip {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
body.page-buyer-match .bm-portrait360-chip-key {
  
  font-family: 'Geist', sans-serif;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(13, 23, 18, 0.5);
  margin-bottom: 2px;
}
body.page-buyer-match .bm-portrait360-chip-val {
  
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  color: var(--bm-ink, #0D1712);
  line-height: 1.25;
  word-break: break-word;
}
body.page-buyer-match .bm-portrait360-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 9px;
  flex: 2 1 auto;
  min-height: 130px;
}
body.page-buyer-match .bm-portrait360-card {
  display: flex;
  flex-direction: column;
  background: rgba(0, 191, 98, 0.025);
  border-radius: 8px;
  padding: 11px 12px 13px;
  border-left: 2px solid rgba(0, 191, 98, 0.4);
  min-width: 0;
  min-height: 130px;
}
body.page-buyer-match .bm-portrait360-card-head {
  
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Geist', sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bm-green, #00BF62);
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(0, 191, 98, 0.18);
}
body.page-buyer-match .bm-portrait360-card-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bm-green, #00BF62);
  flex-shrink: 0;
}
body.page-buyer-match .bm-portrait360-card-rows {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-around;
  gap: 6px;
}
body.page-buyer-match .bm-portrait360-card-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
body.page-buyer-match .bm-portrait360-card-key {
  
  font-family: 'Geist', sans-serif;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(13, 23, 18, 0.5);
  line-height: 1;
}
body.page-buyer-match .bm-portrait360-card-val {
  
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  color: var(--bm-ink, #0D1712);
  line-height: 1.25;
  word-break: break-word;
  
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.page-buyer-match .bm-portrait360-types-strip {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px 13px 12px;
  background: rgba(0, 191, 98, 0.025);
  border-radius: 8px;
  border-left: 2px solid rgba(0, 191, 98, 0.4);
  flex: 1 1 auto;
  justify-content: center;
}
body.page-buyer-match .bm-portrait360-types-label {
  
  font-family: 'Geist', sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bm-green, #00BF62);
}
body.page-buyer-match .bm-portrait360-types-chips {
  
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px 7px;
}
body.page-buyer-match .bm-portrait360-typechip {
  
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 7px;
  background: white;
  border: 1px solid rgba(0, 191, 98, 0.28);
  border-radius: 999px;
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  color: var(--bm-ink, #0D1712);
  line-height: 1.25;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}
body.page-buyer-match .bm-portrait360-typechip-icon {
  width: 11px;
  height: 11px;
  color: var(--bm-green, #00BF62);
  flex-shrink: 0;
}
body.page-buyer-match .bm-portrait360-typechip-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-buyer-match .bm-portrait360-typechip.is-empty {
  grid-column: 1 / -1;
  justify-self: start;
  border-color: rgba(0, 191, 98, 0.18);
  background: transparent;
  color: rgba(13, 23, 18, 0.55);
}
body.page-buyer-match .bm-distribution {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: 'Geist', sans-serif;
  
  gap: 0;
}
body.page-buyer-match .bm-distribution-title {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
  color: var(--bm-ink, #0D1712);
  line-height: 1.05;
  margin-top: 0;
  margin-bottom: 2px;
  flex-shrink: 0;
}
body.page-buyer-match .bm-distribution-eyebrow {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--bm-green, #00BF62);
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0;
  flex-shrink: 0;
}
body.page-buyer-match .bm-distribution-stack {
  display: flex;
  flex-direction: column;
  
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 18px;
  margin-bottom: 16px;
  padding: 0;
}
body.page-buyer-match .bm-distribution-rank {
  display: grid;
  
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 6px 4px;
  border-bottom: 1px dashed rgba(0, 191, 98, 0.14);
  transition: opacity 0.2s ease;
  
  flex: 1 1 0;
  min-height: 0;
}
body.page-buyer-match .bm-distribution-rank.is-rank-1 { min-height: 58px; }
body.page-buyer-match .bm-distribution-rank.is-rank-2 { min-height: 48px; }
body.page-buyer-match .bm-distribution-rank.is-rank-3 { min-height: 44px; }
body.page-buyer-match .bm-distribution-rank.is-rank-4 { min-height: 40px; }
body.page-buyer-match .bm-distribution-rank.is-rank-5 { min-height: 38px; }
body.page-buyer-match .bm-distribution-rank.is-rank-6 { min-height: 36px; }
body.page-buyer-match .bm-distribution-rank:last-child {
  border-bottom: none;
}
body.page-buyer-match .bm-distribution-rank-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(245, 241, 232, 0.4);
  border: 1.5px solid rgba(0, 191, 98, 0.18);
  flex-shrink: 0;
  
  justify-self: center;
}
body.page-buyer-match .bm-distribution-rank-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.page-buyer-match .bm-distribution-rank-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
body.page-buyer-match .bm-distribution-rank-name {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 600;
  color: rgba(13, 23, 18, 0.7);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.page-buyer-match .bm-distribution-rank-tag {
  font-family: 'Geist', sans-serif;
  font-size: 7px;
  letter-spacing: 0.2em;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(13, 23, 18, 0.4);
}
body.page-buyer-match .bm-distribution-rank-pct {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: rgba(13, 23, 18, 0.55);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
body.page-buyer-match .bm-distribution-rank-pct-sym {
  font-size: 9px;
  font-weight: 600;
  margin-left: 1px;
  color: rgba(13, 23, 18, 0.4);
}
body.page-buyer-match .bm-distribution-rank.is-rank-1 .bm-distribution-rank-avatar {
  width: 44px;
  height: 44px;
  border: 2px solid var(--bm-green, #00BF62);
  box-shadow: 0 0 0 3px rgba(0, 191, 98, 0.08);
}
body.page-buyer-match .bm-distribution-rank.is-rank-1 .bm-distribution-rank-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--bm-ink, #0D1712);
}
body.page-buyer-match .bm-distribution-rank.is-rank-1 .bm-distribution-rank-tag {
  color: rgba(0, 130, 68, 0.95);
  font-weight: 700;
}
body.page-buyer-match .bm-distribution-rank.is-rank-1 .bm-distribution-rank-pct {
  font-size: 16px;
  color: var(--bm-green, #00BF62);
}
body.page-buyer-match .bm-distribution-rank.is-rank-2 .bm-distribution-rank-avatar {
  width: 36px;
  height: 36px;
}
body.page-buyer-match .bm-distribution-rank.is-rank-2 .bm-distribution-rank-name {
  font-size: 12.5px;
  color: rgba(13, 23, 18, 0.85);
}
body.page-buyer-match .bm-distribution-rank.is-rank-3 .bm-distribution-rank-avatar {
  width: 32px;
  height: 32px;
  opacity: 0.95;
}
body.page-buyer-match .bm-distribution-rank.is-rank-3 .bm-distribution-rank-name {
  font-size: 11.5px;
}
body.page-buyer-match .bm-distribution-rank.is-rank-4 .bm-distribution-rank-avatar {
  width: 28px;
  height: 28px;
  opacity: 0.8;
}
body.page-buyer-match .bm-distribution-rank.is-rank-4 .bm-distribution-rank-name {
  font-size: 11px;
  color: rgba(13, 23, 18, 0.6);
}
body.page-buyer-match .bm-distribution-rank.is-rank-4 .bm-distribution-rank-pct {
  font-size: 12px;
}
body.page-buyer-match .bm-distribution-rank.is-rank-5 .bm-distribution-rank-avatar {
  width: 26px;
  height: 26px;
  opacity: 0.65;
}
body.page-buyer-match .bm-distribution-rank.is-rank-5 .bm-distribution-rank-name {
  font-size: 10.5px;
  color: rgba(13, 23, 18, 0.55);
}
body.page-buyer-match .bm-distribution-rank.is-rank-5 .bm-distribution-rank-pct {
  font-size: 11px;
}
body.page-buyer-match .bm-distribution-rank.is-rank-6 .bm-distribution-rank-avatar {
  width: 24px;
  height: 24px;
  opacity: 0.5;
}
body.page-buyer-match .bm-distribution-rank.is-rank-6 .bm-distribution-rank-name {
  font-size: 10px;
  color: rgba(13, 23, 18, 0.5);
}
body.page-buyer-match .bm-distribution-rank.is-rank-6 .bm-distribution-rank-pct {
  font-size: 10.5px;
}
body.page-buyer-match .bm-distribution-combo {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 16px 15px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(0, 163, 86, 0.06) 0%, rgba(245, 241, 232, 0.4) 100%);
  border-left: 3px solid var(--bm-green, #00BF62);
  border-radius: 6px;
  
  margin-top: 0;
}
body.page-buyer-match .bm-distribution-combo-visual {
  display: flex;
  align-items: center;
  
  gap: 10px;
}
body.page-buyer-match .bm-distribution-combo-avatar {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: visible;
  flex-shrink: 0;
}
body.page-buyer-match .bm-distribution-combo-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid var(--bm-green, #00BF62);
  box-shadow: 0 0 0 3px rgba(0, 191, 98, 0.12);
}
body.page-buyer-match .bm-distribution-combo-avatar.is-secondary img {
  border-color: rgba(0, 191, 98, 0.5);
  box-shadow: 0 0 0 3px rgba(0, 191, 98, 0.06);
}
body.page-buyer-match .bm-distribution-combo-pct {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 6px;
  background: var(--bm-green, #00BF62);
  color: white;
  font-family: 'Geist', sans-serif;
  font-size: 9px;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
body.page-buyer-match .bm-distribution-combo-avatar.is-secondary .bm-distribution-combo-pct {
  background: rgba(0, 130, 68, 0.7);
}
body.page-buyer-match .bm-distribution-combo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  font-family: 'Geist', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: rgba(0, 191, 98, 0.55);
}
body.page-buyer-match .bm-distribution-combo-plus {
  display: block;
}
body.page-buyer-match .bm-distribution-combo-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
body.page-buyer-match .bm-distribution-combo-eyebrow {
  
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  letter-spacing: 0.26em;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--bm-green, #00BF62);
  margin-top: 1px;
  margin-bottom: 7px;
}
body.page-buyer-match .bm-distribution-combo-title {
  font-family: 'Tan Pearl', 'Geist', serif;
  
  font-size: 13.5px;
  font-style: italic;
  font-weight: 700;
  color: var(--bm-ink, #0D1712);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-buyer-match .bm-distribution-combo-plus-inline {
  color: rgba(0, 130, 68, 0.7);
  font-family: 'Geist', sans-serif;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  margin: 0 2px;
}
body.page-buyer-match .bm-distribution-combo-prose {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 11.5px;
  font-style: italic;
  font-weight: 500;
  color: rgba(13, 23, 18, 0.78);
  line-height: 1.4;
  
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.page-buyer-match .bm-distribution-combo-prose strong {
  font-family: 'Geist', sans-serif;
  font-style: normal;
  font-weight: 700;
  color: var(--bm-ink, #0D1712);
  font-size: 11px;
  letter-spacing: -0.005em;
}
body.page-buyer-match .bm-factors {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: 'Geist', sans-serif;
  gap: 10px;
}
body.page-buyer-match .bm-factors-eyebrow {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--bm-green, #00BF62);
  font-weight: 700;
  margin-bottom: 4px;
}
body.page-buyer-match .bm-factors-title {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 26px;
  font-style: italic;
  font-weight: 500;
  color: var(--bm-ink, #0D1712);
  line-height: 1.1;
  margin-bottom: 8px;
}
body.page-buyer-match .bm-factors-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 13px;
  background: rgba(0, 191, 98, 0.018);
  border-radius: 8px;
  border-left: 2px solid rgba(0, 191, 98, 0.3);
}
body.page-buyer-match .bm-factors-bar-row {
  display: grid;
  grid-template-columns: 138px 1fr 42px;
  gap: 10px;
  align-items: center;
}
body.page-buyer-match .bm-factors-bar-name {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 600;
  color: rgba(13, 23, 18, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-buyer-match .bm-factors-bar-track {
  height: 8px;
  background: rgba(13, 23, 18, 0.04);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
body.page-buyer-match .bm-factors-bar-fill {
  height: 100%;
  background: rgba(0, 191, 98, 0.35);
  border-radius: 999px;
  transition: width 0.4s ease-out;
}
body.page-buyer-match .bm-factors-bar-pct {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: rgba(13, 23, 18, 0.55);
  text-align: right;
  letter-spacing: -0.01em;
}
body.page-buyer-match .bm-factors-bar-pct-sym {
  font-size: 8px;
  font-weight: 600;
  margin-left: 1px;
}
body.page-buyer-match .bm-factors-bar-row.is-strongest .bm-factors-bar-name {
  color: var(--bm-ink, #0D1712);
  font-weight: 700;
}
body.page-buyer-match .bm-factors-bar-row.is-strongest .bm-factors-bar-fill {
  background: linear-gradient(90deg, #00BF62 0%, rgba(0, 163, 86, 0.85) 100%);
  box-shadow: 0 0 6px rgba(0, 191, 98, 0.25);
}
body.page-buyer-match .bm-factors-bar-row.is-strongest .bm-factors-bar-pct {
  color: var(--bm-green, #00BF62);
  font-size: 13px;
}
body.page-buyer-match .bm-factors-bar-row.is-weakest .bm-factors-bar-name {
  color: rgba(13, 23, 18, 0.55);
  font-style: italic;
}
body.page-buyer-match .bm-factors-bar-row.is-weakest .bm-factors-bar-fill {
  background: rgba(0, 191, 98, 0.22);
}
body.page-buyer-match .bm-factors-insights {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  min-height: 0;
}
body.page-buyer-match .bm-factors-insight {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 13px 12px;
  border-radius: 7px;
  flex: 1;
  justify-content: center;
}
body.page-buyer-match .bm-factors-insight.is-strongest-card {
  background: linear-gradient(135deg, rgba(0, 163, 86, 0.13) 0%, rgba(0, 163, 86, 0.04) 100%);
  border: 1px solid rgba(0, 163, 86, 0.28);
  border-left: 3px solid var(--bm-green, #00BF62);
}
body.page-buyer-match .bm-factors-insight.is-weakest-card {
  background: linear-gradient(135deg, rgba(245, 241, 232, 0.55) 0%, rgba(245, 241, 232, 0.2) 100%);
  border: 1px solid rgba(13, 23, 18, 0.08);
  border-left: 3px solid rgba(13, 23, 18, 0.2);
}
body.page-buyer-match .bm-factors-insight-eyebrow {
  font-family: 'Geist', sans-serif;
  font-size: 8px;
  letter-spacing: 0.22em;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(13, 23, 18, 0.55);
}
body.page-buyer-match .bm-factors-insight.is-strongest-card .bm-factors-insight-eyebrow {
  color: rgba(0, 130, 68, 0.95);
}
body.page-buyer-match .bm-factors-insight-head {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 700;
  color: var(--bm-ink, #0D1712);
  line-height: 1.15;
}
body.page-buyer-match .bm-factors-insight-body {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 11.5px;
  font-style: italic;
  font-weight: 500;
  color: rgba(13, 23, 18, 0.78);
  line-height: 1.4;
}
body.page-buyer-match .bm-deepdive-img-wrap {
  
  margin-top: 32px;
  margin-bottom: 0;
  width: calc(100% + 64px);
  margin-left: -32px;
  margin-right: -32px;
  flex-shrink: 0;
}
body.page-buyer-match .bm-deepdive-img {
  height: 80px;
  min-height: 80px;
  max-height: 80px;
}
body.page-buyer-match .bm-deepdive-img-backdrop {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #0D1712 0%,
    #0D1712 40%,
    rgba(13, 23, 18, 0.78) 56%,
    rgba(13, 23, 18, 0.30) 76%,
    rgba(13, 23, 18, 0) 92%
  );
  pointer-events: none;
  z-index: 7;
}
body.page-buyer-match .bm-deepdive-img-wrap.has-overlay {
  box-shadow:
    
    inset 0  4px 6px -4px rgba(0, 0, 0, 0.35),
    inset 0 -4px 6px -4px rgba(0, 0, 0, 0.35),
    
    0 1px 0  rgba(0, 191, 98, 0.08),
    0 2px 8px -4px rgba(13, 23, 18, 0.12);
}
body.page-buyer-match .bm-deepdive-img-wrap.has-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(0, 191, 98, 0) 0%,
      rgba(0, 191, 98, 0.30) 12%,
      rgba(0, 191, 98, 0.45) 50%,
      rgba(0, 191, 98, 0.30) 88%,
      rgba(0, 191, 98, 0) 100%
    ) top    / 100% 1px no-repeat,
    linear-gradient(
      90deg,
      rgba(0, 191, 98, 0) 0%,
      rgba(0, 191, 98, 0.30) 12%,
      rgba(0, 191, 98, 0.45) 50%,
      rgba(0, 191, 98, 0.30) 88%,
      rgba(0, 191, 98, 0) 100%
    ) bottom / 100% 1px no-repeat;
  z-index: 9;
  pointer-events: none;
}
body.page-buyer-match .bm-deepdive-img-wrap.has-overlay > .bm-chapter-img-top-fade {
  display: none !important;
}
body.page-buyer-match .bm-deepdive-img-wrap.has-overlay::after {
  display: none !important;
}
body.page-buyer-match .bm-deepdive-img-overlay {
  position: absolute;
  
  left: 48px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: none;
  max-width: 58%;
}
body.page-buyer-match .bm-deepdive-img-title {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
body.page-buyer-match .bm-deepdive-img-eyebrow {
  font-family: 'Geist', sans-serif;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: rgba(110, 230, 160, 1);
  text-transform: uppercase;
  margin-left: 4px;
  text-shadow: 0 0 8px rgba(0, 191, 98, 0.35);
}
body.page-buyer-match .bm-deepdive {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: 'Geist', sans-serif;
  
  gap: 0;
}
body.page-buyer-match .bm-deepdive-title {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 21px;
  font-style: italic;
  font-weight: 500;
  color: var(--bm-ink, #0D1712);
  line-height: 1.05;
  margin-top: 0;
  margin-bottom: 2px;
  flex-shrink: 0;
}
body.page-buyer-match .bm-deepdive-eyebrow {
  font-size: 8px;
  letter-spacing: 0.22em;
  color: var(--bm-green, #00BF62);
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0;
  flex-shrink: 0;
}
body.page-buyer-match .bm-hero-artifact-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  
  margin-top: 18px;
  margin-bottom: 18px;
  padding: 0;
}
body.page-buyer-match .bm-intent-compass, body.page-buyer-match .bm-property-fingerprint, body.page-buyer-match .bm-purchase-arc, body.page-buyer-match .bm-financing-mix, body.page-buyer-match .bm-timeline-rail {
  width: 100%;
  max-width: 340px;
  height: auto;
  display: block;
}
body.page-buyer-match .bm-hero-interpretation {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 12px 10px;
  background: rgba(245, 241, 232, 0.5);
  border-left: 2px solid rgba(0, 191, 98, 0.4);
  border-radius: 4px;
  flex: 1;
  justify-content: center;
  min-height: 0;
}
body.page-buyer-match .bm-hero-interpretation-eyebrow {
  font-family: 'Geist', sans-serif;
  font-size: 7.5px;
  letter-spacing: 0.22em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--bm-green, #00BF62);
}
body.page-buyer-match .bm-hero-interpretation-body {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 11.5px;
  font-style: italic;
  font-weight: 500;
  color: rgba(13, 23, 18, 0.82);
  line-height: 1.45;
}
body.page-buyer-match .bm-deepdive-headline {
  position: relative;
  padding: 8px 14px 9px 22px;
  background: rgba(245, 241, 232, 0.55);
  border-left: 2px solid rgba(0, 191, 98, 0.45);
}
body.page-buyer-match .bm-deepdive-headline-mark {
  position: absolute;
  top: -2px;
  left: 6px;
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 28px;
  font-style: italic;
  font-weight: 700;
  color: rgba(0, 191, 98, 0.4);
  line-height: 1;
}
body.page-buyer-match .bm-deepdive-headline-text {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 13.5px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bm-ink, #0D1712);
}
body.page-buyer-match .bm-deepdive-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 7px;
  padding: 5px 0 7px;
  border-bottom: 1px dashed rgba(0, 191, 98, 0.22);
}
body.page-buyer-match .bm-deepdive-summary-item {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
body.page-buyer-match .bm-deepdive-summary-key {
  font-family: 'Geist', sans-serif;
  font-size: 7px;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(13, 23, 18, 0.5);
}
body.page-buyer-match .bm-deepdive-summary-val {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 600;
  color: var(--bm-ink, #0D1712);
}
body.page-buyer-match .bm-deepdive-summary-divider {
  color: rgba(0, 191, 98, 0.45);
  font-weight: 700;
  font-size: 10px;
}
body.page-buyer-match .bm-deepdive-statblock {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 2px 0;
}
body.page-buyer-match .bm-deepdive-statblock-eyebrow {
  font-family: 'Geist', sans-serif;
  font-size: 7.5px;
  letter-spacing: 0.22em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--bm-green, #00BF62);
  margin-bottom: 0;
}
body.page-buyer-match .bm-deepdive-statblock-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}
body.page-buyer-match .bm-deepdive-statrow {
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: baseline;
  gap: 10px;
  padding: 3.5px 0;
  border-bottom: 1px dashed rgba(0, 191, 98, 0.16);
}
body.page-buyer-match .bm-deepdive-statrow:last-child {
  border-bottom: none;
}
body.page-buyer-match .bm-deepdive-statrow-key {
  font-family: 'Geist', sans-serif;
  font-size: 7.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(13, 23, 18, 0.55);
  line-height: 1.3;
}
body.page-buyer-match .bm-deepdive-statrow-val {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 11.5px;
  font-style: italic;
  font-weight: 600;
  color: var(--bm-ink, #0D1712);
  line-height: 1.35;
}
body.page-buyer-match .bm-deepdive-areablock {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px 0;
}
body.page-buyer-match .bm-deepdive-areablock-eyebrow {
  font-family: 'Geist', sans-serif;
  font-size: 7.5px;
  letter-spacing: 0.22em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--bm-green, #00BF62);
}
body.page-buyer-match .bm-deepdive-areablock-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
body.page-buyer-match .bm-deepdive-area {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 8px 8px;
  background: rgba(245, 241, 232, 0.45);
  border-left: 2px solid var(--bm-green, #00BF62);
  border-radius: 4px;
}
body.page-buyer-match .bm-deepdive-area-name {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 12.5px;
  font-style: italic;
  font-weight: 700;
  color: var(--bm-ink, #0D1712);
  line-height: 1.15;
}
body.page-buyer-match .bm-deepdive-area-tag {
  font-family: 'Geist', sans-serif;
  font-size: 7.5px;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: rgba(13, 23, 18, 0.6);
  line-height: 1.3;
}
body.page-buyer-match .bm-deepdive-buysblock {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px 0;
}
body.page-buyer-match .bm-deepdive-buysblock-eyebrow {
  font-family: 'Geist', sans-serif;
  font-size: 7.5px;
  letter-spacing: 0.22em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--bm-green, #00BF62);
}
body.page-buyer-match .bm-deepdive-buysblock-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
body.page-buyer-match .bm-deepdive-buytile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 8px 8px;
  background: rgba(0, 191, 98, 0.04);
  border: 1px solid rgba(0, 191, 98, 0.18);
  border-radius: 4px;
}
body.page-buyer-match .bm-deepdive-buytile-unit {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
  color: var(--bm-ink, #0D1712);
  line-height: 1.15;
}
body.page-buyer-match .bm-deepdive-buytile-loc {
  font-family: 'Geist', sans-serif;
  font-size: 7.5px;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: rgba(13, 23, 18, 0.6);
  line-height: 1.3;
}
body.page-buyer-match .bm-deepdive-warnblock {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px 9px;
  background: rgba(217, 119, 6, 0.05);
  border-left: 2px solid rgba(217, 119, 6, 0.55);
  border-radius: 4px;
}
body.page-buyer-match .bm-deepdive-warnblock-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Geist', sans-serif;
  font-size: 7.5px;
  letter-spacing: 0.22em;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(154, 78, 0, 0.9);
}
body.page-buyer-match .bm-deepdive-warn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(217, 119, 6, 0.85);
  color: white;
  font-family: 'Geist', sans-serif;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}
body.page-buyer-match .bm-deepdive-warnlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body.page-buyer-match .bm-deepdive-warnitem {
  position: relative;
  padding-left: 12px;
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 500;
  color: rgba(13, 23, 18, 0.78);
  line-height: 1.4;
}
body.page-buyer-match .bm-deepdive-warnitem::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(217, 119, 6, 0.6);
}
body.page-buyer-match .bm-deepdive-warnblock-title {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 12.5px;
  font-style: italic;
  font-weight: 700;
  color: var(--bm-ink, #0D1712);
  line-height: 1.25;
  margin-top: 1px;
}
body.page-buyer-match .bm-deepdive-warnblock-body {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 500;
  color: rgba(13, 23, 18, 0.78);
  line-height: 1.4;
}
body.page-buyer-match .bm-deepdive-question {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 12px 9px;
  background: rgba(0, 163, 86, 0.05);
  border-left: 2px solid var(--bm-green, #00BF62);
  border-radius: 4px;
  margin-top: 2px;
}
body.page-buyer-match .bm-deepdive-question-eyebrow {
  font-family: 'Geist', sans-serif;
  font-size: 7.5px;
  letter-spacing: 0.22em;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(0, 130, 68, 0.95);
}
body.page-buyer-match .bm-deepdive-question-body {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 600;
  color: var(--bm-ink, #0D1712);
  line-height: 1.35;
}
body.page-buyer-match .bm-deepdive-footer {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 16px;
  align-items: stretch;
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 191, 98, 0.18);
  
  flex-shrink: 0;
  min-height: 0;
}
body.page-buyer-match .bm-deepdive-footer-brief {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 8px;
  border-right: 1px solid rgba(0, 191, 98, 0.18);
}
body.page-buyer-match .bm-deepdive-footer-eyebrow {
  font-family: 'Geist', sans-serif;
  font-size: 7px;
  letter-spacing: 0.26em;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--bm-green, #00BF62);
  margin-bottom: 4px;
}
body.page-buyer-match .bm-deepdive-footer-statline {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(0, 191, 98, 0.14);
}
body.page-buyer-match .bm-deepdive-footer-statline:last-child {
  border-bottom: none;
}
body.page-buyer-match .bm-deepdive-footer-statkey {
  
  font-family: 'Geist', sans-serif;
  font-size: 7px;
  letter-spacing: 0.26em;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(0, 130, 68, 0.85);
  line-height: 1.2;
}
body.page-buyer-match .bm-deepdive-footer-statval {
  
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 10.5px;
  font-style: italic;
  font-weight: 700;
  color: var(--bm-ink, #0D1712);
  line-height: 1.25;
}
body.page-buyer-match .bm-deepdive-footer-question {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px 4px 4px 4px;
  gap: 4px;
}
body.page-buyer-match .bm-deepdive-footer-question-mark {
  display: none;
}
body.page-buyer-match .bm-deepdive-footer-question-label {
  
  font-family: 'Geist', sans-serif;
  font-size: 7px;
  letter-spacing: 0.26em;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--bm-green, #00BF62);
  margin: 0;
  align-self: flex-start;
}
body.page-buyer-match .bm-deepdive-footer-question-situation {
  
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 10.5px;
  font-style: italic;
  font-weight: 700;
  color: var(--bm-ink, #0D1712);
  line-height: 1.25;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.page-buyer-match .bm-deepdive-footer-question-text {
  
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 9px;
  font-style: italic;
  font-weight: 500;
  color: rgba(13, 23, 18, 0.72);
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.page-buyer-match .bm-deepdive-footer-question-why {
  
  font-family: 'Geist', sans-serif;
  font-size: 8px;
  font-style: normal;
  font-weight: 600;
  color: rgba(0, 130, 68, 0.92);
  line-height: 1.4;
  margin-top: 3px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 191, 98, 0.22);
  letter-spacing: 0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.page-buyer-match .bm-nextsteps {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: 'Geist', sans-serif;
  gap: 10px;
}
body.page-buyer-match .bm-nextsteps-eyebrow {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--bm-green, #00BF62);
  font-weight: 700;
  margin-bottom: 4px;
}
body.page-buyer-match .bm-nextsteps-title {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 26px;
  font-style: italic;
  font-weight: 500;
  color: var(--bm-ink, #0D1712);
  line-height: 1.1;
  margin-bottom: 2px;
}
body.page-buyer-match .bm-nextsteps-intro {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 12px;
  font-style: italic;
  color: rgba(13, 23, 18, 0.65);
  margin-bottom: 8px;
}
body.page-buyer-match .bm-nextsteps-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
body.page-buyer-match .bm-nextsteps-step {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 13px;
  flex: 1;
  min-height: 0;
}
body.page-buyer-match .bm-nextsteps-step-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
body.page-buyer-match .bm-nextsteps-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bm-green, #00BF62);
  color: white;
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(0, 191, 98, 0.12);
  z-index: 1;
}
body.page-buyer-match .bm-nextsteps-step-line {
  width: 1.5px;
  flex: 1;
  background: linear-gradient(180deg, rgba(0, 191, 98, 0.35) 0%, rgba(0, 191, 98, 0.12) 100%);
  margin-top: 4px;
  margin-bottom: -2px;
}
body.page-buyer-match .bm-nextsteps-step-body {
  padding-bottom: 13px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
body.page-buyer-match .bm-nextsteps-step-timing {
  font-family: 'Geist', sans-serif;
  font-size: 8px;
  letter-spacing: 0.22em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--bm-green, #00BF62);
  margin-bottom: 1px;
}
body.page-buyer-match .bm-nextsteps-step-lead {
  font-family: 'Geist', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--bm-ink, #0D1712);
  line-height: 1.3;
}
body.page-buyer-match .bm-nextsteps-step-detail {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 11.5px;
  font-style: italic;
  font-weight: 500;
  color: rgba(13, 23, 18, 0.78);
  line-height: 1.4;
}
body.page-buyer-match .bm-journey {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: 'Geist', sans-serif;
}
body.page-buyer-match .bm-journey-eyebrow {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--bm-green, #00BF62);
  font-weight: 700;
  margin-bottom: 4px;
}
body.page-buyer-match .bm-journey-title {
  font-family: 'Tan Pearl', 'Geist', serif;
  font-size: 26px;
  font-style: italic;
  font-weight: 500;
  color: var(--bm-ink, #0D1712);
  line-height: 1.05;
  margin-bottom: 4px;
}
body.page-buyer-match .bm-journey-intro {
  font-size: 9.5px;
  color: rgba(13, 23, 18, 0.6);
  line-height: 1.4;
  margin-bottom: 8px;
}
body.page-buyer-match .bm-journey-ribbon {
  background: linear-gradient(135deg, rgba(0,191,98,0.04), rgba(0,191,98,0.01));
  border: 1px solid rgba(0, 191, 98, 0.12);
  border-radius: 10px;
  padding: 8px 4px;
  margin-bottom: 4px;
}
body.page-buyer-match .bm-journey-ribbon-svg {
  width: 100%;
  height: auto;
  display: block;
}
body.page-buyer-match .bm-journey-legend {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 10px;
}
body.page-buyer-match .bm-journey-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
body.page-buyer-match .bm-journey-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
body.page-buyer-match .bm-journey-legend-dot.is-aligned { background: #00BF62; }
body.page-buyer-match .bm-journey-legend-dot.is-drift { background: #E89F4F; }
body.page-buyer-match .bm-journey-legend-text {
  font-size: 9px;
  color: rgba(13, 23, 18, 0.65);
  font-weight: 500;
}
body.page-buyer-match .bm-journey-patterns-label {
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: rgba(13, 23, 18, 0.5);
  font-weight: 700;
  margin-bottom: 6px;
}
body.page-buyer-match .bm-journey-patterns {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
body.page-buyer-match .bm-journey-pattern {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(0, 191, 98, 0.04);
  border: 1px solid rgba(0, 191, 98, 0.14);
  border-radius: 8px;
}
body.page-buyer-match .bm-journey-pattern-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bm-green, #00BF62);
  color: white;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Tan Pearl', 'Geist', serif;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
body.page-buyer-match .bm-journey-pattern-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body.page-buyer-match .bm-journey-pattern-text {
  font-size: 10px;
  color: var(--bm-ink, #0D1712);
  line-height: 1.4;
}
body.page-buyer-match .bm-journey-pattern-text strong {
  color: var(--bm-green, #00BF62);
  font-weight: 700;
}
body.page-buyer-match .bm-journey-pattern-bench {
  font-size: 8.5px;
  color: rgba(13, 23, 18, 0.55);
  font-style: italic;
  padding-top: 3px;
  border-top: 1px dashed rgba(0, 191, 98, 0.18);
}
body.page-buyer-match .bm-profile-intro {
  font-family: 'Geist', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(13, 23, 18, 0.65);
  margin: 4px 0 8px;
  letter-spacing: -0.005em;
  border-left: 3px solid var(--bm-green, #00BF62);
  padding-left: 10px;
}
body.page-buyer-match .bm-profile-avatar {
  border-radius: 50%;
  border: 2px solid var(--bm-green, #00BF62);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow:
    0 2px 6px -2px rgba(0, 191, 98, 0.25),
    inset 0 -4px 8px -4px rgba(0, 0, 0, 0.08);
  background: #ffffff;
  width: 30px;
  height: 30px;
}
body.page-buyer-match .bm-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.page-buyer-match .bm-profile-avatar.is-top {
  width: 44px;
  height: 44px;
  border-width: 2.5px;
  box-shadow:
    0 4px 12px -4px rgba(0, 191, 98, 0.40),
    inset 0 -5px 12px -6px rgba(0, 0, 0, 0.10);
}
body.page-buyer-match .bm-profile-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
body.page-buyer-match .bm-profile-card {
  display: grid;
  grid-template-columns: 18px auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 5px 10px 5px 6px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.015);
  border: 1px solid rgba(0, 191, 98, 0.12);
  animation: bmAnswerIn 0.5s cubic-bezier(0.2, 0, 0.2, 1);
}
body.page-buyer-match .bm-profile-card.is-top {
  background: linear-gradient(120deg, rgba(0, 191, 98, 0.10) 0%, rgba(0, 191, 98, 0.03) 100%);
  border: 1.5px solid var(--bm-green, #00BF62);
  padding: 8px 12px;
  box-shadow: 0 4px 14px -8px rgba(0, 191, 98, 0.30);
}
body.page-buyer-match .bm-profile-card-rank {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--bm-green, #00BF62);
  line-height: 1;
  text-align: center;
  opacity: 0.50;
}
body.page-buyer-match .bm-profile-card.is-top .bm-profile-card-rank {
  font-size: 16px;
  opacity: 1;
}
body.page-buyer-match .bm-profile-card-info { min-width: 0; }
body.page-buyer-match .bm-profile-card-tag {
  font-family: 'Geist', sans-serif;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bm-green, #00BF62);
  margin-bottom: 2px;
}
body.page-buyer-match .bm-profile-card-name {
  font-family: 'Geist', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--bm-ink, #1a1f1b);
  line-height: 1.15;
  margin-bottom: 3px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-buyer-match .bm-profile-card.is-top .bm-profile-card-name {
  font-size: 13.5px;
  font-weight: 800;
}
body.page-buyer-match .bm-profile-card-bar {
  height: 3px;
  border-radius: 999px;
  background: rgba(0, 191, 98, 0.10);
  overflow: hidden;
}
body.page-buyer-match .bm-profile-card-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--bm-green, #00BF62);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
body.page-buyer-match .bm-profile-card-pct {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--bm-green, #00BF62);
  letter-spacing: -0.02em;
  line-height: 1;
  min-width: 32px;
  text-align: right;
  opacity: 0.62;
}
body.page-buyer-match .bm-profile-card.is-top .bm-profile-card-pct {
  font-size: 19px;
  opacity: 1;
}
body.page-buyer-match .bm-profile-pct-unit {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0;
  opacity: 0.7;
  margin-left: 1px;
}
body.is-empty-report .bm-identity, body.is-empty-report .bm-profile-row, body.is-empty-report .bm-stats, body.is-empty-report .bm-narrative, body.is-empty-report .bm-features, body.is-empty-report .bm-insights, body.is-empty-report .bm-details, body.is-empty-report .bm-checklist, body.is-empty-report .bm-canvas-section, body.is-empty-report .bm-paper-spread {
  display: none !important;
}
body.is-empty-report .bm-canvas {
  position: relative;
}
body.is-empty-report .bm-canvas::after {
  content: 'Your buyer profile will appear here as you answer.';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(13, 23, 18, 0.32);
  font-style: italic;
  padding: 0 40px;
  line-height: 1.5;
  letter-spacing: 0.005em;
  z-index: 5;
}
body.page-buyer-match .bm-canvas::before {
  content: '';
  position: absolute;
  left: 36px;
  right: 36px;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--bm-green, #16A34A), transparent);
  opacity: 0.7;
}
body.page-buyer-match .bm-canvas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(13,23,18,0.06);
  font-family: 'Geist', sans-serif;
  gap: 14px;
}
body.page-buyer-match .bm-canvas-header-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
body.page-buyer-match .bm-canvas-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bm-green, #00BF62);
}
body.page-buyer-match .bm-canvas-date {
  font-size: 10px;
  font-weight: 600;
  color: var(--bm-muted);
  letter-spacing: 0.04em;
}
body.page-buyer-match .bm-canvas-logo-img {
  height: 26px;
  width: auto;
  flex-shrink: 0;
  display: block;
}
body.page-buyer-match .bm-identity {
  padding-bottom: 4px;
}
body.page-buyer-match .bm-identity-name {
  font-family: 'Geist', sans-serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--bm-ink);
  margin-bottom: 6px;
}
body.page-buyer-match .bm-identity-name.is-empty { color: rgba(13,23,18,0.25); font-weight: 600; }
body.page-buyer-match .bm-identity-meta {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  color: var(--bm-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}
body.page-buyer-match .bm-identity-meta .is-empty { color: rgba(13,23,18,0.3); font-style: italic; font-weight: 500; }
body.page-buyer-match .bm-identity-sep { margin: 0 8px; opacity: 0.4; }
body.page-buyer-match .bm-canvas-lede {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bm-ink-soft);
  margin: 0;
  max-width: 480px;
}
body.page-buyer-match .bm-hero {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 20px;
  align-items: center;
  padding: 22px;
  background: linear-gradient(135deg, rgba(22,163,74,0.04) 0%, rgba(34,197,94,0.02) 100%);
  border: 1px solid rgba(22,163,74,0.12);
  border-radius: 16px;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
body.page-buyer-match .bm-hero[data-state="empty"] {
  opacity: 0.5;
  background: rgba(13,23,18,0.02);
  border-color: rgba(13,23,18,0.06);
}
body.page-buyer-match .bm-hero-label {
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bm-green, #16A34A);
  margin-bottom: 6px;
}
body.page-buyer-match .bm-hero[data-state="empty"] .bm-hero-label { color: var(--bm-muted); }
body.page-buyer-match .bm-hero-name {
  font-family: 'Geist', sans-serif;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--bm-ink);
  margin-bottom: 6px;
}
body.page-buyer-match .bm-hero[data-state="empty"] .bm-hero-name { color: rgba(13,23,18,0.4); font-weight: 700; }
body.page-buyer-match .bm-hero-tag {
  font-size: 13px;
  line-height: 1.4;
  color: var(--bm-ink-soft);
  max-width: 280px;
}
body.page-buyer-match .bm-hero[data-state="empty"] .bm-hero-tag { color: rgba(13,23,18,0.4); font-style: italic; }
body.page-buyer-match .bm-hero-radar { width: 180px; height: 180px; }
body.page-buyer-match .bm-hero-radar .bm-radar { width: 100%; height: 100%; }
body.page-buyer-match .bm-radar-grid {
  fill: rgba(13,23,18,0.02);
  stroke: rgba(13,23,18,0.08);
  stroke-width: 1;
}
body.page-buyer-match .bm-radar-grid#bmRadarG1 { fill: rgba(13,23,18,0.035); }
body.page-buyer-match .bm-radar-axis {
  stroke: rgba(13,23,18,0.08);
  stroke-width: 1;
}
body.page-buyer-match .bm-radar-shape {
  fill: url(#bmRadarGrad);
  stroke: var(--bm-green, #16A34A);
  stroke-width: 1.8;
  filter: drop-shadow(0 2px 4px rgba(22,163,74,0.18));
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
body.page-buyer-match .bm-radar-vertex {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}
body.page-buyer-match .bm-radar-vertex.is-leading {
  stroke: #fff;
  stroke-width: 2.5;
}
body.page-buyer-match .bm-radar-label {
  font-family: 'Geist', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  fill: var(--bm-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: fill 0.3s ease;
}
body.page-buyer-match .bm-radar-label.is-leading { fill: var(--bm-green, #16A34A); font-weight: 800; }
body.page-buyer-match .bm-identity-meta .is-empty { color: rgba(13,23,18,0.3); font-style: italic; font-weight: 500; }
body.page-buyer-match .bm-profile-row {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 22px;
  align-items: center;
  padding: 18px;
  background: #fafcfb;
  border: 1px solid rgba(13, 23, 18, 0.06);
  border-radius: 16px;
}
body.page-buyer-match .bm-portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
body.page-buyer-match .bm-portrait-frame {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
  border: 3px solid #fff;
  box-shadow: 0 8px 24px rgba(0,163,86,0.18), 0 0 0 2px rgba(0,163,86,0.14);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-buyer-match .bm-portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
body.page-buyer-match .bm-portrait[data-state="filled"] .bm-portrait-frame img { display: block; }
body.page-buyer-match .bm-portrait-placeholder {
  width: 56px;
  height: 56px;
  color: rgba(0,163,86,0.35);
}
body.page-buyer-match .bm-portrait[data-state="filled"] .bm-portrait-placeholder { display: none; }
body.page-buyer-match .bm-portrait-code {
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bm-green, #00BF62);
  padding: 3px 10px;
  background: var(--bm-green-soft, #DCFCE7);
  border-radius: 999px;
}
body.page-buyer-match .bm-blend {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
body.page-buyer-match .bm-blend-row {
  display: grid;
  grid-template-columns: 1fr 112px;
  gap: 14px;
  align-items: center;
}
body.page-buyer-match .bm-blend-row.is-secondary { opacity: 0.7; }
body.page-buyer-match .bm-blend-row.is-secondary.is-hidden { display: none; }
body.page-buyer-match .bm-blend-info { min-width: 0; }
body.page-buyer-match .bm-blend-label {
  font-family: 'Geist', sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bm-muted);
  margin-bottom: 4px;
}
body.page-buyer-match .bm-blend-name {
  font-family: 'Geist', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--bm-ink);
}
body.page-buyer-match .bm-blend-row.is-secondary .bm-blend-name { font-size: 15px; }
body.page-buyer-match .bm-blend-tag {
  font-size: 12px;
  color: var(--bm-ink-soft);
  line-height: 1.4;
  margin-top: 4px;
}
body.page-buyer-match .bm-blend-row.is-secondary .bm-blend-tag { font-size: 11px; }
body.page-buyer-match .bm-blend-meter {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
body.page-buyer-match .bm-blend-meter-bar {
  width: 100%;
  height: 8px;
  background: rgba(13,23,18,0.06);
  border-radius: 999px;
  overflow: hidden;
}
body.page-buyer-match .bm-blend-meter-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #22C55E 0%, var(--bm-green, #00BF62) 60%, var(--bm-green-bright, #00A356) 100%);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 6px rgba(0,191,98,0.3);
}
body.page-buyer-match .bm-blend-row.is-secondary .bm-blend-meter-fill {
  background: linear-gradient(90deg, #93C5FD 0%, #3B82F6 100%);
  box-shadow: 0 0 6px rgba(59,130,246,0.3);
}
body.page-buyer-match .bm-blend-meter-pct {
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--bm-green, #00BF62);
  letter-spacing: -0.02em;
}
body.page-buyer-match .bm-blend-row.is-secondary .bm-blend-meter-pct {
  color: #3B82F6;
  font-size: 13px;
}
body.page-buyer-match .bm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
body.page-buyer-match .bm-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--bm-line, #ECEEF0);
  border-radius: 12px;
  min-width: 0;
}
body.page-buyer-match .bm-stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bm-green-soft, #DCFCE7);
  color: var(--bm-green, #00BF62);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist', sans-serif;
  font-weight: 800;
  font-size: 10px;
  flex-shrink: 0;
}
body.page-buyer-match .bm-stat-icon svg { width: 16px; height: 16px; }
body.page-buyer-match .bm-stat-body { min-width: 0; }
body.page-buyer-match .bm-stat-value {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--bm-ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-buyer-match .bm-stat-value.is-empty { color: rgba(13,23,18,0.3); font-weight: 600; }
body.page-buyer-match .bm-stat-label {
  font-family: 'Geist', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bm-muted);
  margin-top: 1px;
}
body.page-buyer-match .bm-pillars {
  flex-shrink: 0;
  margin-top: 10px;
  padding: 10px 12px 9px;
  background: #ffffff;
  border: 1px solid var(--line, #ECEEF0);
  border-radius: 14px;
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  overflow: hidden;
  transition: opacity 0.4s ease 0.3s, max-height 0.4s ease, margin-top 0.4s ease, padding 0.4s ease, border-color 0.4s ease, visibility 0s linear 0.7s;
}
body.is-book-open .bm-pillars {
  opacity: 1;
  visibility: visible;
  max-height: 200px;
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 9px;
  border-color: var(--line, #ECEEF0);
  transition: opacity 0.4s ease 0.3s, max-height 0.4s ease, margin-top 0.4s ease, padding 0.4s ease, border-color 0.4s ease, visibility 0s linear 0s;
}
body.page-buyer-match .bm-pillars-label {
  font-family: 'Geist', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bm-green, #00BF62);
  margin-bottom: 7px;
}
body.page-buyer-match .bm-pillars-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
body.page-buyer-match .bm-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px 5px;
  background: #fff;
  border: 1px solid rgba(13,23,18,0.06);
  border-radius: 10px;
  transition: all 0.3s ease;
}
body.page-buyer-match .bm-pillar.is-active {
  background: linear-gradient(180deg, rgba(0,191,98,0.08) 0%, #fff 100%);
  border-color: rgba(0,163,86,0.32);
  box-shadow: 0 3px 10px rgba(0,163,86,0.12);
}
body.page-buyer-match .bm-pillar-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-buyer-match .bm-pillar-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
body.page-buyer-match .bm-pillar.is-active .bm-pillar-icon img { opacity: 1; }
body.page-buyer-match .bm-pillar-name {
  font-family: 'Geist', sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bm-ink-soft);
}
body.page-buyer-match .bm-pillar.is-active .bm-pillar-name { color: var(--bm-ink); }
body.page-buyer-match .bm-pillar-meter {
  width: 100%;
  height: 3px;
  background: rgba(13,23,18,0.06);
  border-radius: 999px;
  overflow: hidden;
}
body.page-buyer-match .bm-pillar-meter-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--bm-green, #00BF62), var(--bm-green-bright, #00A356));
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
body.page-buyer-match .bm-pillar-pct {
  font-family: 'Geist', sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  color: var(--bm-muted);
  letter-spacing: -0.01em;
}
body.page-buyer-match .bm-pillar.is-active .bm-pillar-pct { color: var(--bm-green, #00BF62); }
body.page-buyer-match .bm-canvas-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(13,23,18,0.05);
}
body.page-buyer-match .bm-readiness {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--bm-green-soft, #DCFCE7);
  border-radius: 999px;
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bm-green, #00BF62);
}
body.page-buyer-match .bm-readiness-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bm-green, #00BF62);
  animation: bmPulse 2s ease-in-out infinite;
  box-shadow: 0 0 8px var(--bm-green, #00BF62);
}
@keyframes bmPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}
body.page-buyer-match .bm-narrative {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 8px;
}
body.page-buyer-match .bm-narrative-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(13,23,18,0.05);
}
body.page-buyer-match .bm-narrative-row:last-child { border-bottom: none; }
body.page-buyer-match .bm-narrative-label {
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bm-muted);
}
body.page-buyer-match .bm-narrative-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--bm-ink);
  font-weight: 500;
}
body.page-buyer-match .bm-narrative-text.is-empty {
  color: rgba(13,23,18,0.3);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
}
body.page-buyer-match .bm-factor-block { padding-top: 4px; }
body.page-buyer-match .bm-factor-block-label {
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bm-muted);
  margin-bottom: 10px;
}
body.page-buyer-match .bm-factor-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
}
body.page-buyer-match .bm-factor-mini-row {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 10px;
  align-items: center;
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--bm-ink-soft);
}
body.page-buyer-match .bm-factor-mini-track {
  height: 5px;
  border-radius: 999px;
  background: rgba(13,23,18,0.06);
  overflow: hidden;
}
body.page-buyer-match .bm-factor-mini-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
body.page-buyer-match .bm-checks { padding-top: 4px; }
body.page-buyer-match .bm-checks-label {
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bm-muted);
  margin-bottom: 10px;
}
body.page-buyer-match .bm-checks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.page-buyer-match .bm-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--bm-ink);
}
body.page-buyer-match .bm-check-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(13,23,18,0.2);
  flex-shrink: 0;
  margin-top: 5px;
  transition: all 0.3s ease;
}
body.page-buyer-match .bm-check-item.is-set .bm-check-dot {
  background: var(--bm-green, #16A34A);
  border-color: var(--bm-green, #16A34A);
  box-shadow: 0 0 0 3px rgba(22,163,74,0.12);
}
body.page-buyer-match .bm-check-text { flex: 1; }
body.page-buyer-match .bm-check-text.is-empty { color: rgba(13,23,18,0.32); font-style: italic; font-weight: 500; }
body.page-buyer-match .bm-canvas-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(13,23,18,0.05);
}
body.page-buyer-match .bm-progress-mini {
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bm-muted);
}
@media (max-width: 820px) {
body.page-buyer-match .bm-hero { grid-template-columns: 1fr; text-align: center; }
body.page-buyer-match .bm-hero-radar { margin: 0 auto; }
body.page-buyer-match .bm-canvas { padding: 24px 22px; }
}
:root {
  --bm-green: var(--green, #00BF62);
  --bm-green-bright: var(--green-hover, #00A356);
  --bm-green-soft: var(--green-tint, #F0FDF4);
  --bm-green-line: var(--green-soft, #DCFCE7);
  --bm-blue: #2563EB;
  --bm-sage: var(--ink-soft, #4F555E);
  --bm-purple: #4338CA;
  --bm-pink: #BE5A5A;
  --bm-cyan: #0891B2;
  --bm-ink: var(--ink, #1A1F25);
  --bm-ink-soft: var(--ink-soft, #4F555E);
  --bm-muted: var(--ink-muted, #8B919A);
  --bm-line: var(--line, #ECEEF0);
  --bm-paper: var(--bg, #FFFFFF);
  --bm-paper-2: var(--bg-soft, #FAFBFA);
  --bm-bg: var(--bg-soft, #FAFBFA);
  --bm-shadow: 0 18px 44px rgba(26, 31, 37, 0.08);
  --bm-header-h: 85px;
  --bm-footer-h: 46px;
}
body.page-buyer-match {
  background: var(--bg-tint, #F0FDF4);
  color: var(--ink, #1A1F25);
}
body.page-buyer-match .site-header {
  height: var(--bm-header-h);
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid var(--line, #ECEEF0);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
body.page-buyer-match .header-inner {
  height: 100%;
}
body.page-buyer-match .bm-shell {
  background: var(--bg-tint, #F0FDF4);
  gap: clamp(16px, 1.7vw, 24px);
}
body.page-buyer-match .bm-question-panel, body.page-buyer-match .bm-report-panel {
  background: var(--bg, #FFFFFF);
  border: 1px solid var(--line, #ECEEF0);
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(26, 31, 37, 0.04), 0 20px 46px -28px rgba(26, 31, 37, 0.22);
  backdrop-filter: none;
}
body.page-buyer-match .bm-question-panel {
  
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 !important;
  position: relative;
}
body.page-buyer-match .bm-question-panel > * { position: relative; z-index: 1; }
body.page-buyer-match .bm-question-card {
  background: #ffffff;
  border: 1px solid var(--line, #ECEEF0);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(26, 31, 37, 0.04);
}
body.page-buyer-match .bm-option, body.page-buyer-match .bm-field input, body.page-buyer-match .bm-consent, body.page-buyer-match .bm-btn-back, body.page-buyer-match .bm-owner-item, body.page-buyer-match .bm-insight, body.page-buyer-match .bm-detail {
  background: var(--bg, #FFFFFF);
  border-color: var(--line, #ECEEF0);
}
body.page-buyer-match .bm-option:hover {
  border-color: var(--green-soft, #DCFCE7);
  background: var(--bg-tint, #F0FDF4);
  box-shadow: 0 14px 28px -22px rgba(26, 31, 37, 0.28);
}
body.page-buyer-match .bm-option.is-selected {
  border-color: var(--green, #00BF62);
  background: var(--bg-tint, #F0FDF4);
  box-shadow: 0 12px 28px -18px rgba(0, 191, 98, 0.32);
}
body.page-buyer-match .bm-option.is-selected::after {
  border-color: var(--green, #00BF62);
  background: var(--green, #00BF62);
}
body.page-buyer-match .bm-btn-next {
  background: linear-gradient(135deg, var(--green, #00BF62) 0%, var(--green-hover, #00A356) 100%);
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(0, 163, 86, 0.32), inset 0 1px 0 rgba(255,255,255,0.24);
}
body.page-buyer-match .bm-btn-next:not(:disabled):hover {
  background: linear-gradient(135deg, var(--green-hover, #00A356) 0%, #009249 100%);
}
body.page-buyer-match .bm-report-panel {
  background: #FFFFFF;
}
body.page-buyer-match .bm-paper {
  background: var(--bg, #FFFFFF);
  border: 1px solid var(--line, #ECEEF0);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(26, 31, 37, 0.04), 0 18px 40px -22px rgba(26, 31, 37, 0.14);
}
body.page-buyer-match .bm-paper::before {
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.55), transparent 30%);
  opacity: 1;
}
body.page-buyer-match .bm-paper::after {
  left: 0;
  right: 0;
  height: 3px;
  background: var(--green, #00BF62);
  opacity: 1;
}
body.page-buyer-match .bm-paper-top {
  border-bottom: 1px solid var(--line, #ECEEF0);
}
body.page-buyer-match .bm-paper-headline {
  letter-spacing: -0.04em;
  color: var(--ink, #1A1F25);
}
body.page-buyer-match .bm-feature-card {
  background: linear-gradient(135deg, var(--charcoal, #1A1F25) 0%, var(--charcoal-deep, #12161B) 100%);
  color: var(--on-dark, #FFFFFF);
  box-shadow: 0 18px 40px -18px rgba(18, 22, 27, 0.42);
}
body.page-buyer-match .bm-feature-card.is-empty {
  background: var(--bg-soft, #FAFBFA);
  color: var(--ink-muted, #8B919A);
  border: 1px solid var(--line, #ECEEF0);
}
body.page-buyer-match .bm-score-ring::after {
  background: var(--charcoal-deep, #12161B);
}
body.page-buyer-match .bm-feature-card.is-empty .bm-score-ring {
  background: conic-gradient(var(--line-strong, #D8DCE0) 0%, var(--line-soft, #F4F5F6) 0);
}
body.page-buyer-match .bm-feature-card.is-empty .bm-score-ring::after {
  background: var(--bg-soft, #FAFBFA);
}
body.page-buyer-match .bm-blank-line {
  background: linear-gradient(90deg, var(--green-soft, #DCFCE7), var(--line-soft, #F4F5F6));
}
body.is-complete .bm-paper {
  background: var(--bg, #FFFFFF);
}
body.is-complete .bm-paper::before {
  opacity: 1;
}
body.is-complete .bm-report-title::after {
  color: var(--ink-muted, #8B919A);
}
body.page-buyer-match .site-footer {
  
  background: transparent;
  border-top: none;
}
body.page-buyer-match .bm-foot-inner, body.page-buyer-match .bm-foot-inner a {
  color: var(--ink-muted, #8B919A);
}
body.page-buyer-match .bm-foot-inner a:hover {
  color: var(--green, #00BF62);
}
@media (max-width: 880px) {
body.page-buyer-match {
    background: var(--bg-soft, #FAFBFA);
  }
}
@media print {
body.page-buyer-match .site-header, body.page-buyer-match .site-footer, body.page-buyer-match .bm-question-panel, body.page-buyer-match .bm-report-bar { display: none !important; }
body.page-buyer-match { overflow: visible; background: #fff; }
body.page-buyer-match .bm-shell { display: block; height: auto; padding: 0; }
body.page-buyer-match .bm-report-panel { border: 0; box-shadow: none; padding: 0; }
body.page-buyer-match .bm-paper-spread { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.page-buyer-match .bm-paper { min-height: 720px; box-shadow: none; page-break-inside: avoid; }
}
body.page-buyer-match {
  background: var(--bg-tint, #F0FDF4) !important;
  overflow: hidden !important;
}
body.page-buyer-match .bm-shell {
  height: calc(100svh - var(--bm-header-h) - var(--bm-footer-h));
  padding: clamp(20px, 2.4vw, 32px) clamp(20px, 4vw, 56px);
  gap: clamp(20px, 2.2vw, 32px);
  align-items: stretch;
}
body.page-buyer-match .bm-question-panel {
  padding: 18px;
  min-height: 0;
}
body.page-buyer-match .bm-stage {
  align-items: stretch;
  min-height: 0;
}
body.page-buyer-match .bm-question-card {
  height: 100%;
  min-height: 0 !important;
  max-height: none;
  padding: 0;
}
body.page-buyer-match .bm-question-head {
  min-height: 78px;
  margin-bottom: 0;
  padding: 22px 32px 0;
}
body.page-buyer-match .bm-question-title {
  font-size: clamp(19px, 2.05vw, 26px);
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-buyer-match .bm-question-help {
  font-size: 13px;
  line-height: 1.45;
  
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}
body.page-buyer-match .bm-options {
  align-self: stretch;
  min-height: 0;
  width: 100%;
  padding: 22px 32px;
}
body.page-buyer-match .bm-options-grid {
  width: 100%;
}
body.page-buyer-match .bm-option {
  min-height: 74px;
  padding: 13px 14px;
  border-radius: 16px;
}
body.page-buyer-match .bm-options-grid.is-six .bm-option {
  min-height: 70px;
}
body.page-buyer-match .bm-options-grid.is-icons .bm-option {
  min-height: 116px;
  padding: 13px 14px;
}
body.page-buyer-match .bm-options-grid.is-icons.is-six .bm-option {
  min-height: 124px;
  padding: 12px 12px;
}
body.page-buyer-match .bm-option:hover {
  transform: none;
}
body.page-buyer-match .bm-option-title {
  font-size: 14px;
  margin-bottom: 4px;
}
body.page-buyer-match .bm-option-copy {
  font-size: 12px;
  line-height: 1.3;
}
body.page-buyer-match .bm-form-grid, body.page-buyer-match .bm-form-row {
  gap: 14px;
}
body.page-buyer-match .bm-field input {
  height: 44px;
}
body.page-buyer-match .bm-consent {
  padding: 10px;
  font-size: 12px;
}
body.page-buyer-match .bm-nav {
  padding: 14px 32px 20px;
  margin-top: auto;
}
body.page-buyer-match .bm-btn {
  min-height: 41px;
}
body.page-buyer-match .bm-report-panel {
  padding: 0;
}
body.page-buyer-match .bm-paper-spread {
  height: 100%;
  min-height: 0;
  gap: 10px;
}
body.page-buyer-match .bm-paper {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: clamp(12px, 1.3vw, 16px);
  border-radius: 18px;
  background: var(--bg, #FFFFFF);
  box-shadow: 0 1px 2px rgba(26, 31, 37, 0.04), 0 16px 34px -26px rgba(26, 31, 37, 0.28);
}
body.page-buyer-match .bm-paper::before {
  display: none;
}
body.page-buyer-match .bm-paper::after {
  height: 2px;
  background: var(--green, #00BF62);
}
body.page-buyer-match .bm-paper-top {
  padding-bottom: 7px;
}
body.page-buyer-match .bm-paper-label {
  font-size: 8.5px;
}
body.page-buyer-match .bm-paper-page {
  font-size: 8.5px;
}
body.page-buyer-match .bm-paper-headline {
  margin: 10px 0 6px;
  font-size: clamp(21px, 2.1vw, 30px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
body.page-buyer-match .bm-paper-lede {
  margin-bottom: 8px;
  font-size: 11.2px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.page-buyer-match .bm-owner-block {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
body.page-buyer-match .bm-owner-item {
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 10px;
}
body.page-buyer-match .bm-owner-key {
  font-size: 7.2px;
}
body.page-buyer-match .bm-owner-value {
  font-size: 10.2px;
}
body.page-buyer-match .bm-feature-card {
  min-height: 82px;
  padding: 12px;
  border-radius: 15px;
}
body.page-buyer-match .bm-feature-label {
  font-size: 8px;
}
body.page-buyer-match .bm-feature-name {
  font-size: 18px;
}
body.page-buyer-match .bm-feature-copy {
  font-size: 10.5px;
  line-height: 1.3;
}
body.page-buyer-match .bm-score-ring {
  width: 58px;
  height: 58px;
}
body.page-buyer-match .bm-score-ring::after {
  inset: 7px;
}
body.page-buyer-match .bm-ring-text {
  font-size: 13px;
}
body.page-buyer-match .bm-insight-grid {
  gap: 6px;
  margin-top: 8px;
}
body.page-buyer-match .bm-insight {
  min-height: 40px;
  padding: 7px 8px;
  border-radius: 10px;
}
body.page-buyer-match .bm-insight-label {
  font-size: 7.4px;
}
body.page-buyer-match .bm-insight-value {
  font-size: 10.3px;
  line-height: 1.18;
}
body.page-buyer-match .bm-section-title {
  margin: 8px 0 5px;
  font-size: 10.5px;
}
body.page-buyer-match .bm-section-title span:last-child {
  font-size: 7.8px;
}
body.page-buyer-match .bm-bar-list {
  gap: 5px;
  margin-top: 6px;
}
body.page-buyer-match .bm-bar-row {
  grid-template-columns: 62px 1fr 24px;
  gap: 6px;
}
body.page-buyer-match .bm-bar-name {
  font-size: 9px;
}
body.page-buyer-match .bm-track {
  height: 5px;
}
body.page-buyer-match .bm-bar-value {
  font-size: 8.8px;
}
body.page-buyer-match .bm-detail-list {
  gap: 5px;
}
body.page-buyer-match .bm-detail {
  padding: 7px 8px;
  border-radius: 10px;
}
body.page-buyer-match .bm-detail-key {
  font-size: 7.4px;
}
body.page-buyer-match .bm-detail-value {
  margin-top: 3px;
  font-size: 10.2px;
  line-height: 1.24;
}
body.page-buyer-match .bm-next-steps {
  padding-top: 8px;
  gap: 5px;
}
body.page-buyer-match .bm-step-line {
  grid-template-columns: 17px 1fr;
  gap: 6px;
  font-size: 9.8px;
  line-height: 1.25;
}
body.page-buyer-match .bm-step-line b {
  width: 17px;
  height: 17px;
  font-size: 8px;
}
@media (max-height: 760px) and (min-width: 1121px) {
body.page-buyer-match .bm-question-head { min-height: 112px; }
body.page-buyer-match .bm-question-title { font-size: clamp(22px, 2.25vw, 30px); }
body.page-buyer-match .bm-option { min-height: 64px; padding: 11px 12px; }
body.page-buyer-match .bm-options-grid.is-six .bm-option { min-height: 61px; }
body.page-buyer-match .bm-feature-card { min-height: 72px; }
body.page-buyer-match .bm-paper-lede { -webkit-line-clamp: 2; }
body.page-buyer-match .bm-next-steps .bm-step-line { font-size: 9px; }
}
@media (max-width: 880px) {
body.page-buyer-match { overflow: auto !important; }
body.page-buyer-match .bm-shell { height: auto; }
body.page-buyer-match .bm-paper-spread { height: auto; }
body.page-buyer-match .bm-paper { height: auto; overflow: visible; }
}
body.page-buyer-match .bm-report-panel {
  perspective: 1600px;
  overflow: hidden;
}
body.page-buyer-match .bm-book-stage {
  position: relative;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: stretch;
  perspective: 1800px;
  overflow: hidden;
  border-radius: 18px;
}
body.page-buyer-match .bm-book-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background:
    linear-gradient(90deg, #ffffff 0%, #f7faf8 49.5%, rgba(26,31,37,0.10) 50%, #ffffff 50.5%, #f7faf8 100%);
  box-shadow: inset 0 0 0 1px var(--line, #ECEEF0);
  opacity: 0;
  transition: opacity 0.35s ease 0.45s;
  pointer-events: none;
}
body.is-book-open .bm-book-stage::before { opacity: 1; }
body.page-buyer-match .bm-book-cover {
  position: absolute;
  inset: 0;
  z-index: 12;
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition:
    transform 1.05s cubic-bezier(0.18, 0.84, 0.2, 1),
    opacity 0.45s ease 0.72s,
    visibility 0s linear 1.12s;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(10,14,19,0.18), rgba(10,14,19,0.78)),
    radial-gradient(circle at 72% 20%, rgba(0,191,98,0.38), transparent 34%),
    linear-gradient(135deg, var(--charcoal, #1A1F25), var(--charcoal-deep, #12161B));
  color: #fff;
  box-shadow:
    0 24px 60px rgba(18, 22, 27, 0.30),
    inset 1px 0 0 rgba(255,255,255,0.20),
    inset -18px 0 36px rgba(0,0,0,0.28);
  overflow: hidden;
}
body.page-buyer-match .bm-book-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.20) 0, rgba(255,255,255,0.05) 2%, transparent 9%),
    linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.08) 45%, transparent 46%);
  pointer-events: none;
}
body.page-buyer-match .bm-book-cover::after {
  content: '';
  position: absolute;
  left: 22px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.36), transparent);
  opacity: 0.8;
}
body.page-buyer-match .bm-cover-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: clamp(26px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
body.page-buyer-match .bm-cover-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
body.page-buyer-match .bm-cover-mark {
  color: var(--green, #00BF62);
}
body.page-buyer-match .bm-cover-title {
  max-width: 11ch;
  margin: 0;
  font-family: var(--display, 'Geist', sans-serif);
  font-size: clamp(30px, 4.6vw, 56px);
  line-height: 0.9;
  letter-spacing: -0.07em;
  font-weight: 700;
  
  animation: bmCoverTitleEntrance 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s both;
}
@keyframes bmCoverTitleEntrance {
  0%   { transform: scale(0.3); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
body.page-buyer-match .bm-cover-title span {
  color: var(--green, #00BF62);
}
body.page-buyer-match .bm-cover-subtitle {
  max-width: 40ch;
  margin-top: 18px;
  color: rgba(255,255,255,0.72);
  font-size: clamp(12px, 1.1vw, 14px);
  line-height: 1.55;
}
body.page-buyer-match .bm-cover-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: end;
}
body.page-buyer-match .bm-cover-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--green, #00BF62), rgba(255,255,255,0.15), transparent);
  margin-bottom: 9px;
}
body.page-buyer-match .bm-cover-instruction {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.74);
}
body.page-buyer-match .bm-cover-badge {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.28);
  display: grid;
  place-items: center;
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(0,191,98,0.18);
}
body.page-buyer-match .bm-paper-spread {
  opacity: 0;
  transform: translateX(18px) scale(0.985);
  transition: opacity 0.45s ease 0.58s, transform 0.65s cubic-bezier(0.18, 0.84, 0.2, 1) 0.52s;
}
body.is-book-open .bm-book-cover {
  transform: rotateY(-112deg) translateX(-10px);
  opacity: 0;
  visibility: hidden;
}
body.is-book-open .bm-paper-spread {
  opacity: 1;
  transform: translateX(0) scale(1);
}
body:not(.is-book-open) .bm-report-state::after {
  content: ' · cover closed';
  color: var(--ink-muted, #8B919A);
}
body.is-book-open .bm-paper {
  background: #fff;
  border-color: var(--line, #ECEEF0);
}
body.is-book-open .bm-owner-value.is-empty, body.is-book-open .bm-insight-value.is-empty, body.is-book-open .bm-detail-value.is-empty {
  color: transparent !important;
  position: relative;
  min-height: 13px;
}
body.is-book-open .bm-owner-value.is-empty::after, body.is-book-open .bm-insight-value.is-empty::after, body.is-book-open .bm-detail-value.is-empty::after {
  content: '';
  position: absolute;
  left: 0;
  right: 15%;
  top: 50%;
  height: 1px;
  background: var(--line-soft, #F4F5F6);
}
body.page-buyer-match .bm-feature-card, body.page-buyer-match .bm-insight, body.page-buyer-match .bm-detail, body.page-buyer-match .bm-bar-row, body.page-buyer-match .bm-step-line {
  transition: opacity 0.35s ease, transform 0.35s ease, background 0.25s ease, border-color 0.25s ease;
}
body.is-book-open .bm-feature-card:not(.is-empty), body.is-book-open .bm-insight:has(.bm-insight-value:not(.is-empty)), body.is-book-open .bm-detail:has(.bm-detail-value:not(.is-empty)) {
  animation: bmInkIn 0.38s ease both;
}
@keyframes bmInkIn {
  from { opacity: 0.25; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
body.page-buyer-match .bm-book-stage .bm-paper-spread {
  height: 100%;
  min-height: 0;
}
body.page-buyer-match .bm-book-stage .bm-paper {
  min-height: 0;
}
@media (max-height: 760px) and (min-width: 1121px) {
body.page-buyer-match .bm-cover-inner { padding: 24px 28px; }
body.page-buyer-match .bm-cover-title { font-size: clamp(28px, 4vw, 44px); }
body.page-buyer-match .bm-cover-badge { width: 64px; height: 64px; font-size: 8.5px; }
}
@media (max-width: 880px) {
body.page-buyer-match .bm-book-cover { position: relative; min-height: 520px; margin-bottom: 12px; }
body.is-book-open .bm-book-cover { display: none; }
body.page-buyer-match .bm-paper-spread { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
body.page-buyer-match .bm-book-cover, body.page-buyer-match .bm-paper-spread { transition: none !important; }
body.is-book-open .bm-book-cover { display: none; }
}


/* ==========================================================================
   Page styles consolidated from benefits.html (scoped to body.page-considerations)
   ========================================================================== */
body.page-stages .wd { --wd-radius: 26px; --wd-pad: clamp(24px, 4vw, 54px); max-width: 1120px; margin: 0 auto; outline: none; }
body.page-considerations .cons-calc { background: var(--bg) !important; border-top: none !important; border-bottom: none !important; }
body.page-considerations .benefits-card-text .gv-conv { opacity: 0.72; white-space: nowrap; }
body.page-stages .wd-stage { position: relative; }
body.page-stages .wd-viewport {
  position: relative;
  width: 100%;
  height: clamp(460px, 60vw, 600px);
  border-radius: var(--wd-radius);
  overflow: hidden;
  background: var(--green-deep);
  box-shadow: 0 2px 4px rgba(26,31,37,0.05),
              0 36px 80px -34px rgba(20,40,30,0.65),
              inset 0 0 0 1px rgba(255,255,255,0.04);
}
body.page-stages .wd-slide {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transition: transform .62s cubic-bezier(.22,.61,.36,1), opacity .55s ease;
  will-change: transform, opacity;
}
body.page-stages .wd-slide.is-current { opacity: 1; transform: none; z-index: 2; pointer-events: auto; }
body.page-stages .wd-slide.enter-from-right { opacity: 0; transform: translateX(7%) scale(1.02); z-index: 3; transition: none; }
body.page-stages .wd-slide.enter-from-left { opacity: 0; transform: translateX(-7%) scale(1.02); z-index: 3; transition: none; }
body.page-stages .wd-slide.leave-to-left { opacity: 0; transform: translateX(-5%); z-index: 2; }
body.page-stages .wd-slide.leave-to-right { opacity: 0; transform: translateX(5%);  z-index: 2; }
body.page-stages .wd-icon {
  position: absolute; top: 42%; left: 50%; z-index: 1;
  width: 240px; height: 240px; transform: translate(-50%, -50%);
  fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 1.2;
  stroke-linejoin: round; stroke-linecap: round; pointer-events: none;
  transition: opacity .35s ease;
}
body.page-stages .wd-photo {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .6s ease;
  transform: scale(1.06); transform-origin: 60% 40%;
}
body.page-stages .wd-slide.is-current .wd-photo { animation: wd-kenburns 9s ease-out forwards; }
body.page-stages .wd-scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,14,11,0.40) 0%, rgba(8,14,11,0) 22%),
    linear-gradient(0deg, rgba(6,12,9,0.92) 0%, rgba(6,12,9,0.70) 20%, rgba(6,12,9,0.18) 48%, rgba(6,12,9,0) 70%);
}
body.page-stages .wd-eyebrow {
  position: absolute; top: var(--wd-pad); left: var(--wd-pad); z-index: 4;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px 8px 13px;
  border-radius: 100px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.20);
  font-family: var(--display); font-weight: 600; font-size: 11px;
  letter-spacing: 0.26em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,0.3);
}
body.page-stages .wd-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(0,191,98,0.16), 0 0 12px rgba(0,191,98,0.95);
}
body.page-stages .wd-body {
  position: absolute; left: 0; bottom: 0; z-index: 4;
  padding: var(--wd-pad);
  padding-right: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(54px, 6vw, 70px);
  max-width: min(980px, 94%);
}
body.page-stages .wd-title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(27px, 3.5vw, 44px); line-height: 1.06;
  letter-spacing: -0.022em; color: #fff; margin: 0 0 16px;
  white-space: nowrap;          
  text-shadow: 0 2px 24px rgba(0,0,0,0.4);
}
body.page-stages .wd-text {
  margin: 0; color: rgba(255,255,255,0.90);
  font-size: clamp(14px, 1.4vw, 16.5px); line-height: 1.6;
  max-width: 600px; text-shadow: 0 1px 14px rgba(0,0,0,0.32);
}
body.page-stages .wd-slide.is-current .wd-eyebrow { animation: wd-rise .7s .05s both cubic-bezier(.22,.61,.36,1); }
body.page-stages .wd-slide.is-current .wd-title { animation: wd-rise .7s .12s both cubic-bezier(.22,.61,.36,1); }
body.page-stages .wd-slide.is-current .wd-text { animation: wd-rise .7s .20s both cubic-bezier(.22,.61,.36,1); }
@keyframes wd-kenburns { from { transform: scale(1.06); } to { transform: scale(1.13); } }
@keyframes wd-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
body.page-stages .wd-stage { position: relative; }
body.page-stages .wd-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--green); color: #fff; display: grid; place-items: center;
  box-shadow: 0 14px 30px -10px rgba(0,191,98,0.9), 0 2px 6px rgba(0,0,0,0.25);
  transition: background .2s ease, transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
body.page-stages .wd-arrow:hover { background: var(--green-hover); transform: translateY(-50%) scale(1.08); box-shadow: 0 18px 36px -10px rgba(0,191,98,1); }
body.page-stages .wd-arrow:active { transform: translateY(-50%) scale(.94); }
body.page-stages .wd-arrow svg { width: 20px; height: 20px; }
body.page-stages .wd-arrow-prev { left: -26px; }
body.page-stages .wd-arrow-next { right: -26px; }
@media (max-width: 1180px) {
body.page-stages .wd-arrow-prev { left: 14px; }
body.page-stages .wd-arrow-next { right: 14px; }
}
body.page-stages .wd-counter {
  position: absolute; top: var(--wd-pad); right: var(--wd-pad); z-index: 5;
  display: inline-flex; align-items: baseline;
  padding: 7px 15px;
  border-radius: 100px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.20);
  font-family: var(--display); font-weight: 500; font-size: 12px;
  letter-spacing: 0.04em; color: rgba(255,255,255,0.6);
  font-variant-numeric: tabular-nums;
}
body.page-stages .wd-counter b { font-weight: 700; font-size: 14px; color: #fff; letter-spacing: 0.02em; }
body.page-stages .wd-counter span { color: rgba(255,255,255,0.40); margin: 0 6px; font-weight: 400; }
@media (max-width: 640px) {
body.page-stages .wd-viewport { height: clamp(440px, 86vw, 540px); }
body.page-stages .wd-body { max-width: 100%; padding-right: var(--wd-pad); }
body.page-stages .wd-arrow { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
body.page-stages .wd-slide { transition: opacity .3s ease; }
body.page-stages .wd-slide.enter-from-right, body.page-stages .wd-slide.enter-from-left, body.page-stages .wd-slide.leave-to-left, body.page-stages .wd-slide.leave-to-right { transform: none; }
body.page-stages .wd-slide.is-current .wd-photo, body.page-stages .wd-slide.is-current .wd-eyebrow, body.page-stages .wd-slide.is-current .wd-title, body.page-stages .wd-slide.is-current .wd-text { animation: none; }
body.page-stages .wd-photo { transform: none; }
}
body.page-stages .wd-debug { position: absolute; top: 54px; right: 14px; z-index: 8; max-width: 66%; font: 600 10px/1.4 ui-monospace, Menlo, Consolas, monospace; padding: 6px 9px; border-radius: 8px; color: #fff; background: rgba(0,0,0,0.6); word-break: break-all; }
body.page-stages .wd-debug.ok { background: rgba(11,80,55,0.85); }
body.page-stages .wd-debug.fail { background: rgba(120,30,30,0.9); }


/* ==========================================================================
   Page styles consolidated from insights.html (scoped to body.page-budget)
   ========================================================================== */
body.page-budget .budget-hero-note {
  margin: 16px auto 0;
  max-width: 560px;
  font-size: 12.5px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.55;
}
body.page-budget .budget-calc-section {
  padding: clamp(36px, 6vh, 64px) var(--pad) clamp(48px, 8vh, 80px);
  background: var(--bg-soft);
}
body.page-budget .cat-tabs {
  max-width: 1000px;
  margin: 0 auto clamp(20px, 3vw, 28px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
body.page-budget .cat-tab {
  appearance: none;
  position: relative;
  height: 124px;
  padding: 0;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  background: var(--ink);
  box-shadow: 0 1px 3px rgba(13,23,18,0.18);
  transition: box-shadow .2s ease, transform .1s ease;
}
body.page-budget .cat-tab:active { transform: scale(0.985); }
body.page-budget img.cat-tab-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 0;
  
  filter: grayscale(1) brightness(0.78);
  transition: filter .25s ease, transform .35s ease;
}
body.page-budget .cat-tab::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(13,23,18,0.45) 0%, rgba(13,23,18,0.4) 45%, rgba(13,23,18,0.7) 100%);
  transition: background .25s ease;
}
body.page-budget .cat-tab:hover img.cat-tab-icon { filter: grayscale(0.15) brightness(1); transform: scale(1.04); }
body.page-budget .cat-tab:hover::after {
  background: linear-gradient(180deg, rgba(13,23,18,0.2) 0%, rgba(13,23,18,0) 45%, rgba(13,23,18,0.6) 100%);
}
body.page-budget .cat-tab.is-active {
  box-shadow: 0 0 0 2px var(--green), 0 0 0 6px rgba(0,191,98,0.22), 0 16px 32px -10px rgba(0,191,98,0.55);
}
body.page-budget .cat-tab.is-active img.cat-tab-icon { filter: none; transform: none; }
body.page-budget .cat-tab.is-active::after {
  background: linear-gradient(180deg, rgba(0,70,36,0.1) 0%, rgba(0,0,0,0) 45%, rgba(0,40,21,0.62) 100%);
}
body.page-budget .cat-tab-label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px;
  text-align: center;
}
body.page-budget .cat-tab-name {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 1px 12px rgba(13,23,18,0.75);
}
body.page-budget .cat-tab-caption {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  text-shadow: 0 1px 8px rgba(13,23,18,0.75);
}
body.page-budget .cat-tab.is-active .cat-tab-caption { color: #fff; }
body.page-budget .tier-markers {
  position: relative;
  height: 34px;
  margin-top: 10px;
}
body.page-budget .tier-mark {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
body.page-budget .tier-mark-tick {
  width: 1px;
  height: 7px;
  background: var(--line-strong);
  transition: background .15s ease;
}
body.page-budget .tier-mark-label {
  font-size: 10.5px;
  color: var(--ink-muted);
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: color .15s ease;
}
body.page-budget .tier-mark:hover .tier-mark-label, body.page-budget .tier-mark.is-near .tier-mark-label { color: var(--green); }
body.page-budget .tier-mark:hover .tier-mark-tick, body.page-budget .tier-mark.is-near .tier-mark-tick { background: var(--green); }
body.page-budget .budget-headline {
  text-align: center;
  margin-bottom: clamp(18px, 3vw, 26px);
}
body.page-budget .budget-headline-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
body.page-budget .budget-headline-value {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(28px, 4.4vw, 40px);
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
body.page-budget .budget-headline-value .unit-name {
  display: block;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--green);
  margin-top: 6px;
}
body.page-budget .breakdown {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 2vw, 20px);
}
body.page-budget .phase {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(18px, 2.2vw, 24px);
  display: flex;
  flex-direction: column;
}
body.page-budget .phase-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
body.page-budget .phase-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-tint);
  color: var(--green);
}
body.page-budget .phase-icon svg { width: 20px; height: 20px; }
body.page-budget .phase-title {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
body.page-budget .phase-when {
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-top: 1px;
}
body.page-budget .line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
}
body.page-budget .line-label {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.4;
}
body.page-budget .line-label small {
  display: block;
  font-size: 11px;
  color: var(--ink-muted);
}
body.page-budget .line-amount {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body.page-budget .phase-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
}
body.page-budget .phase-total-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
body.page-budget .phase-total-value {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--green);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body.page-budget .cash-summary {
  max-width: 1000px;
  margin: clamp(16px, 2.4vw, 22px) auto 0;
  background: linear-gradient(135deg, var(--charcoal) 0%, var(--charcoal-deep) 100%);
  border-radius: 16px;
  padding: clamp(20px, 2.6vw, 28px) clamp(22px, 3vw, 34px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
body.page-budget .cash-summary-text { min-width: 0; }
body.page-budget .cash-summary-label {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  color: var(--on-dark);
  letter-spacing: -0.01em;
}
body.page-budget .cash-summary-sub {
  font-size: 12.5px;
  color: rgba(255,255,255,0.6);
  margin-top: 3px;
  line-height: 1.5;
}
body.page-budget .cash-summary-value {
  font-family: var(--display);
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--green);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body.page-budget .tax-note {
  max-width: 1000px;
  margin: clamp(14px, 2vw, 18px) auto 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--green-tint);
  border: 1px solid var(--green-soft);
  border-radius: 12px;
  font-size: 13px;
  color: var(--green-deep);
  line-height: 1.5;
}
body.page-budget .tax-note svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--green); }
body.page-budget .answer-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.8vw, 18px);
  margin-top: clamp(8px, 1.4vw, 14px);
}
body.page-budget .answer-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(18px, 2.2vw, 24px) clamp(16px, 2vw, 22px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow .25s ease, border-color .2s ease;
}
body.page-budget .answer-card-feature {
  background: linear-gradient(135deg, var(--charcoal) 0%, var(--charcoal-deep) 100%);
  border-color: transparent;
  box-shadow: 0 18px 44px -22px rgba(0,191,98,0.45);
}
body.page-budget .answer-card-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-tint);
  color: var(--green);
  margin-bottom: 12px;
}
body.page-budget .answer-card-feature .answer-card-icon {
  background: rgba(0,191,98,0.16);
  color: var(--green);
}
body.page-budget .answer-card-icon svg { width: 21px; height: 21px; }
body.page-budget .answer-card-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
body.page-budget .answer-card-feature .answer-card-label { color: rgba(255,255,255,0.72); }
body.page-budget .answer-card-value {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(26px, 3.6vw, 38px);
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-top: 6px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
body.page-budget .answer-card-feature .answer-card-value { color: var(--green); }
body.page-budget .answer-card-sub {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 8px;
  line-height: 1.45;
  max-width: 200px;
}
body.page-budget .answer-card-feature .answer-card-sub { color: rgba(255,255,255,0.6); }
body.page-budget .breakdown-disclosure {
  margin-top: clamp(16px, 2.4vw, 22px);
}
body.page-budget .breakdown-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto;
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
body.page-budget .breakdown-toggle:hover {
  border-color: var(--green);
  color: var(--green);
  background: var(--green-tint);
}
body.page-budget .breakdown-toggle svg {
  width: 15px; height: 15px;
  transition: transform .25s ease;
}
body.page-budget .breakdown-toggle.is-open svg { transform: rotate(180deg); }
body.page-budget .breakdown-panel {
  margin-top: clamp(16px, 2.4vw, 22px);
  animation: bk-reveal .35s ease;
}
@keyframes bk-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.page-budget .budget-disclaimer {
  max-width: 760px;
  margin: clamp(22px, 3vw, 30px) auto 0;
  text-align: center;
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-muted);
  line-height: 1.6;
  padding: 0 var(--pad);
}
body.page-budget .catalogue {
  max-width: 1000px;
  margin: 0 auto clamp(22px, 3vw, 30px);
}
body.page-budget .catalogue-head {
  text-align: center;
  margin-bottom: clamp(16px, 2.4vw, 22px);
}
body.page-budget .catalogue-eyebrow {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  margin-top: 7px;
}
body.page-budget #explore, body.page-budget #payment, body.page-budget #invest { scroll-margin-top: 80px; }
body.page-budget .opt-table th.opt-size-h { padding-top: 0; padding-bottom: 6px; }
body.page-budget .unit-mini {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 100px;
  vertical-align: middle;
}
body.page-budget .unit-mini .unit-opt {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 3px 9px;
  border-radius: 100px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
body.page-budget .unit-mini .unit-opt:hover { color: var(--green); }
body.page-budget .unit-mini .unit-opt.is-active {
  background: var(--green);
  color: #fff;
  box-shadow: 0 3px 8px -3px rgba(0,191,98,0.6);
}
body.page-budget .unit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 100px;
}
body.page-budget .unit-toggle-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-left: 10px;
}
body.page-budget .unit-opt {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px 13px;
  border-radius: 100px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink-soft);
  transition: background 0.15s ease, color 0.15s ease;
}
body.page-budget .unit-opt:hover { color: var(--green); }
body.page-budget .unit-opt.is-active {
  background: var(--green);
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(0,191,98,0.6);
}
body.page-budget .catalogue-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(20px, 3vw, 27px);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 0;
}
body.page-budget .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(12px, 1.8vw, 18px);
}
body.page-budget .unit-card {
  position: relative;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, box-shadow .25s ease, transform .15s ease;
}
body.page-budget .unit-card:hover {
  border-color: var(--green);
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(26,31,37,0.04), 0 18px 40px -22px rgba(26,31,37,0.28);
}
body.page-budget .unit-card.is-active {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green), 0 18px 40px -22px rgba(0,191,98,0.5);
}
body.page-budget .unit-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    var(--unit-photo, none),
    linear-gradient(135deg, #eef4f0 0%, #e3ece6 55%, #dde7e0 100%);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  overflow: hidden;
}
body.page-budget .unit-photo::before {
  
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,130,68,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,130,68,0.06) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 80%);
          mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 80%);
}
body.page-budget .unit-photo.has-cover::before {
  background-image: none;
  background: linear-gradient(0deg, rgba(13,23,18,0.42) 0%, rgba(13,23,18,0) 45%);
  -webkit-mask-image: none;
          mask-image: none;
}
body.page-budget .unit-photo-tag {
  position: relative;
  margin: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green-deep);
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(3px);
  padding: 4px 8px;
  border-radius: 999px;
}
body.page-budget .unit-photo-price {
  position: relative;
  margin: 10px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  background: var(--charcoal);
  padding: 5px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
body.page-budget .unit-card-body {
  padding: 13px 15px 15px;
}
body.page-budget .unit-card-name {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
body.page-budget .unit-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: 7px;
  font-size: 12px;
  color: var(--ink-muted);
}
body.page-budget .unit-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
body.page-budget .unit-card-meta svg { width: 13px; height: 13px; color: var(--ink-light); }
body.page-budget .unit-detail {
  --fp-wall: #2a2f36;
  --fp-room: #f6f8f7;
  --fp-wet: #eef3fb;
  --fp-out: #eef6ee;
  --fp-pool: #dff0f7;
  --fp-label: #4f555e;
  --fp-accent: #00824a;
  max-width: 1000px;
  margin: 0 auto clamp(20px, 3vw, 28px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(26,31,37,0.04), 0 12px 30px -18px rgba(26,31,37,0.16);
}
body.page-budget .unit-detail-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  align-items: stretch;
  
  min-height: 400px;
}
body.page-budget .flipbook-stage {
  position: relative;
  
  height: 100%;
  min-height: 400px;
  perspective: 2000px;
  perspective-origin: center center;
  background:
    var(--stage-photo, none),
    linear-gradient(135deg, #eef4f0 0%, #e3ece6 55%, #d7e2db 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
body.page-budget .flipbook-mount {
  width: 100%;
  height: 100%;
}
body.page-budget .fb-page {
  background: #fff;
  overflow: hidden;
}
body.page-budget .fb-page .book-face { position: absolute; inset: 0; }
body.page-budget .flipbook-mount.is-static { position: relative; }
body.page-budget .flipbook-mount.is-static .fb-page { position: absolute; inset: 0; }
body.page-budget .book-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  background:
    var(--book-photo, none),
    linear-gradient(135deg, #eef4f0 0%, #e3ece6 55%, #d7e2db 100%);
  background-size: cover;
  background-position: center;
}
body.page-budget .book-face::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,130,68,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,130,68,0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(130% 110% at 50% 0%, #000 35%, transparent 85%);
          mask-image: radial-gradient(130% 110% at 50% 0%, #000 35%, transparent 85%);
  pointer-events: none;
}
body.page-budget .book-face.has-photo::before {
  background-image: none;
  background:
    linear-gradient(180deg, rgba(13,23,18,0.28) 0%, rgba(13,23,18,0) 22%),
    linear-gradient(0deg, rgba(13,23,18,0.55) 0%, rgba(13,23,18,0) 38%);
  -webkit-mask-image: none;
          mask-image: none;
}
body.page-budget .book-face.has-photo .book-face-name {
  color: #fff;
  text-shadow: 0 1px 8px rgba(13,23,18,0.5);
}
body.page-budget .book-face.is-plan {
  background: var(--bg);
  justify-content: center;
  padding: clamp(16px, 2.2vw, 24px);
}
body.page-budget .book-face.is-plan::before { display: none; }
body.page-budget .book-face.is-plan-img {
  background:
    var(--book-photo, none),
    var(--bg);
  background-size: contain;
  background-origin: content-box;
  background-repeat: no-repeat;
  background-position: center top;
  justify-content: flex-start;
  padding: 16px 18px 84px;   
}
body.page-budget .book-face.is-plan-img::before { display: none; }
body.page-budget .book-face.is-plan-img .book-face-name {
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,0.9);
}
body.page-budget .book-face-top {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
body.page-budget .book-face-name {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 48px;            
  z-index: 1;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 26px);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
body.page-budget .book-face.is-plan .unit-detail-planwrap {
  position: relative;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
}
body.page-budget .book-face.is-plan .floorplan-label {
  position: relative;
}
body.page-budget .flip-ear {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  box-shadow: 0 4px 12px rgba(0,191,98,0.32), 0 1px 3px rgba(13,23,18,0.14);
  transition: opacity 0.35s ease, transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, left 0.18s ease, right 0.18s ease;
}
body.page-budget .flip-ear-prev { left: 8px; }
body.page-budget .flip-ear-next { right: 8px; }
body.page-budget .flip-ear:hover {
  opacity: 1;
  background: var(--green-hover);
  transform: translateY(-50%) scale(1.15);
  box-shadow: 0 6px 16px rgba(0,191,98,0.48), 0 2px 4px rgba(13,23,18,0.18);
}
body.page-budget .flip-ear-prev:hover { left: 6px; }
body.page-budget .flip-ear-next:hover { right: 6px; }
body.page-budget .flip-ear:active { transform: translateY(-50%) scale(0.92); }
body.page-budget .flip-ear.is-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-50%) scale(0.7);
}
body.page-budget .flip-ear svg { width: 13px; height: 13px; }
body.page-budget .flipbook-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(13,23,18,0.36);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
body.page-budget .flipbook-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  transition: background .2s ease, width .2s ease;
}
body.page-budget .flipbook-dot.is-active {
  background: var(--green);
  width: 16px;
  border-radius: 3px;
}
body.page-budget .unit-detail-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green-deep);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(3px);
  padding: 5px 9px;
  border-radius: 999px;
}
body.page-budget .unit-detail-close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 7;
  appearance: none;
  border: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: var(--ink-soft);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
body.page-budget .unit-detail-close:hover { background: #fff; color: var(--ink); }
body.page-budget .unit-detail-close svg { width: 15px; height: 15px; }
body.page-budget .unit-detail-info {
  padding: clamp(18px, 2.4vw, 26px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: auto;
  min-height: 0;
  overflow: visible;
}
body.page-budget .unit-detail-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(19px, 2.3vw, 25px);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 8px;
  flex-shrink: 0;
}
body.page-budget .unit-detail-intro {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 clamp(22px, 3vw, 30px);
  flex-shrink: 0;
}
body.page-budget .opt-table {
  width: 100%;
  border-collapse: collapse;
  flex-shrink: 0;
}
body.page-budget .opt-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
}
body.page-budget .opt-table th:last-child, body.page-budget .opt-table td:last-child { text-align: right; }
body.page-budget .opt-table td {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink);
  vertical-align: middle;
}
body.page-budget .opt-table tr:last-child td { border-bottom: none; }
body.page-budget .opt-table .opt-type {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
}
body.page-budget .opt-table .opt-size { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
body.page-budget .opt-table .opt-price {
  font-family: var(--display);
  font-weight: 800;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.page-budget .unit-detail-note {
  margin: 14px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-muted);
  flex-shrink: 0;
}
body.page-budget .unit-detail-planwrap {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
}
body.page-budget .unit-detail-planwrap svg { width: 100%; height: auto; display: block; }
body.page-budget .floorplan-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 9px 2px;
}
body.page-budget .spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 0;
  flex-shrink: 0;
}
body.page-budget .spec {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 12px;
  min-width: 0;
}
body.page-budget .spec-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
body.page-budget .spec-value {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
body.page-budget .spec.spec-wide { grid-column: span 3; }
body.page-budget .spec.spec-wide .spec-value { white-space: normal; }
body.page-budget .unit-detail-cta {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--ink-soft);
  flex-shrink: 0;
}
body.page-budget .unit-detail-cta svg { width: 16px; height: 16px; color: var(--green); flex-shrink: 0; }
@media (max-width: 860px) {
body.page-budget .unit-detail-grid { grid-template-columns: 1fr; height: auto; }
body.page-budget .unit-detail-photo { min-height: 240px; }
body.page-budget .flipbook-stage { height: 320px; }
body.page-budget .unit-detail-info { height: auto; overflow: visible; }
}
@media (max-width: 760px) {
body.page-budget .cat-tabs { grid-template-columns: repeat(2, 1fr); }
body.page-budget .breakdown { grid-template-columns: 1fr; }
body.page-budget .cash-summary { justify-content: center; text-align: center; }
body.page-budget .spec-grid { grid-template-columns: repeat(2, 1fr); }
body.page-budget .spec.spec-wide { grid-column: span 2; }
body.page-budget .answer-cards { grid-template-columns: 1fr; }
}
body.page-budget .cat-tab-more {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: inline-block;
  padding: 8px 16px;
  background: var(--green);
  color: #fff;
  border-radius: 100px;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  box-shadow:
    0 2px 6px rgba(0, 191, 98, 0.20),
    0 6px 18px -4px rgba(0, 191, 98, 0.30);
  pointer-events: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
body.page-budget .cat-tab:hover .cat-tab-more {
  background: var(--green-hover);
  transform: translateY(-1px) scale(1.04);
  box-shadow:
    0 3px 8px rgba(0, 191, 98, 0.28),
    0 12px 24px -4px rgba(0, 191, 98, 0.38);
}
body.page-budget .payplan-section {
  padding: clamp(36px, 6vh, 64px) var(--pad) clamp(48px, 8vh, 80px);
  background: var(--green-tint);
}
body.page-budget .payplan-caption {
  margin: 0 0 12px;
  max-width: 540px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-muted);
}
body.page-budget .assumptions-toggle {
  background: var(--green);
  color: #fff;
  border: none;
  padding: 11px 22px;
  border-radius: 100px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 20px -8px rgba(0,191,98,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
body.page-budget .assumptions-toggle:hover {
  background: var(--green-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -8px rgba(0,191,98,0.7), inset 0 1px 0 rgba(255,255,255,0.25);
}
body.page-budget .assumptions-toggle svg {
  width: 13px;
  height: 13px;
  opacity: 1;
}
body.page-budget .assumptions-toggle.is-open svg { transform: rotate(180deg); }
body.page-budget .payplan-timeline {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: clamp(16px, 2.4vw, 22px);
  padding: 14px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
}
body.page-budget .payplan-timeline svg {
  width: 20px;
  height: 20px;
  color: var(--green);
  flex-shrink: 0;
  margin-top: 1px;
}
body.page-budget .pt-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 2px;
}
body.page-budget .pt-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
body.page-budget .payplan-card {
  max-width: 1000px;
  margin: 0 auto clamp(16px, 2.4vw, 22px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(20px, 3vw, 30px);
  box-shadow: 0 24px 60px -40px rgba(13,23,18,0.4);
}
body.page-budget .payplan-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 6px;
}
body.page-budget .payplan-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(19px, 2.4vw, 26px);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 4px;
}
body.page-budget .payplan-sub {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
body.page-budget .payplan-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 18px;
  padding: 11px 14px;
  background: var(--green-tint);
  border: 1px solid var(--green-soft, rgba(0,191,98,0.25));
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--green-deep, #0a7d45);
}
body.page-budget .payplan-disclaimer svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
body.page-budget .payplan-options {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 22px;
}
body.page-budget .payopt {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .1s ease;
}
body.page-budget .payopt:hover { border-color: var(--green); }
body.page-budget .payopt:active { transform: scale(0.98); }
body.page-budget .payopt.is-active {
  border-color: var(--green);
  background: var(--green-tint);
  box-shadow: 0 0 0 1px var(--green), 0 10px 22px -14px rgba(0,191,98,0.5);
}
body.page-budget .payopt-type {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  line-height: 1.12;
}
body.page-budget .po-size { display: block; }
body.page-budget .po-kind {
  display: block;
  font-weight: 600;
  font-size: 11.5px;
  color: var(--ink-muted);
  letter-spacing: 0;
}
body.page-budget .payopt.is-active .po-kind { color: var(--green); }
body.page-budget .payopt.is-active .payopt-type { color: var(--green-deep); }
body.page-budget .payopt-price {
  font-size: 12px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
body.page-budget .payplan-headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
body.page-budget .payplan-unit {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
body.page-budget .payplan-usize { font-size: 13px; color: var(--ink-muted); margin-left: 6px; font-variant-numeric: tabular-nums; }
body.page-budget .payplan-price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
body.page-budget .payplan-bar {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: inset 0 0 0 1px rgba(13,23,18,0.06);
}
body.page-budget .payseg { height: 100%; transition: width .35s ease; }
body.page-budget .payseg-0 { background: #8ee0b4; }
body.page-budget .payseg-1 { background: #34c47d; }
body.page-budget .payseg-2 { background: var(--green); }
body.page-budget .payseg-3 { background: var(--green-deep, #0a7d45); }
body.page-budget .payplan-table { width: 100%; border-collapse: collapse; }
body.page-budget .payplan-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0 12px 9px 0;
  border-bottom: 1px solid var(--line);
}
body.page-budget .payplan-table th:nth-child(3), body.page-budget .payplan-table td:nth-child(3) { text-align: right; }
body.page-budget .payplan-table th:last-child, body.page-budget .payplan-table td:last-child { text-align: right; padding-right: 0; }
body.page-budget .payplan-table td {
  padding: 13px 12px 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink);
  vertical-align: top;
}
body.page-budget .payplan-table tbody tr:last-child td { border-bottom: none; }
body.page-budget .pay-ms {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
body.page-budget .pay-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 3px;
  margin-right: 9px;
}
body.page-budget .pay-dot.t0 { background: #8ee0b4; }
body.page-budget .pay-dot.t1 { background: #34c47d; }
body.page-budget .pay-dot.t2 { background: var(--green); }
body.page-budget .pay-dot.t3 { background: var(--green-deep, #0a7d45); }
body.page-budget .pay-when { color: var(--ink-soft); font-size: 13px; }
body.page-budget .pay-pct { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
body.page-budget .pay-amt {
  font-family: var(--display);
  font-weight: 800;
  color: var(--green-deep, #0a7d45);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.page-budget .pay-permonth {
  display: block;
  font-family: var(--font, inherit);
  font-weight: 600;
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 2px;
}
body.page-budget .pay-subnote {
  display: block;
  font-family: var(--font, inherit);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-muted);
  margin-top: 4px;
  max-width: 30ch;
}
body.page-budget .pay-row-fee td { background: var(--green-tint); border-bottom: none; }
body.page-budget .pay-row-fee td:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
body.page-budget .pay-row-fee td:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
body.page-budget .pay-row-fee .pay-amt, body.page-budget .pay-row-fee .pay-pct, body.page-budget .pay-row-fee .pay-when { color: var(--green-deep, #0a7d45); }
body.page-budget .payplan-group-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 22px 0 8px;
}
body.page-budget .payplan-group-title:first-of-type { margin-top: 4px; }
body.page-budget .payplan-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2.2vw, 22px);
  align-items: stretch;
  margin: 4px 0 4px;
}
body.page-budget .payplan-figure {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--line);
  min-height: 240px;
  display: flex;
}
body.page-budget .payplan-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
body.page-budget .pf-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: 18px 20px;
  color: #fff;
  background: linear-gradient(180deg, rgba(13,23,18,0.22) 0%, rgba(13,23,18,0.32) 42%, rgba(13,23,18,0.80) 78%, rgba(13,23,18,0.94) 100%);
}
body.page-budget .pf-desc {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 10px rgba(13,23,18,0.6);
}
body.page-budget .pf-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-shadow: 0 2px 16px rgba(13,23,18,0.7);
  margin-top: 2px;
}
body.page-budget .pf-name .pf-size {
  display: inline-block;
  margin-left: 9px;
  font-family: var(--font, inherit);
  font-weight: 600;
  font-size: 12.5px;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0;
  vertical-align: middle;
}
body.page-budget .pf-price {
  margin-top: 8px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(13,23,18,0.75);
  font-variant-numeric: tabular-nums;
}
body.page-budget .pf-price span {
  font-family: var(--font, inherit);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green);
  margin-right: 7px;
  vertical-align: middle;
}
body.page-budget .paycost {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(16px, 2.2vw, 22px);
  background: var(--bg);
}
body.page-budget .paycost-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 6px;
}
body.page-budget .paycost-title span {
  display: block;
  font-family: var(--font, inherit);
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0;
  margin-top: 2px;
}
body.page-budget .paycost-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
body.page-budget .paycost-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
body.page-budget .paycost-list li:first-child { border-top: none; }
body.page-budget .paycost-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
body.page-budget .paycost-label em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-muted);
}
body.page-budget .paycost-amt {
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.page-budget .paycost-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding: 12px 14px;
  margin-top: 12px;
  background: var(--green-tint);
  border-radius: 12px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  color: var(--green-deep, #0a7d45);
}
body.page-budget .paycost-total span:last-child { font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
body.page-budget .payplan-split { grid-template-columns: 1fr; }
body.page-budget .payplan-figure { min-height: 200px; }
}
body.page-budget .payplan-group-title span {
  font-family: var(--font, inherit);
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0;
  margin-left: 6px;
}
body.page-budget .pay-row-total td {
  background: var(--green-tint);
  border-bottom: none;
  font-weight: 700;
}
body.page-budget .pay-row-total td:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
body.page-budget .pay-row-total td:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
body.page-budget .pay-row-total .pay-amt, body.page-budget .pay-row-total .pay-when { color: var(--green-deep, #0a7d45); }
@media (max-width: 560px) {
body.page-budget .payplan-table.is-plan th:nth-child(3), body.page-budget .payplan-table.is-plan td:nth-child(3) { display: none; }
body.page-budget .pay-ms { white-space: normal; }
body.page-budget .payplan-table td, body.page-budget .payplan-table th { font-size: 13px; }
}
body.page-budget .paytiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
body.page-budget .paytile {
  position: relative;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 13px 14px;
  overflow: hidden;
}
body.page-budget .paytile::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
}
body.page-budget .paytile.t0::before { background: #8ee0b4; }
body.page-budget .paytile.t1::before { background: #34c47d; }
body.page-budget .paytile.t2::before { background: var(--green); }
body.page-budget .paytile.t3::before { background: var(--green-deep, #0a7d45); }
body.page-budget .paytile-pct {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
body.page-budget .paytile-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 7px;
}
body.page-budget .paytile-sub {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 1px;
  line-height: 1.35;
}
body.page-budget .paytile-amt {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  color: var(--green-deep, #0a7d45);
  margin-top: 9px;
  font-variant-numeric: tabular-nums;
}
body.page-budget .payplan-fees {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--green-tint);
  border: 1px solid var(--green-soft, rgba(0,191,98,0.25));
  border-radius: 12px;
  font-size: 13px;
  color: var(--green-deep, #0a7d45);
  line-height: 1.45;
}
body.page-budget .payplan-fees svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
body.page-budget .payplan-note {
  margin: 12px 2px 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-muted);
}
@media (max-width: 680px) {
body.page-budget .paytiles { grid-template-columns: repeat(2, 1fr); }
}
body.page-budget .payplan-options, body.page-budget .returns-options {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow: visible;
}
body.page-budget .payplan-options .payopt, body.page-budget .returns-options .payopt {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 12px;
  white-space: normal;
}
@media (max-width: 640px) {
body.page-budget .payplan-options, body.page-budget .returns-options { flex-wrap: wrap; }
body.page-budget .payplan-options .payopt, body.page-budget .returns-options .payopt { flex: 1 1 calc(50% - 4px); }
}
body.page-budget .returns-section {
  padding: clamp(36px, 6vh, 64px) var(--pad) clamp(48px, 8vh, 80px);
  background: var(--bg-soft);
}
body.page-budget .returns-card {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(20px, 3vw, 30px);
  box-shadow: 0 24px 60px -40px rgba(13,23,18,0.4);
}
body.page-budget .returns-options { margin-bottom: 20px; }
body.page-budget .returns-roi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: clamp(14px, 2vw, 20px);
  padding: 14px clamp(14px, 2vw, 20px);
  border-radius: 14px;
  background: var(--green-tint);
  border: 1px solid var(--green-soft, #DCFCE7);
}
body.page-budget .roi-item {
  text-align: center;
  padding: 2px 12px;
}
body.page-budget .roi-item + .roi-item { border-left: 1px solid var(--green-soft, #DCFCE7); }
body.page-budget .roi-k {
  font-family: var(--display);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 5px;
}
body.page-budget .roi-v {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--green-deep, #0a7d45);
  font-variant-numeric: tabular-nums;
}
body.page-budget .roi-item.is-lead .roi-v { color: var(--green); font-size: clamp(20px, 2.8vw, 28px); }
body.page-budget .roi-money {
  margin-top: 3px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 520px) {
body.page-budget .returns-roi { grid-template-columns: 1fr; gap: 10px; }
body.page-budget .roi-item + .roi-item { border-left: none; border-top: 1px solid var(--green-soft, #DCFCE7); padding-top: 10px; }
}
body.page-budget .returns-price-hint {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-muted);
}
body.page-budget #returnsPriceInput {
  flex: 1;
  width: 100%;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  padding: 0;
  text-align: center;
}
body.page-budget .returns-card .calc-display-stats { padding-left: clamp(4px, 1.5vw, 14px); }


/* ==========================================================================
   Page styles consolidated from privacy.html (scoped to body.page-privacy)
   ========================================================================== */
:root {
  --max-w-prose: 740px;
}
body.page-privacy #terms {
  scroll-margin-top: 120px;
}
body.page-privacy .policy-section-head {
  margin-bottom: 0;
}
body.page-privacy .policy-section-head .section-eyebrow {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 28px;
}
body.page-privacy #privacy-start {
  scroll-margin-top: 120px;
}
body.page-privacy main.privacy {
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(56px, 7vw, 96px);
}
body.page-privacy .prose-block { max-width: var(--max-w-prose); margin-left: auto; margin-right: auto; }
body.page-privacy section.policy { margin-bottom: clamp(40px, 5vw, 64px); }
body.page-privacy section.policy:last-of-type { margin-bottom: clamp(56px, 6vw, 80px); }
body.page-privacy main.privacy h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
body.page-privacy main.privacy h2 .num {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  flex-shrink: 0;
  letter-spacing: 0.04em;
}
body.page-privacy main.privacy p {
  margin-bottom: 14px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.7;
}
body.page-privacy main.privacy p:last-child { margin-bottom: 0; }
body.page-privacy main.privacy ul { margin: 16px 0; padding-left: 0; list-style: none; }
body.page-privacy main.privacy ul li {
  padding: 8px 0 8px 28px;
  position: relative;
  color: var(--ink-soft);
  line-height: 1.65;
  font-size: 15px;
}
body.page-privacy main.privacy ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 17px;
  width: 12px;
  height: 1px;
  background: var(--green);
}
body.page-privacy main.privacy strong { color: var(--ink); font-weight: 600; }
body.page-privacy main.privacy a {
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid var(--green-soft);
  padding-bottom: 1px;
  font-weight: 500;
  transition: border-color 0.25s ease;
}
body.page-privacy main.privacy a:hover { border-color: var(--green); }
body.page-privacy .callout {
  background: var(--green-tint);
  border-left: 2px solid var(--green);
  padding: 22px 28px;
  margin: 24px 0;
  font-size: 14.5px;
  border-radius: 4px;
}
body.page-privacy .callout p { color: var(--ink); margin-bottom: 0; }
body.page-privacy .contact-box {
  background: var(--green-tint);
  border: 1px solid var(--green-soft);
  padding: clamp(32px, 4vw, 48px);
  margin-top: clamp(48px, 6vw, 80px);
  margin-left: auto;
  margin-right: auto;
  border-radius: 14px;
  max-width: var(--max-w-prose);
}
body.page-privacy .contact-box .eyebrow { margin-bottom: 18px; }
body.page-privacy .contact-box h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.05;
  margin-bottom: 14px;
  letter-spacing: -0.03em;
  color: var(--ink);
}
body.page-privacy .contact-box h3 .accent { color: var(--green); }
body.page-privacy .contact-box p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 0;
  max-width: 60ch;
}
body.page-privacy .last-updated {
  display: inline-block;
  margin-top: 20px;
  font-size: 11px;
  color: var(--green);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}


/* ==========================================================================
   Page styles consolidated from result.html (scoped to body.page-result)
   ========================================================================== */
body.page-result .skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink, #1a1f1b); color: #fff;
  padding: 12px 20px; z-index: 100;
  text-decoration: none; border-radius: 0 0 6px 0;
}
body.page-result .skip-link:focus { left: 0; }
body.page-result .result-meaning {
  background: var(--green-tint, #f3f8f4);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 40px);
}
body.page-result .result-meaning-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green, #2d7a51);
  margin-bottom: 10px;
}
body.page-result .result-meaning h2 {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
  color: var(--ink, #1a1f1b);
  line-height: 1.15;
}
body.page-result .result-meaning-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}
body.page-result .result-meaning-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--green-soft, #d9e8de);
}
body.page-result .result-meaning-item:last-child { border-bottom: none; padding-bottom: 0; }
body.page-result .result-meaning-item:first-child { padding-top: 0; }
body.page-result .result-meaning-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--green, #2d7a51);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
body.page-result .result-meaning-icon svg { width: 12px; height: 12px; }
body.page-result .result-meaning-text strong {
  display: block;
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #1a1f1b);
  margin-bottom: 4px;
  line-height: 1.35;
}
body.page-result .result-meaning-text span {
  display: block;
  font-size: 14px;
  color: var(--ink-soft, #5a625b);
  line-height: 1.6;
}
body.page-result .result-process {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 40px);
}
body.page-result .result-process-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green, #2d7a51);
  margin-bottom: 10px;
}
body.page-result .result-process h2 {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 26px;
  color: var(--ink, #1a1f1b);
  line-height: 1.15;
}
body.page-result .result-process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
}
body.page-result .result-process-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.page-result .result-process-step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--green-tint, #f3f8f4);
  color: var(--green, #2d7a51);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display, 'Geist', sans-serif);
  font-weight: 600;
  font-size: 14px;
  border: 1.5px solid var(--green, #2d7a51);
}
body.page-result .result-process-step.is-current .result-process-step-num {
  background: var(--green, #2d7a51);
  color: #fff;
}
body.page-result .result-process-step h3 {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink, #1a1f1b);
}
body.page-result .result-process-step p {
  font-size: 13.5px;
  color: var(--ink-soft, #5a625b);
  line-height: 1.6;
  margin: 0;
}
body.page-result .result-process-step-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green, #2d7a51);
  margin-top: 4px;
}
@media (max-width: 720px) {
body.page-result .result-process-steps { grid-template-columns: 1fr; gap: 18px; }
body.page-result .result-meaning-item { grid-template-columns: 24px 1fr; gap: 12px; }
}
body.page-result .result-bars-tier {
  margin-bottom: 22px;
}
body.page-result .result-bars-tier:last-child { margin-bottom: 0; }
body.page-result .result-bars-tier-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft, #5a625b);
  margin-bottom: 10px;
}
body.page-result .result-actions-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}
body.page-result .result-actions-footer button, body.page-result .result-actions-footer a {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.12);
  color: var(--ink-soft, #5a625b);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.page-result .result-actions-footer button:hover, body.page-result .result-actions-footer a:hover {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.2);
  color: var(--ink, #1a1f1b);
}
body.page-result .result-actions-footer svg {
  width: 14px; height: 14px;
}
body.page-result .result-confirm-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  padding: 20px;
}
body.page-result .result-confirm-modal {
  background: #fff;
  border-radius: 14px;
  padding: 28px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
body.page-result .result-confirm-modal h3 {
  font-family: var(--display, 'Geist', sans-serif);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--ink, #1a1f1b);
}
body.page-result .result-confirm-modal p {
  font-size: 14.5px;
  color: var(--ink-soft, #5a625b);
  line-height: 1.6;
  margin: 0 0 24px 0;
}
body.page-result .result-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
@media print {
body.page-result .site-header, body.page-result .site-footer, body.page-result .result-allscores-toggle, body.page-result .result-consent-actions, body.page-result .result-actions-footer, body.page-result .skip-link { display: none !important; }
body.page-result .result-allscores-panel { display: block !important; }
body { background: #fff; }
body.page-result main { display: block !important; }
body.page-result section { page-break-inside: avoid; }
body.page-result a { text-decoration: none; color: inherit; }
}
@media (prefers-reduced-motion: reduce) {
body.page-result .fade-in { transition: none !important; }
}

/* =================================================================
   Hero / page-hero TOC buttons — equal width + tidy mobile stacking
   Applies only to the 3-button table-of-contents (home, profiles,
   process, insights, benefits, about). The single-button result-page
   variant is left untouched via :has(:nth-child(3)).
   ================================================================= */
.guide-toc:has(.guide-toc-link:nth-child(3)) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
}
.guide-toc:has(.guide-toc-link:nth-child(3)) .guide-toc-link {
  width: 100%;
  justify-content: center;
  text-align: center;
}
@media (max-width: 600px) {
  .guide-toc:has(.guide-toc-link:nth-child(3)) {
    grid-template-columns: 1fr;
    max-width: 340px;
  }
}

/* =================================================================
   Mobile header — protect the logo, compact the Assessment CTA
   Keeps the logo at full size and stops it being squeezed by the
   currency picker, Assessment button, and menu sitting beside it.
   ================================================================= */
html { overflow-x: clip; }
@media (max-width: 640px) {
  .header-inner { gap: 10px; }
  nav.site-nav { gap: 10px; min-width: 0; }
  nav.site-nav .nav-cta { padding: 8px 13px; font-size: 11px !important; }
  nav.site-nav .nav-cta svg { display: none; }
}

/* =================================================================
   Profiles — framework equation: keep the three boxes at natural
   height when stacked on mobile. They were using flex:1 1 0, which
   collapsed them to thin lines and left the + / = operators stranded.
   ================================================================= */
@media (max-width: 720px) {
  .framework-block { flex: 0 0 auto; width: 100%; }
}

/* =================================================================
   Benefits — "Why Dubai" carousel: lift the prev/next arrows up onto
   the skyline part of the slide on mobile so they don't cover the title.
   ================================================================= */
@media (max-width: 640px) {
  body.page-stages .wd-arrow { top: 36%; }
}

/* =================================================================
   Buyer file — "How your answers scored" page: mobile reflow (pass 1).
   On phones the ranked rows were flexed to fill a fixed-height card,
   so the avatars overflowed their rows and collided, and the top-match
   box crowded in beside the list. On narrow screens we give the rows
   their natural height with uniformly sized avatars, and stack the
   top-match box into a single column so nothing overlaps.
   ================================================================= */
@media (max-width: 640px) {
  body.page-buyer-match .bm-distribution-stack {
    flex: 0 0 auto;
    margin-top: 12px;
    margin-bottom: 12px;
  }
  body.page-buyer-match .bm-distribution-rank {
    flex: 0 0 auto;
    min-height: 0 !important;
    grid-template-columns: 42px 1fr auto;
    gap: 10px;
    padding: 7px 4px;
  }
  body.page-buyer-match .bm-distribution-rank-avatar,
  body.page-buyer-match .bm-distribution-rank.is-rank-1 .bm-distribution-rank-avatar,
  body.page-buyer-match .bm-distribution-rank.is-rank-2 .bm-distribution-rank-avatar,
  body.page-buyer-match .bm-distribution-rank.is-rank-3 .bm-distribution-rank-avatar,
  body.page-buyer-match .bm-distribution-rank.is-rank-4 .bm-distribution-rank-avatar,
  body.page-buyer-match .bm-distribution-rank.is-rank-5 .bm-distribution-rank-avatar,
  body.page-buyer-match .bm-distribution-rank.is-rank-6 .bm-distribution-rank-avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }
  body.page-buyer-match .bm-distribution-rank-avatar img {
    width: 100%; height: 100%; object-fit: cover;
  }
  body.page-buyer-match .bm-distribution-combo {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 14px;
  }
  body.page-buyer-match .bm-distribution-combo-visual {
    justify-content: center;
  }
}

/* =================================================================
   Buyer file — chapter pages (Goal, Budget, Financing, Property,
   Timeline): the hero image is locked to 200px, which on the shorter
   mobile card leaves no room for the second answer row and clips it.
   Cap the hero shorter on phones so both rows fit. Scoped with :not()
   so the deep-dive banner images (e.g. the scored page) are untouched.
   ================================================================= */
@media (max-width: 640px) {
  body.page-buyer-match .bm-chapter-img:not(.bm-deepdive-img) {
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;
  }
  body.page-buyer-match .bm-chapter-img-wrap:not(.bm-deepdive-img-wrap) {
    margin-top: 14px;
    margin-bottom: 10px;
  }
}

/* =================================================================
   Buyer file — chapter pages: compact the answer rows on mobile so
   every row fits the shorter card. These rows are normally locked to
   a 72px minimum and flex to fill a tall desktop card; on phones that
   pushes the third row off the bottom. Here we let them take their
   natural compact height and stack from the top.
   ================================================================= */
@media (max-width: 640px) {
  body.page-buyer-match .bm-chapter-row {
    flex: 0 0 auto;
    min-height: 0;
    padding: 8px 0 8px 8px;
    row-gap: 3px;
  }
  body.page-buyer-match .bm-chapter-icon-tile {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }
}

/* =================================================================
   Buyer file — disable the staggered row reveal animations on mobile.
   On phones these slow reveals can leave a row looking half-rendered
   (e.g. when navigating Back to a question), so render rows instantly
   at their settled state. The "pending" dim for the current question
   is preserved.
   ================================================================= */
@media (max-width: 640px) {
  body.page-buyer-match .bm-chapter-row,
  body.page-buyer-match .bm-chapter-row .bm-chapter-row-question,
  body.page-buyer-match .bm-chapter-row .bm-chapter-row-content,
  body.page-buyer-match .bm-chapter-row .bm-chapter-row-value,
  body.page-buyer-match .bm-chapter-row .bm-chapter-row-copy,
  body.page-buyer-match .bm-chapter-row .bm-chapter-icon-tile {
    animation: none !important;
    transform: none !important;
    opacity: 1;
  }
  body.page-buyer-match .bm-chapter-row.is-pending { opacity: 0.5; }
}

/* =================================================================
   Footer brand wordmark. The footer markup uses .footer-brand-title
   ("Demara Estate") but it had no styling, so it rendered as small
   dim body text instead of a brand wordmark. Style it to read as the
   brand name on the dark footer.
   ================================================================= */
.footer-brand-title {
  font-family: 'Geist', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--footer-text-strong, #fff);
  margin: 0 0 16px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* =================================================================
   Assessment on small screens (< 880px): hide the buyer-file flipbook
   report and its booklet-pointing hints. The question flow, Back/Next,
   review summary, contact form, and Submit all live in the question
   panel, so the path to submit stays intact. The flipbook returns on
   wider screens. Width-based: a phone or a shrunk browser triggers it.
   ================================================================= */
@media (max-width: 880px) {
  body.page-buyer-match .bm-report-panel { display: none !important; }
  body.page-buyer-match .bm-flip-hint,
  body.page-buyer-match .bm-submit-hint,
  body.page-buyer-match .bm-result-hint { display: none !important; }
}