/* =========================================================================
   Brand Voice — scoped tokens (Altegio Design System foundations)
   Sourced from marketing/brand-voice. All selectors scoped to .bv-page.
   ========================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap");

/* Hide the global Redocly top navbar on this page only. */
body:has(.bv-page) header,
body:has(.bv-page) nav[data-component-name="Navbar/Navbar"] {
  display: none !important;
}

.bv-page {
  /* --------------------------------------------------------------------
     This page keeps its own `--bv-*` vocabulary because it is a
     self-contained deck (it even hides the global navbar), but the VALUES
     come from the site design system in @theme/styles.css — they are not a
     second palette. Anything below that is a literal rather than an alias
     is a deliberate divergence and says why.
     -------------------------------------------------------------------- */
  --bv-yellow:        var(--alt-yellow);
  --bv-yellow-hover:  var(--alt-yellow-hover);
  --bv-yellow-active: var(--alt-yellow-active);
  --bv-yellow-soft:   var(--alt-yellow-soft);
  --bv-ink:           var(--alt-ink);

  /* Fixed-role tokens: these never flip with the theme.
     --bv-on-accent  ink text that always sits on the yellow accent;
     --bv-hover-soft the light hover wash used by pill controls;
     --bv-chip-on/-fg  the selected pill, inverted against the page. */
  --bv-on-accent:     var(--alt-ink);
  --bv-hover-soft:    #E7E9EF;
  --bv-chip-on:       var(--alt-ink);
  --bv-chip-on-fg:    var(--fg-on-dark);

  --bv-fg-primary:    var(--fg-primary);
  --bv-fg-secondary:  var(--fg-secondary);
  /* NOT --fg-tertiary: that tone is decorative (2.4:1). Tertiary carries
     real content here — page counters, footnotes, section numbers at
     11-12px — so it uses the design system's micro-label tone. */
  --bv-fg-tertiary:   var(--fg-micro);
  --bv-fg-on-dark:    var(--fg-on-dark);
  --bv-fg-on-dark-2:  var(--fg-on-dark-2);
  --bv-fg-on-dark-3:  var(--fg-on-dark-3);

  --bv-color-success: var(--color-success);
  --bv-color-error:   var(--color-error);

  --bv-surface:           var(--surface);
  --bv-surface-muted:     var(--surface-muted);
  --bv-surface-secondary: var(--surface-secondary);
  --bv-surface-card:      var(--surface-card);
  --bv-surface-dark:      var(--surface-dark);
  --bv-surface-dark-2:    var(--surface-dark-2);
  --bv-surface-dark-3:    var(--surface-dark-3);

  /* Rules stay literal alphas: the design system's --border-hairline is an
     opaque #EBEBEB, which does not compose over the tinted surfaces here. */
  --bv-rule:        rgba(34,34,46,.10);
  --bv-rule-strong: rgba(34,34,46,.18);
  --bv-rule-dark:   rgba(255,255,255,.12);
  --bv-rule-dark-2: rgba(255,255,255,.20);

  --bv-radius-xs:  var(--radius-xs);
  --bv-radius-sm:  var(--radius-sm);
  --bv-radius-md:  var(--radius-md);
  --bv-radius-lg:  var(--radius-lg);
  --bv-radius-xl:  var(--radius-xl);
  --bv-radius-pill: 999px;

  --bv-shadow-sm:  var(--shadow-sm);
  --bv-shadow-md:  var(--shadow-md);
  /* No design-system equivalent for this depth. */
  --bv-shadow-lg:  0 16px 40px rgba(34,34,46,.18), 0 6px 12px rgba(34,34,46,.10);
  --bv-shadow-card-dark: 0 8px 24px 0 rgba(0,0,0,.08);

  --bv-font-sans: var(--font-sans);
  --bv-font-mono: var(--font-mono);

  --bv-pad-x: max(var(--page-gutter), calc((100% - var(--page-max)) / 2));
  --bv-pad-y: clamp(72px, 9vw, 132px);

  font-family: var(--bv-font-sans);
  background: var(--bv-surface);
  color: var(--bv-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (max-width: 1023px) { .bv-page { --bv-pad-x: var(--page-gutter-md); } }
@media (max-width: 759px)  { .bv-page { --bv-pad-x: var(--page-gutter-sm); } }

/* =========================================================================
   Dark theme — the same page, remapped at the token layer.
   Every surface and text colour on this page reads from the --bv-* tokens
   above, so the dark theme is a token swap rather than a second stylesheet.
   Tonal steps mirror the site-wide dark system: page #14141C, raised bands
   and cards #22222E, anchor blocks #343442.
   ========================================================================= */
html.dark .bv-page {
  --bv-ink:           var(--fg-on-dark-2);
  --bv-fg-primary:    var(--fg-on-dark-2);
  --bv-fg-secondary:  var(--fg-on-raised);
  --bv-fg-tertiary:   var(--fg-on-dark-3);

  --bv-surface:           var(--surface-dark-2);
  --bv-surface-muted:     var(--surface-dark);
  --bv-surface-secondary: var(--surface-dark);
  --bv-surface-card:      var(--surface-dark);

  --bv-rule:        rgba(255,255,255,.12);
  --bv-rule-strong: rgba(255,255,255,.24);

  /* The `.dark` anchors step up to #343442 in this theme, so muted on-dark
     text has to step up with them to stay at AA. */
  --bv-fg-on-dark-3:  var(--fg-on-raised);

  --bv-hover-soft:  rgba(255,255,255,.10);
  --bv-chip-on:     var(--fg-on-dark-2);
  --bv-chip-on-fg:  var(--surface-dark-2);

  /* Raised surfaces carry a hairline in dark mode instead of a drop shadow. */
  --bv-shadow-sm:  none;
  --bv-shadow-md:  none;
  --bv-shadow-lg:  0 16px 40px rgba(0,0,0,.45);
  --bv-shadow-card-dark: 0 8px 24px 0 rgba(0,0,0,.35);
}

/* The `.dark` bands and cards are the page's anchors. On a dark page they can
   no longer be the darkest tone, so they step UP instead of down. */
html.dark .bv-page .bv-section.dark,
html.dark .bv-page .bv-pair-card.dark,
html.dark .bv-page .bv-model.dark,
html.dark .bv-page .bv-metric {
  background: var(--bv-surface-dark-3);
}

/* Cards that sit on a muted band need to stay distinguishable from it. */
html.dark .bv-page .bv-section.muted .bv-aud-card,
html.dark .bv-page .bv-section.muted .bv-model.light,
html.dark .bv-page .bv-section.muted .bv-pair-card {
  background: var(--bv-surface-dark-2);
}

.bv-page *, .bv-page *::before, .bv-page *::after { box-sizing: border-box; }
.bv-page ::selection { background: var(--bv-yellow); color: var(--bv-on-accent); }

/* Glyphs follow the site-wide hierarchy: a backslash opens a major section,
   while the animated underscore appears only in the primary hero. */
.bv-page .gl {
  font-family: var(--bv-font-mono);
  font-weight: 700;
  color: var(--bv-yellow);
  display: none;
  font-size: 0.96em;
  line-height: 1;
  letter-spacing: 0;
}
.bv-page .gl-bs { margin-right: 0.14em; }
.bv-page .gl-us { margin-left: 0.08em; transform: translateY(-0.05em); }
@keyframes bv-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.18; } }
.bv-page .gl-live { animation: bv-blink 1.2s steps(2, end) infinite; }

