/* =============================================================================
   Hablo 2026 marketing — page-specific extensions on top of the UI kit.
   ============================================================================= */
@import url("kit-styles.css");

/* =============================================================================
   AMBIENT MESH BACKGROUND
   Soft radial blobs in Hablo cyan + green, anchored to the viewport. Very low
   opacity so type, mockups and the dark inset still read cleanly. Each section
   variant gets its own treatment so the rhythm isn't a flat wash.
   ============================================================================= */
body {
  background: #FFFFFF;
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* top-right cyan glow — anchors the hero */
    radial-gradient(900px 700px at 92% -8%,  rgba(0,147,199,0.16),  transparent 60%),
    /* mid-left green wash */
    radial-gradient(700px 600px at -8% 28%,  rgba(11,212,113,0.07), transparent 62%),
    /* mid-right cyan wash */
    radial-gradient(820px 640px at 108% 62%, rgba(0,147,199,0.10),  transparent 60%),
    /* bottom-left green tail */
    radial-gradient(660px 540px at -6% 96%,  rgba(11,212,113,0.06), transparent 62%);
}

/* Sections sit on the mesh. Most are transparent now; the dark inset and the
   alt-tinted blocks keep their own colour to break up the rhythm. */
.hb-section {
  background: transparent;
  position: relative;
}
.hb-section--white { background: transparent; }
.hb-section--alt {
  background: rgba(245,248,250,0.55);
  backdrop-filter: blur(0.5px);
}
.hb-section--alt::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(520px 380px at 8% 18%,  rgba(0,147,199,0.10),  transparent 65%),
    radial-gradient(420px 320px at 96% 90%, rgba(11,212,113,0.06), transparent 65%);
}
.hb-section--alt > * { position: relative; z-index: 1; }
.hb-section--dark { background: var(--bg-dark); }

/* Footer keeps a clean white floor so the page closes with confidence */
.hb-foot2 { background: #fff; position: relative; z-index: 1; }

/* Slightly tighter section padding for a dense, scrollable single-pager. */
.hb-section { padding-block: clamp(72px, 7vw, 112px); }

/* Even vertical rhythm: when two sections share the same background there is no
   tint divider to mark the boundary, so the doubled padding reads as one
   oversized void. Drop the second section's top padding so every gap between
   sections feels consistent. */
.hb-section--white + .hb-section--white,
.hb-section--alt + .hb-section--alt { padding-top: 0; }
/* The logo strip is a low-content alt block; collapsing the following alt
   section's top padding leaves #for-agents looking cramped. Keep its normal
   top padding so the rhythm stays consistent. */
#for-agents.hb-section--alt { padding-top: clamp(72px, 7vw, 112px); }

/* Section heads — eyebrow + headline + sub-copy block, shared spacing. */
.sec-head { max-width: 60rem; margin-bottom: 56px; }
.sec-head .hb-eyebrow { margin-bottom: 18px; }
.sec-head .sub { color: var(--fg-muted); font-size: var(--fs-body-lg); line-height: 1.5; margin-top: 14px; max-width: 64ch; text-wrap: pretty; }
.sec-head--center { text-align: center; margin-inline: auto; }
.sec-head--center .sub { margin-left: auto; margin-right: auto; }
.sec-head--center .hb-eyebrow { justify-content: center; display: flex; }

/* =============================================================================
   NAV — variant on kit nav with centred links + travel-agent slot
   ============================================================================= */
.hb-nav__center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 32px;
}
.hb-nav__inner { position: relative; }
.hb-nav__quiet {
  font-size: 13px;
  color: var(--fg-muted);
  font-family: var(--font-sans);
}
.hb-nav__quiet:hover { color: var(--cyan); }
@media (max-width: 900px) { .hb-nav__center { display: none; } }

/* =============================================================================
   HERO — single column, generous whitespace, no preview card per brief.
   ============================================================================= */
