/* ==========================================================================
   RealPlus website: shared stylesheet
   One stylesheet for every page. Tokens come from the RealPlus Project
   Knowledge brand guidelines (section 4). Mobile-first: base styles are for
   phones; min-width media queries add the tablet and desktop layouts.
   ========================================================================== */

/* ---------- 0. Fonts ----------
   Self-hosted, on purpose. Loading these from api.fontshare.com and
   fonts.googleapis.com cost four separate origins in two serial chains — a 1KB
   stylesheet had to arrive before its font files could start, twice over — and
   put mobile Largest Contentful Paint at 4.7s against a 2.5s target. Served from
   our own origin they reuse the connection that already fetched this stylesheet.

   Licences are beside the files in assets/fonts/. The ITF Free Font License
   permits and recommends self-hosting (section 01); JetBrains Mono is OFL 1.1.

   url() is relative to this file, not to the page.
   ========================================================================== */
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* One variable file covers both weights — Google serves the same file for 400
   and 500, so shipping it twice would only cost a second download. */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. Design tokens ---------- */
:root {
  /* Brand */
  --brand-navy: #1e458a;   /* primary: headlines, buttons, small brand text */
  --brand-blue: #4165af;   /* Turkish Blue: product word, accents; passes contrast at any size (5.7:1) */
  --brand-light: #9dbbeb;  /* accents on dark; never text on white */
  --brand-tint: #e3ecfb;   /* tinted panels behind navy text */

  /* Neutrals */
  --ink-900: #121926;      /* body text, dark backgrounds */
  --ink-700: #364152;      /* Ink 700: supporting text on the website (card descriptions, page intros); light backgrounds only */
  --ink-600: #4b5565;      /* secondary text */
  --ink-500: #697586;      /* captions and labels (white backgrounds only) */
  --line-200: #eaecf0;     /* hairlines */
  --line-dash: var(--card-border);    /* placeholder outlines */
  --line-dark: #2a3446;    /* Line dark: borders and dividers on dark surfaces */
  --brand-smoke: #f2f2f3;  /* White Smoke: page and panel backgrounds */
  --gray-050: #f9fafb;     /* Gray 050 (guide token; backgrounds use --brand-smoke) */
  --brand-aqua: #23c3ed;   /* Neon Aqua Blue */
  --brand-mint: #00a66a;   /* Mint Leaf */
  --green-deep: #1f7a47;   /* Deeper green */
  --green-tint: #eef8f2;   /* Pale green tint */
  --white: #ffffff;

  /* Semantic (these are what components use) */
  --bg: var(--white);
  --bg-alt: var(--brand-smoke);
  --surface: var(--white);
  --text: var(--ink-900);
  --text-muted: var(--ink-600);
  --text-subtle: var(--ink-500);
  --border: var(--line-200);

  /* Type */
  --font-sans: "Satoshi", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Layout */
  --content-max: 1320px; /* page content width; header and footer run full width */
  --gutter: 20px;
  --section-y: 56px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --shadow-lift: 0 16px 40px rgba(18, 25, 38, 0.08);
  --header-h: 76px;

  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Dark tokens are defined for later use. The marketing site ships light
   (html has data-theme="light"), per the brand guide: dark mode is optional
   for marketing and required only for API docs. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d121c; --bg-alt: #121926; --surface: #1a2335;
    --text: #ffffff; --text-muted: #d4e0f5; --text-subtle: #9dbbeb; --border: #2a3446;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d121c; --bg-alt: #121926; --surface: #1a2335;
  --text: #ffffff; --text-muted: #d4e0f5; --text-subtle: #9dbbeb; --border: #2a3446;
  color-scheme: dark;
}

@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 60px; } }
@media (min-width: 1600px) { :root { --gutter: 80px; } }
@media (min-width: 1024px) { :root { --section-y: 88px; } }
@media (min-width: 1440px) { :root { --header-h: 108px; } }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--brand-navy); }
a:hover { color: var(--ink-900); }
button, input { font: inherit; }

:focus-visible { outline: 3px solid var(--brand-navy); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible { outline-color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--brand-navy); color: var(--white); padding: 12px 16px; border-radius: var(--radius-sm);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); color: var(--white); }

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

/* ---------- 3. Layout helpers ---------- */
/* .container: page content, capped at --content-max and centered.
   .container--wide: header and footer, full width with the same side gutter.
   At 1440px both edges line up (1440 - 2 x 60 = 1320); wider screens keep
   content centered while the header and footer stay anchored to the edges. */
.container { width: min(var(--content-max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.container--wide { width: calc(100% - 2 * var(--gutter)); max-width: none; }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }
.section--tint { background: var(--brand-tint); }
.section--navy { background: var(--brand-navy); color: var(--white); }
.section--ink { background: var(--ink-950); color: var(--white); }

.section-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.section-head__text { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
@media (min-width: 900px) {
  .section-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; }
}

/* ---------- 4. Type ---------- */
.h-display { font-size: clamp(42px, 7vw, 72px); line-height: 1.02; letter-spacing: -0.02em; font-weight: 700; color: var(--brand-navy); }
.h-section { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; letter-spacing: -0.012em; font-weight: 700; color: var(--brand-navy); }
.on-dark .h-section { color: var(--white); }
.h-cta { font-size: clamp(40px, 5.5vw, 60px); line-height: 1; letter-spacing: -0.016em; font-weight: 700; }
.lede { font-size: 17px; line-height: 1.6; color: var(--text-muted); }
@media (min-width: 1024px) { .lede { font-size: 18px; } }
.label { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-navy); }
.on-dark .label { color: var(--white); }
.text-link { font-size: 16px; font-weight: 700; color: var(--brand-navy); text-decoration: none; white-space: nowrap; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.num { font-variant-numeric: tabular-nums; }

/* Product name lockup: "RealPlus" Bold navy + product word Medium blue, same size.
   Blue is only allowed at 24px+; smaller uses of the lockup use .lockup--mono. */
.lockup { white-space: nowrap; letter-spacing: -0.01em; }
.lockup__brand { font-weight: 700; color: var(--brand-navy); }
.lockup__product { font-weight: 500; color: var(--brand-blue); }
.lockup__product--one { letter-spacing: 0.08em; }
.lockup--mono .lockup__brand, .lockup--mono .lockup__product { color: inherit; }

/* The "+" motif from the logo, used quietly */
.plus { width: 12px; height: 12px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; color: var(--brand-blue); }
.plus--lg { width: 16px; height: 16px; }
.on-dark .plus, .plus--light { color: var(--brand-light); }

.plus-list { display: flex; flex-direction: column; gap: 12px; }
.plus-list li { display: flex; align-items: flex-start; gap: 12px; }
.plus-list .plus { margin-top: 0.45em; }

/* Icon tile: a line icon on the brand tint, used to make cards scannable */
.icon-tile {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 12px; background: var(--brand-tint); color: var(--brand-navy);
}
.icon-tile svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border-radius: var(--radius-sm);
  font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer;
  white-space: nowrap; border: 1.5px solid transparent; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--brand-navy); color: var(--white); }
.btn--primary:hover { background: var(--navy-hover); color: var(--white); }
.btn--secondary { background: var(--white); color: var(--brand-navy); border-color: var(--brand-navy); }
.btn--secondary:hover { background: var(--brand-tint); color: var(--brand-navy); }
.btn--inverse { background: var(--white); color: var(--brand-navy); }
.btn--inverse:hover { background: var(--brand-tint); color: var(--brand-navy); }
.btn--lg { min-height: 56px; padding: 0 32px; font-size: 17px; }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 15px; }

/* ---------- 6. Placeholder blocks (remove as real assets arrive) ---------- */
.ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 16px; background: var(--brand-smoke); border: 1px dashed var(--line-dash);
  border-radius: var(--radius-md); color: var(--ink-600); font-size: 13px; font-weight: 500;
}
.ph--tint { background: var(--brand-tint); border-color: var(--brand-blue); color: var(--brand-navy); }

/* ---------- 7. Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--white); border-bottom: 1px solid var(--line-200);
}
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); }
.site-header__logo { display: flex; align-items: center; }
.site-header__logo { flex-shrink: 0; }
.site-header__logo img { max-width: none; height: 46px; width: auto; transform: translateY(-10%); } /* the logo file has extra space above the letters */
.site-nav { display: none; }
.site-header__actions { display: none; }
.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--line-200); border-radius: var(--radius-sm);
  background: var(--white); color: var(--brand-navy); cursor: pointer;
}
.menu-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-menu { border-top: 1px solid var(--line-200); background: var(--white); padding: 12px 0 24px; }
.mobile-menu[hidden] { display: none; }
.mobile-menu__links { display: flex; flex-direction: column; }
.mobile-menu__links a { display: block; padding: 12px 0; font-size: 18px; font-weight: 500; color: var(--ink-900); text-decoration: none; border-bottom: 1px solid var(--line-200); }
.mobile-menu__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

@media (min-width: 1440px) {
  .site-header__logo img { height: 70px; }
  .site-nav { display: flex; gap: 32px; }
  .site-nav a { white-space: nowrap; font-size: 16px; font-weight: 500; color: var(--ink-900); text-decoration: none; }
  .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--brand-navy); text-decoration: underline; text-underline-offset: 6px; }
  .site-header__actions { display: flex; align-items: center; gap: 24px; }
  .site-header__actions .text-link { font-size: 15px; font-weight: 500; }
  .menu-toggle, .mobile-menu { display: none !important; }
}

/* ---------- 8. Hero ---------- */
.hero { padding-top: 40px; text-align: center; }
.hero__inner { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.hero__actions { display: flex; flex-direction: column; gap: 10px; width: 100%; }
@media (min-width: 640px) {
  .hero__actions { flex-direction: row; justify-content: center; width: auto; }
}
@media (min-width: 1024px) { .hero { padding-top: 72px; } }

/* Experience / Innovation split. The seam is a zero-size grid track that
   holds the "+" badge, so it sits on the join at every width. */
.xi { padding-block: 40px 48px; }
.xi__grid { display: grid; grid-template-rows: auto 0 auto; }
.xi__panel { display: flex; flex-direction: column; gap: 14px; padding: 28px 24px 40px; }
.xi__panel--experience { background: var(--brand-tint); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.xi__panel--innovation { background: var(--ink-950); color: var(--white); border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding-top: 40px; padding-bottom: 28px; }
.xi__panel--innovation .label { color: var(--brand-light); }
.xi__statement { font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; color: var(--brand-navy); }
.xi__body { font-size: 16px; line-height: 1.5; color: var(--ink-900); max-width: 460px; }
.xi__headline { font-size: 24px; line-height: 1.25; font-weight: 700; }
.xi__panel--innovation .plus-list { font-size: 15px; font-weight: 500; gap: 10px; }
.xi__seam { position: relative; z-index: 1; }
.xi__badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 999px; background: var(--white);
  box-shadow: 0 4px 16px rgba(18, 25, 38, 0.16);
  display: flex; align-items: center; justify-content: center; color: var(--brand-navy);
}
.xi__badge .plus { width: 20px; height: 20px; color: var(--brand-navy); }
@media (min-width: 900px) {
  .xi { padding-block: 64px 72px; }
  .xi__grid { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr); min-height: 420px; }
  .xi__panel { padding: 48px; gap: 18px; }
  .xi__panel--experience { padding-right: 72px; border-radius: var(--radius-xl) 0 0 var(--radius-xl); }
  .xi__panel--innovation { padding-left: 72px; border-radius: 0 var(--radius-xl) var(--radius-xl) 0; gap: 20px; }
  .xi__statement { font-size: 34px; letter-spacing: -0.015em; }
  .xi__body { font-size: 18px; }
  .xi__headline { font-size: 28px; }
  .xi__panel--innovation .plus-list { font-size: 16px; gap: 12px; }
  .xi__badge { width: 64px; height: 64px; }
  .xi__badge .plus { width: 24px; height: 24px; }
}

/* ---------- 9. Stats ---------- */
.stats { padding-block: 40px 48px; background: var(--bg-alt); border-top: 1px solid var(--line-200); border-bottom: 1px solid var(--line-200); }
.stats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.stats__grid { margin-bottom: 0; }
.stat dd, .stat dt { margin: 0; }
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; padding: 16px; background: var(--white); border: 1px solid var(--line-200); border-radius: var(--radius-md); }
.stat__value { font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.stat__label { font-size: 13px; font-weight: 500; color: var(--ink-600); }
@media (min-width: 640px) { .stats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1100px) {
  .stats { padding-block: 56px 64px; }
  .stats__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
  .stat__value { font-size: 36px; }
  .stat { padding: 20px; gap: 4px; }
  .stat__label { font-size: 14px; }
}

/* ---------- 10. Capabilities ---------- */
.caps__grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.cap { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: var(--brand-smoke); border: 1px solid var(--line-200); border-radius: var(--radius-md); }
.cap .icon-tile { margin-bottom: 8px; }
.cap__title { font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--brand-navy); }
.cap__text { font-size: 15px; line-height: 1.6; color: var(--ink-600); }
.caps__images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.caps__images .ph { aspect-ratio: 4 / 3; }
@media (min-width: 640px) { .caps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) {
  .caps__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .cap { padding: 28px; gap: 10px; }
  .cap__title { font-size: 19px; }
  .caps__images { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
}

/* ---------- 11. Product carousel ---------- */
.carousel { display: flex; flex-direction: column; gap: 20px; }
.carousel__slide {
  display: grid; grid-template-columns: 1fr;
  background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden;
}
.carousel__slide[hidden] { display: none; }
.carousel__copy { display: flex; flex-direction: column; gap: 16px; padding: 32px 24px; }
.carousel__tag {
  align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--brand-navy); background: var(--brand-tint); border-radius: 6px; padding: 4px 8px;
}
.carousel__name { font-size: 28px; line-height: 1.15; white-space: normal; }
.carousel__name .lockup__brand, .carousel__name .lockup__product { white-space: nowrap; }
.carousel__text { font-size: 16px; line-height: 1.6; color: var(--ink-600); }
.carousel__media { background: var(--brand-smoke); padding: 20px; display: flex; border-top: 1px solid var(--line-200); }
.carousel__media .ph { flex-grow: 1; min-height: 220px; }
.carousel__controls { display: flex; flex-direction: column; gap: 16px; }
.carousel__pills { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
.carousel__pill {
  flex-shrink: 0; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line-200); background: var(--white); color: var(--brand-navy);
  font-size: 14px; cursor: pointer; white-space: nowrap;
}
.carousel__pill:hover { border-color: var(--brand-navy); }
.carousel__pill[aria-current="true"] { background: var(--brand-navy); border-color: var(--brand-navy); color: var(--white); }
.carousel__nav { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.carousel__count { min-width: 44px; text-align: right; font-size: 14px; font-weight: 500; color: var(--ink-600); font-variant-numeric: tabular-nums; }
.carousel__arrow {
  width: 48px; height: 48px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1.5px solid var(--brand-navy); background: var(--white); color: var(--brand-navy);
}
.carousel__arrow--next { background: var(--brand-navy); color: var(--white); }
.carousel__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) {
  .carousel { gap: 24px; }
  .carousel__slide { grid-template-columns: 5fr 7fr; min-height: 440px; }
  .carousel__copy { padding: 56px 48px; justify-content: center; gap: 18px; }
  .carousel__name { font-size: 40px; letter-spacing: -0.012em; }
  .carousel__name, .carousel__name .lockup__brand, .carousel__name .lockup__product { white-space: nowrap; }
  .carousel__text { font-size: 17px; }
  .carousel__media { padding: 32px; border-top: none; border-left: 1px solid var(--line-200); }
  .carousel__controls { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
}

/* ---------- 12. Meet Prodigy ---------- */
.prodigy__grid { display: grid; gap: 40px; align-items: center; }
.prodigy__copy { display: flex; flex-direction: column; gap: 20px; }
.prodigy__copy .lede { color: var(--white); }
.prodigy__video {
  aspect-ratio: 16 / 9; background: var(--ink-950); border-radius: var(--radius-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; text-align: center;
}
.prodigy__play {
  width: 64px; height: 64px; border-radius: 999px; border: none; background: var(--white);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.prodigy__play svg { width: 22px; height: 22px; fill: var(--brand-navy); }
.prodigy__note { font-size: 13px; font-weight: 500; color: var(--brand-light); }
@media (min-width: 1024px) {
  .prodigy { padding-block: 96px; }
  .prodigy__grid { grid-template-columns: 5fr 7fr; gap: 64px; }
  .prodigy__play { width: 72px; height: 72px; }
}

/* ---------- 13. Data services flow ---------- */
.flow {
  display: grid; grid-template-columns: 1fr; gap: 12px;
  background: var(--brand-smoke); border: 1px solid var(--line-200); border-radius: var(--radius-lg); padding: 20px;
}
.flow__col { display: flex; flex-direction: column; gap: 14px; }
.flow__col > .label { align-self: flex-start; background: var(--brand-navy); color: var(--white); border-radius: 999px; padding: 6px 12px; font-size: 12px; }
.flow__list { display: flex; flex-direction: column; gap: 8px; }
.flow__item {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 14px; color: var(--ink-900);
  background: var(--white); border: 1px solid var(--line-200); border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 500; line-height: 1.35;
}
.flow__arrow { display: flex; align-items: center; justify-content: center; padding: 4px 0; color: var(--brand-blue); }
.flow__arrow svg { width: 40px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); }
.flow__hub {
  flex-grow: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px;
  background: var(--white); border: 2px solid var(--brand-navy); border-radius: var(--radius-lg);
  padding: 28px 24px; box-shadow: var(--shadow-lift);
}
.flow__hub img { height: 30px; width: auto; align-self: flex-start; }
.flow__hub-title { font-size: 24px; line-height: 1.25; font-weight: 700; color: var(--brand-navy); }
.flow__hub .plus-list { font-size: 15px; font-weight: 500; gap: 10px; }
@media (min-width: 1024px) {
  .flow { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.1fr) 64px minmax(0, 1fr); gap: 0; padding: 40px; border-radius: var(--radius-xl); }
  .flow__arrow { padding: 32px 0 0; }
  .flow__arrow svg { transform: none; }
  .flow__list { gap: 10px; }
  .flow__hub { padding: 36px 32px; gap: 20px; }
  .flow__hub img { height: 34px; }
  .flow__hub-title { font-size: 26px; }
  .flow__hub .plus-list { gap: 12px; }
}

/* ---------- 14. Integrations ---------- */
.integrations__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.integration {
  display: flex; flex-direction: column; gap: 14px; padding: 20px;
  background: var(--white); border: 1px solid var(--line-200); border-radius: var(--radius-md);
}
.integration__title { font-size: 16px; line-height: 1.35; font-weight: 700; color: var(--brand-navy); }
@media (min-width: 768px) { .integrations__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) {
  .integrations__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .integration { padding: 24px; }
  .integration__title { font-size: 17px; }
}

/* ---------- 15. Testimonials ---------- */
.quotes__grid { display: grid; gap: 16px; }
.quote { display: flex; flex-direction: column; gap: 16px; background: var(--brand-tint); border-radius: var(--radius-lg); padding: 28px; }
.quote__mark { font-size: 64px; line-height: 0.8; height: 36px; font-weight: 700; color: var(--brand-navy); }
.quote blockquote { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; } /* a short quote sits mid-card beside a long one */
.quote blockquote { font-size: 18px; line-height: 1.55; font-weight: 500; }
.quote figcaption { font-size: 14px; color: var(--ink-600); padding-top: 16px; border-top: 1px solid var(--card-border); }
.quote figcaption strong { color: var(--ink-900); }
@media (min-width: 900px) { .quotes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .quote { padding: 32px; } }

/* ---------- 16. News ---------- */
.news__grid { display: grid; gap: 16px; }
.post { background: var(--white); border: 1px solid var(--line-200); border-radius: var(--radius-lg); overflow: hidden; }
.post .ph { height: 180px; border: none; border-radius: 0; }
.post__body { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.post__category { font-size: 13px; font-weight: 600; color: var(--brand-navy); }
.post__title { font-size: 19px; line-height: 1.35; font-weight: 700; }
.post__title a { color: var(--ink-900); text-decoration: none; }
.post__title a:hover { color: var(--brand-navy); text-decoration: underline; text-underline-offset: 4px; }
.post__date { font-size: 13px; color: var(--ink-500); }
@media (min-width: 900px) { .news__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

/* ---------- 17. Closing CTA ---------- */
.cta__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.cta__text { display: flex; flex-direction: column; gap: 16px; }
.cta__text p { font-size: 18px; line-height: 1.55; max-width: 560px; }
@media (min-width: 900px) {
  .cta { padding-block: 112px; }
  .cta__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; }
  .cta__text p { font-size: 19px; }
  .cta .btn { flex-shrink: 0; } /* size comes from .btn--lg, same as the hero */
}

/* ---------- 18. Footer ---------- */
.site-footer { padding-block: 56px 0; background: var(--white); } /* logo files have a white ground, so the footer stays white */
.site-footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.site-footer__brand { grid-column: 1 / -1; }
.site-footer__brand { display: flex; flex-direction: column; gap: 12px; max-width: 360px; }
.site-footer__mark { align-self: flex-start; display: block; border-radius: 8px; }
.site-footer__mark img { height: 56px; width: auto; margin-left: -6px; }
.site-footer__tagline { font-size: 16px; line-height: 1.4; font-weight: 700; color: var(--brand-navy); }
.site-footer__about { font-size: 14px; line-height: 1.55; color: var(--ink-600); }
@media (min-width: 1024px) { .site-footer__mark img { height: 64px; } }
.footer-nav { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer-nav__title { font-weight: 700; }
.footer-nav a { color: var(--ink-600); text-decoration: none; }
.footer-nav a:hover { color: var(--brand-navy); text-decoration: underline; }
.newsletter { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; }
.newsletter label { font-size: 14px; font-weight: 700; }
.newsletter__row { display: flex; gap: 8px; }
.newsletter input {
  flex-grow: 1; min-width: 0; height: 44px; border: 1px solid var(--line-dash); border-radius: var(--radius-sm);
  padding: 0 14px; font-size: 15px; color: var(--ink-900); background: var(--white);
}
.newsletter input::placeholder { color: var(--ink-500); }
.newsletter__status { font-size: 13px; color: var(--ink-600); min-height: 1.4em; }
.site-footer__bottom {
  display: flex; flex-direction: column; gap: 12px; margin-top: 40px; padding-top: 24px;
  border-top: 1px solid var(--line-200); font-size: 13px; color: var(--ink-600);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer__legal a { color: var(--ink-600); }
.site-footer__social { color: var(--ink-600); }
.site-footer__social .soon-badge { margin-left: 6px; }
/* Version line, injected after the footer by scripts/build.mjs with an inline
   12px top margin. It should sit right under the copyright, so the footer has
   no bottom padding and !important overrides that inline margin; the breathing
   room moves below the line instead. */
/* No opacity. --ink-500 on white is 4.68:1, which clears the 4.5:1 minimum with
   very little to spare, so any fade drops it below — at opacity 0.5 it measured
   1.95:1 and took the site's accessibility score from 100 to 97. The line is
   already quiet at 11px in a mono face; the fade was buying very little. */
.build-stamp { margin-top: 2px !important; padding-bottom: 32px; }
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__bottom { flex-direction: row; justify-content: space-between; }
}
@media (min-width: 1024px) {
  .site-footer { padding-block: 64px 0; }
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr 2fr; gap: 40px; }
  .site-footer__brand, .newsletter { grid-column: auto; }
  .site-footer__bottom { margin-top: 48px; }
}

/* Logos are supplied as light-background artwork. If a dark theme is ever
   turned on, keep them on a white chip rather than recoloring them. */
:root[data-theme="dark"] .site-header__logo img,
:root[data-theme="dark"] .site-footer__mark img { background: var(--white); border-radius: 8px; padding: 4px 8px; }

/* ==========================================================================
   Inner pages
   ========================================================================== */

/* ---------- 19. Page hero (top of every inner page) ---------- */
.page-hero { background: var(--brand-tint); padding-block: 48px 56px; }
.page-hero__inner { display: flex; flex-direction: column; gap: 20px; }
.page-hero__inner > .h-page, .page-hero__inner > .lede { max-width: 820px; }
.h-page { font-size: clamp(36px, 5.2vw, 56px); line-height: 1.05; letter-spacing: -0.018em; font-weight: 700; color: var(--brand-navy); }
.page-hero .lede { color: var(--ink-900); }
.page-hero__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
@media (min-width: 640px) { .page-hero__actions { flex-direction: row; } }
@media (min-width: 1024px) { .page-hero { padding-block: 88px; } .page-hero .lede { font-size: 19px; } }

/* ---------- 20. Card grid (shared by inner pages; uses .cap cards) ---------- */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.section--alt .cap, .section--tint .cap { background: var(--white); }
.cap .text-link { margin-top: auto; padding-top: 8px; font-size: 15px; }

/* ---------- 21. Split block: text beside a supporting panel ---------- */
.split { display: grid; gap: 32px; align-items: center; }
.split__text { display: flex; flex-direction: column; gap: 16px; }
.split__panel { background: var(--white); border: 1px solid var(--line-200); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1024px) { .split { grid-template-columns: 6fr 5fr; gap: 64px; } .split__panel { padding: 32px; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: var(--font-mono); font-size: 13px; color: var(--brand-navy); background: var(--brand-tint); border-radius: 8px; padding: 6px 10px; }

/* ---------- 22. Pills (filters) ---------- */
.pill {
  flex-shrink: 0; min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line-200); background: var(--white); color: var(--brand-navy); font-size: 14px; font-weight: 500;
}
.pill:hover { border-color: var(--brand-navy); }
.pill[aria-pressed="true"] { background: var(--brand-navy); border-color: var(--brand-navy); color: var(--white); }

/* ---------- 23. Blog ---------- */
.blog-tools { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.blog-tools__filters { display: flex; gap: 8px; overflow-x: auto; padding: 2px; }
.blog-search { position: relative; min-width: 0; }
.blog-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: none; stroke: var(--ink-600); stroke-width: 2; stroke-linecap: round; }
.blog-search input {
  width: 100%; height: 44px; padding: 0 14px 0 42px; border: 1px solid var(--line-dash); border-radius: 999px;
  font-size: 15px; color: var(--ink-900); background: var(--white);
}
.blog-search input::placeholder { color: var(--ink-500); }
@media (min-width: 1024px) {
  .blog-tools { flex-direction: row; align-items: center; justify-content: space-between; }
  .blog-search { width: 320px; flex-shrink: 0; }
}
.featured { display: grid; background: var(--white); border: 1px solid var(--line-200); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 40px; }
.featured .ph { min-height: 220px; border: none; border-radius: 0; }
.featured__body { display: flex; flex-direction: column; gap: 14px; padding: 28px 24px; justify-content: center; }
.featured__title { font-size: 26px; line-height: 1.2; font-weight: 700; }
.featured__title a { color: var(--ink-900); text-decoration: none; }
.featured__title a:hover { color: var(--brand-navy); text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 900px) {
  .featured { grid-template-columns: 7fr 5fr; }
  .featured .ph { min-height: 360px; }
  .featured__body { padding: 48px; }
  .featured__title { font-size: 32px; }
}
.posts__grid { display: grid; gap: 16px; }
.posts__grid .post[hidden] { display: none; }
@media (min-width: 640px) { .posts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1024px) { .posts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.empty-state { padding: 40px 24px; text-align: center; border: 1px dashed var(--line-dash); border-radius: var(--radius-lg); color: var(--ink-600); }
.empty-state[hidden] { display: none; }

/* Newsletter band (blog) */
.signup { display: grid; gap: 24px; align-items: center; }
.signup .newsletter { grid-column: auto; }
@media (min-width: 900px) { .signup { grid-template-columns: 1fr 1fr; gap: 48px; } }

/* ---------- 24. Products page ---------- */
.jump { display: flex; gap: 8px; overflow-x: auto; padding: 2px; margin-top: 8px; }
.jump a.pill { display: inline-flex; align-items: center; text-decoration: none; }
.video-ph {
  max-width: 960px; margin-inline: auto;
  aspect-ratio: 16 / 9; background: var(--ink-950); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; text-align: center;
}
.product-row { display: grid; gap: 28px; align-items: center; }
.product-row + .product-row { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--line-200); }
.product-row__copy { display: flex; flex-direction: column; gap: 16px; }
.product-row__name { font-size: 26px; line-height: 1.2; }
.product-row__copy { min-width: 0; }
@media (min-width: 480px) { .product-row__name { font-size: 32px; } }
.product-row__who { font-size: 15px; color: var(--ink-600); }
.product-row__who strong { color: var(--ink-900); }
.product-row__media .ph { aspect-ratio: 16 / 10; }
.product-row .plus-list { font-size: 16px; font-weight: 500; }
@media (min-width: 1024px) {
  .product-row { grid-template-columns: 5fr 7fr; gap: 64px; }
  .product-row--flip .product-row__copy { order: 2; }
  .product-row + .product-row { margin-top: 72px; padding-top: 72px; }
  .product-row__name { font-size: 40px; }
}

.faq { display: flex; flex-direction: column; border-top: 1px solid var(--line-200); max-width: 880px; }
.faq details { border-bottom: 1px solid var(--line-200); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none;
  padding: 20px 0; font-size: 18px; font-weight: 700; color: var(--ink-900); min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { width: 14px; height: 14px; color: var(--brand-navy); transition: transform .2s ease; }
.faq details[open] summary .plus { transform: rotate(45deg); }
.faq__answer { padding: 0 0 20px; font-size: 16px; line-height: 1.6; color: var(--ink-600); max-width: 720px; }

/* ---------- 25. Developer docs ----------
   Dark mode is scoped to the docs area (the brand guide requires it for API
   docs). Header and footer stay light because the logo files are light-ground. */
.docs {
  --d-bg: var(--white); --d-surface: var(--brand-smoke); --d-text: var(--ink-900); --d-muted: var(--ink-600);
  --d-border: var(--line-200); --d-link: var(--brand-navy); --d-head: var(--brand-navy); --d-active-bg: var(--brand-tint);
  background: var(--d-bg); color: var(--d-text); padding-block: 40px 72px;
}
.docs[data-docs-theme="dark"] {
  --d-bg: #0d121c; --d-surface: #1a2335; --d-text: #ffffff; --d-muted: #d4e0f5;
  --d-border: #2a3446; --d-link: var(--brand-light); --d-head: #ffffff; --d-active-bg: #1a2335;
  color-scheme: dark;
}
.docs[data-docs-theme="dark"] :focus-visible { outline-color: var(--brand-light); }
.docs__grid { display: grid; gap: 32px; }
.docs__side { display: flex; flex-direction: column; gap: 16px; }
.docs__toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.docs-search { position: relative; flex: 1 1 180px; }
.docs-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; fill: none; stroke: var(--d-muted); stroke-width: 2; stroke-linecap: round; }
.docs-search input {
  width: 100%; height: 44px; padding: 0 12px 0 36px; border-radius: var(--radius-sm);
  border: 1px solid var(--d-border); background: var(--d-surface); color: var(--d-text); font-size: 15px;
}
.docs-search input::placeholder { color: var(--d-muted); }
.theme-toggle {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; cursor: pointer;
  border-radius: var(--radius-sm); border: 1px solid var(--d-border); background: var(--d-surface); color: var(--d-text); font-size: 14px; font-weight: 500;
}
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.docs-nav { border: 1px solid var(--d-border); border-radius: var(--radius-md); background: var(--d-surface); }
.docs-nav > summary { padding: 14px 16px; font-weight: 700; cursor: pointer; min-height: 44px; }
.docs-nav__body { padding: 0 8px 12px; display: flex; flex-direction: column; gap: 14px; }
.docs-nav__group { display: flex; flex-direction: column; gap: 2px; }
.docs-nav__title { padding: 6px 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--d-muted); }
.docs-nav a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 15px; color: var(--d-text); text-decoration: none; }
.docs-nav a:hover { background: var(--d-active-bg); }
.docs-nav a[aria-current="true"] { background: var(--d-active-bg); color: var(--d-link); font-weight: 700; }
.docs-nav a[hidden] { display: none; }
.docs-nav__empty { padding: 8px 10px; font-size: 14px; color: var(--d-muted); }
.docs-nav__empty[hidden] { display: none; }
@media (min-width: 1024px) {
  .docs { padding-block: 56px 96px; }
  .docs__grid { grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: start; }
  .docs__side { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; }
  .docs-search { flex-basis: 100%; }
  .theme-toggle { width: 100%; justify-content: center; }
  .docs-nav > summary { display: none; }
  .docs-nav { background: transparent; border: none; }
  .docs-nav__body { padding: 0; }
}