.bv-page .bv-sec-title .tag .gl,
.bv-page .bv-hero div:where([aria-level="1"]) .gl {
  display: inline-block;
}

/* Top strip */
.bv-page .bv-strip {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px var(--bv-pad-x);
  background: var(--bv-surface);
}
.bv-page .bv-strip .bv-mark,
.bv-page .bv-strip .bv-mark:link,
.bv-page .bv-strip .bv-mark:visited,
.bv-page .bv-strip .bv-mark:hover,
.bv-page .bv-strip .bv-mark:focus,
.bv-page .bv-strip .bv-mark:active {
  font-family: var(--bv-font-mono); font-weight: 700; font-size: 18px;
  color: var(--bv-ink) !important; text-decoration: none !important; letter-spacing: -0.01em;
}
.bv-page .bv-strip .bv-mark .gl { font-size: 1em; }
.bv-page .bv-strip .bv-meta {
  display: flex; gap: 18px; align-items: baseline;
  font-family: var(--bv-font-mono); font-weight: 600; font-size: 12px;
  color: var(--bv-fg-tertiary);
}
.bv-page .bv-strip .bv-meta b { color: var(--bv-ink); font-weight: 700; }

/* Section scaffold */
.bv-page .bv-section { padding: var(--bv-pad-y) var(--bv-pad-x); position: relative; }
/* Tighten gap between top strip and the first (Opening) section. */
.bv-page .bv-strip + .bv-section { padding-top: clamp(32px, 4vw, 56px); }
.bv-page .bv-section.muted { background: var(--bv-surface-muted); }
.bv-page .bv-section.dark  { background: var(--bv-surface-dark); color: var(--bv-fg-on-dark); }

.bv-page .bv-sec-title {
  display: flex; align-items: baseline; gap: 0;
  margin-bottom: clamp(40px, 5vw, 56px);
}
.bv-page .bv-sec-title .tag {
  font-family: var(--bv-font-mono); font-weight: 700; font-size: 12px;
  color: var(--bv-ink); margin-right: 0.4ch;
}
.bv-page .bv-sec-title .tag .gl { font-size: 1em; }
.bv-page .bv-sec-title .name {
  font-family: var(--bv-font-sans); font-weight: 600; font-size: 12px;
  color: var(--bv-ink); text-transform: lowercase; letter-spacing: 0;
}
.bv-page .bv-sec-title .hr {
  flex: 1; height: 1px; align-self: center;
  background: var(--bv-rule); margin: 0 20px;
}
.bv-page .bv-sec-title .pg {
  font-family: var(--bv-font-mono); font-weight: 600; font-size: 12px;
  color: var(--bv-fg-tertiary); white-space: nowrap;
}
.bv-page .bv-section.dark .bv-sec-title .tag,
.bv-page .bv-section.dark .bv-sec-title .name { color: var(--bv-fg-on-dark); }
.bv-page .bv-section.dark .bv-sec-title .hr   { background: var(--bv-rule-dark-2); }
.bv-page .bv-section.dark .bv-sec-title .pg   { color: var(--bv-fg-on-dark-3); }