.hb-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding-top: 24px;
}
.hb-hero-2 {
  padding-top: 24px;
  max-width: 560px;
}
.hb-hero-2 .hb-eyebrow { margin-bottom: 28px; }
.hb-hero-2 .display {
  font-size: clamp(2.75rem, 5.4vw + 0.5rem, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 500;
  text-wrap: balance;
  max-width: 18ch;
}
.hb-hero-2 .lead {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: 56ch;
  margin-top: 28px;
}
.hb-hero-2__actions { display: flex; gap: 12px; align-items: center; margin-top: 40px; flex-wrap: wrap; }

@media (max-width: 980px) {
  .hb-hero-row { grid-template-columns: 1fr; gap: 48px; }
  .hb-hero-2 { max-width: none; padding-top: 16px; }
}

/* Hero proof row — three numbers earning their place. */
.hb-hero-2__proof {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.hb-hero-2__proof .sep { color: var(--fg-faint); }
@media (max-width: 540px) {
  .hb-hero-2__proof { flex-wrap: wrap; row-gap: 8px; }
}

/* =============================================================================
   LOGO STRIP
   ============================================================================= */
.hb-logos { text-align: center; }
.hb-logos__cap {
  color: var(--fg-muted);
  font-size: 14px;
  margin-bottom: 40px;
  font-family: var(--font-sans);
}
.hb-logos__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px 56px;
  max-width: 1120px;
  margin: 0 auto;
}
.hb-logos__cell {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 72px;
}
.hb-logos__img {
  max-height: 67px;
  max-width: 130px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.58) contrast(1.05);
  transition: filter var(--dur-base) var(--ease-out);
}
.hb-logos__img:hover { filter: grayscale(0%) opacity(1) contrast(1); }
.hb-logos__img[alt="Las Vegas"] { max-width: 110px; }
.hb-logos__img[alt="Visit Florida"] { width: 170px; max-width: none; }
.hb-logos__img[alt="Virgin Voyages"] { max-height: 76px; max-width: 136px; }
.hb-logos__img[alt="Brand USA"] { max-height: 78px; max-width: 150px; }
.hb-logos__txt {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--fg-muted);
  text-align: center;
  opacity: 0.7;
}
@media (max-width: 900px) {
  .hb-logos__row { gap: 32px 34px; }
  .hb-logos__img[alt="Visit Florida"] { width: 150px; }
}

/* =============================================================================
   THE SHIFT — two-column comparison
   ============================================================================= */
.hb-shift {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.hb-shift__col {
  padding: 40px 40px 40px 0;
}
.hb-shift__col + .hb-shift__col {
  border-left: 1px solid var(--border);
  padding: 40px 0 40px 48px;
}
.hb-shift__h {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 28px;
}
.hb-shift__col--new .hb-shift__h { color: var(--green-ink); }

.hb-shift__list { display: flex; flex-direction: column; }
.hb-shift__item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 16px;
  padding: 18px 0;
  align-items: start;
  border-top: 1px solid var(--border);
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -0.005em;
}
.hb-shift__item:first-child { border-top: 0; padding-top: 0; }
.hb-shift__mark {
  width: 22px; height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 1;
  margin-top: 2px;
}
.hb-shift__col--old .hb-shift__mark {
  background: rgba(15,28,42,0.04);
  color: var(--fg-faint);
}
.hb-shift__col--old .hb-shift__text { color: var(--fg-muted); }
.hb-shift__col--new .hb-shift__mark {
  background: var(--green-soft);
  color: var(--green-ink);
}
.hb-shift__col--new .hb-shift__text { color: var(--fg); }

@media (max-width: 820px) {
  .hb-shift { grid-template-columns: 1fr; }
  .hb-shift__col + .hb-shift__col { border-left: 0; border-top: 1px solid var(--border); padding: 40px 0; }
  .hb-shift__col { padding: 40px 0; }
}

/* =============================================================================
   WHAT HABLO IS — product mockups in both tiles, connected by the cyan arrow.
   ============================================================================= */
.hb-whatis {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) auto minmax(0, 1.2fr);
  gap: 0;
  align-items: stretch;
}
.hb-whatis__tile {
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hb-whatis__caption h3 {
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
  max-width: 18ch;
}
.hb-whatis__caption p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 32ch;
  margin-top: 8px;
}

.hb-whatis__conn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
}
.hb-whatis__conn-arrow-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cyan-soft);
  color: var(--cyan);
}
.hb-whatis__conn-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  white-space: nowrap;
}
.hb-whatis__conn-arrow {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border) 20%, var(--border) 80%, transparent);
  position: relative;
}
.hb-whatis__conn-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px; height: 8px;
  border-right: 1px solid var(--cyan);
  border-top: 1px solid var(--cyan);
  transform: translateY(-50%) rotate(45deg);
}

.hb-whatis__tile--inner {
  background: var(--bg);
}
.hb-whatis__tile--outer {
  background: linear-gradient(180deg, var(--bg) 0%, var(--cyan-soft) 240%);
}
/* Override decorative gradient — system says no gradients on big areas; keep clean */
.hb-whatis__tile--outer { background: #fff; border-color: var(--border-strong); }

.hb-whatis__mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
}
.hb-whatis__mark .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }

.hb-whatis__proof {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  border-top: 1px solid var(--border);
  padding-top: 48px;
}
.hb-whatis__proof-item .hb-eyebrow { margin-bottom: 12px; }
.hb-whatis__proof-item p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg);
  text-wrap: pretty;
}

@media (max-width: 980px) {
  .hb-whatis { grid-template-columns: 1fr; }
  .hb-whatis__conn { padding: 16px 0; }
  .hb-whatis__conn-arrow-wrap { transform: rotate(90deg); }
  .hb-whatis__proof { grid-template-columns: 1fr; gap: 32px; }
}