.docs__content { display: flex; flex-direction: column; gap: 56px; min-width: 0; max-width: 960px; }
.doc-section { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: calc(var(--header-h) + 24px); }
.doc-section + .doc-section { padding-top: 56px; border-top: 1px solid var(--d-border); }
.doc-section h2 { font-size: clamp(26px, 3vw, 32px); line-height: 1.2; font-weight: 700; color: var(--d-head); letter-spacing: -0.01em; }
.doc-section h3 { font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--d-head); margin-top: 8px; scroll-margin-top: calc(var(--header-h) + 24px); }
.doc-section p, .doc-section li { font-size: 16px; line-height: 1.65; color: var(--d-text); }
.doc-section .muted { color: var(--d-muted); }
.doc-section a { color: var(--d-link); }
.doc-steps { list-style: decimal; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.doc-bullets { list-style: disc; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.doc-section code:not(pre code) {
  font-family: var(--font-mono); font-size: 0.88em; padding: 2px 6px; border-radius: 6px;
  background: var(--d-surface); border: 1px solid var(--d-border); overflow-wrap: anywhere;
}
.callout { border: 1px solid var(--d-border); background: var(--d-surface); border-radius: var(--radius-md); padding: 16px 18px; font-size: 15px; color: var(--d-text); }
.callout strong { color: var(--d-head); }

.code { border-radius: var(--radius-md); overflow: hidden; background: var(--ink-950); border: 1px solid #2a3446; }
.code__bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 16px; border-bottom: 1px solid #2a3446; }
.code__lang { font-family: var(--font-mono); font-size: 12px; color: var(--brand-light); }
.code__copy {
  min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-dark); background: var(--ink-850); color: #ffffff;
  font-size: 13px; font-weight: 500; cursor: pointer;
}
.code__copy:hover { border-color: var(--brand-light); }
.code__copy:focus-visible { outline-color: var(--brand-light); }
.code pre { margin: 0; padding: 16px; overflow-x: auto; }
.code code { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: #d4e0f5; white-space: pre; }
.code .tok-ph { color: #23c3ed; }

.table-wrap { overflow-x: auto; border: 1px solid var(--d-border); border-radius: var(--radius-md); }
.doc-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.doc-table th, .doc-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--d-border); vertical-align: top; color: var(--d-text); }
.doc-table th { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--d-muted); background: var(--d-surface); }
.doc-table tr:last-child td { border-bottom: none; }
.doc-table code { font-family: var(--font-mono); font-size: 13px; }
.method { font-family: var(--font-mono); font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 6px; background: var(--d-active-bg); color: var(--d-link); }
.docs-nav__group[hidden] { display: none; }

/* ==========================================================================
   27. Bold pass: bigger type, darker bands, more contrast.
   Stays inside the brand guide: navy leads, blues are accents, no gradients.
   ========================================================================== */
:root { --brand-mist: #d4e0f5; } /* Mist: secondary text on dark and navy (5.8:1 or better); never on light */

/* Type scale up */
.h-display { font-size: clamp(44px, 6.6vw, 88px); line-height: 1; letter-spacing: -0.025em; }
.h-section { font-size: clamp(30px, 3.5vw, 46px); line-height: 1.12; letter-spacing: -0.016em; }
.h-cta { font-size: clamp(44px, 6vw, 80px); line-height: 1; letter-spacing: -0.022em; }
.section-head__text { max-width: 820px; }
.lede { font-size: 18px; }
@media (min-width: 1024px) { .lede { font-size: 18px; line-height: 1.6; } }
.on-dark .lede, .on-dark .h-section { color: var(--white); }
.on-dark .label { color: var(--brand-light); }

/* Buttons: bigger, with a light outline variant for dark bands */
.btn--lg { min-height: 56px; padding: 0 30px; font-size: 17px; }
.btn--outline-light { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.7); }
.btn--outline-light:hover { background: rgba(255, 255, 255, 0.12); color: var(--white); border-color: var(--white); }

/* Hero: dark full-bleed opening screen */
.hero--bold { position: relative; overflow: hidden; background: var(--ink-950); color: var(--white); padding-block: 64px 128px; text-align: left; }
.hero--bold .hero__inner { position: relative; z-index: 1; align-items: flex-start; gap: 32px; }
.hero--bold .h-display { color: var(--white); }
.hero__accent { color: var(--brand-light); }
.hero--bold .hero__actions { justify-content: flex-start; }
.hero__media { position: absolute; inset: 0; background: var(--ink-950); }
.hero__media-note { position: absolute; right: var(--gutter); top: 12px; left: var(--gutter); text-align: right; font-size: 12px; font-weight: 500; color: #d4e0f5; }
/* The background "+" is the logo's own plus (square inner corners, slightly rounded outer ones),
   drawn as a filled shape. */
.hero__plus {
  position: absolute; z-index: 0; right: -6vw; top: 24px; bottom: auto; width: min(36vw, 500px); height: auto;
  fill: var(--brand-navy); stroke: none; opacity: 0.3;
}
@media (min-width: 1024px) { .hero--bold { padding-block: 104px 196px; } }

/* Experience / Innovation panels overlap the hero edge */
.xi--overlap { position: relative; z-index: 2; padding-top: 0; margin-top: -88px; }
.xi--overlap .xi__panel--innovation { background: var(--brand-navy); }
.xi--overlap .xi__grid { box-shadow: 0 16px 40px rgba(18, 25, 38, 0.16); border-radius: var(--radius-lg); }
@media (min-width: 900px) {
  .xi--overlap { margin-top: -136px; padding-top: 0; }
  .xi--overlap .xi__grid { border-radius: var(--radius-xl); }
  .xi__statement { font-size: 34px; }
  .xi__headline { font-size: 28px; }
}

/* Stats: navy band, very large numbers */
.stats--bold { background: var(--brand-navy); color: var(--white); border: none; padding-block: 64px 72px; }
.stats__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.stats--bold .stats__grid { margin-top: 0; }
.stats--bold .stat { background: transparent; border: none; border-top: 2px solid rgba(157, 187, 235, 0.55); border-radius: 0; padding: 18px 0 0; }
.stats--bold .stat__value { color: var(--white); font-size: 38px; letter-spacing: -0.015em; }
.stats--bold .stat__label { color: var(--brand-mist); font-size: 14px; }
@media (min-width: 1100px) {
  .stats--bold { padding-block: 80px 88px; }
  .stats__head { margin-bottom: 48px; }
  .stats--bold .stats__grid { gap: 32px; }
  .stats--bold .stat__value { font-size: 44px; }
  .stats--bold .stat__label { font-size: 15px; }
}

@media (min-width: 1100px) and (max-width: 1439px) {
  .stats--bold .stats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .stats--bold .stat__value { font-size: 52px; }
}
@media (min-width: 1440px) { .stats--bold .stat__value { font-size: 48px; } }

/* Cards: solid navy icon tiles and a subtle lift on hover */
.icon-tile { width: 48px; height: 48px; }
.icon-tile svg { width: 24px; height: 24px; }
.cap, .integration, .post, .quote { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.cap:hover, .integration:hover, .post:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--card-border); }
.cap__title { font-size: 19px; }
@media (min-width: 1024px) { .cap__title { font-size: 20px; } .integration__title { font-size: 18px; } }

/* Product carousel: larger names */
@media (min-width: 900px) { .carousel__name { font-size: 44px; } }

/* Testimonials: dark band, large quotes */
.quotes--dark .quote { background: #1a2335; border: 1px solid var(--line-dark); }
.quotes--dark .quote blockquote { color: var(--white); font-size: 20px; line-height: 1.5; }
.quotes--dark .quote__mark { color: var(--brand-light); font-size: 80px; height: 44px; }
.quotes--dark .quote figcaption { color: var(--brand-mist); border-top-color: var(--line-dark); }
.quotes--dark .quote figcaption strong { color: var(--white); }
@media (min-width: 1024px) { .quotes--dark .quote blockquote { font-size: 22px; } .quotes--dark .quote { padding: 40px; } }

/* Closing CTA: navy, very large */
.cta--bold .cta__text p { color: var(--brand-mist); }
@media (min-width: 900px) { .cta--bold { padding-block: 112px; } }

/* Inner page heroes: navy with white type */
.page-hero { background: var(--brand-navy); color: var(--white); position: relative; overflow: hidden; }
.page-hero .h-page { color: var(--white); font-size: clamp(36px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.02em; }
.page-hero .lede { color: var(--brand-mist); }
.page-hero .btn--primary { background: var(--white); color: var(--brand-navy); }
.page-hero .btn--primary:hover { background: var(--brand-tint); color: var(--brand-navy); }
.page-hero .btn--secondary { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.7); }
.page-hero .btn--secondary:hover { background: rgba(255, 255, 255, 0.12); color: var(--white); }
.page-hero :focus-visible { outline-color: var(--white); }
.page-hero .page-hero__inner { position: relative; z-index: 1; }
.page-hero .hero__plus { fill: rgba(157, 187, 235, 0.15); opacity: 1; width: min(40vw, 480px); right: -6vw; bottom: -30%; }
@media (min-width: 1024px) { .page-hero { padding-block: 96px; } }

/* ---------- 28. Experience / Innovation cards inside the hero ----------
   Two halves of the tagline, sitting on the dark hero: Experience on a
   raised dark surface, Innovation in brand navy. */
.xi-cards { position: relative; z-index: 1; display: grid; gap: 16px; margin-top: 48px; }
.xi-card { display: flex; flex-direction: column; gap: 14px; padding: 28px 24px; border-radius: var(--radius-lg); }
.xi-card--experience { background: #1a2335; border: 1px solid var(--line-dark); }
.xi-card--innovation { background: var(--brand-navy); border: 1px solid var(--brand-blue); }
.xi-card .label { color: var(--brand-light); }
.xi-card--innovation .label { color: var(--white); }
.xi-card__title { font-size: 24px; line-height: 1.22; letter-spacing: -0.012em; font-weight: 700; color: var(--white); }
.xi-card__body { font-size: 16px; line-height: 1.55; color: var(--brand-mist); max-width: 520px; }
.xi-card .plus-list { font-size: 15px; font-weight: 500; gap: 10px; color: var(--white); }
.xi-card .plus { color: var(--brand-light); }
.hero--with-cards { padding-bottom: 64px; }
@media (min-width: 900px) {
  .xi-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 72px; }
  .xi-card { padding: 40px; gap: 16px; }
  .xi-card__title { font-size: 30px; }
  .xi-card__body { font-size: 17px; }
  .xi-card .plus-list { font-size: 16px; gap: 12px; }
}
@media (min-width: 1024px) { .hero--with-cards { padding-bottom: 96px; } }

/* ---------- 29. AI agent tools (MCP) ---------- */
.mcp-block { display: grid; gap: 40px; align-items: center; }
.mcp-block__copy { display: flex; flex-direction: column; gap: 20px; }
.mcp-block__copy .plus-list { font-size: 16px; font-weight: 500; }
.mcp-block__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 4px; }
@media (min-width: 1024px) { .mcp-block { grid-template-columns: 6fr 6fr; gap: 64px; } }

.status-pill {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px; background: var(--white); border: 1px solid var(--card-border);
  font-size: 13px; font-weight: 600; color: var(--brand-navy);
}
.status-pill__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--brand-blue); }
.on-dark .status-pill { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); color: var(--white); }
.on-dark .status-pill__dot { background: var(--brand-light); }

/* Chat example (illustrative) */
.chat { background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); overflow: hidden; }
.chat__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line-200); background: var(--brand-smoke); }
.chat__dot { width: 10px; height: 10px; border-radius: 999px; background: var(--line-dash); }
.chat__title { margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--ink-600); }
.chat__body { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.chat__msg { max-width: 88%; padding: 12px 16px; border-radius: 16px; font-size: 15px; line-height: 1.5; }
.chat__msg--user { align-self: flex-end; background: var(--brand-navy); color: var(--white); border-bottom-right-radius: 4px; }
.chat__msg--assistant { align-self: flex-start; background: var(--brand-smoke); border: 1px solid var(--line-200); color: var(--ink-900); border-bottom-left-radius: 4px; display: flex; flex-direction: column; gap: 10px; min-width: min(100%, 320px); }
.chat__tool { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--brand-navy); background: var(--brand-tint); border-radius: 999px; padding: 6px 12px; }
.chat__rows { display: flex; flex-direction: column; }
.chat__rows li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--line-200); font-size: 14px; }
.chat__rows .num { font-weight: 500; color: var(--brand-navy); }
.chat__caption { padding: 0 20px 16px; font-size: 12px; color: var(--ink-500); }
@media (min-width: 1024px) { .chat__body { padding: 28px; gap: 16px; } .chat__caption { padding: 0 28px 20px; } }

/* Numbered steps */
.steps { display: grid; gap: 16px; counter-reset: step; list-style: none; margin: 0; padding: 0; }
.step { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px 24px; background: var(--white); border: 1px solid var(--line-200); border-radius: var(--radius-md); }
.step::before {
  counter-increment: step; content: counter(step);
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px;
  background: var(--brand-navy); color: var(--white); font-weight: 700; font-size: 17px; margin-bottom: 6px;
}
.step h3 { font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--brand-navy); }
.step p { font-size: 15px; line-height: 1.6; color: var(--ink-600); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .step { padding: 32px; } }

/* Header fit with seven menu items: tighter on laptops, roomier on large screens */
@media (min-width: 1440px) {
  .site-nav { gap: 22px; }
  .site-nav a { font-size: 15px; }
  .site-header__actions { gap: 18px; }
  .site-header__bar { gap: 20px; }
}
@media (min-width: 1600px) {
  .site-nav { gap: 32px; }
  .site-nav a { font-size: 16px; }
  .site-header__actions { gap: 24px; }
}