/* Hero */
.bv-page .bv-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.bv-page .bv-hero-left { display: flex; flex-direction: column; gap: clamp(28px, 3vw, 40px); }
.bv-page .bv-hero div:where([aria-level="1"]) {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: clamp(44px, 6.2vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 0; max-width: 14ch;
  color: var(--bv-ink); text-wrap: balance;
}
.bv-page .bv-hero div:where([aria-level="1"]) .gl {
  font-size: 0.82em; transform: translateY(-0.13em);
  margin-left: 0.02em; vertical-align: baseline;
  animation: bv-blink 1.2s steps(2, end) infinite;
}
.bv-page .bv-hero-media { display: flex; align-items: center; justify-content: flex-end; }
.bv-page .bv-hero-media img {
  width: 100%; height: auto; max-width: 640px;
  display: block; border-radius: var(--bv-radius-xl);
}
.bv-page .bv-lede {
  font-size: clamp(17px, 1.25vw, 20px); line-height: 1.55;
  color: var(--bv-fg-secondary); font-weight: 400;
  margin: 0; max-width: 48ch;
}
.bv-page .bv-lede b { color: var(--bv-ink); font-weight: 600; }
.bv-page .bv-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.bv-page a.bv-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 22px; border-radius: var(--bv-radius-md);
  font-family: "Inter", sans-serif; font-weight: 700; font-size: 16px;
  text-decoration: none; border: 0; cursor: pointer; line-height: 1;
  transition: background-color .12s ease, transform .08s ease, border-color .12s ease;
}
.bv-page a.bv-cta:active { transform: translateY(.5px); }
.bv-page a.bv-cta.primary  { background: var(--bv-yellow); color: var(--bv-on-accent); }
.bv-page a.bv-cta.primary:hover  { background: var(--bv-yellow-hover); color: var(--bv-on-accent); }
.bv-page a.bv-cta.primary:active { background: var(--bv-yellow-active); color: var(--bv-on-accent); }
.bv-page a.bv-cta.ghost    { background: transparent; color: var(--bv-ink); border: 1.5px solid var(--bv-rule-strong); }
.bv-page a.bv-cta.ghost:hover { border-color: var(--bv-ink); color: var(--bv-ink); }
.bv-page .bv-section.dark a.bv-cta.ghost { color: var(--bv-fg-on-dark); border-color: var(--bv-rule-dark-2); }
.bv-page .bv-section.dark a.bv-cta.ghost:hover { border-color: var(--bv-fg-on-dark); color: var(--bv-fg-on-dark); }

/* Harden every .bv-cta against the global Redocly link theme
   (visited turning blue, underline on hover, etc.). */
.bv-page a.bv-cta.primary,
.bv-page a.bv-cta.primary:link,
.bv-page a.bv-cta.primary:visited,
.bv-page a.bv-cta.primary:hover,
.bv-page a.bv-cta.primary:focus,
.bv-page a.bv-cta.primary:active {
  color: var(--bv-on-accent) !important;
  text-decoration: none !important;
}
.bv-page a.bv-cta.ghost,
.bv-page a.bv-cta.ghost:link,
.bv-page a.bv-cta.ghost:visited,
.bv-page a.bv-cta.ghost:hover,
.bv-page a.bv-cta.ghost:focus,
.bv-page a.bv-cta.ghost:active {
  color: var(--bv-ink) !important;
  text-decoration: none !important;
}
.bv-page .bv-section.dark a.bv-cta.ghost,
.bv-page .bv-section.dark a.bv-cta.ghost:link,
.bv-page .bv-section.dark a.bv-cta.ghost:visited,
.bv-page .bv-section.dark a.bv-cta.ghost:hover,
.bv-page .bv-section.dark a.bv-cta.ghost:focus,
.bv-page .bv-section.dark a.bv-cta.ghost:active {
  color: var(--bv-fg-on-dark) !important;
}

@media (max-width: 900px) {
  .bv-page .bv-hero { grid-template-columns: 1fr; align-items: start; }
  .bv-page .bv-hero-media { order: -1; justify-content: center; }
}