/* =============================================================================
   THREE PILLARS — feature cards
   ============================================================================= */
.hb-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.hb-pillar {
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color var(--dur-base) var(--ease-out);
}
.hb-pillar:hover { border-color: rgba(15,28,42,0.18); }
.hb-pillar__icon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--cyan-soft);
  color: var(--cyan-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hb-pillar__title {
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.hb-pillar__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-muted);
}
.hb-pillar__stat {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
@media (max-width: 900px) {
  .hb-pillars { grid-template-columns: 1fr; }
}

/* =============================================================================
   WHY IT WORKS — typography-only three-column ecosystem section
   ============================================================================= */
.hb-why {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 8px;
}
.hb-why__col .hb-eyebrow { margin-bottom: 14px; }
.hb-why__icon { color: var(--cyan); margin-bottom: 16px; display: block; line-height: 0; }
.hb-why__body {
  font-size: 16px;
  line-height: 1.62;
  color: var(--fg-muted);
  margin: 0;
  text-wrap: pretty;
}
@media (max-width: 900px) {
  .hb-why { grid-template-columns: 1fr; gap: 32px; }
}

/* =============================================================================
   AGENT SECTION — compact homepage block: proves the supply side is real and
   routes the curious to /for-agents. Typography-only LEARN/ASK/EARN row.
   ============================================================================= */
.hb-agentrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.hb-agentrow__label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 14px;
}
.hb-agentrow__line {
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 0;
  text-wrap: pretty;
}
.hb-agentrow__foot {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 0;
}
.hb-agentrow__free {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
}
@media (max-width: 820px) {
  .hb-agentrow { grid-template-columns: 1fr; gap: 28px; }
}

/* =============================================================================
   FORGETTING CURVE
   ============================================================================= */
.hb-curve {
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 40px;
}
.hb-curve__inner {
  max-width: 720px;
  margin: 0 auto;
}
.hb-curve__chart {
  width: 100%;
  height: auto;
  display: block;
}
.hb-curve__legend {
  display: flex;
  gap: 40px;
  margin-top: 24px;
  font-size: 14px;
  flex-wrap: wrap;
}
.hb-curve__legend-item { display: flex; align-items: center; gap: 10px; }
.hb-curve__swatch {
  width: 28px;
  height: 2px;
  border-radius: 1px;
}
.hb-curve__swatch--old { background: var(--fg-faint); }
.hb-curve__swatch--new { background: var(--cyan); }

/* =============================================================================
   PROOF + DARK CASE STUDY
   ============================================================================= */
.hb-proof-card {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
  border-radius: var(--r-lg);
  padding: 48px;
  margin-top: 16px;
}
.hb-proof-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}
.hb-proof-card__top .label-cyan { color: var(--cyan); }
.hb-proof-card__top .label-muted { color: var(--fg-on-dark-muted); }
.hb-proof-card h3 {
  font-size: clamp(1.75rem, 2.6vw + 0.5rem, 2.5rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: #fff;
  max-width: 22ch;
  margin-bottom: 40px;
  text-wrap: balance;
}
.hb-proof-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-on-dark);
  border-bottom: 1px solid var(--border-on-dark);
}
.hb-proof-card__metric {
  padding: 28px 0;
  border-right: 1px solid var(--border-on-dark);
  padding-right: 24px;
}
.hb-proof-card__metric:not(:first-child) { padding-left: 32px; }
.hb-proof-card__metric:last-child { border-right: 0; }
.hb-proof-card__metric .v {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(2.25rem, 3.2vw + 1rem, 3.75rem);
  line-height: 1;
  color: var(--cyan);
  letter-spacing: -0.03em;
}
.hb-proof-card__metric .u {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-on-dark-muted);
  margin-top: 14px;
}
.hb-proof-card__quote {
  margin-top: 40px;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--cyan);
}
.hb-proof-card__quote p {
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
  color: #fff;
  letter-spacing: -0.01em;
  max-width: 48ch;
}
.hb-proof-card__attrib {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-on-dark-muted);
}

.hb-tcards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}
.hb-tcard {
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 32px;
}
.hb-tcard__q {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.3;
  color: var(--fg);
  text-wrap: balance;
}
.hb-tcard__attrib {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hb-tcard__name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--fg);
}
.hb-tcard__role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
@media (max-width: 820px) {
  .hb-tcards { grid-template-columns: 1fr; }
  .hb-proof-card { padding: 32px 24px; }
  .hb-proof-card__metrics { grid-template-columns: 1fr; }
  .hb-proof-card__metric { border-right: 0; border-bottom: 1px solid var(--border-on-dark); padding: 24px 0; }
  .hb-proof-card__metric:not(:first-child) { padding-left: 0; }
  .hb-proof-card__metric:last-child { border-bottom: 0; }
}