/* ---------- 30. RealPlus MCP Connector page (dark design) ---------- */
:root { --ink-950: #0d121c; --ink-850: #1a2335; --card-on-navy: #2e5292; --border-on-navy: #4f72ad; }  /* dark neutrals: Near black, raised card (Ink 850), card and border on Traditional Indigo */  /* --ink-950: dark backgrounds (#0D121C); --ink-850: raised cards on dark */
.section--deep { background: var(--ink-950); color: var(--white); }
.section--ink .lede, .section--deep .lede { color: var(--brand-mist); }

/* Product lockup on dark: "RealPlus" white, product word brand-light */
.on-dark .lockup:not(.lockup--mono) .lockup__brand { color: var(--white); }
.on-dark .lockup:not(.lockup--mono) .lockup__product { color: var(--brand-light); }

/* Hero with video directly under the text */
.mcp-hero { position: relative; overflow: hidden; background: var(--ink-950); color: var(--white); padding-block: 64px 72px; }
.mcp-hero .hero__plus { right: -8vw; top: 0; bottom: auto; width: min(34vw, 460px); opacity: 0.35; }
.mcp-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 22px; }
.mcp-hero__title { font-size: clamp(40px, 6vw, 80px); line-height: 1; letter-spacing: -0.025em; }
.mcp-hero__title .lockup { white-space: normal; }
.mcp-hero__title .lockup__brand, .mcp-hero__title .lockup__product { white-space: nowrap; }
.mcp-hero .lede { max-width: 760px; color: var(--brand-mist); }
.mcp-hero__works { font-size: 15px; font-weight: 500; color: var(--brand-light); }
.mcp-hero .hero__actions { justify-content: flex-start; }
@media (min-width: 1024px) { .mcp-hero { padding-block: 96px 104px; } }

.video-frame { position: relative; z-index: 1; margin-top: 40px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-dark); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); background: var(--brand-smoke); }
.video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--brand-smoke); }
.video-meta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 14px; font-size: 13px; color: var(--brand-mist); }
@media (min-width: 1024px) { .video-frame { margin-top: 56px; border-radius: var(--radius-xl); } }

/* Transcript (the video has no audio; this is its text alternative) */
.transcript { position: relative; z-index: 1; margin-top: 16px; border: 1px solid var(--line-dark); border-radius: var(--radius-md); background: var(--ink-850); }
.transcript > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 12px 18px; font-size: 15px; font-weight: 700; color: var(--white); }
.transcript > summary::-webkit-details-marker { display: none; }
.transcript > summary .plus { color: var(--brand-light); transition: transform .2s ease; }
.transcript[open] > summary .plus { transform: rotate(45deg); }
.transcript__body { padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.transcript__row { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line-dark); }
.transcript__time { font-family: var(--font-mono); font-size: 12px; color: var(--brand-light); }
.transcript__scene { font-size: 14px; font-weight: 700; color: var(--white); }
.transcript__text { font-size: 14px; line-height: 1.6; color: var(--brand-mist); }
@media (min-width: 768px) { .transcript__row { grid-template-columns: 110px 190px minmax(0, 1fr); gap: 16px; align-items: baseline; } }

/* Flow: You -> AI assistant -> MCP Connector -> RealPlus */
.flowline { display: grid; gap: 10px; margin: 8px 0 40px; }
.flowline__box { background: var(--ink-850); border: 1px solid var(--line-dark); border-radius: var(--radius-md); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.flowline__box--brand { background: var(--brand-navy); border-color: var(--brand-blue); }
.flowline__name { font-size: 18px; font-weight: 700; color: var(--white); }
.flowline__role { font-size: 14px; color: var(--brand-mist); }
.flowline__arrow { display: flex; justify-content: center; color: var(--brand-light); }
.flowline__arrow svg { width: 36px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); }
@media (min-width: 1024px) {
  .flowline { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr); align-items: stretch; gap: 0; margin-bottom: 56px; }
  .flowline__arrow { align-items: center; }
  .flowline__arrow svg { transform: none; }
}

/* Dark numbered steps */
.steps--dark .step { background: var(--ink-850); border-color: var(--line-dark); }
.steps--dark .step::before { background: var(--brand-light); color: var(--ink-950); }
.steps--dark .step h3 { color: var(--white); }
.steps--dark .step p { color: var(--brand-mist); }
.note-line { margin-top: 20px; font-size: 15px; color: var(--brand-mist); display: flex; gap: 10px; align-items: flex-start; }
.note-line .plus { margin-top: 0.4em; color: var(--brand-light); }

/* Coverage: 12 areas with Read / Read + Write tags */
.big-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; }
.big-stat__num { font-size: clamp(48px, 6vw, 80px); line-height: 1; font-weight: 700; letter-spacing: -0.03em; color: var(--white); }
.big-stat__text { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; color: var(--brand-light); }
.areas { display: grid; gap: 12px; }
.area { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: var(--ink-850); border: 1px solid var(--line-dark); border-radius: var(--radius-md); }
.area__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.area__name { font-size: 17px; line-height: 1.3; font-weight: 700; color: var(--white); }
.area__text { font-size: 14px; line-height: 1.6; color: var(--brand-mist); }
.access { flex-shrink: 0; font-size: 12px; font-weight: 600; white-space: nowrap; border-radius: 999px; padding: 4px 10px; }
.access--read { color: var(--brand-light); border: 1px solid var(--brand-light); }
.access--write { color: var(--white); background: var(--brand-navy); border: 1px solid var(--brand-navy); }
.access-key { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 20px 0 28px; font-size: 14px; color: var(--brand-mist); }
.access-key span { display: inline-flex; align-items: center; gap: 8px; }
@media (min-width: 640px) { .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) { .areas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .area { padding: 26px; } }

/* What you can ask */
.asks { display: grid; gap: 12px; }
.ask { display: grid; gap: 10px; padding: 24px; border-radius: var(--radius-md); background: var(--card-on-navy); border: 1px solid var(--border-on-navy); }
.ask__title { font-size: 20px; font-weight: 700; color: var(--white); }
.ask__text { font-size: 15px; line-height: 1.6; color: var(--brand-mist); }
.ask__prompt { font-size: 16px; line-height: 1.5; color: var(--white); padding: 12px 16px; border-radius: 14px 14px 4px 14px; background: var(--brand-navy); border: 1px solid var(--border-on-navy); justify-self: start; }
@media (min-width: 1024px) {
  .ask { grid-template-columns: 5fr 7fr; align-items: center; gap: 24px 40px; padding: 28px 32px; }
  .ask__head { display: flex; flex-direction: column; gap: 6px; }
  .ask__prompt { justify-self: end; }
}

/* Two info cards (who it's for, coverage) */
.info-pair { display: grid; gap: 16px; }
.info-card { padding: 28px; border-radius: var(--radius-lg); background: var(--ink-850); border: 1px solid var(--line-dark); display: flex; flex-direction: column; gap: 12px; }
.info-card h3 { font-size: 22px; font-weight: 700; color: var(--white); }
.info-card p { font-size: 16px; line-height: 1.6; color: var(--brand-mist); }
@media (min-width: 900px) { .info-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .info-card { padding: 36px; } }

/* Home block and Products row: video on light backgrounds */
.video-card { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--card-border); box-shadow: var(--shadow-lift); background: var(--brand-smoke); }
.video-card video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.video-card__note { font-size: 12px; color: var(--ink-600); margin-top: 10px; }
.mcp-block__works { font-size: 15px; font-weight: 500; color: var(--brand-navy); }
/* Let the connector name wrap between "RealPlus" and "MCP Connector" on narrow screens */
.mcp-block__copy { min-width: 0; }
.mcp-block .lockup, .product-row__name .lockup { white-space: normal; }
.mcp-block .lockup__brand, .mcp-block .lockup__product,
.product-row__name .lockup__brand, .product-row__name .lockup__product { white-space: nowrap; }
.section--navy .ask__prompt { background: var(--ink-950); border-color: rgba(157, 187, 235, 0.35); }

/* ---------- 31. Prodigy (Home band and Products suite) ---------- */
.prodigy__grid { align-items: start; }
.prodigy__copy .lede { color: var(--brand-mist); }
.prodigy-tools { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 4px; }
.prodigy-tools li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--brand-mist); }
.prodigy-tools strong { color: var(--white); font-weight: 700; }
.prodigy-tools .plus { margin-top: 0.4em; color: var(--brand-light); }
@media (min-width: 640px) { .prodigy-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; } }
.soon { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: var(--radius-md); background: var(--card-on-navy); border: 1px solid var(--border-on-navy); }
.soon p { font-size: 15px; line-height: 1.55; color: var(--brand-mist); }
.soon strong { color: var(--white); }
.video-dark { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(157, 187, 235, 0.3); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); background: var(--ink-950); }
.video-dark video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--ink-950); }
.video-dark__note { margin-top: 10px; font-size: 13px; color: var(--brand-mist); }
@media (min-width: 1024px) { .prodigy__video-wrap { position: sticky; top: calc(var(--header-h) + 32px); } }

/* Products: Prodigy Suite cards on navy */
.suite { display: grid; gap: 12px; margin-top: 48px; }
.suite-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--radius-md); background: var(--card-on-navy); border: 1px solid var(--border-on-navy); }
.suite-card__name { font-size: 20px; font-weight: 700; color: var(--white); line-height: 1.25; }
.suite-card__tag { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-light); }
.suite-card__text { font-size: 15px; line-height: 1.6; color: var(--brand-mist); }
.suite-card__where { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(157, 187, 235, 0.25); font-size: 13px; line-height: 1.5; color: var(--brand-mist); }
.suite-card__where strong { color: var(--white); }
@media (min-width: 640px) { .suite { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) { .suite { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .suite-card { padding: 28px; } }
.soon--wide { margin-top: 20px; padding: 28px; gap: 14px; }
.soon--wide h3 { font-size: 24px; line-height: 1.25; font-weight: 700; color: var(--white); }
.soon--wide .plus-list { font-size: 16px; font-weight: 500; color: var(--white); }
@media (min-width: 1024px) {
  .soon--wide { display: grid; grid-template-columns: 5fr 7fr; gap: 16px 48px; align-items: center; padding: 40px; }
  .soon--wide .soon__head { display: flex; flex-direction: column; gap: 12px; }
}

/* Innovation card: bullets only, set larger to balance the Experience statement */
.xi-card .xi-card__list { font-size: 18px; line-height: 1.4; font-weight: 500; gap: 14px; }
.xi-card__list .plus { width: 14px; height: 14px; margin-top: 0.35em; }
@media (min-width: 900px) {
  .xi-card .xi-card__list { font-size: 21px; gap: 18px; }
  .xi-card__list .plus { width: 16px; height: 16px; }
}

/* Home Prodigy band, rebalanced: copy beside video, then tools and
   "coming soon" run the full width underneath */
.prodigy__grid--balanced { align-items: center; }
.prodigy-tools--row { margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(157, 187, 235, 0.3); }
.prodigy-tools--row li span { display: flex; flex-direction: column; gap: 2px; }
.prodigy-tools--row strong { font-size: 17px; }
@media (min-width: 640px) { .prodigy-tools--row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; } }
@media (min-width: 1024px) { .prodigy-tools--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; margin-top: 56px; padding-top: 40px; } }
.soon--row { margin-top: 32px; }
.soon--row p { font-size: 16px; }
@media (min-width: 900px) {
  .soon--row { flex-direction: row; align-items: center; gap: 24px; padding: 22px 28px; }
  .soon--row .status-pill { flex-shrink: 0; align-self: center; }
  .soon--row p { font-size: 17px; }
}

/* ==========================================================================
   32. Calls to action: one system, used the same way on every page
   --------------------------------------------------------------------------
   1. Large buttons (.btn--lg): only in a page's opening hero (one primary,
      one optional secondary) and in the closing call-to-action band.
   2. Standard buttons (.btn): the one main action of a split section
      (copy beside media). Sits at the end of the copy, left-aligned,
      inside .actions. An optional secondary arrow link sits to its right.
   3. Header arrow links (.text-link + .link-arrow): "see more" navigation
      for a section with a header over a grid or cards. One per section,
      right-aligned with the bottom of the headline on desktop, below the
      intro on phones. Label: action + destination ("All posts").
   4. Card arrow links: "Learn more" at the bottom of a card or slide.
   All arrow links share one style: 16px bold, navy (white on dark), with
   an arrow that nudges on hover. Links that don't navigate onward (like
   "Client login") have no arrow.
   ========================================================================== */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 8px; }
.text-link { display: inline-flex; align-items: center; font-size: 16px; font-weight: 700; line-height: 1.3; min-height: 44px; }
.link-arrow { display: inline-block; margin-left: 6px; transition: transform .15s ease; }
.text-link:hover .link-arrow, .text-link:focus-visible .link-arrow { transform: translateX(3px); }
.on-dark .text-link { color: var(--white); }
.on-dark .text-link:hover { color: var(--brand-light); }
.section-head > .text-link { align-self: flex-start; }
@media (min-width: 900px) { .section-head > .text-link { align-self: flex-end; } }
.product-row__copy > .btn, .prodigy__copy > .btn { align-self: flex-start; }
.carousel__copy > .text-link, .cap > .text-link { align-self: flex-start; }
.cap .text-link { font-size: 16px; min-height: 44px; }
.site-header__actions .text-link { min-height: 44px; }

/* ---------- 33. Popular features: bento showcase (Home) ----------
   Desktop: 12-column grid in three rows, 7+5 / 4+4+4 / 5+7, so the two
   dark feature tiles sit on opposite corners. Tablet: two columns. Phone: one. */
.bento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.tile {
  display: flex; flex-direction: column; gap: 12px; padding: 24px; min-width: 0;
  background: var(--brand-smoke); border: 1px solid var(--line-200); border-radius: var(--radius-lg);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--card-border); }
.tile__head { display: flex; align-items: center; gap: 14px; }
.tile__title { font-size: 20px; line-height: 1.25; font-weight: 700; color: var(--brand-navy); }
.tile__text { font-size: 15px; line-height: 1.6; color: var(--ink-600); }
.tile > .text-link { margin-top: auto; align-self: flex-start; }
.tile--navy { background: var(--brand-navy); border-color: var(--brand-blue); }
.tile--ink { background: var(--ink-950); border-color: var(--line-dark); }
.tile.on-dark .tile__title { color: var(--white); }
.tile.on-dark .tile__text { color: var(--brand-mist); }
.tile.on-dark .icon-tile { background: rgba(255, 255, 255, 0.12); color: var(--white); }
.tile.on-dark:hover { border-color: rgba(157, 187, 235, 0.6); }

.mock-search {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 18px; margin-top: 4px;
  background: var(--white); border-radius: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  font-size: 16px; color: var(--ink-900);
}
.mock-search svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: var(--brand-navy); stroke-width: 2; stroke-linecap: round; }
.mock-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile__meta { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--brand-light); }

.mock-summary { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--white); border: 1px solid var(--line-200); border-radius: 12px; }
.mock-summary span { display: block; height: 8px; border-radius: 99px; background: var(--brand-tint); }
.mock-summary span:first-child { background: var(--card-border); width: 60%; }
.mock-summary .short { width: 45%; }

.chip-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-row li { font-size: 13px; font-weight: 600; color: var(--brand-navy); background: var(--white); border: 1px solid var(--card-border); border-radius: 999px; padding: 6px 12px; }

.tile__stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.tile__stat-num { font-size: clamp(40px, 4.4vw, 56px); line-height: 1; font-weight: 700; letter-spacing: -0.025em; color: var(--white); }
.tile__stat-text { font-size: 18px; font-weight: 700; color: var(--brand-light); }

@media (min-width: 700px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .tile--search, .tile--mcp, .tile--crm { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
  .bento > .tile { grid-column: span 4; }
  .bento > .tile--search { grid-column: span 7; padding: 36px; }
  .bento > .tile--insights { grid-column: span 5; }
  .bento > .tile--crm { grid-column: span 5; }
  .bento > .tile--mcp { grid-column: span 7; padding: 36px; }
  .tile { padding: 28px; }
  .tile--search .tile__title, .tile--mcp .tile__title { font-size: 26px; }
  .tile--search .tile__text, .tile--mcp .tile__text { font-size: 16px; max-width: 560px; }
}

/* ---------- 34. Popular features, even version ----------
   All seven tiles share one surface; they differ only by the small visual
   inside. Desktop rows: 2 / 3 / 2. Tablet: pairs, with the last tile full width. */
.caps--even .tile { background: var(--white); border-color: var(--line-200); }
.caps--even .tile:hover { border-color: var(--card-border); }
.caps--even .tile__title { font-size: 20px; }
.caps--even .tile__text { font-size: 15px; max-width: none; }
.caps--even .tile--search, .caps--even .tile--mcp { padding: 24px; }
.caps--even .mock-search { background: var(--brand-smoke); border: 1px solid var(--line-200); box-shadow: none; min-height: 52px; font-size: 15px; }
.caps--even .tile__meta { color: var(--ink-600); }
.caps--even .mock-summary { background: var(--brand-smoke); }
.caps--even .tile__stat-num { color: var(--brand-navy); font-size: 40px; }
.caps--even .tile__stat-text { color: var(--brand-navy); font-size: 18px; }
.caps--even .chip-row li { background: var(--brand-smoke); }
@media (min-width: 700px) {
  .caps--even .bento > .tile { grid-column: auto; }
  .caps--even .bento > .tile--mcp { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .caps--even .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .caps--even .bento > .tile { grid-column: span 4; padding: 28px; }
  .caps--even .bento > .tile--search,
  .caps--even .bento > .tile--insights,
  .caps--even .bento > .tile--crm,
  .caps--even .bento > .tile--mcp { grid-column: span 6; }
  .caps--even .tile--search .tile__title, .caps--even .tile--mcp .tile__title { font-size: 20px; }
  .caps--even .tile--search .tile__text, .caps--even .tile--mcp .tile__text { font-size: 15px; }
}

/* ---------- 35. Popular features, v3: balanced cards with inner contrast ----------
   Every card: icon + title, one line, a pale-blue visual "stage" that fills
   the remaining height, then the link. Stages share a minimum height per row. */
.icon-tile--solid { background: var(--brand-navy); color: var(--white); }
.tile--v3 { gap: 14px; }
.tile--v3 .tile__text { min-height: 3.2em; }
.stage {
  position: relative; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px;
  min-height: 150px; padding: 18px; border-radius: 14px; background: var(--brand-tint); color: var(--brand-navy);
}
.stage__sample { position: absolute; top: 10px; right: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-600); }
.stage .ln { display: block; height: 8px; border-radius: 99px; background: var(--card-border); }
.stage .w100 { width: 100%; } .stage .w90 { width: 90%; } .stage .w80 { width: 80%; } .stage .w70 { width: 70%; } .stage .w60 { width: 60%; } .stage .w50 { width: 50%; }

.stage-search { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; background: var(--white); border-radius: 12px; box-shadow: 0 2px 8px rgba(30, 69, 138, 0.1); font-size: 15px; color: var(--ink-900); }
.stage-search svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--brand-navy); stroke-width: 2; stroke-linecap: round; }
.stage-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.stage-chips li { font-size: 13px; font-weight: 600; color: var(--white); background: var(--brand-navy); border-radius: 999px; padding: 5px 12px; }