/* For-whom — three numbered cards */
.bv-page .bv-audience {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.bv-page .bv-aud-card {
  background: var(--bv-surface);
  border-radius: var(--bv-radius-xl);
  padding: 36px 32px 32px;
  display: flex; flex-direction: column; gap: 18px;
  min-height: 220px;
  border: 1px solid var(--bv-rule);
}
.bv-page .bv-section.muted .bv-aud-card { background: var(--bv-surface); }
.bv-page .bv-aud-num {
  font-family: var(--bv-font-mono); font-weight: 700; font-size: 12px;
  color: var(--bv-fg-secondary);
}
.bv-page .bv-aud-num .gl { font-size: 1em; }
.bv-page .bv-aud-title {
  font-family: "Inter", sans-serif; font-weight: 600;
  font-size: 22px; letter-spacing: -0.012em; line-height: 1.2;
  color: var(--bv-ink); margin: 0;
}
.bv-page .bv-aud-body {
  font-size: 14px; line-height: 1.6; color: var(--bv-fg-secondary); margin: 0;
}
@media (max-width: 900px) { .bv-page .bv-audience { grid-template-columns: 1fr; } }

/* Program — 4 pillars (Product, Sales, Implementation, Marketing) */
.bv-page .bv-program {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  margin-top: clamp(56px, 6vw, 88px);
  border-top: 1px solid var(--bv-rule);
}
.bv-page .bv-pillar {
  padding: 32px 28px 36px;
  border-right: 1px solid var(--bv-rule);
  display: flex; flex-direction: column; gap: 14px;
}
.bv-page .bv-pillar:last-child { border-right: 0; }
.bv-page .bv-pillar .n {
  font-family: var(--bv-font-mono); font-weight: 700; font-size: 11px;
  color: var(--bv-fg-tertiary); letter-spacing: 0;
}
.bv-page .bv-pillar div:where([aria-level="3"]) {
  font-family: "Inter", sans-serif; font-weight: 600;
  font-size: 24px; letter-spacing: -0.018em; line-height: 1.15;
  color: var(--bv-ink); margin: 0;
}
.bv-page .bv-pillar div:where([aria-level="3"]) .gl { font-size: 0.92em; }
.bv-page .bv-pillar p {
  font-size: 14px; line-height: 1.6; color: var(--bv-fg-secondary); margin: 0;
}
@media (max-width: 1023px) { .bv-page .bv-program { grid-template-columns: repeat(2, 1fr); }
  .bv-page .bv-pillar:nth-child(2) { border-right: 0; }
  .bv-page .bv-pillar:nth-child(1), .bv-page .bv-pillar:nth-child(2) { border-bottom: 1px solid var(--bv-rule); }
}
@media (max-width: 600px) { .bv-page .bv-program { grid-template-columns: 1fr; }
  .bv-page .bv-pillar { border-right: 0; border-bottom: 1px solid var(--bv-rule); }
  .bv-page .bv-pillar:last-child { border-bottom: 0; }
}

/* Value — pairing layout: white card + connector + dark card */
.bv-page .bv-pair {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: clamp(16px, 2vw, 28px); align-items: stretch;
}
.bv-page .bv-pair-card {
  background: var(--bv-surface);
  border-radius: var(--bv-radius-xl);
  padding: 40px 36px 32px;
  display: flex; flex-direction: column; gap: 18px;
  min-height: 320px;
}
.bv-page .bv-pair-card.dark { background: var(--bv-surface-dark); color: var(--bv-fg-on-dark); }
.bv-page .bv-pair-card .pcap {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 12px; border-bottom: 1px solid var(--bv-rule);
}
.bv-page .bv-pair-card.dark .pcap { border-bottom-color: var(--bv-rule-dark); }
.bv-page .bv-pair-card .pcap b {
  font-family: var(--bv-font-sans); font-weight: 700; font-size: 13px;
  text-transform: lowercase; color: var(--bv-ink); letter-spacing: 0;
}
.bv-page .bv-pair-card.dark .pcap b { color: var(--bv-fg-on-dark); }
.bv-page .bv-pair-card .pcap > span {
  font-family: var(--bv-font-mono); font-weight: 500; font-size: 12px;
  color: var(--bv-fg-secondary);
}
.bv-page .bv-pair-card.dark .pcap > span { color: var(--bv-fg-on-dark-3); }
.bv-page .bv-pair-body { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.bv-page .bv-pair-h {
  font-family: "Inter", sans-serif; font-weight: 600;
  font-size: clamp(28px, 2.4vw, 36px); letter-spacing: -0.024em; line-height: 1.05;
  color: var(--bv-ink); max-width: 14ch; margin: 0;
}
.bv-page .bv-pair-h .gl { font-size: 0.82em; transform: translateY(-0.08em); vertical-align: baseline; animation: bv-blink 1.2s steps(2, end) infinite; }
.bv-page .bv-pair-h-mono {
  font-family: var(--bv-font-mono); font-weight: 700;
  font-size: 22px; letter-spacing: -0.01em; line-height: 1.15;
  color: var(--bv-ink); margin: 0;
}
.bv-page .bv-pair-card.dark .bv-pair-h-mono { color: var(--bv-fg-on-dark); }
.bv-page .bv-pair-h-mono .gl { font-size: 1em; }
.bv-page .bv-pair-p {
  font-family: "Inter", sans-serif;
  font-size: 14px; line-height: 1.65; color: var(--bv-fg-secondary);
  margin: 0; max-width: 42ch;
}
.bv-page .bv-pair-card.dark .bv-pair-p { color: var(--bv-fg-on-dark-3); }
.bv-page .bv-pair-p b { color: var(--bv-ink); font-weight: 600; }
.bv-page .bv-pair-card.dark .bv-pair-p b { color: var(--bv-fg-on-dark); }
.bv-page .bv-pair-spec {
  margin-top: auto; padding-top: 18px;
  border-top: 1px solid var(--bv-rule);
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--bv-font-mono);
  font-size: 11px; letter-spacing: 0;
  font-weight: 700; color: var(--bv-ink);
}
.bv-page .bv-pair-card.dark .bv-pair-spec { border-top-color: var(--bv-rule-dark); color: var(--bv-fg-on-dark); }
.bv-page .bv-pair-spec .muted { color: var(--bv-fg-secondary); font-weight: 600; }
.bv-page .bv-pair-card.dark .bv-pair-spec .muted { color: var(--bv-fg-on-dark-3); }
.bv-page .bv-pair-conn {
  align-self: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--bv-font-mono); font-weight: 700; color: var(--bv-yellow);
  font-size: 36px; line-height: 1; padding: 24px 4px;
}
.bv-page .bv-pair-conn .conn-label {
  font-family: "Inter", sans-serif; font-weight: 500; font-size: 14px;
  color: var(--bv-fg-tertiary);
}
.bv-page .bv-pair-foot {
  margin: clamp(28px, 3vw, 40px) 0 0;
  font-family: "Inter", sans-serif;
  font-size: 14px; line-height: 1.65; color: var(--bv-fg-secondary);
  max-width: 78ch;
  padding-top: 18px;
  border-top: 1px solid var(--bv-rule);
}
.bv-page .bv-pair-foot b { color: var(--bv-ink); font-weight: 600; }
@media (max-width: 900px) {
  .bv-page .bv-pair { grid-template-columns: 1fr; }
  .bv-page .bv-pair-conn { flex-direction: row; padding: 8px 0; }
}