/* Visit California flagship - full-bleed dark section: why-points + capability tiles */
#proof .h2 { color: #fff; }
#proof .hb-h2 { color: #fff; }
#proof .sub { color: var(--fg-on-dark-muted); text-wrap: balance; }
.hb-vca {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: start;
}
.hb-vca__why {
  display: flex;
  flex-direction: column;
}
.hb-vca__darklabel {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 24px;
}
.hb-vca__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.hb-vca__bullets li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: #fff;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.hb-vca__tick {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--cyan);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.hb-vca__tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-content: start;
}
.hb-vca__tile {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-lg);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
}
.hb-vca__tilek {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cyan);
}
.hb-vca__tilelabel {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-on-dark-muted);
  margin-top: 8px;
}
.hb-vca__tilev {
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-on-dark-muted);
  margin-top: 8px;
  text-wrap: pretty;
}
.hb-vca__launch {
  margin: 28px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-on-dark-muted);
}
@media (max-width: 900px) {
  .hb-vca { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .hb-vca__tiles { grid-template-columns: 1fr; }
}

/* =============================================================================
   ATTRIBUTION ROADMAP — four tiles
   ============================================================================= */
.hb-attr {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.hb-attr__tile {
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 200px;
  justify-content: space-between;
  transition: border-color var(--dur-base) var(--ease-out);
}
.hb-attr__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.hb-attr__status {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.022em;
  color: var(--fg);
  line-height: 1.2;
}
.hb-attr__check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: -4px;
}
.hb-attr__tile--highlight {
  border-color: var(--cyan);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--cyan);
}
.hb-attr__tile--highlight .hb-attr__label { color: var(--cyan); }
.hb-attr__tile--highlight .hb-attr__status { color: var(--cyan); }
.hb-attr__tile--highlight .hb-attr__check {
  background: var(--cyan-soft);
  color: var(--cyan-ink);
}
@media (max-width: 900px) {
  .hb-attr { grid-template-columns: repeat(2, 1fr); }
}
.hb-attr__note {
  margin-top: 28px;
  max-width: 72ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-muted);
  text-wrap: pretty;
}

/* =============================================================================
   V1.4 ADDITIONS — soft accent, pillar tease, DMO cards, mechanic beats
   ============================================================================= */

/* Soft brand-tinted section accent — at most one per page */
.hb-section--soft { background: var(--cyan-soft); }
.hb-section--soft .hb-fcta__trust-item .ico { background: #fff; }

/* Pillar forward tease */
.hb-pillar__soon {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.45;
  color: var(--cyan-ink);
  background: var(--cyan-soft);
  border-radius: var(--r-sm);
  padding: 8px 10px;
}

/* DMO testimonials */
.hb-dmo-head { margin-top: 0; }
.hb-dmo-head__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  margin: 10px 0 0;
}
.hb-dmo-cards {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.hb-dmo {
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.hb-dmo__q {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--fg);
  margin: 0 0 20px;
}
.hb-dmo__q em {
  font-style: normal;
  color: var(--cyan-ink);
  font-weight: 500;
}
.hb-dmo__attrib { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.hb-dmo__name { font-family: var(--font-sans); font-weight: 500; font-size: 14px; color: var(--fg); }
.hb-dmo__role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--fg-muted); }
@media (max-width: 900px) { .hb-dmo-cards { grid-template-columns: 1fr; } }

/* Two-column mechanic beat (Daily Quiz, clean feed) */
.hb-quiz {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.hb-quiz--flip .hb-quiz__copy { order: 2; }
.hb-quiz--flip .hb-feedcard { order: 1; }
.hb-quiz__copy .sub { margin-top: 16px; }
.hb-quiz__shot {
  justify-self: center;
  width: 100%;
  max-width: 400px;
}
.hb-quiz__shot img { display: block; width: 100%; height: auto; }
/* Daily quiz image carries its own card shadow (transparent PNG bg), so the
   section needs less breathing room before the next block. */
#daily-quiz { padding-bottom: clamp(48px, 5vw, 72px); }
.hb-quiz__card, .hb-feedcard {
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  padding: 24px;
  box-shadow: 0 1px 2px rgba(15,28,42,0.04);
}
.hb-quiz__head, .hb-feedcard__head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 16px;
}
.hb-quiz__pip { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); }
.hb-quiz__q {
  font-size: 1.125rem; font-weight: 500; line-height: 1.4;
  letter-spacing: -0.015em; color: var(--fg);
  margin-bottom: 18px; text-wrap: balance;
}
.hb-quiz__src {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--cyan-ink); font-weight: 500;
  padding: 10px 12px; background: var(--cyan-soft); border-radius: var(--r-md);
}
.hb-quiz__reward { margin-top: 18px; display: flex; align-items: center; gap: 10px; }
.hb-quiz__kudos {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--green-ink); background: var(--green-soft);
  padding: 6px 10px; border-radius: var(--r-pill);
}
.hb-quiz__streak { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fg-muted); }