.stage-summary { display: flex; flex-direction: column; gap: 9px; padding: 14px; background: var(--white); border-radius: 12px; box-shadow: 0 2px 8px rgba(30, 69, 138, 0.1); }
.stage-summary__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.stage-summary__label { font-size: 13px; font-weight: 700; color: var(--brand-navy); }
.stage-summary__icon { width: 16px; height: 16px; fill: none; stroke: var(--brand-navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.stage-metric { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.stage-metric__num { display: block; font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.stage-metric__label { font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--brand-navy); max-width: 200px; }
.avatars { display: flex; align-items: center; }
.avatars span { width: 36px; height: 36px; border-radius: 999px; background: var(--brand-navy); border: 2px solid var(--brand-tint); display: inline-flex; align-items: center; justify-content: center; margin-left: -8px; }
.avatars span:first-child { margin-left: 0; }
.avatars svg { width: 20px; height: 20px; fill: none; stroke: var(--white); stroke-width: 1.8; stroke-linecap: round; }
.avatars span:nth-child(2) { background: var(--brand-blue); }
.avatars span:nth-child(3) { background: var(--brand-blue); }
.avatars .avatars__more { background: var(--white); color: var(--brand-navy); font-size: 13px; font-weight: 700; }

.stage-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.stage-kpis > div { display: flex; flex-direction: column; gap: 4px; }
.stage-kpis .stage-metric__num { font-size: 32px; }
.stage-kpis .stage-metric__label { font-size: 13px; }
.mini-bars { display: flex; align-items: flex-end; gap: 6px; height: 44px; }
.mini-bars span { flex: 1; border-radius: 4px 4px 0 0; background: var(--brand-light); }
.mini-bars span:last-child { background: var(--brand-navy); }

.stage-groups { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stage-groups li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--white); border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--brand-navy); }
.dot { width: 10px; height: 10px; border-radius: 99px; flex-shrink: 0; }
.dot--a { background: var(--brand-navy); } .dot--b { background: var(--brand-blue); } .dot--c { background: var(--brand-navy); } .dot--d { background: var(--brand-light); }
.stage-report { display: flex; flex-direction: column; gap: 7px; }

.stage-sync { display: flex; align-items: center; gap: 12px; }
.stage-sync .node { flex: 1; text-align: center; padding: 12px 10px; border-radius: 12px; background: var(--white); font-size: 15px; font-weight: 700; color: var(--brand-navy); }
.stage-sync .node--brand { background: var(--brand-navy); color: var(--white); }
.stage-sync__icon { width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: var(--brand-navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.stage-mcp { display: flex; flex-direction: column; gap: 12px; }
.stage-bubble { align-self: flex-start; max-width: 100%; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--brand-navy); color: var(--white); font-size: 14px; line-height: 1.45; }
.caps--even .tile--v3 .tile__stat-num { font-size: 36px; }

@media (min-width: 1100px) {
  .tile--v3 .stage { min-height: 168px; }
  .caps--even .bento > .tile--v3 { padding: 26px; }
}

/* ---------- 36. Popular features, compact (six cards) ----------
   Desktop 3 x 2, tablet 2 x 3, phone 1 column. Tighter padding, shorter
   visual panels, smaller figures. */
.caps--even.section { padding-block: 56px; }
.caps--even .section-head { margin-bottom: 24px; }
.bento--compact { gap: 12px; }
.bento--compact > .tile--v3 { padding: 20px; gap: 10px; }
.bento--compact .tile__head { gap: 12px; }
.bento--compact .icon-tile { width: 40px; height: 40px; border-radius: 10px; }
.bento--compact .icon-tile svg { width: 20px; height: 20px; }
.bento--compact .tile__title { font-size: 18px; }
.bento--compact .tile__text { font-size: 14px; line-height: 1.5; min-height: 0; }
.bento--compact .stage { min-height: 112px; padding: 14px; gap: 10px; border-radius: 12px; }
.bento--compact > .tile > .text-link { min-height: 32px; font-size: 15px; }
.bento--compact .stage-search { min-height: 42px; font-size: 14px; }
.bento--compact .stage-chips li { font-size: 12px; padding: 4px 10px; }
.bento--compact .stage-summary { padding: 12px; gap: 8px; }
.bento--compact .stage-metric__num { font-size: 32px; }
.bento--compact .stage-kpis { margin-top: 10px; gap: 10px; }
.bento--compact .stage-kpis .stage-metric__num { font-size: 26px; }
.bento--compact .stage-kpis .stage-metric__label { font-size: 12px; }
.bento--compact .mini-bars { height: 30px; }
.bento--compact .avatars span { width: 32px; height: 32px; }
.bento--compact .avatars svg { width: 18px; height: 18px; }
.bento--compact .stage-groups li { padding: 7px 10px; }
.bento--compact .stage-sync .node { padding: 10px 8px; font-size: 14px; }
@media (min-width: 700px) {
  .caps--even .bento--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .caps--even .bento--compact > .tile { grid-column: auto; }
}
@media (min-width: 1024px) { .caps--even.section { padding-block: 72px; } .caps--even .section-head { margin-bottom: 28px; } }
@media (min-width: 1100px) {
  .caps--even .bento--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .caps--even .bento--compact > .tile,
  .caps--even .bento--compact > .tile--search,
  .caps--even .bento--compact > .tile--insights,
  .caps--even .bento--compact > .tile--crm { grid-column: auto; padding: 22px; }
  .bento--compact .stage { min-height: 120px; }
}
.caps--even .section-head__text { max-width: none; gap: 8px; }

/* ---------- 37. Product structure: platform, editions, compare, RealPlus ONE ---------- */
.compare__title { font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--brand-navy); margin: 56px 0 16px; }
.compare-wrap { margin-top: 8px; }
.compare { background: var(--white); }
.compare .doc-table { --d-border: var(--line-200); --d-text: var(--ink-900); --d-muted: var(--ink-600); --d-surface: var(--brand-smoke); }
.compare .doc-table th[scope="row"] { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--ink-900); background: transparent; }
.compare .doc-table thead th { font-size: 14px; }
.compare .doc-table td { text-align: center; width: 22%; }
.compare .doc-table thead th:not(:first-child) { text-align: center; text-transform: none; letter-spacing: 0; color: var(--brand-navy); }
.check { width: 22px; height: 22px; fill: none; stroke: var(--brand-navy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: middle; }
.dash { color: var(--ink-500); font-weight: 600; }

.one-band { position: relative; overflow: hidden; }
.one-band .hero__plus { right: -6vw; top: -10%; bottom: auto; width: min(34vw, 440px); opacity: 0.3; }
.one-band__grid { position: relative; z-index: 1; display: grid; gap: 32px; align-items: center; }
.one-band__copy { display: flex; flex-direction: column; gap: 18px; }
.one-band__name { font-size: clamp(40px, 5.6vw, 72px); line-height: 1; letter-spacing: -0.02em; }
.one-band__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.one-band__list li { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: var(--radius-md); background: var(--ink-850); border: 1px solid var(--line-dark); }
.one-band__k { font-size: 17px; font-weight: 700; color: var(--white); }
.one-band__v { font-size: 15px; line-height: 1.5; color: var(--brand-mist); }
@media (min-width: 1024px) { .one-band__grid { grid-template-columns: 5fr 7fr; gap: 64px; } }

/* Home: product family block */
.family { display: grid; gap: 16px; }
.platform { background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-xl); padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.platform__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.platform__label { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-navy); }
.platform__sub { font-size: 14px; color: var(--ink-600); }
.editions { display: grid; gap: 12px; }
.edition { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--radius-lg); background: var(--brand-smoke); border: 1px solid var(--line-200); }
.edition--premium { background: var(--brand-navy); border-color: var(--brand-blue); }
.edition__tag { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-navy); background: var(--brand-tint); border-radius: 6px; padding: 4px 8px; }
.edition--premium .edition__tag { background: rgba(255, 255, 255, 0.14); color: var(--white); }
.edition__name { font-size: 28px; line-height: 1.15; }
.edition__name .lockup { white-space: normal; }
.edition__name .lockup__brand, .edition__name .lockup__product { white-space: nowrap; }
.edition__text { font-size: 15px; line-height: 1.55; color: var(--ink-600); }
.edition--premium .edition__text { color: var(--brand-mist); }
.edition .chip-row li { background: var(--white); }
.edition--premium .chip-row li { background: rgba(255, 255, 255, 0.12); border-color: rgba(157, 187, 235, 0.45); color: var(--white); }
.edition > .text-link { margin-top: auto; align-self: flex-start; }
.included { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line-200); }
.included__label { font-size: 13px; font-weight: 700; color: var(--ink-600); }
.included__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.included__items li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--ink-900); }
.included__items .icon-tile { width: 40px; height: 40px; border-radius: 10px; }
.included__items .icon-tile svg { width: 20px; height: 20px; }
.included__items small { display: block; font-size: 13px; font-weight: 400; color: var(--ink-600); }
.dev-strip { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border-radius: var(--radius-lg); background: var(--ink-950); color: var(--white); }
.dev-strip p { font-size: 16px; line-height: 1.55; color: var(--brand-mist); }
.dev-strip p strong { color: var(--white); }
.dev-strip .text-link { color: var(--white); }
@media (min-width: 768px) {
  .editions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .included__items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1024px) {
  .platform { padding: 28px; gap: 20px; }
  .edition { padding: 28px; }
  .edition__name { font-size: 34px; }
  .dev-strip { flex-direction: row; align-items: center; gap: 24px; padding: 22px 28px; }
  .dev-strip .status-pill { flex-shrink: 0; }
  .dev-strip .text-link { flex-shrink: 0; margin-left: auto; }
}
/* Keep hidden labels inside scrolling tables, and let header names wrap on phones */
.table-wrap { position: relative; }
.compare .doc-table thead .lockup { white-space: normal; }
.compare .doc-table thead .lockup__brand, .compare .doc-table thead .lockup__product { white-space: nowrap; }
@media (max-width: 640px) {
  .compare .doc-table th, .compare .doc-table td { padding: 10px 8px; font-size: 14px; }
  .compare .doc-table td { width: 26%; }
}
/* ReSource: premium, but not heavier than the main platform */
.edition--premium { background: var(--brand-tint); border-color: var(--card-border); }
.edition--premium .edition__tag { background: var(--brand-navy); color: var(--white); }
.edition--premium .edition__text { color: var(--ink-900); }
.edition--premium .chip-row li { background: var(--white); border-color: var(--card-border); color: var(--brand-navy); }
@media (min-width: 1024px) { .product-row--flip { grid-template-columns: 7fr 5fr; } }

/* ---------- 38. Popular features: stronger card contrast ----------
   White section; each card gets a visible border and a soft shadow so it
   separates clearly from the page and from its neighbors. */
.caps--contrast .bento--compact { gap: 20px; }
.caps--contrast .tile--v3 {
  background: var(--white);
  border: 1px solid #cdd7e6;
  box-shadow: 0 1px 2px rgba(18, 25, 38, 0.06), 0 8px 24px rgba(18, 25, 38, 0.07);
}
.caps--contrast .tile--v3:hover { border-color: var(--brand-light); box-shadow: 0 2px 4px rgba(18, 25, 38, 0.08), 0 14px 32px rgba(18, 25, 38, 0.1); }
.caps--contrast .tile__title { font-size: 19px; color: var(--brand-navy); }
.caps--contrast .tile__text { font-size: 15px; color: var(--ink-700); }
.caps--contrast .stage { background: #e3ecfb; border: 1px solid var(--card-border); }

/* ---------- 39. Listing System Platform editions: stronger card contrast ----------
   Same treatment as the popular-features cards: visible border, soft shadow,
   darker body text. ReSource keeps its pale blue premium tone. */
.editions { gap: 20px; }
.edition {
  background: var(--white);
  border: 1px solid #cdd7e6;
  box-shadow: 0 1px 2px rgba(18, 25, 38, 0.06), 0 8px 24px rgba(18, 25, 38, 0.07);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.edition:hover { transform: translateY(-2px); border-color: var(--brand-light); box-shadow: 0 2px 4px rgba(18, 25, 38, 0.08), 0 14px 32px rgba(18, 25, 38, 0.1); }
.edition__text { font-size: 16px; color: var(--ink-700); }
.edition--premium { background: var(--brand-tint); border-color: var(--card-border); }
.edition--premium:hover { border-color: var(--brand-blue); }
.edition--premium .edition__text { color: var(--ink-900); }

/* ---------- 40. Integrations cards: stronger contrast ----------
   Same treatment as the popular-features and edition cards. */
.integrations__grid { gap: 16px; }
.integration {
  background: var(--white);
  border: 1px solid #cdd7e6;
  box-shadow: 0 1px 2px rgba(18, 25, 38, 0.06), 0 8px 24px rgba(18, 25, 38, 0.07);
}
.integration:hover { transform: translateY(-2px); border-color: var(--brand-light); box-shadow: 0 2px 4px rgba(18, 25, 38, 0.08), 0 14px 32px rgba(18, 25, 38, 0.1); }
.integration .icon-tile { background: var(--brand-navy); color: var(--white); }
.integration__title { color: var(--brand-navy); }
@media (min-width: 1100px) { .integrations__grid { gap: 20px; } }

/* ---------- 41. Client quotes: black cards with light text ---------- */
.quotes--black .quote {
  background: var(--ink-950); border: 1px solid var(--ink-950);
  box-shadow: 0 1px 2px rgba(18, 25, 38, 0.1), 0 12px 28px rgba(18, 25, 38, 0.16);
}
.quotes--black .quote blockquote { color: var(--white); }
.quotes--black .quote__mark { color: var(--brand-light); }
.quotes--black .quote figcaption { color: var(--brand-mist); border-top-color: var(--line-dark); }
.quotes--black .quote figcaption strong { color: var(--white); }
/* Page headers: give longer headlines more room so they don't stack too tall */
.page-hero__inner > .h-page { max-width: 1040px; }
/* Sentence-length page headlines: one step smaller than short page titles */
.page-hero .h-page--long { font-size: clamp(30px, 4.2vw, 54px); line-height: 1.1; }

/* ---------- 42. "Option for both editions" (MCP Connector) ---------- */
.opt { font-size: 13px; font-weight: 600; color: var(--brand-navy); background: var(--brand-tint); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.option-strip {
  display: flex; flex-direction: column; gap: 10px; margin-top: 20px; padding: 20px 22px;
  background: var(--white); border: 1px dashed var(--brand-light); border-radius: var(--radius-lg);
}
.option-strip__label { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-navy); background: var(--brand-tint); border-radius: 6px; padding: 4px 8px; }
.option-strip p { font-size: 16px; line-height: 1.55; color: var(--ink-700); }
.option-strip p strong { color: var(--brand-navy); }
.option-strip .text-link { align-self: flex-start; }
@media (min-width: 900px) {
  .option-strip { flex-direction: row; align-items: center; gap: 20px; padding: 18px 24px; }
  .option-strip__label { align-self: center; flex-shrink: 0; }
  .option-strip .text-link { align-self: center; margin-left: auto; flex-shrink: 0; }
}
.included__option { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--line-200); font-size: 14px; color: var(--ink-700); }
.included__option-label { font-weight: 700; color: var(--brand-navy); }
.included__option .lockup { font-weight: 600; color: var(--brand-navy); }
.included__option .text-link { font-size: 14px; min-height: 32px; }
.included__option { display: block; }
.included__option .text-link { display: inline-flex; margin-left: 6px; vertical-align: middle; }

/* Four "included in both" items: 2 across on tablets, 4 across on desktop */
@media (min-width: 1100px) { .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) { .included__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .included__items { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Photo in a product row: same frame as the video cards */
.media-card { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--card-border); box-shadow: var(--shadow-lift); background: var(--brand-smoke); }
.media-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }

/* ---------- 43. AI Agent Tools hero: two columns like other page headers ---------- */
.mcp-hero { padding-block: 48px 56px; }
.mcp-hero__grid { position: relative; z-index: 1; display: grid; gap: 36px; align-items: center; }
.mcp-hero__inner { gap: 20px; }
.mcp-hero__title { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.05; }
.mcp-hero .lede { max-width: 560px; }
.mcp-hero__media { min-width: 0; }
.mcp-hero .video-frame { margin-top: 0; }
.mcp-hero .transcript { margin-top: 14px; }
.mcp-hero .hero__plus { left: -10vw; right: auto; top: auto; bottom: -30%; width: min(30vw, 400px); opacity: 0.3; }
@media (min-width: 1024px) {
  .mcp-hero { padding-block: 96px; }
  .mcp-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; }
  .mcp-hero .video-frame { border-radius: var(--radius-lg); }
}
.mcp-hero .hero__plus { bottom: -48%; }
.mcp-hero .hero__plus { left: auto; right: -7vw; top: -14%; bottom: auto; width: min(34vw, 460px); opacity: 0.35; }

/* ---------- 44. AI Agent Tools: standard page header + video section ---------- */
.page-hero .h-page--lockup .lockup { white-space: normal; }
.page-hero .h-page--lockup .lockup__brand, .page-hero .h-page--lockup .lockup__product { white-space: nowrap; }
.page-hero .mcp-hero__works { font-size: 15px; font-weight: 500; color: var(--brand-light); max-width: 820px; }
.mcp-video__inner { max-width: 980px; }
.mcp-video .video-frame { margin-top: 0; }
@media (min-width: 1024px) { .mcp-video { padding-block: 72px 80px; } }

/* ---------- 45. Consistent page header height ----------
   Every inner page header shares one minimum height on tablet and desktop,
   with content centered vertically. Phones size to content. */
@media (min-width: 768px) {
  .page-hero { display: flex; align-items: center; min-height: 480px; }
  .page-hero > .container { flex: 0 0 auto; }
}
@media (min-width: 1024px) {
  .page-hero { min-height: 560px; padding-block: 72px; }
}

/* ==========================================================================
   46. Sub-page headers: one per page, each with its own look.
   The constant: a faint, large "+" backdrop in the same size and position.
   Heights follow content; padding is shared.
   ========================================================================== */
.sub-hero { position: relative; overflow: hidden; padding-block: 48px 56px; }
.sub-hero__plus {
  position: absolute; z-index: 0; pointer-events: none;
  width: 340px; height: 340px; right: -90px; top: -40px;
  fill: none; stroke-width: 2.6; stroke-linecap: round;
}
.sub-hero__grid { position: relative; z-index: 1; display: grid; gap: 36px; align-items: center; }
.sub-hero__text { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.sub-hero__text > .h-page, .sub-hero__text > .lede { max-width: 640px; }
.sub-hero .h-page { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -0.02em; color: var(--brand-navy); }
.sub-hero .h-page--long { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; }
.sub-hero .lede { color: var(--ink-700); }
.sub-hero__visual { min-width: 0; }
@media (min-width: 1024px) {
  .sub-hero { padding-block: 80px 88px; }
  .sub-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; }
  .sub-hero__plus { width: 620px; height: 620px; right: -140px; top: 50%; transform: translateY(-50%); }
}

/* Backgrounds, with the "+" tinted to each */
.sub-hero--tint { background: var(--brand-tint); }
.sub-hero--tint .sub-hero__plus { stroke: #ffffff; opacity: 0.75; }
.sub-hero--gray { background: var(--brand-smoke); border-bottom: 1px solid var(--line-200); }
.sub-hero--gray .sub-hero__plus { stroke: var(--card-border); opacity: 1; }
.sub-hero--navy { background: var(--brand-navy); }
.sub-hero--navy .sub-hero__plus { stroke: rgba(157, 187, 235, 0.16); }
.sub-hero--dark { background: var(--ink-950); }
.sub-hero--dark .sub-hero__plus { stroke: rgba(157, 187, 235, 0.12); }
.sub-hero.on-dark .h-page { color: var(--white); }
.sub-hero.on-dark .lede { color: var(--brand-mist); }
.sub-hero .h-page--lockup .lockup { white-space: normal; }
.sub-hero .h-page--lockup .lockup__brand, .sub-hero .h-page--lockup .lockup__product { white-space: nowrap; }
.sub-hero .mcp-hero__works { font-size: 15px; font-weight: 500; color: var(--brand-light); max-width: 640px; }
.sub-hero .jump { margin-top: 4px; }
.sub-hero--tint .pill { border-color: var(--card-border); }

/* Visual: product family (Products) */
.hv-family { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
.hv-family__label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-600); }
.hv-family__editions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hv-edition { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; background: var(--brand-smoke); border: 1px solid var(--line-200); }
.hv-edition--premium { background: var(--brand-tint); border-color: var(--card-border); }
.hv-edition__tag { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brand-navy); }
.hv-edition__name { font-size: 20px; line-height: 1.15; }
.hv-edition__name .lockup { white-space: normal; }
.hv-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hv-chips li { font-size: 13px; font-weight: 600; color: var(--white); background: var(--brand-navy); border-radius: 999px; padding: 6px 12px; }

/* Visual: data flow (Data Services) */
.hv-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 22px; background: var(--white); border: 1px solid var(--line-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
.hv-flow__col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hv-flow__col li { font-size: 13px; font-weight: 600; color: var(--brand-navy); background: var(--brand-smoke); border: 1px solid var(--line-200); border-radius: 10px; padding: 8px 10px; text-align: center; }
.hv-flow__arrow { font-size: 20px; font-weight: 700; color: var(--brand-blue); }
.hv-flow__hub { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 12px; border: 2px solid var(--brand-navy); border-radius: 14px; background: var(--white); }
.hv-flow__hub img { width: 48px; height: auto; }
.hv-flow__hub span { font-size: 12px; font-weight: 700; color: var(--brand-navy); white-space: nowrap; }

/* Visual: code card (Developers) */
.hv-code { border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-950); border: 1px solid rgba(157, 187, 235, 0.3); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); }
.hv-code__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line-dark); }
.hv-code__bar span { width: 10px; height: 10px; border-radius: 99px; background: #2a3446; }
.hv-code__bar em { margin-left: 8px; font-style: normal; font-family: var(--font-mono); font-size: 12px; color: var(--brand-light); }
.hv-code pre { margin: 0; padding: 20px 18px; overflow-x: auto; }
.hv-code code { font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: #d4e0f5; white-space: pre; }
.hv-code code b { font-weight: 500; color: var(--brand-light); }
.hv-code__foot { padding: 12px 18px; border-top: 1px solid var(--line-dark); font-size: 13px; color: var(--brand-mist); }

/* Visual: chat (AI Agent Tools) */
.hv-chat { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); color: var(--ink-900); }
.hv-chat__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line-200); font-size: 15px; }
.hv-chat__tag { font-size: 12px; font-weight: 600; color: var(--brand-navy); background: var(--brand-tint); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.hv-chat__user { align-self: flex-end; max-width: 88%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--brand-navy); color: var(--white); font-size: 14px; line-height: 1.45; }
.hv-chat__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hv-chat__steps li { font-size: 12px; font-weight: 600; color: var(--brand-navy); background: var(--brand-tint); border-radius: 999px; padding: 4px 10px; }
.hv-chat__reply { font-size: 14px; }
.hv-chat__tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hv-chat__tiles li { padding: 10px; border-radius: 10px; background: var(--brand-smoke); border: 1px solid var(--line-200); font-size: 12px; color: var(--ink-600); }
.hv-chat__tiles b { display: block; font-size: 22px; line-height: 1.1; color: var(--brand-navy); }
.hv-chat__note { font-size: 11px; color: var(--ink-500); }

@media (max-width: 480px) {
  .hv-flow { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .hv-flow__arrow { justify-self: center; transform: rotate(90deg); }
  .hv-flow__hub { justify-self: center; }
  .hv-family__editions { grid-template-columns: minmax(0, 1fr); }
}
.sub-hero .jump { flex-wrap: wrap; overflow: visible; }
/* Phones: keep headers compact; the full content appears further down each page */
@media (max-width: 639px) { .sub-hero__visual { display: none; } }

/* ---------- 47. Sub-page headers, text only: spacious and balanced ----------
   Text on the left, the faint "+" balancing it on the right. */
.sub-hero { padding-block: 64px 72px; }
.sub-hero__grid { grid-template-columns: minmax(0, 1fr); }
.sub-hero__text { gap: 22px; max-width: 760px; }
.sub-hero__text > .h-page, .sub-hero__text > .lede { max-width: 760px; }
.sub-hero__plus { width: 300px; height: 300px; right: -110px; top: -30px; transform: none; }
@media (min-width: 1024px) {
  .sub-hero { padding-block: 112px 120px; }
  .sub-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .sub-hero__plus { width: 520px; height: 520px; right: 4%; top: 50%; transform: translateY(-50%); }
}
@media (min-width: 1440px) { .sub-hero__plus { right: 8%; } }
/* Keep the "+" clear of the text on desktop; a small corner accent on phones and tablets */
.sub-hero__plus { width: 200px; height: 200px; right: -80px; top: -50px; transform: none; }
@media (min-width: 768px) { .sub-hero__plus { width: 260px; height: 260px; right: -90px; top: -60px; } }
@media (min-width: 1024px) {
  .sub-hero__text, .sub-hero__text > .h-page, .sub-hero__text > .lede { max-width: 620px; }
  .sub-hero__plus { width: 380px; height: 380px; right: -40px; top: 50%; transform: translateY(-50%); }
}
@media (min-width: 1280px) {
  .sub-hero__text, .sub-hero__text > .h-page, .sub-hero__text > .lede { max-width: 680px; }
  .sub-hero__plus { width: 460px; height: 460px; right: 3%; }
}
@media (min-width: 1600px) { .sub-hero__plus { width: 520px; height: 520px; right: 9%; } }

/* ---------- 48. Sub-page headers: split editorial layout, no graphics ----------
   Headline left, intro and actions right (aligned to the headline's bottom).
   Each page keeps its own background. The large "+" is Home-only. */
.sub-hero { padding-block: 56px 64px; }
.sub-hero__split { position: relative; display: grid; gap: 24px; }
.sub-hero__head .h-page { max-width: 820px; margin: 0; }
.sub-hero__body { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.sub-hero__body > .lede { max-width: 560px; margin: 0; }
.sub-hero__body .page-hero__actions { margin-top: 4px; }
.sub-hero--gray { border-bottom: 1px solid var(--line-200); }
@media (min-width: 1024px) {
  .sub-hero { padding-block: 96px 104px; }
  .sub-hero__split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: end; }
  .sub-hero__body { padding-bottom: 6px; }
  .sub-hero__body .page-hero__actions { flex-wrap: wrap; }
}
/* Short, uniform headlines: a touch smaller, with a wider headline column */
.sub-hero .h-page { font-size: clamp(34px, 4.2vw, 56px); }
@media (min-width: 1024px) { .sub-hero__split { grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); gap: 64px; } }
/* Blog header: white with a hairline, text only */
.sub-hero--light { background: var(--white); border-bottom: 1px solid var(--line-200); }

/* ---------- 49. Stacked sub-page headers (original layout, no graphics) ----------
   Headline, intro and actions in one left-aligned column. Used on Products,
   AI Agents, Data Services and Developers. Blog uses the split layout. */
.sub-hero--stacked { padding-block: 56px 64px; }
.sub-hero__stack { display: flex; flex-direction: column; gap: 20px; }
.sub-hero__stack > .h-page { max-width: 900px; margin: 0; }
.sub-hero__stack > .lede, .sub-hero__stack > .mcp-hero__works { max-width: 760px; margin: 0; }
.sub-hero__stack > .page-hero__actions, .sub-hero__stack > .jump { margin-top: 8px; }
@media (min-width: 1024px) { .sub-hero--stacked { padding-block: 96px 104px; } }

/* ==========================================================================
   50. Site-wide card contrast (same treatment as the Home page cards):
   white surface, visible border, soft shadow, darker body text; clickable
   cards lift slightly on hover. Developer docs keep their own theme.
   ========================================================================== */