/* Benefits — two-column layout with prototype on the right */
.bv-page .bv-benefits-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(28px, 3vw, 48px);
  align-items: start;
}
.bv-page .bv-benefits-layout > .bv-benefits-phone-host { justify-self: center; }
.bv-page .bv-benefits-left {
  display: flex; flex-direction: column;
  gap: clamp(32px, 4vw, 48px);
}
.bv-page .bv-benefits {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  max-width: 720px;
}
.bv-page .bv-benefit {
  background: var(--bv-surface); border: 1px solid var(--bv-rule);
  border-radius: var(--bv-radius-xl);
  padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.bv-page .bv-benefit .n {
  font-family: var(--bv-font-mono); font-weight: 700; font-size: 11px;
  color: var(--bv-fg-tertiary);
}
.bv-page .bv-benefit div:where([aria-level="4"]) {
  font-family: "Inter", sans-serif; font-weight: 600;
  font-size: 20px; letter-spacing: -0.012em; line-height: 1.2;
  color: var(--bv-ink); margin: 0;
}
.bv-page .bv-benefit p {
  font-size: 14px; line-height: 1.6; color: var(--bv-fg-secondary); margin: 0;
}
.bv-page .bv-benefits-phone-host {
  width: 297px;  /* 412 × 0.72 */
  height: 624px; /* 866 × 0.72 */
  flex-shrink: 0;
  position: relative;
}
.bv-page .bv-phone-host {
  display: block;
  width: 412px; height: 866px;
  position: absolute; top: 0; left: 0;
  transform: scale(0.72);
  transform-origin: top left;
}
@media (max-width: 1180px) {
  .bv-page .bv-benefits-layout { grid-template-columns: 1fr; }
  .bv-page .bv-benefits-phone-host { justify-self: center; }
}
@media (max-width: 540px) {
  .bv-page .bv-benefits { grid-template-columns: 1fr; }
}

/* Metrics grid */
.bv-page .bv-metrics-lede {
  max-width: 56ch; margin: 0 0 clamp(40px, 5vw, 56px);
  font-size: 18px; line-height: 1.6; color: var(--bv-fg-on-dark-2);
}
.bv-page .bv-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--bv-rule-dark-2);
  border: 1px solid var(--bv-rule-dark-2);
}
.bv-page .bv-metric {
  background: var(--bv-surface-dark); padding: 36px 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.bv-page .bv-metric .v {
  font-family: "Inter", sans-serif; font-weight: 600;
  font-size: clamp(40px, 4.8vw, 64px); letter-spacing: -0.035em; line-height: 1;
  color: var(--bv-fg-on-dark);
}
.bv-page .bv-metric .v .gl { color: var(--bv-yellow); font-size: 0.55em; transform: translateY(-0.55em); }
.bv-page .bv-metric .l {
  font-family: var(--bv-font-sans); font-weight: 500; font-size: 14px; line-height: 1.5;
  color: var(--bv-fg-on-dark-3);
}
.bv-page .bv-metrics-foot {
  margin-top: 20px;
  font-family: var(--bv-font-mono); font-weight: 500; font-size: 12px;
  color: var(--bv-fg-on-dark-3);
}
@media (max-width: 900px) { .bv-page .bv-metrics { grid-template-columns: repeat(2, 1fr); } }

/* Mini metrics — TOC-style row inside benefits section */
.bv-page .bv-mini-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(48px, 5vw, 72px);
  padding-top: 24px;
  border-top: 1px solid var(--bv-rule);
}
.bv-page .bv-mini-metric {
  padding: 4px 20px;
  border-right: 1px solid var(--bv-rule);
  display: flex; flex-direction: column; gap: 8px;
}
.bv-page .bv-mini-metric:nth-child(6n) { border-right: 0; padding-right: 0; }
.bv-page .bv-mini-metric:nth-child(6n+1) { padding-left: 0; }
.bv-page .bv-mini-metric .n {
  font-family: var(--bv-font-mono); font-weight: 700;
  font-size: 11px; color: var(--bv-fg-secondary); letter-spacing: 0;
}
.bv-page .bv-mini-metric .v {
  font-family: "Inter", sans-serif; font-weight: 600;
  font-size: 28px; letter-spacing: -0.025em; line-height: 1.05;
  color: var(--bv-ink);
}
.bv-page .bv-mini-metric .v .gl { font-size: 1em; }
.bv-page .bv-mini-metric .lbl {
  font-family: "Inter", sans-serif; font-weight: 400;
  font-size: 12px; color: var(--bv-fg-secondary); line-height: 1.45;
}
.bv-page .bv-mini-metrics-foot {
  margin: 16px 0 0;
  font-family: var(--bv-font-mono); font-weight: 500;
  font-size: 11px; color: var(--bv-fg-tertiary);
}
.bv-page .bv-mini-metrics-foot .gl { font-size: 1em; }