/* Daily Quiz step-flow diagram - the mechanic in four quick beats */
.hb-qflow {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.hb-qflow__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 0 8px;
}
.hb-qflow__icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--cyan);
  display: inline-flex; align-items: center; justify-content: center;
}
.hb-qflow__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.hb-qflow__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: 22ch;
  text-wrap: pretty;
}
.hb-qflow__conn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan);
  flex-shrink: 0;
  height: 48px;
}
@media (max-width: 760px) {
  .hb-qflow { flex-direction: column; gap: 4px; align-items: center; }
  .hb-qflow__step { padding: 4px 8px; }
  .hb-qflow__conn { transform: rotate(90deg); height: auto; padding: 6px 0; }
  .hb-qflow__desc { max-width: 32ch; }
}
.hb-feedcard__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-top: 1px solid var(--border); gap: 12px;
}
.hb-feedcard__src { font-family: var(--font-sans); font-weight: 500; font-size: 14px; color: var(--fg); }
.hb-feedcard__meta { font-size: 12px; color: var(--fg-muted); font-family: var(--font-mono); letter-spacing: 0.02em; text-align: right; }
.hb-feedcard__excl { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.hb-feedcard__excl span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-faint); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 5px 10px; text-decoration: line-through;
}
@media (max-width: 820px) {
  .hb-quiz { grid-template-columns: 1fr; gap: 32px; }
  .hb-quiz--flip .hb-quiz__copy,
  .hb-quiz--flip .hb-feedcard { order: 0; }
}

/* Agency pull-quote */
.ag-quote {
  margin: 40px 0 0;
  padding: 28px 32px;
  background: var(--bg-alt);
  border-left: 2px solid var(--cyan);
  border-radius: var(--r-md);
}
.ag-quote__text {
  font-size: 1.25rem; line-height: 1.5; font-style: italic;
  color: var(--fg); margin: 0 0 18px; text-wrap: pretty;
}
.ag-quote__attrib { display: flex; flex-direction: column; gap: 2px; }
.ag-quote__name { font-family: var(--font-sans); font-weight: 500; font-size: 14px; color: var(--fg); }
.ag-quote__role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--fg-muted); }

/* =============================================================================
   PRICING — five cards
   ============================================================================= */