:root {
  --card-border: #cdd7e6;   /* Card border: outlines on cards and panels on light backgrounds */
  --navy-hover: #163569;    /* primary button hover (white text 12.0:1) */
  --error: #b42318;         /* form errors (6.6:1 on white), always with a text message */
  --card-border-hover: var(--brand-light);
  --card-shadow: 0 1px 2px rgba(18, 25, 38, 0.06), 0 8px 24px rgba(18, 25, 38, 0.07);
  --card-shadow-hover: 0 2px 4px rgba(18, 25, 38, 0.08), 0 14px 32px rgba(18, 25, 38, 0.1);
}
/* Feature cards (Products, Data Services) */
.cap, .section--alt .cap, .section--tint .cap { background: var(--white); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); }
.cap:hover { transform: translateY(-2px); border-color: var(--card-border-hover); box-shadow: var(--card-shadow-hover); }
.cap .cap__text { color: var(--ink-700); }
.cap .icon-tile { background: var(--brand-navy); color: var(--white); }
.card-grid { gap: 16px; }
@media (min-width: 1024px) { .card-grid { gap: 20px; } }
/* Post cards and featured post (Home news, Blog) */
.post, .featured { background: var(--white); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.post:hover, .featured:hover { transform: translateY(-2px); border-color: var(--card-border-hover); box-shadow: var(--card-shadow-hover); }
.featured .cap__text { color: var(--ink-700); }
/* Side panels (AI Agents login panel, Data Services data quality panel) */
.split__panel { border: 1px solid var(--card-border); box-shadow: var(--card-shadow); }
.split__panel .cap__text { color: var(--ink-700); }
/* Flow diagram items (Home, Data Services) */
.flow { border-color: var(--card-border); }
.flow__item { border-color: var(--card-border); box-shadow: 0 1px 2px rgba(18, 25, 38, 0.06); }
/* Comparison table (Products) */
.compare { border-color: var(--card-border); box-shadow: var(--card-shadow); }

/* ---------- 51. Darker sections: Data Services blocks, Developers ---------- */
/* White cards on dark bands keep the site-wide card treatment */
.section--navy .cap, .section--deep .cap { border-color: rgba(157, 187, 235, 0.35); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 10px 28px rgba(0, 0, 0, 0.28); }
.section--navy .split__panel, .section--deep .split__panel { border-color: rgba(157, 187, 235, 0.35); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25); }
.section--navy .plus-list li, .section--deep .plus-list li { color: var(--white); }
.on-dark .section-head .text-link { color: var(--white); }
/* Developers: a near-black header that flows into the always-dark docs */
.sub-hero--ink { background: var(--ink-950); border-bottom: 1px solid var(--line-dark); }
.docs[data-docs-theme="dark"] { background: var(--ink-950); }
.docs__toolbar .docs-search { flex-basis: 100%; }

/* ---------- 52. About page ---------- */
/* At a glance */
.glance-band { padding-block: 40px; border-bottom: 1px solid var(--line-200); }
.glance { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
.glance__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding-top: 16px; border-top: 2px solid var(--brand-navy); }
.glance__item dt, .glance__item dd { margin: 0; }
.glance__value { font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: -0.015em; color: var(--brand-navy); }
.glance__label { font-size: 14px; line-height: 1.45; color: var(--ink-700); }
@media (min-width: 1024px) { .glance-band { padding-block: 56px; } .glance { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } .glance__value { font-size: 36px; } }

/* Story + timeline */
.story { display: grid; gap: 40px; }
.story__intro { display: flex; flex-direction: column; gap: 16px; }
.tl { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: 14px; }
.tl::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--card-border); }
.tl__item { position: relative; display: grid; gap: 6px; padding: 18px 20px 18px 36px; background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-md); box-shadow: var(--card-shadow); margin-left: 20px; }
.tl__item::before { content: ""; position: absolute; left: -20px; top: 24px; width: 16px; height: 16px; border-radius: 99px; background: var(--brand-navy); border: 3px solid var(--brand-smoke); }
.tl__when { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-blue); }
.tl__title { font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--brand-navy); }
.tl__text { font-size: 15px; line-height: 1.6; color: var(--ink-700); }
.tl__item:last-child::before { background: var(--brand-light); }
@media (min-width: 1024px) {
  .story { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .story__intro { position: sticky; top: calc(var(--header-h) + 32px); }
  .tl__item { grid-template-columns: 140px minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 20px 24px 20px 28px; }
}

/* Vision: three ideas */
.ideas { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.idea { display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: var(--radius-lg); background: var(--card-on-navy); border: 1px solid var(--border-on-navy); }
.idea__num { font-family: var(--font-mono); font-size: 14px; color: var(--brand-light); }
.idea__title { font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--white); }
.idea__text { font-size: 16px; line-height: 1.6; color: var(--brand-mist); }
@media (min-width: 900px) { .ideas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .idea { padding: 32px; } }

/* Areas of expertise */
.xp { margin: 0; display: grid; grid-template-columns: 1fr; border: 1px solid var(--card-border); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--card-shadow); overflow: hidden; }
.xp__row { display: grid; gap: 4px; padding: 16px 20px; border-bottom: 1px solid var(--line-200); }
.xp__row:last-child { border-bottom: none; }
.xp__area { margin: 0; font-size: 16px; font-weight: 700; color: var(--brand-navy); }
.xp__what { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-700); }
@media (min-width: 900px) {
  .xp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xp__row { grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 18px 24px; }
  .xp__row:nth-child(odd) { border-right: 1px solid var(--line-200); }
  .xp__row:nth-last-child(2):nth-child(odd) { border-bottom: none; }
}

/* Current initiatives */
.inits { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.init { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--radius-lg); background: var(--ink-850); border: 1px solid var(--line-dark); }
.init__title { font-size: 20px; line-height: 1.25; font-weight: 700; color: var(--white); }
.init__what { font-size: 15px; line-height: 1.6; color: var(--brand-mist); }
.init__why { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-dark); font-size: 15px; line-height: 1.5; color: var(--white); }
.init__why span { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-light); }
@media (min-width: 640px) { .inits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .inits { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; } .init { grid-column: span 2; } .init:nth-child(4) { grid-column: 2 / span 2; } .init:nth-child(5) { grid-column: 4 / span 2; } }

/* Leadership */
.leaders { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.leader { display: flex; flex-direction: column; gap: 6px; padding: 14px; background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); }
.leader__photo { aspect-ratio: 1 / 1; border-radius: 12px; margin-bottom: 8px; font-size: 12px; }
.leader__name { font-size: 17px; line-height: 1.3; font-weight: 700; color: var(--brand-navy); }
.leader__role { font-size: 14px; color: var(--ink-700); }
@media (min-width: 768px) { .leaders { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .leaders { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; } }

/* ---------- 53. Contact page ---------- */
.contact__grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1024px) { .contact__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px; } }
.contact-form, .contact-done {
  display: grid; grid-template-columns: 1fr; gap: 16px 20px; padding: 24px;
  background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-xl); box-shadow: var(--card-shadow);
}
.contact-form[hidden], .contact-done[hidden] { display: none; }
@media (min-width: 640px) { .contact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 32px; } }
.contact-form__head, .field--full, .contact-form__actions, .contact-form__status { grid-column: 1 / -1; }
.contact-form__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.contact-form__title { font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--brand-navy); }
.contact-form__topic { font-size: 13px; font-weight: 600; color: var(--brand-navy); background: var(--brand-tint); border-radius: 999px; padding: 5px 12px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.field__opt { font-weight: 400; color: var(--ink-600); }
.field input[type=text], .field input[type=email], .field input[type=tel], .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--ink-500); border-radius: var(--radius-sm);
  background: var(--white); color: var(--ink-900); font: inherit; font-size: 16px;
}
.field textarea { resize: vertical; min-height: 132px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--brand-navy); outline-offset: 1px; border-color: var(--brand-navy); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field__error { display: none; font-size: 13px; color: var(--error); }
.field__error.is-shown { display: block; }
.field--check { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.field--check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--brand-navy); flex-shrink: 0; }
.field--check label { flex: 1; font-weight: 400; font-size: 14px; color: var(--ink-700); }
.field--check .field__error { flex-basis: 100%; padding-left: 30px; }
.field--hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.contact-form__note { font-size: 14px; color: var(--ink-600); }
.contact-form__status { font-size: 14px; color: var(--ink-600); min-height: 1.2em; }
.contact-done { justify-items: start; gap: 14px; padding: 40px 32px; }
.contact-done:focus { outline: none; }
.contact-done .icon-tile svg { fill: none; stroke: currentColor; stroke-width: 2.4; }
.contact-done__title { font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--brand-navy); }
.contact-done__text { font-size: 17px; line-height: 1.6; color: var(--ink-700); }
.contact-done__preview { font-size: 13px; color: var(--ink-600); background: var(--brand-smoke); border: 1px dashed var(--line-dash); border-radius: 8px; padding: 8px 12px; }

.contact__side { display: flex; flex-direction: column; gap: 16px; }
.reach { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--radius-xl); background: var(--ink-950); color: var(--white); }
.reach--light { background: var(--white); color: var(--ink-900); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); }
.reach__title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-light); }
.reach--light .reach__title { color: var(--brand-navy); }
.reach__phone { font-size: clamp(28px, 3vw, 36px); font-weight: 700; letter-spacing: -0.01em; color: var(--white); text-decoration: none; }
.reach__phone:hover { color: var(--brand-light); text-decoration: underline; text-underline-offset: 6px; }
.reach__text { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--brand-mist); }
.reach--light .reach__text { color: var(--ink-700); }
.reach .icon-tile { width: 36px; height: 36px; border-radius: 10px; }
.reach .icon-tile svg { width: 18px; height: 18px; }
.reach:not(.reach--light) .icon-tile { background: rgba(255, 255, 255, 0.12); color: var(--white); }
.reach__map { aspect-ratio: 16 / 10; border-radius: 12px; }
.ph-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-600); background: var(--brand-smoke); border: 1px dashed var(--line-dash); border-radius: 6px; padding: 2px 6px; }
.reach:not(.reach--light) .ph-tag { color: var(--brand-mist); background: transparent; border-color: rgba(157, 187, 235, 0.5); }

.teams { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.team { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); }
.team__name { font-size: 19px; font-weight: 700; color: var(--brand-navy); }
.team__text { font-size: 15px; line-height: 1.55; color: var(--ink-700); }
.team__line { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.team__line .icon-tile { width: 32px; height: 32px; border-radius: 8px; }
.team__line .icon-tile svg { width: 16px; height: 16px; }
.team__line a { color: var(--brand-navy); font-weight: 600; overflow-wrap: anywhere; }
.team__pick { margin-top: auto; align-self: flex-start; min-height: 44px; padding: 0; border: none; background: none; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700; color: var(--brand-navy); }
.team__pick:hover .link-arrow { transform: translateX(3px); }
@media (min-width: 640px) { .teams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .teams { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }

/* Contact: side column without an office card */
.reach__email { display: block; font-size: clamp(20px, 2vw, 24px); font-weight: 700; color: var(--brand-navy); text-decoration: none; overflow-wrap: anywhere; }
.reach__email + .reach__email { margin-top: 4px; }
.reach__email:hover { text-decoration: underline; text-underline-offset: 5px; }
.reach--tint { background: var(--brand-tint); color: var(--ink-900); border: 1px solid var(--card-border); }
.reach--tint .reach__title { color: var(--brand-navy); }
.reach__lead { font-size: 15px; line-height: 1.55; color: var(--ink-700); }
.reach__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 1024px) { .contact__side { position: sticky; top: calc(var(--header-h) + 24px); } }

/* Products: single services statement */
.service-statement { display: flex; flex-direction: column; gap: 24px; }
.service-statement__text { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
@media (min-width: 900px) {
  .service-statement { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; }
  .service-statement .actions { flex-shrink: 0; margin-top: 0; }
}

/* ---------- 54. Hero cards without labels: content centered and balanced ---------- */
.xi-card { justify-content: center; }
.xi-card__title { font-size: 24px; line-height: 1.25; }
.xi-card .xi-card__list { gap: 14px; }
@media (min-width: 900px) {
  .xi-cards { align-items: stretch; }
  .xi-card { padding: 44px 48px; min-height: 280px; }
  .xi-card__title { font-size: 32px; line-height: 1.22; letter-spacing: -0.015em; }
  .xi-card .xi-card__list { font-size: 20px; gap: 16px; }
}
@media (min-width: 1280px) { .xi-card__title { font-size: 34px; } }
/* Balance: statement and bullets carry similar visual weight */
@media (min-width: 900px) { .xi-card__title { font-size: 26px; line-height: 1.28; } .xi-card .xi-card__list { font-size: 18px; } }
@media (min-width: 1280px) { .xi-card__title { font-size: 29px; } .xi-card .xi-card__list { font-size: 19px; } }

/* ---------- 55. Client logo reel (Home, under client quotes) ----------
   One slow, continuous strip. Logos are muted gray and show full color on
   hover. Pauses on hover or keyboard focus. Reduced-motion visitors get a
   static, wrapped grid instead. */
.logo-reel { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--line-200); }
.logo-reel__label { text-align: center; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-600); margin-bottom: 28px; }
.logo-reel__viewport { overflow: hidden; }
.logo-reel__rail { display: flex; width: max-content; animation: logo-reel 140s linear infinite; }
.logo-reel:hover .logo-reel__rail, .logo-reel:focus-within .logo-reel__rail { animation-play-state: paused; }
.logo-reel__track { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 64px; padding-right: 64px; }
.logo-reel__item { flex-shrink: 0; display: flex; align-items: center; height: 56px; }
.logo-reel__logo { display: block; height: 30px; width: auto; max-width: none; filter: grayscale(1); opacity: 0.6; transition: filter .25s ease, opacity .25s ease; }
.logo-reel__logo--tall { height: 48px; }
.logo-reel__item:hover .logo-reel__logo { filter: none; opacity: 1; }
@keyframes logo-reel { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 1024px) {
  .logo-reel { margin-top: 72px; }
  .logo-reel__logo { height: 34px; }
  .logo-reel__logo--tall { height: 54px; }
  .logo-reel__track { gap: 80px; padding-right: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-reel__rail { animation: none; width: auto; }
  .logo-reel__track { flex-wrap: wrap; justify-content: center; gap: 28px 48px; padding-right: 0; }
  .logo-reel__track--copy { display: none; }
}

/* Footer: REBNY authorized provider note */
.rebny-note { display: flex; align-items: center; gap: 12px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line-200); font-size: 12px; line-height: 1.4; color: var(--ink-600); max-width: 340px; }
.rebny-note__logo { height: 22px; width: auto; flex-shrink: 0; opacity: 0.85; }

/* Footer: newsletter and REBNY note share the right-hand column */
.site-footer__aside { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 20px; }
.site-footer__aside .newsletter { grid-column: auto; }
.site-footer__aside .rebny-note { margin-top: 0; max-width: none; }
@media (min-width: 1024px) { .site-footer__aside { grid-column: auto; } }

/* ==========================================================================
   56. Blog posts: covers, cards, and four post layouts
   ========================================================================== */
/* Branded covers (decorative) */
.cover { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; aspect-ratio: 16 / 9; padding: 18px 20px; border-radius: 0; overflow: hidden; }
.cover__small { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.cover--announcements { background: var(--brand-navy); color: var(--white); }
.cover--announcements .cover__big { font-size: clamp(56px, 7vw, 88px); line-height: 0.9; font-weight: 700; letter-spacing: -0.04em; }
.cover--announcements .cover__small { color: var(--brand-light); }
.cover--product { background: var(--brand-tint); color: var(--brand-navy); }
.cover--product .cover__icon { width: 64px; height: 64px; border-radius: 16px; background: var(--brand-navy); display: flex; align-items: center; justify-content: center; margin-bottom: auto; }
.cover--product .cover__icon svg { width: 34px; height: 34px; fill: none; stroke: var(--white); stroke-width: 1.8; stroke-linecap: round; }
.cover--market { background: var(--ink-950); color: var(--white); }
.cover--market .cover__bars { display: flex; align-items: flex-end; gap: 8px; height: 60%; margin-bottom: auto; }
.cover--market .cover__bars i { flex: 1; border-radius: 4px 4px 0 0; background: var(--brand-blue); }
.cover--market .cover__bars i:last-child { background: var(--brand-light); }
.cover--market .cover__small { color: var(--brand-light); }
.cover--press { background: var(--brand-smoke); color: var(--brand-navy); border-bottom: 1px solid var(--line-200); }
.cover--press .cover__doc { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: auto; padding-top: 6px; border-top: 3px solid var(--brand-navy); align-self: flex-start; }
.cover--press .cover__small { color: var(--ink-600); }
.cover--lg { aspect-ratio: 4 / 3; padding: 28px; border-radius: var(--radius-lg); }
.cover--lg .cover__small { font-size: 13px; }

/* Cards */
.post { overflow: hidden; display: flex; flex-direction: column; }
.post__cover-link, .featured__cover { display: block; }
.post__body { display: flex; flex-direction: column; gap: 8px; }
.post__dek { font-size: 15px; line-height: 1.55; color: var(--ink-700); }
.featured .cover--lg { border-radius: 0; height: 100%; aspect-ratio: auto; min-height: 260px; }

/* Breadcrumb and back link */
.post-crumbs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 28px; font-size: 14px; }
.post-crumbs a { color: var(--brand-navy); font-weight: 600; text-decoration: none; }
.post-crumbs a:hover { text-decoration: underline; text-underline-offset: 4px; }
.post-crumbs__back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.post-crumbs__trail { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; color: var(--ink-600); }
.post-crumbs__trail li + li::before { content: "/"; margin-right: 8px; color: var(--ink-500); }
.post-crumbs--dark a { color: var(--white); }
.post-crumbs--dark .post-crumbs__trail { color: var(--brand-mist); }

/* Post heroes */
.post-hero { padding-block: 24px 56px; }
.post-hero__grid { display: grid; gap: 32px; align-items: center; }
.post-hero__text { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.post-hero__text--wide { max-width: 880px; }
.post-hero__center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; max-width: 860px; margin: 0 auto; padding-block: 24px 16px; }
.post-hero__title { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.08; letter-spacing: -0.02em; color: var(--brand-navy); }
.post-hero__dek { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--ink-700); }
.post-meta { font-size: 14px; color: var(--ink-600); }
.post-tag { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-navy); background: var(--white); border: 1px solid var(--card-border); border-radius: 999px; padding: 5px 12px; }
.post-hero__center .post-tag { align-self: center; }
.post-tag--light { background: rgba(255, 255, 255, 0.12); border-color: rgba(157, 187, 235, 0.45); color: var(--white); }
/* Category colour on the post page badge, matching the blog cards: product updates blue, company
   press green. Announcements (navy hero) and market insights (dark hero) keep the light badge. */
.post-tag--product { background: var(--brand-blue); border-color: var(--brand-blue); color: var(--white); }
.post-tag--press { background: var(--green-deep); border-color: var(--green-deep); color: var(--white); }
.on-dark .post-hero__title { color: var(--white); }
.on-dark .post-hero__dek { color: var(--brand-mist); }
.on-dark .post-meta { color: var(--brand-mist); }
.post-hero--product { background: var(--brand-tint); }
.post-hero--announce { background: var(--brand-navy); padding-bottom: 72px; }
.post-hero--market { background: var(--ink-950); }
.post-hero--press { background: var(--brand-smoke); border-bottom: 1px solid var(--line-200); }
@media (min-width: 1024px) {
  .post-hero { padding-block: 32px 80px; }
  .post-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
}

/* Article body and sidebar */
.post-layout { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1024px) { .post-layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 64px; } .post-aside { position: sticky; top: calc(var(--header-h) + 24px); } }
.post-body { max-width: 720px; font-size: 17px; line-height: 1.7; color: var(--ink-900); }
.post-body > * + * { margin-top: 18px; }
.post-body h2 { margin-top: 40px; font-size: 24px; line-height: 1.25; color: var(--brand-navy); }
.post-body h2:first-child { margin-top: 0; }
.post-body--center { margin: 48px auto 0; }
.post-lead { font-size: 20px; line-height: 1.6; color: var(--ink-900); }
.post-list { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.post-list li { padding-left: 4px; }
.post-callout { margin-top: 40px; padding: 28px; border-radius: var(--radius-lg); background: var(--brand-tint); border: 1px solid var(--card-border); }
.post-callout h2 { margin-top: 0; font-size: 20px; }
.post-callout p { margin-top: 8px; font-size: 16px; }
.post-callout .actions { margin-top: 16px; }
.glance-card { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); }
.glance-card__title { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-navy); }
.glance-card__list { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.glance-card__list div { display: flex; flex-direction: column; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid var(--line-200); }
.glance-card__list div:last-child { border-bottom: none; padding-bottom: 0; }
.glance-card__list dt { font-size: 13px; font-weight: 700; color: var(--ink-900); }
.glance-card__list dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-700); }
.glance-card__text { font-size: 15px; line-height: 1.55; color: var(--ink-700); }
.glance-card .btn { align-self: flex-start; }
.actions--center { justify-content: center; margin-top: 32px; }

/* Announcement highlights */
.highlights { list-style: none; margin: -48px 0 0; padding: 0; position: relative; display: grid; gap: 12px; }
.highlight { display: flex; flex-direction: column; gap: 6px; padding: 22px; background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); }
.highlight__big { font-size: 26px; line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; color: var(--brand-navy); }
.highlight__label { font-size: 14px; line-height: 1.5; color: var(--ink-700); }
@media (min-width: 768px) { .highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .highlights { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: -72px; } .highlight { padding: 26px; } }

/* Market insights */
.data-note { font-size: 13px; color: var(--ink-600); margin-bottom: 16px; }
.stat-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.stat-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: var(--white); border: 1px solid var(--card-border); border-top: 3px solid var(--brand-navy); border-radius: var(--radius-md); box-shadow: var(--card-shadow); }
.stat-card__value { font-size: 28px; line-height: 1.1; font-weight: 700; color: var(--brand-navy); overflow-wrap: anywhere; }
.stat-card__label { font-size: 14px; line-height: 1.45; color: var(--ink-700); }
@media (min-width: 640px) { .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .stat-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .stat-card__value { font-size: 32px; } }
.chart-card { margin: 24px 0 8px; padding: 24px; background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); }
.chart-card__title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-size: 15px; font-weight: 700; color: var(--brand-navy); margin-bottom: 16px; }
.chart-card__title span { font-size: 12px; font-weight: 600; color: var(--ink-600); }
.hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hbar { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) 48px; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-900); }
.hbar__track { height: 12px; border-radius: 99px; background: var(--brand-tint); overflow: hidden; }
.hbar__fill { display: block; height: 100%; border-radius: 99px; background: var(--brand-navy); opacity: 0.35; }
.hbar__value { text-align: right; font-weight: 600; color: var(--ink-600); }

/* Press release */
.press-body .dateline { color: var(--ink-900); margin-right: 6px; }
.press-end { text-align: center; letter-spacing: 0.3em; color: var(--ink-600); }
.boilerplate { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line-200); }
.boilerplate h2 { margin-top: 0; font-size: 18px; }
.boilerplate p { font-size: 15px; color: var(--ink-700); }
/* Covers inside links: no underline, inherit colors */
.post__cover-link, .featured__cover, .post__cover-link *, .featured__cover * { text-decoration: none !important; }
.post__cover-link, .featured__cover { color: inherit; }
.cover--product .cover__small { color: var(--brand-navy); }
.cover--press .cover__doc { color: var(--brand-navy); }
/* Product cover: agent avatars; white card version in the post header */
.cover__avatars { display: none; align-items: center; margin-bottom: 8px; }
.cover--lg .cover__avatars { display: flex; }
.cover__avatars i, .cover__avatars b { width: 40px; height: 40px; border-radius: 99px; border: 3px solid var(--white); margin-left: -10px; background: var(--brand-navy); }
.cover__avatars i:first-child { margin-left: 0; }
.cover__avatars i:nth-child(2) { background: var(--brand-blue); }
.cover__avatars i:nth-child(3) { background: var(--brand-blue); }
.cover__avatars i:nth-child(4) { background: var(--brand-light); }
.cover__avatars b { display: flex; align-items: center; justify-content: center; background: var(--brand-tint); color: var(--brand-navy); font-size: 18px; }
.post-hero--product .cover--product { background: var(--white); border: 1px solid var(--card-border); box-shadow: var(--shadow-lift); }