/* Calculator controls — region tabs + clients slider, sits above mini-metrics */
.bv-page .bv-calc-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(48px, 5vw, 72px);
  padding: 24px 0 28px;
  border-top: 1px solid var(--bv-rule);
}
.bv-page .bv-calc-block { display: flex; flex-direction: column; gap: 14px; }
.bv-page .bv-calc-label {
  font-family: var(--bv-font-mono); font-weight: 700; font-size: 11px;
  color: var(--bv-fg-secondary); letter-spacing: 0;
  display: inline-flex; align-items: baseline;
  text-transform: lowercase;
}
.bv-page .bv-calc-label .gl { font-size: 1em; }
.bv-page .bv-calc-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.bv-page .bv-calc-tab {
  padding: 7px 12px;
  border-radius: var(--bv-radius-pill);
  background: var(--bv-surface-muted);
  border: 1px solid transparent;
  font-family: var(--bv-font-sans);
  font-size: 13px; font-weight: 500;
  color: var(--bv-fg-secondary);
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.bv-page .bv-calc-tab:hover { background: var(--bv-hover-soft); color: var(--bv-ink); }
.bv-page .bv-calc-tab.active { background: var(--bv-chip-on); color: var(--bv-chip-on-fg); }
.bv-page .bv-calc-slider { display: flex; align-items: center; gap: 14px; }
.bv-page .bv-calc-slider input[type=range] {
  flex: 1; height: 4px;
  -webkit-appearance: none; appearance: none;
  background: var(--bv-rule-strong);
  border-radius: 2px; outline: none;
}
.bv-page .bv-calc-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bv-yellow); cursor: pointer;
  border: 2px solid var(--bv-surface); box-shadow: var(--bv-shadow-sm);
}
.bv-page .bv-calc-slider input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bv-yellow); cursor: pointer;
  border: 2px solid var(--bv-surface); box-shadow: var(--bv-shadow-sm);
}
.bv-page .bv-calc-slider input[type=number] {
  width: 96px; padding: 8px 12px;
  border: 1px solid var(--bv-rule-strong);
  border-radius: var(--bv-radius-sm);
  font-family: var(--bv-font-mono);
  font-size: 15px; font-weight: 700;
  text-align: right;
  color: var(--bv-ink);
  background: var(--bv-surface);
}
.bv-page .bv-calc-slider input[type=number]:focus { outline: none; border-color: var(--bv-ink); }
.bv-page .bv-mini-metric .v { transition: opacity .12s ease; font-variant-numeric: tabular-nums; }
.bv-page .bv-mini-metrics.is-calc { border-top: 0; padding-top: 0; margin-top: 0; }
@media (max-width: 900px) {
  .bv-page .bv-calc-controls { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
  .bv-page .bv-mini-metrics { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
  .bv-page .bv-mini-metric:nth-child(6n) { border-right: 1px solid var(--bv-rule); padding-right: 20px; }
  .bv-page .bv-mini-metric:nth-child(3n) { border-right: 0; padding-right: 0; }
  .bv-page .bv-mini-metric:nth-child(3n+1) { padding-left: 0; }
}
@media (max-width: 540px) {
  .bv-page .bv-mini-metrics { grid-template-columns: repeat(2, 1fr); }
  .bv-page .bv-mini-metric:nth-child(3n) { border-right: 1px solid var(--bv-rule); padding-right: 20px; }
  .bv-page .bv-mini-metric:nth-child(2n) { border-right: 0; padding-right: 0; }
  .bv-page .bv-mini-metric:nth-child(2n+1) { padding-left: 0; }
}
@media (max-width: 540px) { .bv-page .bv-metrics { grid-template-columns: 1fr; } }

/* Case study — Uzum */
.bv-page .bv-case-head {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 70ch;
}
.bv-page .bv-case-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.bv-page .bv-case-left { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px); }
.bv-page .bv-case-image img {
  width: 100%; height: auto;
  border-radius: var(--bv-radius-xl);
  display: block;
}

/* TOC-style steps — cross divider pattern (between 1|2 and 3|4, no outer border) */
.bv-page .bv-case-toc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.bv-page .bv-case-toc-item {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 22px 22px 22px 0;
  border-right: 1px solid var(--bv-rule);
}
.bv-page .bv-case-toc-item:nth-child(2n) {
  border-right: 0;
  padding-left: 22px; padding-right: 0;
}
.bv-page .bv-case-toc-item:nth-child(-n+2) {
  border-bottom: 1px solid var(--bv-rule);
  padding-bottom: 22px;
}
.bv-page .bv-case-toc-item:nth-child(n+3) {
  padding-top: 22px;
}

/* Other integrations — logo strip below the case study */
.bv-page .bv-case-integrations {
  margin-top: clamp(56px, 6vw, 88px);
  padding-top: clamp(32px, 4vw, 40px);
  border-top: 1px solid var(--bv-rule);
}
.bv-page .bv-case-int-eyebrow {
  display: inline-flex; align-items: baseline;
  font-family: var(--bv-font-mono); font-weight: 700; font-size: 12px;
  color: var(--bv-fg-secondary); letter-spacing: 0;
  margin-bottom: 12px;
}
.bv-page .bv-case-int-eyebrow .gl { font-size: 1em; }
.bv-page .bv-case-integrations div:where([aria-level="3"]) {
  font-family: "Inter", sans-serif; font-weight: 600;
  font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.02em;
  color: var(--bv-ink); margin: 0 0 clamp(28px, 3vw, 36px);
  line-height: 1.2; max-width: 56ch;
}
.bv-page .bv-case-int-logos {
  display: flex; flex-wrap: wrap;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.bv-page .bv-case-int-logo {
  display: inline-flex; align-items: center;
  height: 32px;
  filter: grayscale(0%);
  opacity: 0.9;
  transition: opacity .15s ease;
}
.bv-page .bv-case-int-logo:hover { opacity: 1; }
.bv-page .bv-case-int-logo svg { height: 100%; width: auto; display: block; }
.bv-page .bv-case-toc-item .n {
  font-family: var(--bv-font-mono); font-weight: 700; font-size: 11px;
  color: var(--bv-fg-secondary); letter-spacing: 0;
}
.bv-page .bv-case-toc-item .lbl {
  font-family: "Inter", sans-serif; font-weight: 600;
  font-size: 20px; letter-spacing: -0.012em; line-height: 1.1;
  color: var(--bv-ink);
  display: inline-flex; align-items: baseline;
}
.bv-page .bv-case-toc-item .lbl .gl { font-size: 1em; }
.bv-page .bv-case-toc-item .ds {
  font-family: "Inter", sans-serif; font-weight: 400; font-size: 13px;
  color: var(--bv-fg-secondary); line-height: 1.5;
}
@media (max-width: 900px) {
  .bv-page .bv-case-layout { grid-template-columns: 1fr; }
}
.bv-page .bv-case-head div:where([aria-level="2"]) {
  font-family: "Inter", sans-serif; font-weight: 600;
  font-size: clamp(32px, 4vw, 48px); letter-spacing: -0.025em; line-height: 1.1;
  color: var(--bv-ink); margin: 0;
}
.bv-page .bv-case-head div:where([aria-level="2"]) .gl { font-size: 0.82em; }
.bv-page .bv-case-head p {
  font-size: 17px; line-height: 1.55; color: var(--bv-fg-secondary); margin: 0;
}
.bv-page .bv-case-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; border-top: 1px solid var(--bv-rule);
}
.bv-page .bv-case-step {
  padding: 28px 24px 32px; border-right: 1px solid var(--bv-rule);
  display: flex; flex-direction: column; gap: 12px;
}
.bv-page .bv-case-step:last-child { border-right: 0; }
.bv-page .bv-case-step .n {
  font-family: var(--bv-font-mono); font-weight: 700; font-size: 11px;
  color: var(--bv-yellow); letter-spacing: 0;
}
.bv-page .bv-case-step div:where([aria-level="4"]) {
  font-family: "Inter", sans-serif; font-weight: 600;
  font-size: 18px; letter-spacing: -0.01em; line-height: 1.25;
  color: var(--bv-ink); margin: 0;
}
.bv-page .bv-case-step p {
  font-size: 14px; line-height: 1.55; color: var(--bv-fg-secondary); margin: 0;
}
.bv-page .bv-case-step ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 8px;
}
.bv-page .bv-case-step ul li {
  font-family: var(--bv-font-mono); font-weight: 600; font-size: 13px;
  color: var(--bv-ink); display: flex; gap: 8px; align-items: baseline;
}
.bv-page .bv-case-step ul li .gl { font-size: 1em; }
@media (max-width: 900px) { .bv-page .bv-case-steps { grid-template-columns: 1fr 1fr; }
  .bv-page .bv-case-step:nth-child(2) { border-right: 0; }
  .bv-page .bv-case-step:nth-child(1), .bv-page .bv-case-step:nth-child(2) { border-bottom: 1px solid var(--bv-rule); }
}
@media (max-width: 560px) { .bv-page .bv-case-steps { grid-template-columns: 1fr; }
  .bv-page .bv-case-step { border-right: 0; border-bottom: 1px solid var(--bv-rule); }
  .bv-page .bv-case-step:last-child { border-bottom: 0; }
}