.hb-pricing {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.hb-price {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 200px;
  transition: border-color var(--dur-base) var(--ease-out);
}
.hb-price__pop {
  position: absolute;
  top: -10px; left: 22px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: var(--cyan);
  padding: 4px 10px; border-radius: var(--r-pill);
}
.hb-price:hover { border-color: rgba(15,28,42,0.18); }
.hb-price__name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.hb-price__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-muted);
  text-wrap: pretty;
}
.hb-price__tag {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.hb-price--featured {
  border-color: var(--cyan);
  box-shadow: inset 0 0 0 1px var(--cyan);
}
.hb-price--featured .hb-price__name { color: var(--cyan); }
.hb-price--featured .hb-price__tag { color: var(--cyan); }
.hb-pricing__foot {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}
.hb-pricing__foot a {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 1100px) {
  .hb-pricing { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .hb-pricing { grid-template-columns: 1fr; }
}

/* =============================================================================
   FINAL CTA + FORM
   ============================================================================= */
.hb-fcta {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: start;
}
.hb-fcta__copy .sec-head { margin-bottom: 40px; }
.hb-fcta__trust {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.hb-fcta__trust-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--fg);
  line-height: 1.5;
}
.hb-fcta__trust-item .ico {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--cyan-soft);
  color: var(--cyan-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.hb-fcta__form {
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hb-fcta__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.hb-fcta__btn {
  margin-top: 8px;
  width: 100%;
  justify-content: center;
  font-size: 15px;
  padding: 14px 22px;
}
.hb-fcta__fine {
  font-size: 12px;
  color: var(--fg-muted);
  margin: 0;
  text-align: center;
  line-height: 1.5;
}
@media (max-width: 900px) {
  .hb-fcta { grid-template-columns: 1fr; gap: 48px; }
  .hb-fcta__row { grid-template-columns: 1fr; }
}

/* =============================================================================
   SIMPLE FOOTER
   ============================================================================= */
.hb-foot2 {
  background: #fff;
  border-top: 1px solid var(--border);
  padding-block: 36px;
}
.hb-foot2__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.hb-foot2__left { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hb-foot2__left img { height: 22px; }
.hb-foot2__copy { font-size: 13px; color: var(--fg-muted); }
.hb-foot2__legal { display: flex; gap: 16px; }
.hb-foot2__legal a { font-size: 13px; color: var(--fg-muted); }
.hb-foot2__legal a:hover { color: var(--cyan); }
.hb-foot2__right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hb-foot2__right a {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.hb-foot2__right a:hover { color: var(--cyan); }
.hb-foot2__sep { font-size: 13px; color: var(--fg-faint); }

/* =============================================================================
   SUBNAV — removed. Single top nav handles navigation; styles kept commented
   here briefly so a future reintroduction doesn't have to start from scratch.
   ============================================================================= */

/* =============================================================================
   ANNOUNCEMENT BAR — slim row above the nav. Not sticky; scrolls away.
   ============================================================================= */
.hb-announce {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.hb-announce__inner {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-muted);
  letter-spacing: -0.005em;
  text-align: center;
}
.hb-announce__link {
  color: var(--cyan);
  font-weight: 500;
  margin-left: 6px;
}
.hb-announce__link:hover { color: var(--cyan-hover); }
.hb-announce__short { display: none; }
@media (max-width: 640px) {
  .hb-announce__full  { display: none; }
  .hb-announce__short { display: inline; }
  .hb-announce__inner { font-size: 12px; }
}

/* =============================================================================
   NAV — active state underline (scroll-spy) on top nav + auth links group.
   ============================================================================= */
.hb-nav__auth {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hb-nav__sep {
  color: var(--border-strong);
  font-weight: 300;
  user-select: none;
}
@media (max-width: 720px) {
  .hb-nav__auth { display: none; }
}
.hb-nav__link {
  position: relative;
  padding-block: 6px;
}
.hb-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}
.hb-nav__link.is-active::after { transform: scaleX(1); }

/* Audience switcher active state — present-location label, not a clickable link */
.hb-nav__center .hb-nav__link.is-active { color: var(--fg); cursor: default; }

/* =============================================================================
   SUB-NAV — homepage-only wayfinding strip, fixed under the main nav. Hidden on
   load; slides in once the hero scrolls out of view.
   ============================================================================= */
.hb-subnav {
  position: fixed;
  top: 64px; left: 0; right: 0;
  z-index: 80;
  background: #fff;
  border-bottom: 1px solid var(--border);
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.hb-subnav.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.hb-subnav__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 48px;
}
.hb-subnav__link {
  position: relative;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-muted);
  padding-block: 4px;
}
.hb-subnav__link:hover { color: var(--cyan); }
.hb-subnav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.hb-subnav__link.is-active { color: var(--fg); }
.hb-subnav__link.is-active::after { transform: scaleX(1); }
@media (max-width: 820px) { .hb-subnav { display: none; } }

/* =============================================================================
   ADVISOR BAND — quiet single-line strip above the main footer.
   ============================================================================= */
.hb-advband {
  background: #fff;
  border-top: 1px solid rgba(15,28,42,0.08);
  padding-block: 40px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.hb-advband p {
  font-family: var(--font-sans);
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--fg-muted);
  margin: 0;
}
.hb-advband a {
  color: var(--cyan);
  font-weight: 500;
  margin-left: 6px;
}
.hb-advband a:hover { color: var(--cyan-hover); }

/* Anchor offset so scrolling to a section doesn't tuck the heading under the
   sticky nav. */
.hb-section { scroll-margin-top: 80px; }
html { scroll-behavior: smooth; }

/* =============================================================================
   PRODUCT MOCKUPS — shared scaffolding for the in-page product visualisations.
   All built in real HTML/CSS using design tokens. No raster imagery.
   ============================================================================= */
.mk-mono {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.mk-card {
  background: #fff;
  border: 1px solid rgba(15,28,42,0.10);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15,28,42,0.08);
  padding: 14px;
  font-family: var(--font-sans);
}
.mk-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green-ink);
  flex-shrink: 0;
}

/* =============================================================================
   HERO COMPOSITION
   ============================================================================= */
.hb-hero-viz { position: relative; }
.hb-hero-viz__stage {
  position: relative;
  height: 520px;
  width: 100%;
}
.hb-hero-viz__card {
  position: absolute;
  transition: transform var(--dur-base) var(--ease-out);
}
.hb-hero-viz__a {
  top: 110px;
  left: 18%;
  width: 280px;
  transform: rotate(-2deg);
  z-index: 3;
}
.hb-hero-viz__b {
  top: 220px;
  left: -4%;
  width: 220px;
  transform: rotate(3deg);
  z-index: 2;
}
.hb-hero-viz__c {
  top: 16px;
  right: 6%;
  width: 200px;
  transform: rotate(1deg);
  z-index: 4;
}
.hb-hero-viz__d {
  bottom: 0;
  right: -12%;
  width: 240px;
  transform: rotate(-1deg);
  z-index: 2;
}

/* — AI chat card — */
.mk-aichat { padding: 14px; }
.mk-aichat__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.mk-aichat__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,147,199,0.18);
}
.mk-aichat__head .mk-mono { color: var(--cyan); font-size: 10px; }
.mk-aichat__q {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
  line-height: 1.35;
  padding: 10px 12px;
  background: var(--bg-alt);
  border-radius: 8px 8px 8px 2px;
  margin-bottom: 8px;
}
.mk-aichat__a {
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg);
  padding: 10px 12px;
  background: rgba(0,147,199,0.07);
  border-radius: 8px 8px 2px 8px;
  margin-bottom: 10px;
}
.mk-aichat__verified {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-ink);
}