/* ---------- 57. Market insights report components ---------- */
.headline-finding { margin-top: 36px; display: grid; gap: 20px; padding: 24px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(157, 187, 235, 0.3); }
.headline-finding__q { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.3; font-weight: 700; color: var(--white); }
.headline-finding__stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.headline-finding__stats li { display: flex; align-items: baseline; gap: 14px; padding-left: 16px; border-left: 3px solid var(--brand-light); }
.hf-num { font-size: 36px; line-height: 1; font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; }
.hf-label { font-size: 15px; line-height: 1.45; color: var(--brand-mist); }
.hf-label strong { color: var(--brand-light); }
@media (min-width: 900px) { .headline-finding { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; padding: 32px 36px; gap: 40px; } }

.findings { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 16px; }
.finding { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); }
.finding__num { font-family: var(--font-mono); font-size: 13px; color: var(--brand-blue); }
.finding h3 { font-size: 19px; line-height: 1.3; color: var(--brand-navy); }
.finding p { font-size: 15px; line-height: 1.6; color: var(--ink-700); }
@media (min-width: 768px) { .findings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }

.post-body--wide { max-width: none; }
.post-body--wide > p { max-width: 720px; }
.post-subhead { margin-top: 28px; font-size: 18px; color: var(--brand-navy); }
.profiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.profile { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-md); box-shadow: var(--card-shadow); }
.profile__seg { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-blue); }
.profile h3 { font-size: 18px; color: var(--brand-navy); }
.profile p { font-size: 15px; line-height: 1.55; color: var(--ink-700); }
@media (min-width: 640px) { .profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.amenities { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; }
.amenities span { color: var(--ink-700); margin-right: 4px; }
.amenities b { font-size: 13px; font-weight: 600; color: var(--brand-navy); background: var(--white); border: 1px solid var(--card-border); border-radius: 999px; padding: 5px 12px; }

.data-table-wrap { border: 1px solid var(--card-border); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--card-shadow); }
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: 14px 18px; border-bottom: 1px solid var(--line-200); }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: none; }
.data-table thead th { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-600); background: var(--brand-smoke); }
.data-table tbody th { font-weight: 700; color: var(--brand-navy); white-space: nowrap; }
.data-table td strong { display: block; font-size: 17px; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.data-table .was { display: block; font-size: 13px; color: var(--ink-600); }
.data-table--compact th, .data-table--compact td { padding: 10px 12px; font-size: 14px; }
.rank { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.rank li::marker { color: var(--brand-blue); font-weight: 700; }
.rank li:first-child { font-weight: 700; color: var(--ink-900); }

.map-block { display: grid; gap: 24px; align-items: start; }
.map-figure { margin: 0; padding: 16px; background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); }
.map-figure img { display: block; width: 100%; height: auto; max-width: 420px; margin: 0 auto; }
.map-figure figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-600); text-align: center; }
.map-text { display: flex; flex-direction: column; gap: 14px; }
.map-text__title { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-navy); }
.map-text__note { font-size: 14px; color: var(--ink-600); }
.chip-row--plain li { background: var(--white); color: var(--brand-navy); border: 1px solid var(--card-border); }
@media (min-width: 900px) { .map-block { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; } }

.yoy { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.yoy__card { display: flex; flex-direction: column; gap: 6px; padding: 18px; background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-md); box-shadow: var(--card-shadow); }
.yoy__label { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-600); }
.yoy__range { font-size: 17px; color: var(--ink-700); font-variant-numeric: tabular-nums; }
.yoy__range strong { font-size: 22px; color: var(--brand-navy); }
.yoy__delta { font-size: 13px; font-weight: 700; color: var(--ink-600); }
.yoy__delta--up { color: var(--green-deep); }
@media (min-width: 640px) { .yoy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }

.supply-grid { display: grid; gap: 16px; }
.supply-grid .chart-card { margin: 0; }
.supply-grid .data-table-wrap { margin-top: 16px; box-shadow: none; }
.hbar__fill--solid { opacity: 1; }
@media (min-width: 900px) { .supply-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }

.vs-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.vs-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); }
.vs-card__boro { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-navy); }
.vs-card__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vs-card__pair > div { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 12px; background: var(--brand-tint); }
.vs-card__pair > div:last-child { background: var(--brand-smoke); }
.vs-card__k { font-size: 12px; font-weight: 600; color: var(--ink-600); }
.vs-card__v { font-size: 19px; font-weight: 700; color: var(--brand-navy); }
@media (min-width: 768px) { .vs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
/* Posts: keep the article column within the screen; wide tables scroll inside their frame */
.post-layout { grid-template-columns: minmax(0, 1fr); }
.post-body, .post-aside { min-width: 0; }
@media (min-width: 1024px) { .post-layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.data-table-wrap { overflow-x: auto; }
.supply-grid { grid-template-columns: minmax(0, 1fr); }
.supply-grid .chart-card { min-width: 0; }
@media (min-width: 900px) { .supply-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .chart-card { padding: 18px; } .hbar { grid-template-columns: minmax(80px, 110px) minmax(0, 1fr) 40px; gap: 8px; } }
/* Inventory cards: stacked; bars and table side by side on wider screens */
@media (min-width: 900px) { .supply-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 760px) {
  .supply-grid .chart-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 8px 28px; align-items: start; }
  .supply-grid .chart-card__title { grid-column: 1 / -1; }
  .supply-grid .data-table-wrap { margin-top: 0; }
}

/* ---------- 58. Product post covers (Home card visuals), press extras ---------- */
.cover--stage { background: var(--brand-tint); justify-content: center; align-items: center; padding: 18px; }
.cover-stage { position: relative; width: 100%; max-width: 360px; display: flex; flex-direction: column; justify-content: center; gap: 10px; color: var(--brand-navy); }
.cover--stage .cover__sample { position: absolute; top: 10px; right: 12px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-600); }
.cover--stage .stage-search { min-height: 40px; font-size: 13px; }
.cover--stage .stage-chips li { font-size: 11px; padding: 4px 9px; }
.cover--stage .stage-metric__num { font-size: 30px; }
.cover--stage .stage-kpis .stage-metric__num { font-size: 24px; }
.cover--stage .mini-bars { height: 28px; }
.cover--stage .avatars span { width: 30px; height: 30px; }
.cover--stage .avatars svg { display: none; }
.cover--lg.cover--stage { background: var(--white); border: 1px solid var(--card-border); box-shadow: var(--shadow-lift); padding: 32px; }
.cover--lg .cover-stage { max-width: 420px; gap: 14px; }
.cover--lg.cover--stage .stage-search { min-height: 48px; font-size: 15px; background: var(--brand-smoke); box-shadow: none; border: 1px solid var(--line-200); }
.cover--lg.cover--stage .stage-summary { background: var(--brand-smoke); box-shadow: none; border: 1px solid var(--line-200); }
.cover--lg.cover--stage .stage-groups li, .cover--lg.cover--stage .stage-sync .node:not(.node--brand) { background: var(--brand-smoke); border: 1px solid var(--line-200); }
.cover--lg.cover--stage .stage-metric__num { font-size: 44px; }
.cover--lg.cover--stage .stage-kpis .stage-metric__num { font-size: 34px; }
.cover--lg.cover--stage .avatars span { width: 40px; height: 40px; border-color: var(--white); }
.cover--lg.cover--stage .cover__sample { top: 14px; right: 16px; font-size: 11px; }
.post-hero__title--release { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; }
.press-quote { margin: 28px 0; padding: 20px 24px; border-left: 4px solid var(--brand-navy); background: var(--brand-tint); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.press-quote p { font-size: 18px; line-height: 1.6; color: var(--ink-900); }
.press-quote footer { margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--brand-navy); }
.post-note { font-size: 14px; color: var(--ink-600); background: var(--brand-smoke); border: 1px solid var(--line-200); border-radius: 10px; padding: 10px 14px; }
.post-aside { display: flex; flex-direction: column; gap: 16px; }
.glance-card--soft { background: var(--brand-smoke); box-shadow: none; }
.glance-card__text a { font-weight: 600; color: var(--brand-navy); line-height: 2; }
/* "Sample data" label anchors to the cover's corner, clear of the figures */
.cover-stage { position: static; }
.cover--stage .cover__sample { top: 12px; right: 14px; }
.cover--stage .stage-kpis { margin-top: 12px; }
/* Small card covers: "Sample data" sits in the bottom corner, clear of the figures */
.cover--stage:not(.cover--lg) .cover__sample { top: auto; bottom: 10px; right: 12px; }

/* "Included with your RealPlus subscription" tag (MCP Connector sections) */
.included-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px 6px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--brand-navy); background: var(--white); border: 1px solid var(--card-border); }
.included-tag svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.on-dark .included-tag { color: var(--white); background: rgba(255, 255, 255, 0.1); border-color: rgba(157, 187, 235, 0.45); }
.on-dark .included-tag svg { color: var(--brand-light); }
.cta__text .included-tag { margin-top: 14px; }

/* ---------- 59. Developers: API library, connect cards, data facts ---------- */
.api-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.api-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px; background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.api-card:hover { transform: translateY(-2px); border-color: var(--card-border-hover); box-shadow: var(--card-shadow-hover); }
.api-card--featured { border-color: var(--brand-light); background: var(--brand-tint); }
.api-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.api-card__tag { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brand-blue); }
.api-card--featured .api-card__tag { color: var(--brand-navy); }
.api-card__name { font-size: 22px; line-height: 1.2; font-weight: 700; color: var(--brand-navy); }
.api-card__text { font-size: 15px; line-height: 1.6; color: var(--ink-700); }
.api-card__list { font-size: 15px; gap: 8px; }
.api-card > .text-link { margin-top: auto; align-self: flex-start; }
@media (min-width: 700px) { .api-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1200px) { .api-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .api-card { padding: 28px; } }

.connect-grid { display: grid; gap: 16px; }
.connect-card { display: flex; flex-direction: column; gap: 14px; padding: 28px; background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); }
.connect-card--dark { background: var(--ink-950); border-color: var(--ink-950); }
.connect-card--dark .icon-tile { background: rgba(255, 255, 255, 0.12); }
.connect-card__name { font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--brand-navy); }
.connect-card--dark .connect-card__name .lockup__brand { color: var(--white); }
.connect-card--dark .connect-card__name .lockup__product { color: var(--brand-light); }
.connect-card__text { font-size: 16px; line-height: 1.6; color: var(--ink-700); }
.connect-card--dark .connect-card__text { color: var(--brand-mist); }
.connect-card > .text-link { margin-top: auto; align-self: flex-start; }
@media (min-width: 900px) { .connect-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .connect-card { padding: 36px; } }

.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fact { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--radius-lg); background: var(--ink-850); border: 1px solid var(--line-dark); }
.fact__big { font-size: 28px; line-height: 1.1; font-weight: 700; color: var(--white); }
.fact__label { font-size: 14px; line-height: 1.5; color: var(--brand-mist); }
@media (min-width: 640px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
/* Phones: keep connect cards and closing headlines within the screen */
.connect-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .connect-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.connect-card, .api-card { min-width: 0; }
.included-tag { max-width: 100%; }
@media (max-width: 480px) { .h-cta { font-size: 38px; } .included-tag { font-size: 13px; } }

/* "Coming soon" badge on list items and card titles */
.soon-badge { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; vertical-align: middle; color: var(--brand-navy); background: var(--brand-tint); border: 1px solid var(--card-border); }
.flow__item .soon-badge { margin-left: auto; }
.cap__title .soon-badge { font-size: 10px; }

/* MCP page: login statement, headline and text side by side on desktop */
.statement-split { display: grid; gap: 16px; }
.statement-split .h-section, .statement-split .lede { margin: 0; }
.statement-split .lede { max-width: 620px; }
@media (min-width: 1024px) {
  .statement-split { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; align-items: center; }
  .login-band.section { padding-block: 88px; }
}

/* Home hero "+": a faint, oversized brand shape cropped off the edge,
   not a standalone symbol */
.hero--bold .hero__plus { opacity: 0.09; width: min(46vw, 640px); right: -12vw; top: -40px; }
@media (max-width: 767px) { .hero--bold .hero__plus { opacity: 0.075; width: 70vw; right: -24vw; top: -20px; } }

/* Labels on white panels inside dark sections stay navy for contrast */
.on-dark .split__panel .label { color: var(--brand-navy); }

/* ---------- Accent 1 (Neon Aqua Blue #23C3ED): specified placements ---------- */
:root { --accent-sky: var(--brand-aqua); }  /* alias of --brand-aqua */
/* 1. "+" bullets in lists, site-wide */
li .plus, .note-line .plus { color: var(--accent-sky) !important; } /* wins over older section-specific bullet colors */
/* 2. Feature card visuals (Home) and matching product post covers:
   a mix of navy, blue, sky and green for shapes. Text and small symbols use
   the deeper green #1F7A47 (text, chips) or Turkish Blue (text). */
:root { --accent-green: var(--brand-mint); --accent-green-deep: var(--green-deep); --accent-sky-deep: var(--brand-blue); --p2-blue: var(--brand-blue); }  /* aliases of the guide tokens */
/* search: only the magnifying glass is green (chips stay navy) */
.stage-search svg { stroke: var(--accent-green-deep); }
/* market summary lines: green, sky, light blue */
.stage-summary .ln:nth-of-type(1) { background: var(--accent-green); }
.stage-summary .ln:nth-of-type(2) { background: var(--accent-sky); }
.stage-summary__icon { stroke: var(--accent-green-deep); }
/* buyer interest: matching circles in navy, blue, sky, green */
.avatars span:nth-child(1) { background: var(--brand-navy); }
.avatars span:nth-child(2) { background: var(--accent-green); }
.avatars span:nth-child(3) { background: var(--accent-sky); }
.avatars span:nth-child(4) { background: var(--p2-blue); }
.stage-metric .stage-metric__num { color: var(--brand-navy); }
/* deal analytics: bars alternate light blue and sky; highlighted bar green */
.mini-bars span:nth-child(odd) { background: var(--brand-light); }
.mini-bars span:nth-child(even) { background: var(--accent-sky); }
.mini-bars span:last-child { background: var(--accent-green); }
.stage-kpis > div:last-child .stage-metric__num { color: var(--accent-green-deep); }
/* CMA status dots */
.stage-groups .dot--a { background: var(--brand-navy); }
.stage-groups .dot--b { background: var(--accent-sky); }
.stage-groups .dot--c { background: var(--accent-green); }
.stage-groups .dot--d { background: var(--brand-light); }
/* CRM: chips and sync arrows stay green */
.stage-sync__icon { stroke: var(--accent-green-deep); }
.stage-sync ~ .stage-chips li { background: var(--accent-green-deep); }

/* Blog covers (non-feature posts) */
.cover--market .cover__bars i:nth-child(3n+1) { background: var(--p2-blue); }
.cover--market .cover__bars i:nth-child(3n+2) { background: var(--accent-sky); }
.cover--market .cover__bars i:nth-child(3n+3) { background: var(--accent-green); }
.cover--market .cover__small { color: var(--accent-sky); }
.cover--announcements .cover__small { color: var(--accent-sky); }
.cover--press .cover__doc { border-top-color: var(--accent-green-deep); }

/* Blog post visuals */
.stat-card:nth-child(4n+1) { border-top-color: var(--brand-navy); }
.stat-card:nth-child(4n+2) { border-top-color: var(--accent-sky); }
.stat-card:nth-child(4n+3) { border-top-color: var(--accent-green); }
.stat-card:nth-child(4n+4) { border-top-color: var(--p2-blue); }
.supply-grid > :nth-child(2) .hbar__fill { background: var(--accent-green); }
.rank li::marker { color: var(--accent-sky-deep); }
.yoy__delta--up { color: var(--accent-green-deep); }
.headline-finding__stats li { border-left-color: var(--accent-sky); }
.hf-label strong { color: var(--accent-sky); }
.finding__num { color: var(--accent-sky-deep); }
.highlight { border-top: 3px solid var(--brand-navy); }
.highlight:nth-child(2) { border-top-color: var(--accent-sky); }
.highlight:nth-child(3) { border-top-color: var(--accent-green); }
.highlight:nth-child(4) { border-top-color: var(--p2-blue); }
.press-quote { border-left-color: var(--accent-sky); }
/* 3. "RealPlus by the numbers": the line above each figure */
.stats--bold .stat { border-top-color: var(--accent-sky); }

/* Accent: deeper green outlines (same weights as before) on the Home product
   cards (1px) and the central RealPlus data card in the flow diagram (2px) */
.platform .edition, .platform .edition--premium { border-color: var(--accent-green); }
.flow__hub { border-color: var(--accent-green); }
/* Accent: deeper green outline on the Products header jump "pills" (same weight) */
.sub-hero .jump .pill { border-color: var(--accent-green); }
/* Accent: brand green checkmarks in the Products comparison table and in the
   "Included with your RealPlus subscription" tags (AI Connector) */
.compare .check { stroke: var(--accent-green); }
.included-tag svg, .on-dark .included-tag svg { color: var(--accent-green); }
/* Accent: sky blue arrows in the AI Connector "How it works" flow chart, and its step numbers */
.flowline__arrow, .flowline__arrow svg { color: var(--accent-sky); stroke: var(--accent-sky); }
.steps--dark .step::before { background: var(--accent-sky); color: var(--ink-950); }
/* Accent: bold brand green outline on the Developers API library cards (original 1px weight) */
.api-card, .api-card--featured, .api-card:hover { border: 1px solid var(--accent-green); }
/* Accent: bold brand green for the menu underline (current page and hover); text stays navy */
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration-color: var(--accent-green); }
/* Accent: very light green hover shading on the Products header pills */
.sub-hero .jump .pill { transition: background-color .15s ease; }
.sub-hero .jump .pill:hover, .sub-hero .jump .pill:focus-visible { background: var(--green-tint); border-color: var(--accent-green); color: var(--brand-navy); }

/* "New" badge on the AI Connector menu item */
.nav-badge { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1.3; letter-spacing: 0.05em; text-transform: uppercase; color: var(--white); background: var(--accent-green-deep); vertical-align: 2px; text-decoration: none; }
.site-nav a .nav-badge { text-decoration: none; }
.mobile-menu__links .nav-badge { font-size: 11px; vertical-align: 3px; }

/* Home: AI Connector heading badge */
.nav-badge--heading { font-size: 13px; padding: 4px 10px; margin-left: 10px; vertical-align: middle; letter-spacing: 0.06em; }

/* Home hero Innovation card: AI Connector as the highlighted first item */
.xi-card__lead { padding-bottom: 14px; margin-bottom: 2px; border-bottom: 1px solid rgba(157, 187, 235, 0.35); }
.xi-card__lead-link { font-weight: 700; color: var(--white); text-decoration: underline; text-decoration-color: var(--accent-sky); text-underline-offset: 4px; }
.xi-card__lead-link:hover { text-decoration-thickness: 2px; }
.xi-card__lead .nav-badge { margin-left: 6px; vertical-align: 2px; }
.xi-card__lead-text { display: block; margin-top: 4px; color: rgba(255, 255, 255, 0.86); font-weight: 500; }
/* Accent: sky blue number circles in the Developers "How access works" steps (navy numbers, 4.9:1) */
.access-steps .steps .step::before { background: var(--accent-sky); color: var(--ink-900); }

/* AI Connector page: "Who it's for" and "Coverage" side by side */
.who-grid { display: grid; gap: 20px; }
.who-card { display: flex; flex-direction: column; gap: 12px; padding: 28px; background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); }
.who-card .h-section { font-size: clamp(26px, 2.6vw, 34px); }
.who-card .lede { margin: 0; }
@media (min-width: 900px) { .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .who-card { padding: 36px; } }
/* Keep the included tag at its standard size inside call-to-action bands */
.cta__text .included-tag { font-size: 14px; }
/* Products: ReSource "Premium white label" badge matches the Home page (navy, white text) */
.carousel__tag--premium { background: var(--brand-navy); color: var(--white); }

/* About page accents */
.glance__item { border-top-color: var(--accent-green); }                 /* stat lines, 2px kept */
.tl__item::before, .tl__item:last-child::before { background: var(--accent-sky); }  /* timeline dots */
.xp { border-color: var(--accent-green); }                                /* expertise box outline, 1px kept */
.idea__num { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-aqua); color: var(--ink-900); font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }  /* 01 02 03: Neon Aqua circle, Ink 900 number (8.5:1) */
/* "New" badge inside the Products header pill */
.jump .pill .nav-badge { margin-left: 6px; vertical-align: 1px; }
.tag-row { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; }
.nav-badge--tag { margin-left: 0; font-size: 11px; padding: 3px 8px; vertical-align: 0; }
/* "New" badge above the AI Connector page headline */
.nav-badge--hero { align-self: flex-start; margin: 0 0 -6px; font-size: 12px; padding: 4px 10px; letter-spacing: 0.07em; }
/* RealPlus ONE band "+": same faint, oversized, cropped treatment as the Home hero */
.one-band .hero__plus { opacity: 0.09; width: min(46vw, 640px); right: -12vw; top: -60px; bottom: auto; }
@media (max-width: 767px) { .one-band .hero__plus { opacity: 0.075; width: 70vw; right: -24vw; top: -20px; } }
/* Contact: sky blue step circles (navy numbers, 4.9:1), and a bold green form outline (1px kept) */
.steps--sky .step::before { background: var(--accent-sky); color: var(--ink-900); }
.contact-form, .contact-done { border-color: var(--accent-green); }

/* Brand alignment fixes (September 2026 guide) */
/* Links inside white cards on dark sections: navy, not the dark-section white */
.on-dark .cap .text-link { color: var(--brand-navy); }
.on-dark .cap .text-link:hover { color: var(--brand-blue); }
/* Small text on navy: light blue (4.7:1), never Neon Aqua (4.4:1) */
.cover--announcements .cover__small { color: var(--brand-light); }
/* Small text on lighter cards over navy: white (7.7:1); light blue is 3.9:1 there */
.suite-card__tag { color: var(--white); }

/* Form fields: visible boundary at WCAG 2.2 AA (3:1 for UI components).
   Ink 500 #697586 is 4.7:1 on white. Focus keeps the navy ring. */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { border-color: var(--ink-500); }

/* Legal pages (Terms, Privacy, Cookies, Accessibility) */
.legal-meta { margin-top: 10px; font-size: 14px; color: var(--ink-600); }
.legal-section { padding-top: 48px; }
.legal { max-width: 760px; }
.legal h2 { font-size: 24px; }
.legal h3 { margin-top: 28px; font-size: 19px; line-height: 1.3; color: var(--brand-navy); }
.legal h4 { margin-top: 22px; font-size: 17px; line-height: 1.35; color: var(--ink-900); }
.legal ul { padding-left: 22px; }
.legal li + li { margin-top: 8px; }
.legal a { color: var(--brand-navy); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-note { padding: 12px 16px; border-left: 4px solid var(--brand-navy); background: var(--brand-tint); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 14px; color: var(--ink-900); }

/* ---------- Contact page (redesign) ---------- */
/* Contact cards in the navy header */
.sub-hero__stack > .ways { max-width: none; width: 100%; margin-top: 12px; }
.ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.way { display: flex; gap: 16px; align-items: flex-start; padding: 22px 22px 24px; background: var(--card-on-navy); border: 1px solid var(--border-on-navy); border-radius: var(--radius-md); }
.way .icon-tile { flex-shrink: 0; background: var(--white); color: var(--brand-navy); }
.way__body { min-width: 0; }
.way__label { margin: 0; font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-mist); }
.way__value { display: inline-block; margin-top: 4px; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--white); text-decoration: none; }
@media (min-width: 1024px) { .way__value { font-size: 21px; } }
.way__value:hover { text-decoration: underline; text-underline-offset: 4px; }
.way__value:focus-visible { outline: 3px solid var(--brand-light); outline-offset: 3px; border-radius: 4px; }
.way__sub { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--brand-mist); }