/* Models — Co-Brand vs White Label */
.bv-page .bv-models { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bv-page .bv-model {
  padding: 40px; border-radius: var(--bv-radius-xl);
  display: flex; flex-direction: column; gap: 18px;
  min-height: 480px;
}
.bv-page .bv-model.light {
  background: var(--bv-surface); border: 1px solid var(--bv-rule); color: var(--bv-ink);
}
.bv-page .bv-model.dark { background: var(--bv-surface-dark); color: var(--bv-fg-on-dark); }
.bv-page .bv-model .head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 18px; border-bottom: 1px solid var(--bv-rule);
}
.bv-page .bv-model.dark .head { border-bottom-color: var(--bv-rule-dark-2); }
.bv-page .bv-model .head .kind {
  font-family: "Inter", sans-serif; font-weight: 600; font-size: 28px; letter-spacing: -0.02em;
}
.bv-page .bv-model .head .kind .gl { font-size: 0.84em; }
.bv-page .bv-model .head .fee {
  font-family: var(--bv-font-mono); font-weight: 700; font-size: 12px;
  color: var(--bv-fg-secondary); text-align: right;
}
.bv-page .bv-model.dark .head .fee { color: var(--bv-fg-on-dark-3); }
.bv-page .bv-model .head .fee b { display: block; font-size: 16px; color: var(--bv-ink); margin-top: 4px; }
.bv-page .bv-model.dark .head .fee b { color: var(--bv-fg-on-dark); }
.bv-page .bv-model ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.bv-page .bv-model ul li {
  display: grid; grid-template-columns: 18px 1fr; gap: 12px;
  font-size: 15px; line-height: 1.55; color: var(--bv-fg-secondary);
}
.bv-page .bv-model.dark ul li { color: var(--bv-fg-on-dark-2); }
.bv-page .bv-model ul li b { color: var(--bv-ink); font-weight: 600; }
.bv-page .bv-model.dark ul li b { color: var(--bv-fg-on-dark); }
.bv-page .bv-model ul li .mk {
  font-family: var(--bv-font-mono); font-weight: 700; color: var(--bv-yellow); line-height: 1.55;
}
@media (max-width: 900px) { .bv-page .bv-models { grid-template-columns: 1fr; } }

/* Altegio in numbers — small stat grid on muted */
.bv-page .bv-numbers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--bv-rule);
}
.bv-page .bv-num {
  padding: 28px 24px 32px;
  border-right: 1px solid var(--bv-rule);
  border-bottom: 1px solid var(--bv-rule);
  display: flex; flex-direction: column; gap: 6px;
}
.bv-page .bv-num:nth-child(3n) { border-right: 0; }
.bv-page .bv-num:nth-last-child(-n+3) { border-bottom: 0; }
.bv-page .bv-num .v {
  font-family: "Inter", sans-serif; font-weight: 600;
  font-size: clamp(32px, 3.4vw, 44px); letter-spacing: -0.03em; line-height: 1;
  color: var(--bv-ink);
}
.bv-page .bv-num .v .gl { color: var(--bv-yellow); font-size: 0.6em; transform: translateY(-0.5em); }
.bv-page .bv-num .l {
  font-family: var(--bv-font-sans); font-weight: 500; font-size: 14px;
  color: var(--bv-fg-secondary);
}
@media (max-width: 900px) {
  .bv-page .bv-numbers { grid-template-columns: repeat(2, 1fr); }
  .bv-page .bv-num:nth-child(3n) { border-right: 1px solid var(--bv-rule); }
  .bv-page .bv-num:nth-child(2n) { border-right: 0; }
  .bv-page .bv-num:nth-last-child(-n+3) { border-bottom: 1px solid var(--bv-rule); }
  .bv-page .bv-num:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 540px) {
  .bv-page .bv-numbers { grid-template-columns: 1fr; }
  .bv-page .bv-num { border-right: 0 !important; border-bottom: 1px solid var(--bv-rule); }
  .bv-page .bv-num:last-child { border-bottom: 0; }
}