/* — Course tile card — */
.mk-course { padding: 0; overflow: hidden; }
.mk-course__thumb {
  height: 70px;
  background: #1F5C9E;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 8px 12px;
}
.mk-course__thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120px 60px at 30% 100%, rgba(255,255,255,0.16), transparent 70%),
    radial-gradient(80px 50px at 75% 20%, rgba(255,255,255,0.10), transparent 70%);
}
.mk-course__thumb-tag {
  position: relative;
  color: rgba(255,255,255,0.92);
  font-size: 9px;
}
.mk-course__body { padding: 12px 14px 14px; }
.mk-course__title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--fg);
  margin-bottom: 8px;
}
.mk-course__meta {
  display: flex;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 6px;
}
.mk-course__progress {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 10px;
}
.mk-course__progress-fill {
  height: 100%;
  background: var(--cyan);
  border-radius: 2px;
}
.mk-course__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  background: var(--cyan-soft);
  padding: 4px 8px;
  border-radius: 999px;
}

/* — Kudos toast — */
.mk-toast {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
}
.mk-toast__icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mk-toast__title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
  line-height: 1.25;
}
.mk-toast__sub {
  font-size: 11px;
  color: var(--fg-muted);
  line-height: 1.35;
  margin-top: 3px;
}
.mk-toast__time {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-top: 6px;
}

/* — Leaderboard — */
.mk-leader { padding: 12px 14px; }
.mk-leader__head {
  font-size: 9px;
  color: var(--fg-faint);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.mk-leader__rows { display: flex; flex-direction: column; gap: 2px; }
.mk-leader__row {
  display: grid;
  grid-template-columns: 14px 22px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-left: 2px solid transparent;
  font-size: 12px;
}
.mk-leader__row.is-top {
  border-left-color: var(--cyan);
  padding-left: 6px;
  background: rgba(0,147,199,0.04);
}
.mk-leader__rank {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
}
.mk-leader__ava {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--cyan);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.02em;
}
.mk-leader__row:not(.is-top) .mk-leader__ava {
  background: var(--bg-alt);
  color: var(--fg-muted);
}
.mk-leader__name {
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.mk-leader__kudos {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--cyan-ink);
}
.mk-leader__row:not(.is-top) .mk-leader__kudos { color: var(--fg-muted); }

/* Hero composition mobile — collapse to 2x2 grid below copy, no rotation */
@media (max-width: 980px) {
  .hb-hero-viz__stage {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 14px;
    height: auto;
  }
  .hb-hero-viz__card {
    position: static;
    width: 100%;
    transform: none !important;
  }
  /* Left column: Hablo AI then Kudos; right column: video then leaderboard */
  .hb-hero-viz__a { order: 1; }
  .hb-hero-viz__b { order: 2; }
  .hb-hero-viz__c { order: 3; }
  .hb-hero-viz__d { order: 4; }
}

/* =============================================================================
   ORG PAGE MOCKUP — left tile of WhatHabloIs.
   ============================================================================= */