/* One card: heading and next steps beside the form (desktop); heading, form, then steps (phones) */
.contact-card { display: grid; grid-template-columns: 1fr; grid-template-areas: "intro" "main" "next"; background: var(--white); border: 1px solid var(--brand-mint); border-radius: var(--radius-xl); box-shadow: var(--card-shadow); overflow: hidden; }
.contact-card__intro { grid-area: intro; padding: 32px 28px 28px; background: var(--brand-tint); }
.contact-card__main { grid-area: main; padding: 32px 28px; }
.contact-card__next { grid-area: next; padding: 4px 28px 32px; background: var(--brand-tint); }
.contact-card__next .contact-card__label { margin-top: 28px; }
@media (min-width: 1024px) {
  .contact-card { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); grid-template-rows: auto 1fr; grid-template-areas: "intro main" "next main"; }
  .contact-card__intro { padding: 48px 44px 0; }
  .contact-card__next { padding: 0 44px 48px; }
  .contact-card__main { padding: 48px 52px; }
}
.contact-card__title { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; color: var(--brand-navy); }
.contact-card__lead { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-700); }
.contact-card__label { margin: 36px 0 16px; font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-600); }
/* Numbered steps joined by a line: number tiles in aqua, the line runs from each number to the next */
.mini-steps { list-style: none; margin: 0; padding: 0; counter-reset: ministep; display: grid; gap: 0; }
.mini-steps li { counter-increment: ministep; position: relative; padding: 6px 0 32px 60px; font-size: 16px; line-height: 1.6; color: var(--ink-700); }
.mini-steps li:last-child { padding-bottom: 0; }
.mini-steps li b { display: block; margin-bottom: 4px; font-size: 18px; line-height: 1.35; color: var(--brand-navy); }
.mini-steps li::before { content: counter(ministep); position: absolute; left: 0; top: 0; z-index: 1; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-aqua); color: var(--ink-900); font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px var(--brand-tint); }
.mini-steps li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--brand-aqua); }
@media (min-width: 1024px) {
  /* Beside the tall form: the label sits a fixed distance under the intro, and the steps share
     the rest of the panel evenly, so step 3 lines up with the bottom of the form and the line
     between the numbers runs the full height. */
  .contact-card__next { display: flex; flex-direction: column; }
  .contact-card__next .contact-card__label { margin-top: 48px; margin-bottom: 24px; }
  .contact-card__next .mini-steps { display: flex; flex-direction: column; flex: 1 1 auto; }
  .mini-steps li { flex: 1 1 auto; padding-bottom: 40px; }
  .mini-steps li:last-child { flex: 0 0 auto; }
}
.contact-card .contact-form, .contact-card .contact-done { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.contact-card .contact-form__topic { grid-column: 1 / -1; justify-self: start; margin: 0; }

/* Other ways we can help */
.help-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .help-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.help-card { display: flex; flex-direction: column; gap: 12px; padding: 28px; background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); }
.help-card h3 { margin: 6px 0 0; font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--brand-navy); }
.help-card p { margin: 0; flex-grow: 1; font-size: 15px; line-height: 1.6; color: var(--ink-700); }
.help-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }

/* ---------- Blog listing: easier to scan ----------
   Cards sit on a smoke band so they stand out from the page. Each category has its own colour,
   carried by a small uppercase label on a short rule. Product covers rotate through
   three tints with a faint "+" so neighbouring cards differ. The whole card is the link. The
   market report runs wide on desktop. Only the blog listing has .posts--vivid. */
.posts--vivid { background: var(--brand-smoke); }
.posts--vivid .featured { --cat: var(--brand-navy); }
.posts--vivid .post { --cat: var(--brand-blue); position: relative; border: 1px solid var(--card-border); }
.posts--vivid .post[data-category="announcements"] { --cat: var(--brand-navy); }
.posts--vivid .post[data-category="market"] { --cat: var(--ink-900); }
.posts--vivid .post[data-category="press"] { --cat: var(--green-deep); }
.posts--vivid .post__category { align-self: flex-start; padding-top: 10px; border-top: 3px solid var(--cat); color: var(--cat); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.posts--vivid .post__body { flex: 1 1 auto; gap: 10px; padding: 22px 24px 24px; }
.posts--vivid .post__title { font-size: 20px; line-height: 1.3; }
.posts--vivid .post__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.posts--vivid .post__dek { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.posts--vivid .post__date { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-200); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.posts--vivid .post__date::after { content: "Read \2192"; font-size: 14px; font-weight: 700; color: var(--brand-navy); white-space: nowrap; }
.posts--vivid .post:hover .post__title a { color: var(--brand-navy); text-decoration: underline; text-underline-offset: 4px; }
/* Each category has its own layout:
   product updates: no image, light blue card, the headline leads, faint "+" in the top corner;
   announcements: image cover (navy label); market insights: wide, image left and text right;
   company press: no image, an editorial card on green tint with a small "Press release" rule
   and the headline anchored at the bottom under open space. */
.posts--vivid .post[data-category="product"] .post__cover-link { display: none; }
.posts--vivid .post[data-category="product"] { background: var(--brand-tint); }
.posts--vivid .post[data-category="product"] .post__body { position: relative; padding: 28px 28px 24px; gap: 12px; }
.posts--vivid .post[data-category="product"] .post__body::before { content: ""; position: absolute; right: -64px; top: -24px; width: 210px; height: 210px; background: var(--brand-blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M44.5 0H55.5A3 3 0 0 1 58.5 3V41.5H97A3 3 0 0 1 100 44.5V55.5A3 3 0 0 1 97 58.5H58.5V97A3 3 0 0 1 55.5 100H44.5A3 3 0 0 1 41.5 97V58.5H3A3 3 0 0 1 0 55.5V44.5A3 3 0 0 1 3 41.5H41.5V3A3 3 0 0 1 44.5 0Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M44.5 0H55.5A3 3 0 0 1 58.5 3V41.5H97A3 3 0 0 1 100 44.5V55.5A3 3 0 0 1 97 58.5H58.5V97A3 3 0 0 1 55.5 100H44.5A3 3 0 0 1 41.5 97V58.5H3A3 3 0 0 1 0 55.5V44.5A3 3 0 0 1 3 41.5H41.5V3A3 3 0 0 1 44.5 0Z'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0.05; pointer-events: none; }
.posts--vivid .post[data-category="product"] .post__title { font-size: 23px; line-height: 1.25; letter-spacing: -0.01em; }
.posts--vivid .post[data-category="product"] .post__title a { color: var(--brand-navy); }
.posts--vivid .post[data-category="product"] .post__dek { -webkit-line-clamp: 3; }
.posts--vivid .post[data-category="product"] .post__date { border-top-color: var(--card-border); }
.posts--vivid .post[data-category="press"] { background: var(--green-tint); }
.posts--vivid .post[data-category="press"] .cover { aspect-ratio: auto; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 28px 28px 0; background: none; border-bottom: 0; }
.posts--vivid .post[data-category="press"] .cover__doc { margin: 0; padding-top: 10px; border-top: 3px solid var(--green-deep); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-deep); }
.posts--vivid .post[data-category="press"] .cover__small { padding-top: 13px; font-size: 12px; color: var(--ink-600); }
.posts--vivid .post[data-category="press"] .post__category { display: none; }
.posts--vivid .post[data-category="press"] .post__body { padding: 0 28px 26px; gap: 14px; }
.posts--vivid .post[data-category="press"] .post__title { margin-top: auto; padding-top: 56px; font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; }
.posts--vivid .post[data-category="press"] .post__title a { color: var(--ink-900); }
.posts--vivid .post[data-category="press"] .post__dek { display: block; font-size: 15px; }
.posts--vivid .post[data-category="press"] .post__date { margin-top: 6px; border-top-color: var(--card-border); }
.posts--vivid .post[data-category="press"] .post__date::after { color: var(--green-deep); }
@media (min-width: 1024px) {
  .posts--vivid .posts__grid { grid-auto-flow: dense; }
  .posts--vivid .post[data-category="market"] { grid-column: span 2; flex-direction: row; }
  .posts--vivid .post[data-category="market"] .post__cover-link { flex: 0 0 50%; }
  .posts--vivid .post[data-category="market"] .cover { height: 100%; aspect-ratio: auto; min-height: 300px; }
  .posts--vivid .post[data-category="market"] .post__title { font-size: 24px; }
  .posts--vivid .post[data-category="market"] .post__dek { -webkit-line-clamp: 4; }
  .posts--vivid .post[data-category="market"] .post__body { justify-content: center; padding: 32px; }
  .posts--vivid .post[data-category="market"] .post__date { margin-top: 20px; }
  .posts--vivid .post[data-category="market"] .cover { min-height: 0; }
}

/* ---------- Blog post images, badge and callout (anniversary post) ---------- */
.post-cover-figure { max-width: 1040px; margin: 0 auto 8px; }
.post-cover-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
.post-figure { margin-block: 24px 4px; }
.post-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.post-figure figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-600); text-align: center; }
/* The logo sits centred on a white panel with a light border */
.post-figure--panel { display: flex; justify-content: center; padding: 40px 28px; background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-lg); }
.post-figure--panel img { max-width: 420px; border-radius: 0; }
/* Screenshots get a hairline border and rounded corners */
.post-figure--shot img { border: 1px solid var(--line-200); box-shadow: var(--card-shadow); }
/* "Coming soon" with an aqua dot, as in the email */
.soon-badge--dot { gap: 6px; padding: 3px 10px; }
.soon-badge--dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-aqua); }
.post-body h2 .soon-badge { margin-left: 10px; font-size: 11px; vertical-align: middle; }
/* "Check this" callout: pale green with a deeper green left edge and an uppercase label */
.post-callout--check { background: var(--green-tint); border: 0; border-left: 4px solid var(--green-deep); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.post-callout--check h2 { font-size: 13px; line-height: 1.4; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-deep); }
.post-callout--check p { font-size: 17px; line-height: 1.7; color: var(--ink-900); }
.post-signoff { font-weight: 700; color: var(--brand-navy); }

/* Photo covers (the anniversary post): the image fills the cover. On the featured card it is
   anchored left, so the "40" stays in view. */
.cover--photo { padding: 0; background: var(--brand-navy); }
.cover--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.featured .cover--photo img { object-position: left center; }
/* "More from the blog" on each post uses the blog's card design; the market report stays one
   column wide there, since only three cards are shown. */
/* Beside a taller image card, a product card keeps its label at the top and anchors its headline
   and summary at the bottom, as the press card does, rather than leaving a gap in the middle. */
.posts--related .post[data-category="product"] .post__title { margin-top: auto; padding-top: 24px; }
.posts--related .post[data-category="product"] .post__date { margin-top: 6px; }
@media (min-width: 1024px) {
  .posts--related .post[data-category="market"] { grid-column: auto; flex-direction: column; }
  .posts--related .post[data-category="market"] .post__cover-link { flex: none; }
  .posts--related .post[data-category="market"] .cover { height: auto; aspect-ratio: 16 / 9; }
  .posts--related .post[data-category="market"] .post__body { justify-content: flex-start; padding: 22px 24px 24px; }
  .posts--related .post[data-category="market"] .post__title { font-size: 20px; }
  .posts--related .post[data-category="market"] .post__dek { -webkit-line-clamp: 2; }
  .posts--related .post[data-category="market"] .post__date { margin-top: auto; }
}

/* ---------- Home: "What agents and brokers use every day" (quiet bento) ----------
   Muted product views: ink and grey, one accent per card. Lead card spans 4 of 6
   columns and 2 rows on wide screens; one near-black card for contrast. */
.feat { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feat-card--lead { grid-column: 1 / -1; } }
@media (min-width: 1100px) {
  .feat { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .feat-card { grid-column: span 2; }
  .feat-card--lead { grid-column: span 4; grid-row: span 2; }
}
.feat-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px; background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.feat-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
@media (prefers-reduced-motion: reduce) { .feat-card { transition: none; } .feat-card:hover { transform: none; } }
.feat-card__eyebrow { margin: 0; font-size: 12px; line-height: 1.4; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-600); }
.feat-card__title { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-900); }
.feat-card__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-700); }
.feat-card .text-link { margin-top: auto; padding-top: 10px; }
.feat-card__sample { position: absolute; top: 18px; right: 20px; font-size: 10px; line-height: 1; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-600); }
.feat-card--ink { background: var(--ink-950); border-color: var(--ink-950); }
.feat-card--ink .feat-card__eyebrow { color: var(--brand-light); }
.feat-card--ink .feat-card__title { color: var(--white); }
.feat-card--ink .feat-card__text { color: var(--brand-mist); }
.feat-card--ink .text-link { color: var(--white); }

/* Search (lead card) */
.fv-search { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.fv-bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--white); border: 1px solid var(--line-200); border-radius: 14px; box-shadow: var(--card-shadow); font-size: 16px; color: var(--ink-900); }
.fv-bar svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink-900); stroke-width: 2; stroke-linecap: round; }
.fv-caret { width: 2px; height: 20px; margin-left: auto; flex: none; background: var(--brand-aqua); }
.fv-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fv-chips li { padding: 6px 12px; border-radius: 999px; background: var(--brand-smoke); font-size: 13px; font-weight: 600; color: var(--ink-900); }
.fv-chips li:first-child { background: var(--ink-950); color: var(--white); }
.fv-results { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 4px; }
@media (min-width: 560px) { .fv-results { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fv-result { border: 1px solid var(--line-200); border-radius: 14px; overflow: hidden; background: var(--white); }
.fv-photo { display: block; width: 100%; height: 120px; object-fit: cover; object-position: 50% 55%; background: var(--line-200); }
@media (min-width: 1100px) { .fv-photo { height: 168px; } }
.fv-result p { margin: 0; padding: 10px 12px 12px; font-size: 12px; line-height: 1.4; color: var(--ink-600); }
.fv-result strong { display: block; font-size: 16px; color: var(--ink-900); font-variant-numeric: tabular-nums; }

/* Market insights (near-black card) */
.fv-insights { margin-top: 8px; padding: 16px; border-radius: 14px; background: var(--ink-850); border: 1px solid var(--line-dark); }
.fv-insights__head { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--white); }
.fv-insights__head em { font-style: normal; color: var(--brand-aqua); }
.fv-insights i { display: block; height: 8px; margin-top: 8px; border-radius: 4px; background: var(--brand-mist); opacity: .35; }
.fv-insights i:nth-of-type(1) { width: 92%; } .fv-insights i:nth-of-type(2) { width: 78%; } .fv-insights i:nth-of-type(3) { width: 60%; }

/* Buyer Interest */
.fv-interest { display: flex; align-items: flex-end; gap: 14px; margin-top: 6px; }
.fv-interest strong { font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.fv-interest span { max-width: 13em; padding-bottom: 6px; font-size: 13px; line-height: 1.35; color: var(--ink-700); }
.fv-avatars { display: flex; }
.fv-avatars i { width: 30px; height: 30px; margin-left: -8px; border: 2px solid var(--white); border-radius: 50%; background: var(--card-border); }
.fv-avatars i:nth-child(even) { background: var(--ink-500); }
.fv-avatars i:first-child { margin-left: 0; }
.fv-avatars i:last-child { background: var(--brand-aqua); }

/* Deal analytics */
.fv-kpis { display: flex; gap: 28px; margin-top: 6px; }
.fv-kpis p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ink-600); }
.fv-kpis strong { display: block; font-size: 30px; line-height: 1.05; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.fv-kpis .fv-up { color: var(--green-deep); }
.fv-bars { display: flex; align-items: flex-end; gap: 8px; height: 84px; }
.fv-bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: var(--line-200); }
.fv-bars i:last-child { background: var(--ink-950); }

/* CMA statuses */
.fv-status { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fv-status li { padding: 10px 12px; border-radius: 10px; background: var(--brand-smoke); font-size: 13px; font-weight: 600; color: var(--ink-900); }
.fv-status li:first-child { background: var(--ink-950); color: var(--white); }

/* CRM sync */
.fv-sync { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.fv-sync span { flex: 1; padding: 12px; border: 1px solid var(--line-200); border-radius: 12px; text-align: center; font-size: 13px; font-weight: 700; color: var(--ink-900); }
.fv-sync span:first-child { background: var(--ink-950); border-color: var(--ink-950); color: var(--white); }
.fv-sync svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--brand-aqua); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.feat-section .section-head { margin-bottom: 24px; }
.feat-section .section-head__text { max-width: none; gap: 8px; }
@media (min-width: 1024px) { .feat-section.section { padding-block: 72px; } .feat-section .section-head { margin-bottom: 28px; } }
.feat-card--lead .fv-search { flex: 1; }
@media (min-width: 1100px) {
  .feat-card--lead .fv-results { flex: 1; }
  .feat-card--lead .fv-result { display: flex; flex-direction: column; }
  .feat-card--lead .fv-photo { flex: 1; min-height: 168px; height: auto; }
}
@media (min-width: 768px) and (max-width: 1099px) { .feat-card:last-child { grid-column: 1 / -1; } }
@media (max-width: 559px) { .fv-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fv-result:nth-child(3) { display: none; } .fv-photo { height: 96px; } }

/* CRM integrations card: connected apps panel */
.fv-crm { margin-top: 6px; border: 1px solid var(--line-200); border-radius: 14px; overflow: hidden; }
.fv-crm__hub { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--ink-950); }
.fv-crm__hub span { font-size: 13px; font-weight: 700; color: var(--white); }
.fv-crm__hub svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--brand-aqua); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fv-crm__hub em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--brand-mist); }
.fv-crm__list { list-style: none; margin: 0; padding: 0; }
.fv-crm__list li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line-200); font-size: 13px; font-weight: 600; color: var(--ink-900); }
.fv-crm__list li:first-child { border-top: 0; }
.fv-crm__list b { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--brand-smoke); font-size: 11px; font-weight: 700; color: var(--ink-700); }
.fv-crm__list i { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: var(--green-deep); }
.fv-crm__list i svg { width: 14px; height: 14px; fill: none; stroke: var(--brand-mint); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fv-crm__more span { color: var(--ink-600); }
@media (min-width: 1100px) { .feat-card .fv-bars { flex: 1; min-height: 84px; height: auto; } }

/* CMA card: mini branded report */
.fv-cma { margin-top: 6px; border: 1px solid var(--line-200); border-radius: 14px; overflow: hidden; background: var(--white); }
.fv-cma__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--brand-navy); }
.fv-cma__head span { font-size: 12px; font-weight: 700; color: var(--white); }
.fv-cma__head em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--brand-mist); }
.fv-cma__subject { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 10px 14px; background: var(--brand-smoke); font-size: 13px; font-weight: 600; color: var(--ink-900); }
.fv-cma__subject b { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-600); }
.fv-cma__comps { list-style: none; margin: 0; padding: 0; }
.fv-cma__comps li { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--line-200); font-size: 13px; color: var(--ink-700); }
.fv-cma__comps strong { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.fv-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; }
.fv-dot--active { background: var(--brand-aqua); }
.fv-dot--contract { background: var(--brand-blue); }
.fv-dot--sold { background: var(--ink-950); }
.fv-cma__foot { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line-200); }
.fv-cma__foot span { font-size: 11px; line-height: 1.35; color: var(--ink-600); }
.fv-cma__foot b { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 6px 10px; flex: none; border-radius: 999px; background: var(--ink-950); font-size: 12px; font-weight: 700; color: var(--white); }
.fv-cma__foot b svg { width: 14px; height: 14px; fill: none; stroke: var(--brand-aqua); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1100px) {
  .feat-card .fv-crm { flex: 1; display: flex; flex-direction: column; }
  .feat-card .fv-crm__list { flex: 1; display: flex; flex-direction: column; }
  .feat-card .fv-crm__list li { flex: 1; }
}

/* ---------- Product update covers: the Home feature visuals, reused ----------
   Each product update (blog card, Home "Latest news", "More from the blog", and
   the post header) shows the same muted visual as its Home feature card. */