/* Contact / closing */
.bv-page .bv-section#contact { padding-bottom: clamp(72px, 8vw, 120px) !important; }
.bv-page .bv-contact { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
.bv-page .bv-contact div:where([aria-level="2"]) {
  font-family: "Inter", sans-serif; font-weight: 600;
  font-size: clamp(40px, 6vw, 88px); letter-spacing: -0.035em; line-height: 0.98;
  color: var(--bv-fg-on-dark); margin: 0; max-width: 14ch;
}
.bv-page .bv-contact div:where([aria-level="2"]) .gl {
  font-size: 0.74em; transform: translateY(-0.13em);
  margin-left: 0.02em; vertical-align: baseline;
  animation: bv-blink 1.2s steps(2, end) infinite;
}
.bv-page .bv-contact-right { display: flex; flex-direction: column; gap: 28px; }
.bv-page .bv-contact-card {
  background: var(--bv-surface-dark-3); border-radius: var(--bv-radius-xl);
  padding: 32px;
  display: flex; flex-direction: column; gap: 6px;
}
.bv-page .bv-contact-card .who {
  font-family: var(--bv-font-mono); font-weight: 700; font-size: 12px;
  color: var(--bv-yellow); letter-spacing: 0;
}
.bv-page .bv-contact-card .name {
  font-family: "Inter", sans-serif; font-weight: 600; font-size: 24px; letter-spacing: -0.018em;
  color: var(--bv-fg-on-dark);
}
.bv-page .bv-contact-card .role {
  font-family: var(--bv-font-sans); font-weight: 400; font-size: 14px;
  /* This card sits on the raised surface, where --bv-fg-on-dark-3 reaches
     only 3.95:1. */
  color: var(--fg-on-raised); margin-bottom: 8px;
}
.bv-page .bv-contact-card a:not(.bv-cta) {
  font-family: var(--bv-font-mono); font-weight: 700; font-size: 18px;
  color: var(--bv-fg-on-dark); text-decoration: none;
  transition: color .12s ease;
}
.bv-page .bv-contact-card a:not(.bv-cta):hover { color: var(--bv-yellow); }
.bv-page .bv-contact-card .bv-contact-cta { align-self: flex-start; margin-top: 18px; }
@media (max-width: 900px) { .bv-page .bv-contact { grid-template-columns: 1fr; } }

altegio
_
\
fintech-partnership
v1
· 2026.05
\
proposition
01 / 06
Altegio for Fintech
_
Altegio launches a 
White Label solution
and grants exclusive platform access in markets of up to 10M people. For 
fintech companies and banks
rolling out products in the 
Beauty, Wellness, Sport, Health, Auto
service verticals and planning to scale 
BNPL
in local markets.
      
Become a partner
View models
01
\
product
Joint solution with special terms and technical integration of fintech tools into the Altegio platform.
02
\
sales
Dedicated sales managers and implementation specialists on the fintech partner's side.
03
\
implementation
Altegio integrates the fintech solutions into the platform; the partner drives the joint product to market.
04
\
marketing
Internal communications, performance marketing, offline marketing and PR in local markets.
\
value
02 / 06
SMB
growth blockers
\
before
No-shows, cancellations and low LTV
_
Empty schedule slots, no prepayments or deposits, expensive acquisition and weak retention. 
BNPL for services is underdeveloped
— mid- and high-ticket spend leaks to competitors.
        
Beauty · Sport · Health · Auto
service SMB
\
paired with
_
altegio × fintech
\
after
\
solution
Online prepayments, deposits, BNPL and QR payments
cut no-shows, fill empty slots and grow the average check. End users book, get notifications and pay for services inside the 
fintech app
; the business gets a new acquisition channel, prepayments and retention.
        
POS · Payments · Retention
fintech app
One platform that solves the merchant's pain and delivers 
acquiring-GMV growth, new SMB merchants
and recurring end-user touchpoints to the fintech partner.
  
\
benefits for fintech
03 / 06
With Altegio you can validate product-market fit at low cost, on top of hundreds of digitised SMB merchants already operating in service verticals across the country.
  
01 
\
gmv
Acquiring-GMV uplift
Net-new volume from service verticals with frequent, recurring payments.
02 
\
merchants
New SMB merchants
Access to digital businesses ready to plug in payments and BNPL out of the box.
03 
\
cross-sell
Cross-sell
One merchant touchpoint, multiple fintech products: cards, BNPL, SME lending.
04 
\
retention
MAU 
&
retention
Recurring scenarios — online booking, notifications, payments — bring the end user back into the bank's app.
\
region
Middle East
East Europe
West Europe
Latin America
Central Asia
\
business clients
01
1
000
merchants in Beauty, Wellness, Sport, Health and Auto verticals
02
4
780
service specialists providing the services
03
248k
visits per month
04
1.5m
SMS, WhatsApp and push notifications per month
05
$14.7m
GMV per month
06
24k
confirmation pages after online bookings
\
note 
forecast for 
Middle East
· 
500
business clients · source: Power BI "Altegio Main Metrics"
\
models
04 / 06
\
co-brand
commitment
free
—
Co-branded bundle
of Altegio × FinTech, packaged with preferential terms for merchants.
—
Native integration
of the partner’s fintech rails into Altegio, with in-market exclusivity for the partnership term.
—
The FinTech partner
drives go-to-market — distribution, co-marketing and bundle sales via its local commercial team.
—
Altegio
runs implementation, merchant activation and Tier-1 support.
\
white-label
setup fee
$50k — $100k
+
Launch under the FinTech partner’s brand
, distributed as part of its merchant proposition in the local market.
+
Altegio re-skins
the SaaS — domain, brand, UI, content and customer comms — to match the partner’s identity.
+
The FinTech partner
runs the full in-country delivery team: acquisition, sales, implementation and customer support.
+
Altegio
handles fintech-stack integration, partner-team enablement and ongoing L2 / platform-level support.
\
case
05 / 06
Altegio × Uzum
_
Joint GTM launch in Uzbekistan: a bundle with exclusive terms, native POS integration, co-branded marketing, and sales driven by a unified team.
01
\
bundle
0% Uzum Visa acquiring, 30-day BNPL grace period, 30% discount on Altegio
02
\
integration
Uzum POS, QR, banking and BNPL natively embedded in Altegio
03
\
launch
offline event for 300+ entrepreneurs, co-branded landing page, performance marketing
04
\
sales
Uzum sales team — 4 full-time reps, warm and cold leads
\
contact
06 / 06
Let's build the bundle
_
\
contact
Mike Kondakov
CBDO 
&
Co-founder, Altegio
partner@alteg.io
Start a conversation