.mk-org {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(15,28,42,0.06);
}
.mk-org__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.mk-org__wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.mk-org__wordmark-dot {
  width: 18px; height: 18px;
  border-radius: 4px;
  background: linear-gradient(135deg, #1F5C9E 0%, #2F8C9E 100%);
  display: inline-block;
  /* The system bars decorative gradients on large areas — this is an 18px
     destination-mark stand-in, so the gradient is OK as a brand cue. */
}
.mk-org__tabs {
  display: flex;
  gap: 18px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-faint);
}
.mk-org__tabs > span { padding-bottom: 6px; }
.mk-org__tabs .is-active {
  color: var(--fg);
  border-bottom: 2px solid var(--cyan);
  margin-bottom: -1px;
}
.mk-org__incentive {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--cyan-soft);
  border: 1px solid rgba(0,147,199,0.18);
  border-radius: 8px;
}
.mk-org__incentive-eb { color: var(--cyan-ink) !important; }
.mk-org__incentive-body {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--cyan-ink);
  line-height: 1.35;
}
.mk-org__feed {
  display: flex;
  flex-direction: column;
}
.mk-post {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.mk-post:last-child { border-bottom: 0; }
.mk-post__thumb {
  width: 38px; height: 38px;
  border-radius: 4px;
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
}
.mk-post__title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--fg);
  line-height: 1.3;
}
.mk-post__excerpt {
  font-size: 11px;
  color: var(--fg-muted);
  line-height: 1.4;
  margin-top: 2px;
}
.mk-org__webinar {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  padding: 10px;
  background: var(--bg-alt);
  border-radius: 8px;
  align-items: center;
}
.mk-org__webinar-thumb {
  position: relative;
  width: 60px; height: 38px;
  background: linear-gradient(135deg, #2F4A6F 0%, #1F8AAB 100%);
  border-radius: 4px;
}
.mk-org__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.mk-org__webinar-eb { color: var(--cyan) !important; margin-bottom: 4px; display: block; }
.mk-org__ai {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 12px;
  color: var(--fg);
}
.mk-org__ai-dot {
  width: 7px; height: 7px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(0,147,199,0.18);
}
.mk-org__ai-text { flex: 1; }
.mk-org__ai-arrow {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 14px;
}

/* =============================================================================
   PLATFORM MOCKUP — right tile of WhatHabloIs.
   ============================================================================= */
.mk-plat {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15,28,42,0.08);
}
.mk-plat__chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.mk-plat__dots { display: flex; gap: 5px; }
.mk-plat__dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(15,28,42,0.16);
}
.mk-plat__url {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  padding: 3px 10px;
  background: #fff;
  border-radius: 999px;
  border: 1px solid var(--border);
  max-width: 200px;
  margin: 0 auto;
}
.mk-plat__chrome-pad { width: 32px; }
.mk-plat__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.mk-plat--image { background: #fff; }

/* Hablo AI in-action showcase — framed real screenshot used under the homepage
   AI pillar and the agent page's "what you get". */
.hb-aishow {
  margin: 56px auto 0;
  max-width: 920px;
}
.hb-aishow__frame {
  box-shadow: 0 18px 48px rgba(15,28,42,0.12);
  max-height: 520px;
  overflow: hidden;
  /* Fade the lower third so we see only the top of the screenshot and the
     block sits lower overall. */
  -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 66%, transparent 100%);
}
.hb-aishow--wide { max-width: 1080px; }
.hb-aishow__cap {
  margin-top: 16px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
}
.mk-plat__body {
  display: grid;
  grid-template-columns: 138px 1fr;
  min-height: 280px;
}
.mk-plat__side {
  background: var(--bg-alt);
  padding: 14px 12px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mk-plat__side-eb { color: var(--fg-muted); }
.mk-plat__sidelist {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mk-plat__siderow {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 11px;
  color: var(--fg);
}
.mk-plat__siderow.is-active {
  background: #fff;
  border: 1px solid var(--cyan);
  color: var(--cyan-ink);
  font-weight: 500;
}
.mk-plat__sidedot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fg-faint);
  display: inline-block;
}
.mk-plat__sidename { letter-spacing: -0.005em; }
.mk-plat__sidemark {
  font-size: 8px;
  color: var(--cyan);
}
.mk-plat__main {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mk-plat__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.mk-plat__top-eb { color: var(--fg-muted); }
.mk-plat__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  background: var(--bg-alt);
  border-radius: 999px;
  font-size: 11px;
  color: var(--fg);
}
.mk-plat__avatar {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--cyan);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.02em;
}
.mk-plat__chip-name { font-weight: 500; letter-spacing: -0.005em; }
.mk-plat__chip-kudos {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--cyan-ink);
  border-left: 1px solid var(--border);
  padding-left: 8px;
}
.mk-plat__feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mk-feedrow {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.mk-feedrow__body { min-width: 0; }
.mk-feedrow__tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  background: var(--cyan-soft);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* WhatHabloIs mobile */
@media (max-width: 980px) {
  .mk-plat__body { grid-template-columns: 110px 1fr; }
  .mk-plat__chip-kudos { display: none; }
}

/* =============================================================================
   PILLAR CARD VISUALS — small product peeks on top of each pillar.
   ============================================================================= */
.mk-pv {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* AI mini-chat */
.mk-pv--ai {
  gap: 6px;
  align-items: stretch;
}
.mk-pv-ai__q {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg);
  padding: 7px 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px 6px 6px 2px;
  align-self: flex-start;
  max-width: 90%;
  letter-spacing: -0.005em;
}
.mk-pv-ai__a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--fg);
  padding: 7px 10px;
  background: rgba(0,147,199,0.08);
  border-radius: 6px 6px 2px 6px;
  align-self: flex-end;
  max-width: 92%;
  letter-spacing: -0.005em;
}

/* Academy 2x2 mini course tiles */
.mk-pv--acad { align-items: center; }
.mk-pv-acad__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 180px;
}
.mk-pv-acad__tile { display: flex; flex-direction: column; gap: 3px; }
.mk-pv-acad__thumb {
  height: 30px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.mk-pv-acad__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(255,255,255,0.18) 0%, transparent 50%);
}
.mk-pv-acad__lbl {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: -0.005em;
  color: var(--fg);
}

/* Region map */
.mk-pv--region {
  align-items: center;
}
.mk-pv-region__map {
  width: 100%;
  max-width: 280px;
  height: auto;
}