.cover--feat { justify-content: center; gap: 12px; aspect-ratio: auto; min-height: 220px; padding: 26px 24px 24px; background: var(--brand-smoke); border-bottom: 1px solid var(--line-200); }
.cover--feat > * { width: 100%; }
.cover--feat .cover__sample { position: absolute; top: 12px; right: 14px; width: auto; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-600); }
.cover--feat .fv-search { margin-top: 0; gap: 10px; }
.cover--feat .fv-bar { padding: 12px 14px; font-size: 14px; }
.cover--feat .fv-chips li { padding: 5px 10px; font-size: 12px; }
.cover--feat .fv-results { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cover--feat .fv-result:nth-child(3) { display: block; }
.cover--feat .fv-photo { height: 84px; }
.cover--feat .fv-result p { padding: 8px 10px 10px; font-size: 11px; }
.cover--feat .fv-result strong { font-size: 13px; }
.cover--feat .fv-insights, .cover--feat .fv-crm, .cover--feat .fv-cma { margin-top: 0; }
.cover--feat .fv-interest, .cover--feat .fv-kpis { margin-top: 0; }
.cover--feat .fv-bars { height: 72px; }
.cover--feat.cover--lg { min-height: 0; padding: 32px; background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
.cover--feat.cover--lg .fv-photo { height: 120px; }
.cover--feat.cover--lg .fv-bars { height: 120px; }

/* Product update cards: white standard card, cover visible, ink title (matches the Home feature cards) */
.posts--vivid .post[data-category="product"] { background: var(--white); }
.posts--vivid .post[data-category="product"] .post__cover-link { display: block; }
.posts--vivid .post[data-category="product"] .post__body { padding: 22px 24px 24px; gap: 10px; }
.posts--vivid .post[data-category="product"] .post__body::before { content: none; }
.posts--vivid .post[data-category="product"] .post__title { font-size: 20px; line-height: 1.3; }
.posts--vivid .post[data-category="product"] .post__title a { color: var(--ink-900); }
.posts--vivid .post[data-category="product"] .post__dek { -webkit-line-clamp: 2; }
.posts--vivid .post[data-category="product"] .post__date { border-top-color: var(--line-200); }
.post[data-category="product"] .post__title a { color: var(--ink-900); }
.post[data-category="product"] .cover--feat { height: 272px; min-height: 0; }
.post[data-category="product"] .cover--feat .fv-photo { height: 76px; }
.post[data-category="product"] .cover--feat .fv-cma__head, .post[data-category="product"] .cover--feat .fv-cma__subject, .post[data-category="product"] .cover--feat .fv-cma__foot { padding-block: 8px; }
.post[data-category="product"] .cover--feat .fv-cma__comps li { padding-block: 7px; }
.post[data-category="product"] .cover--feat .fv-crm__list li { padding-block: 8px; }

/* Market insights cover: muted bars, one accent on the latest period */
.cover.cover--market .cover__bars i:nth-child(n) { background: var(--ink-700); }
.cover.cover--market .cover__bars i:last-child:nth-child(n) { background: var(--brand-aqua); }

/* ---------- One card language across pages (October 2026) ----------
   Small uppercase label above card titles; ink card titles; Mint Leaf outline only on
   the featured card in a set; muted visuals with one accent. */
.card-eyebrow { margin: 0; font-size: 12px; line-height: 1.4; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-600); }
.cap__title, .help-card h3, .api-card__name { color: var(--ink-900); }
.help-card .card-eyebrow { margin-top: 6px; }
.help-card .card-eyebrow + h3 { margin-top: 0; }
.api-card__tag { font-size: 12px; letter-spacing: 0.08em; color: var(--ink-600); }
.api-card, .api-card:hover { border-color: var(--card-border); }
.api-card:hover { border-color: var(--card-border-hover); }
.api-card.api-card--featured, .api-card.api-card--featured:hover { border-color: var(--brand-mint); }

/* Data Services "Use our data" visuals */
.fv-list { margin-top: 6px; border: 1px solid var(--line-200); border-radius: 12px; overflow: hidden; background: var(--white); }
.fv-list > div { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line-200); font-size: 13px; font-weight: 600; color: var(--ink-900); }
.fv-list > div:first-child { border-top: 0; }
.fv-list b { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: 7px; background: var(--brand-smoke); }
.fv-list b svg { width: 14px; height: 14px; fill: none; stroke: var(--ink-700); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fv-list i { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-style: normal; font-size: 12px; color: var(--green-deep); }
.fv-list i svg { width: 14px; height: 14px; fill: none; stroke: var(--brand-mint); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fv-list--mono code { font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); font-size: 12px; font-weight: 500; color: var(--ink-900); }
.fv-list .fv-dot { background: var(--card-border); }
.fv-list .fv-dot--active { background: var(--brand-aqua); }
.fv-chat { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.fv-chat__ask { align-self: flex-end; max-width: 92%; margin: 0; padding: 10px 12px; border-radius: 12px 12px 4px 12px; background: var(--brand-navy); font-size: 13px; line-height: 1.45; color: var(--white); }
.fv-chat__reply { align-self: flex-start; width: 80%; padding: 10px 12px; border: 1px solid var(--line-200); border-radius: 12px 12px 12px 4px; background: var(--white); }
.fv-chat__reply span { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; color: var(--ink-600); }
.fv-chat__reply i { display: block; height: 7px; margin-top: 6px; border-radius: 4px; background: var(--line-200); }
.fv-chat__reply i:last-child { width: 70%; }

/* Market insights card: light grey text panel, ink palette, footer aligned with the other cards */
.posts--vivid .post[data-category="market"] .post__body { background: var(--brand-smoke); }
.posts--vivid .post[data-category="market"] .post__title a { color: var(--ink-900); }
.posts--vivid .post[data-category="market"] .post__date { border-top-color: var(--card-border); }
.posts--vivid .post[data-category="market"] .post__date::after { color: var(--ink-900); }
@media (min-width: 1024px) {
  .posts--vivid .post[data-category="market"] .post__body { justify-content: flex-start; padding: 32px 28px 26px; }
  .posts--vivid .post[data-category="market"] .post__date { margin-top: auto; }
}

/* Announcements: light blue tint text panel with navy accents (Blog featured card and
   announcement cards on Home and in "More from the blog") */
.posts--vivid .featured .featured__body, .post[data-category="announcements"] .post__body { background: var(--brand-tint); }
.posts--vivid .featured .post__date, .post[data-category="announcements"] .post__date { color: var(--ink-600); border-top-color: var(--card-border); }
.post[data-category="announcements"] { background: var(--brand-tint); }
.posts--vivid .post[data-category="market"] .post__date, .posts--vivid .post[data-category="press"] .post__date { color: var(--ink-600); }

/* Related cards (Home "Latest news" and "More from the blog"): product cards keep the
   title under the visual; footer at the bottom like the other cards */
.posts--related .post[data-category="product"] .post__title { margin-top: 0; padding-top: 0; }
.posts--related .post[data-category="product"] .post__date { margin-top: auto; }

/* Post headers follow the blog category palettes */
.post-hero--product { background: var(--brand-smoke); border-bottom: 1px solid var(--line-200); }
.post-hero--press { background: var(--green-tint); border-bottom: 1px solid var(--line-200); }
@media (min-width: 1024px) { .posts--related .post[data-category="market"] .post__body { padding: 22px 24px 24px; } }
/* Mixed-category rows: every cover the same height so titles line up */
.posts--related .post .post__cover-link .cover { height: 272px; aspect-ratio: auto; }
.posts--related .post .post__cover-link .cover img { width: 100%; height: 100%; object-fit: cover; }
.posts--related .post .post__cover-link .cover--photo img { object-position: 0% 50%; }
@media (max-width: 1023px) { .posts--related .post:not([data-category="product"]) .post__cover-link .cover { height: auto; aspect-ratio: 16 / 9; } }

/* About timeline: callout inside an entry (context callout: light blue tint, navy left edge) */
.tl__callout { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; padding: 12px 14px; border-left: 3px solid var(--brand-navy); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--brand-tint); color: var(--ink-900); text-decoration: none; }
.tl__callout .nav-badge { flex: none; margin-top: 1px; }
.tl__callout-text { font-size: 14px; line-height: 1.5; }
.tl__callout-text strong { color: var(--brand-navy); }
.tl__callout .link-arrow { margin-left: auto; flex: none; font-weight: 700; color: var(--brand-navy); }
.tl__callout:hover .tl__callout-text strong { text-decoration: underline; text-underline-offset: 3px; }
.tl__callout:focus-visible { outline: 3px solid var(--brand-navy); outline-offset: 2px; }
@media (max-width: 559px) { .tl__callout { flex-wrap: wrap; } .tl__callout-text { order: 3; flex: 1 1 100%; } }

/* ---------- About: "What we believe" editorial list and "Our strengths" lead + list ---------- */
.values-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; column-gap: 72px; }
@media (min-width: 768px) { .values-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.values-list li { display: grid; grid-template-columns: 40px 1fr; gap: 6px 16px; padding: 26px 0; border-top: 1px solid var(--card-border); }
.values-list__n { grid-row: span 2; padding-top: 10px; font-size: 13px; font-weight: 700; color: var(--ink-600); font-variant-numeric: tabular-nums; }
.values-list__n::before { content: ""; display: block; width: 16px; height: 2px; margin-bottom: 8px; background: var(--brand-aqua); }
.values-list h3 { margin: 0; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -0.015em; font-weight: 700; color: var(--ink-900); }
.values-list p { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.6; color: var(--ink-700); }

.strengths { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 8px; align-items: start; }
@media (min-width: 1024px) { .strengths { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; } }
.strengths__lead { position: relative; overflow: hidden; padding: 32px 28px; border-radius: var(--radius-xl); background: var(--ink-950); }
@media (min-width: 768px) { .strengths__lead { padding: 44px; } }
.strengths__lead::before, .strengths__lead::after { content: ""; position: absolute; background: var(--brand-light); opacity: 0.08; border-radius: 10px; pointer-events: none; }
.strengths__lead::before { right: 44px; top: -70px; width: 96px; height: 300px; }
.strengths__lead::after { right: -58px; top: 32px; width: 300px; height: 96px; }
.strengths__tag { position: relative; margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-light); }
.strengths__lead h3 { position: relative; margin: 0; max-width: 14ch; font-size: clamp(28px, 3vw, 36px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; color: var(--white); }
.strengths__lead > p:not(.strengths__tag) { position: relative; margin: 18px 0 0; max-width: 52ch; font-size: 17px; line-height: 1.65; color: var(--brand-mist); }
.strengths__sources { position: relative; list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.strengths__sources li { padding: 6px 12px; border: 1px solid var(--line-dark); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--brand-mist); }
.strengths__sources .strengths__result { background: var(--brand-aqua); border-color: var(--brand-aqua); color: var(--ink-950); }
.plus-rows { list-style: none; margin: 0; padding: 0; }
.plus-rows li { display: grid; grid-template-columns: 22px 1fr; gap: 4px 12px; padding: 20px 0; border-top: 1px solid var(--card-border); }
.plus-rows li:first-child { padding-top: 4px; border-top: 0; }
.plus-rows li::before { content: "+"; grid-row: span 2; font-size: 22px; line-height: 1; font-weight: 700; color: var(--brand-aqua); }
.plus-rows h3 { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 700; color: var(--ink-900); }
.plus-rows p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-700); }
.strengths__lead::after { content: none; }
.strengths__lead::before { right: -90px; top: -36px; width: 300px; height: 300px; border-radius: 0; clip-path: none; background: var(--brand-navy); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M44.5 0H55.5A3 3 0 0 1 58.5 3V41.5H97A3 3 0 0 1 100 44.5V55.5A3 3 0 0 1 97 58.5H58.5V97A3 3 0 0 1 55.5 100H44.5A3 3 0 0 1 41.5 97V58.5H3A3 3 0 0 1 0 55.5V44.5A3 3 0 0 1 3 41.5H41.5V3A3 3 0 0 1 44.5 0Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M44.5 0H55.5A3 3 0 0 1 58.5 3V41.5H97A3 3 0 0 1 100 44.5V55.5A3 3 0 0 1 97 58.5H58.5V97A3 3 0 0 1 55.5 100H44.5A3 3 0 0 1 41.5 97V58.5H3A3 3 0 0 1 0 55.5V44.5A3 3 0 0 1 3 41.5H41.5V3A3 3 0 0 1 44.5 0Z'/%3E%3C/svg%3E") center / contain no-repeat; } /* the logo's plus, navy, as on the Home hero */

/* Areas of expertise: an odd last row spans both columns so the table never ends in an empty cell */
.xp > .xp__row:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---------- Data Services: System integration services (turnkey + custom) ---------- */
.integ { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) { .integ { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.integ__panel { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: var(--radius-lg); }
@media (min-width: 768px) { .integ__panel { padding: 32px; } }
.integ__panel--turnkey { background: var(--white); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); }
.integ__panel--custom { background: transparent; border: 1px dashed var(--ink-500); }
.integ__title { margin: 0; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; font-weight: 700; color: var(--ink-900); }
.integ__text { margin: 0; max-width: 56ch; font-size: 15px; line-height: 1.6; color: var(--ink-700); }
.integ__panel .fv-crm { margin-top: 10px; }
.integ__panel .text-link { margin-top: auto; padding-top: 14px; }
.integ__chips { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.integ__chips li { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--card-border); border-radius: 12px; background: var(--white); font-size: 14px; font-weight: 600; color: var(--ink-900); }
.integ__chips li:last-child { color: var(--ink-600); border-style: dashed; background: transparent; }
.integ__plus { font-size: 18px; line-height: 1; font-weight: 700; color: var(--brand-aqua); }
@media (max-width: 420px) { .integ__chips { grid-template-columns: 1fr; } }
.integ__plus { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--brand-aqua); stroke-width: 2.4; stroke-linecap: round; }

/* ---------- Home: integrations band (turnkey + custom, links to Data Services) ---------- */
.integ-band { display: grid; grid-template-columns: 1fr; background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); overflow: hidden; }
@media (min-width: 900px) { .integ-band { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.integ-band__half { display: flex; flex-direction: column; gap: 10px; padding: 28px; }
@media (min-width: 768px) { .integ-band__half { padding: 32px 36px; } }
.integ-band__half--custom { border-top: 1px solid var(--line-200); }
@media (min-width: 900px) { .integ-band__half--custom { border-top: 0; border-left: 1px solid var(--line-200); } }
.integ-band__crms { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.integ-band__crms li { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border: 1px solid var(--card-border); border-radius: 12px; background: var(--white); font-size: 14px; font-weight: 600; color: var(--ink-900); }
.integ-band__crms .integ-band__more { border-color: transparent; padding-inline: 4px; color: var(--ink-600); }
.integ-band__check { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--brand-mint); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.integ-band__half .text-link { margin-top: auto; padding-top: 14px; }

/* Closing band with two actions (Products: Schedule a consultation + Request a demo) */
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Footer without the newsletter: brand (with the REBNY credential) + three link columns */
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 48px; } }
.site-footer__brand .rebny-note { max-width: 360px; }
@media (max-width: 767px) { .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; } }

/* Blog pages */
.blog-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 40px; }
.blog-pager[hidden] { display: none; }
.blog-pager__btn { min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--card-border); border-radius: 999px; background: var(--white); font: inherit; font-size: 14px; font-weight: 700; color: var(--brand-navy); cursor: pointer; }
.blog-pager__btn:hover { border-color: var(--brand-navy); }
.blog-pager__btn[aria-current="page"] { background: var(--brand-navy); border-color: var(--brand-navy); color: var(--white); cursor: default; }
.blog-pager__btn:focus-visible { outline: 3px solid var(--brand-navy); outline-offset: 2px; }
/* Hidden posts stay hidden (the featured card's grid display otherwise overrides [hidden]) */
[data-post][hidden] { display: none !important; }

/* ---------- Data Services sources: directory rows ---------- */
.dir-rows { margin: 0; border-top: 1px solid var(--card-border); }
.dir-rows__row { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--card-border); }
@media (min-width: 768px) { .dir-rows__row { grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 24px; padding: 18px 0; } }
.dir-rows dt { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 700; color: var(--ink-900); }
.dir-rows dd { margin: 0; max-width: 70ch; font-size: 15px; line-height: 1.6; color: var(--ink-700); }
.dir-rows .soon-badge { margin-left: 8px; vertical-align: 2px; }

/* ---------- Products capabilities: light icon strip ---------- */
.icon-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--card-border); }
.icon-strip li { padding: 24px 0 26px; border-bottom: 1px solid var(--card-border); }
.icon-strip svg { display: block; width: 28px; height: 28px; fill: none; stroke: var(--brand-navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-strip h3 { margin: 14px 0 6px; font-size: 19px; line-height: 1.3; font-weight: 700; color: var(--ink-900); }
.icon-strip p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-700); }
@media (min-width: 640px) and (max-width: 1023px) {
  .icon-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .icon-strip li { padding-right: 24px; }
  .icon-strip li:nth-child(even) { padding-left: 24px; padding-right: 0; border-left: 1px solid var(--card-border); }
}
@media (min-width: 1024px) {
  .icon-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .icon-strip li { padding: 28px 28px 30px 0; }
  .icon-strip li:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid var(--card-border); }
}

/* Small phones: long button labels wrap instead of pushing the page wider */
@media (max-width: 480px) { .btn { max-width: 100%; white-space: normal; text-align: center; height: auto; min-height: 44px; padding-block: 10px; } }

/* Blog grid: backfill the gap a two-column market card would leave at the end of a row */
.posts--vivid .posts__grid { grid-auto-flow: row dense; }

/* Products comparison: "Not included" in words instead of a dash */
.compare .not-included { font-size: 13px; font-weight: 500; color: var(--ink-600); }

/* Background "+" motif: one fixed strength, 9%, at every width (brand guide) */
.hero--bold .hero__plus, .one-band .hero__plus { opacity: 0.09; }
@media (max-width: 767px) { .hero--bold .hero__plus, .one-band .hero__plus { opacity: 0.09; } }
.strengths__lead::before { opacity: 0.09; }

/* ---------- Home: feature tour ("What agents and brokers use every day") ----------
   Desktop: list on the left, the open feature's visual on the right.
   Tablets and phones: accordion (the visual opens under its feature).
   Without the script every feature shows in full. */
.tour { border-top: 1px solid var(--card-border); }
.tour__item { border-bottom: 1px solid var(--card-border); }
.tour__head { margin: 0; }
.tour__btn { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 16px 18px; border: 0; border-left: 3px solid transparent; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.tour__btn:hover .tour__title { color: var(--brand-navy); }
.tour__btn:focus-visible { outline: 3px solid var(--brand-navy); outline-offset: -3px; }
.tour__label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-600); }
.tour__title { font-size: 19px; line-height: 1.3; font-weight: 700; color: var(--ink-900); }
.tour__body { padding: 0 18px 16px 21px; }
.tour__text { margin: 0 0 8px; max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--ink-700); }
.tour__visual { padding: 0 0 20px; }
.tour__card { position: relative; padding: 18px; border: 1px solid var(--card-border); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-lift); }
.tour__sample { position: absolute; top: 10px; right: 14px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-600); }
.tour__card .fv-search, .tour__card .fv-insights, .tour__card .fv-crm, .tour__card .fv-cma, .tour__card .fv-interest, .tour__card .fv-kpis { margin-top: 0; }
.tour__card .fv-sample-gap { display: none; }
.tour__card .fv-photo { height: 110px; }
.tour__card .fv-bars { height: 96px; margin-top: 12px; }
/* Ready (script running): accordion by default */
.tour.is-ready .tour__body, .tour.is-ready .tour__visual { display: none; }
.tour.is-ready .tour__item.is-open .tour__body, .tour.is-ready .tour__item.is-open .tour__visual { display: block; }
.tour.is-ready .tour__item.is-open .tour__btn { background: var(--brand-tint); border-left-color: var(--brand-navy); }
.tour.is-ready .tour__item.is-open .tour__body { background: var(--brand-tint); border-left: 3px solid var(--brand-navy); padding-left: 18px; }
.tour.is-ready .tour__visual { padding: 16px 0 20px; }
@media (min-width: 1024px) {
  .tour.is-ready { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: start; border-top: 0; }
  .tour.is-ready .tour__item { display: contents; }
  .tour.is-ready .tour__head, .tour.is-ready .tour__body { grid-column: 1; }
  .tour.is-ready .tour__head { border-top: 1px solid var(--card-border); }
  .tour.is-ready .tour__item:last-child .tour__head:not(:has(+ .tour__body:not([hidden]))) { border-bottom: 1px solid var(--card-border); }
  .tour.is-ready .tour__visual { grid-column: 2; grid-row: 1 / span 12; display: none; padding: 40px; border-radius: 24px; background: var(--brand-smoke); min-height: 520px; align-self: stretch; }
  .tour.is-ready .tour__item.is-open .tour__visual { display: flex; align-items: center; justify-content: center; }
  .tour.is-ready .tour__card { width: 100%; max-width: 640px; padding: 28px; }
  .tour.is-ready .tour__card .fv-photo { height: 180px; }
  .tour.is-ready .tour__card .fv-bars { height: 160px; }
  .tour.is-ready .tour__card .fv-interest strong { font-size: 72px; }
}

/* ---------- Home: feature rows with thumbnails ("What agents and brokers use every day") ----------
   Six standard cards: a miniature of the product view (the same .fv-* visual, scaled with
   zoom so its layout scales too) beside the label, title, line and Learn more. */
.feat-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 1024px) { .feat-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feat-rows__item { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 16px; border: 1px solid var(--card-border); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--card-shadow); transition: transform .2s ease, box-shadow .2s ease; }
@media (min-width: 560px) { .feat-rows__item { grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: center; } }
.feat-rows__item:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
@media (prefers-reduced-motion: reduce) { .feat-rows__item { transition: none; } .feat-rows__item:hover { transform: none; } }
.feat-rows__thumb { position: relative; display: flex; align-items: center; justify-content: center; height: 156px; padding: 0 4px; overflow: hidden; border-radius: 14px; background: var(--brand-smoke); }
@media (max-width: 559px) { .feat-rows__thumb { height: 180px; } }
.feat-rows__mini { flex: none; width: 400px; zoom: 0.5; }
@media (max-width: 559px) { .feat-rows__mini { zoom: 0.62; } }
.feat-rows__mini .fv-search, .feat-rows__mini .fv-insights, .feat-rows__mini .fv-crm, .feat-rows__mini .fv-cma, .feat-rows__mini .fv-interest, .feat-rows__mini .fv-kpis { margin-top: 0; }
.feat-rows__mini .fv-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feat-rows__mini .fv-result:nth-child(3) { display: block; }
.feat-rows__mini .fv-photo { height: 110px; }
.feat-rows__mini .fv-bars { height: 80px; margin-top: 10px; }
.feat-rows__mini .fv-interest strong { font-size: 64px; }
.feat-rows__sample { position: absolute; top: 8px; right: 10px; z-index: 1; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-600); }
.feat-rows__label { margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-600); }
.feat-rows__title { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--ink-900); }
.feat-rows__desc { margin: 4px 0 8px; font-size: 14px; line-height: 1.5; color: var(--ink-700); }
.feat-rows .text-link { font-size: 14px; }

/* Feature cards: one note for sample data; swipe row on phones */
.feat-rows__note { margin: 16px 0 0; font-size: 12px; color: var(--ink-600); }
.feat-rows__dots { display: none; }
.feat-rows:focus-visible { outline: 3px solid var(--brand-navy); outline-offset: 4px; }
@media (max-width: 767px) {
  .feat-rows { display: flex; gap: 14px; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .feat-rows::-webkit-scrollbar { display: none; }
  .feat-rows__item { flex: 0 0 85%; scroll-snap-align: start; grid-template-columns: 1fr; align-content: start; }
  .feat-rows__item:hover { transform: none; }
  .feat-rows__thumb { height: 184px; }
  .feat-rows__mini { zoom: 0.54; }
  .feat-rows__dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .feat-rows__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: var(--card-border); cursor: pointer; transition: width .2s ease; }
  .feat-rows__dot[aria-current="true"] { width: 24px; background: var(--brand-navy); }
  .feat-rows__dot:focus-visible { outline: 3px solid var(--brand-navy); outline-offset: 2px; }
  .feat-rows__note { text-align: center; }
}

/* Feature cards without labels: smaller thumbnail, larger text, so both sides balance */
@media (min-width: 560px) {
  .feat-rows__item { grid-template-columns: 200px minmax(0, 1fr); gap: 22px; }
  .feat-rows__thumb { height: 136px; }
  .feat-rows__mini { zoom: 0.45; }
}
.feat-rows__title { font-size: 19px; }
.feat-rows__desc { margin: 6px 0 10px; font-size: 15px; }

/* Footer: Follow RealPlus (Facebook, Instagram, LinkedIn). While accounts are not live
   the icons are not links and one "Coming soon" badge covers all three. When they go
   live, wrap each img in a link to the profile and remove the badge. */
.site-footer__follow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; }
.site-footer__follow-label { font-size: 13px; font-weight: 700; color: var(--ink-900); }
.site-footer__follow-icons { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.site-footer__follow-icons img { display: block; width: 28px; height: 28px; }
.site-footer__follow-icons a { display: block; border-radius: 6px; }
.site-footer__follow-icons a:hover img { opacity: 0.8; }
.site-footer__follow-icons a:focus-visible { outline: 3px solid var(--brand-navy); outline-offset: 2px; }
.site-footer__follow .soon-badge { margin-left: 0; }

/* Footer: REBNY credential (left) and Follow RealPlus (right) share one full-width row */
.site-footer__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line-200); }
.site-footer__meta .rebny-note { margin: 0; padding: 0; border-top: 0; max-width: 420px; }
.site-footer__meta .site-footer__follow { margin-top: 0; }
@media (max-width: 767px) { .site-footer__meta { flex-direction: column; align-items: flex-start; } }
@media (min-width: 768px) { .site-footer__meta .site-footer__follow { margin-left: auto; } }

/* About "Our strengths": the lead panel stays put while the list scrolls past (same as the story section) */
@media (min-width: 1024px) { .strengths__lead { position: sticky; top: calc(var(--header-h) + 32px); } }