/* ================================================================
   Keytos redesign — hero sections (.khero-*) + shared buttons (.kbtn-*)
   Figma Templates: normal hero 9:3143, solutions hero 99:2400.
   Rule: content is left-aligned when there's media on the right,
   center-aligned otherwise (.khero--center).
   ================================================================ */

/* ---- Shared pill buttons -------------------------------------- */
.kbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  padding: var(--space-16) var(--space-32);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-b2); line-height: var(--line-height-b2); font-weight: 500;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.kbtn--wide { padding-left: var(--space-48); padding-right: var(--space-48); }
.kbtn-primary { background: var(--color-btn-primary-default); color: var(--color-text-button-fill); }
.kbtn-primary:hover { background: var(--color-btn-primary-hover); color: var(--color-text-button-fill); }
.kbtn-secondary { background: transparent; color: var(--color-text-primary); border-color: var(--color-btn-secondary-border-default); }
.kbtn-secondary:hover { color: var(--color-text-brand); border-color: var(--color-text-brand); }

/* ---- Hero shell ----------------------------------------------- */
.khero {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-32);
  padding: var(--hero-pad-y) var(--section-pad-x);
  background: linear-gradient(180deg, var(--color-info-background) 1%, var(--color-surface-card) 99%);
}
.khero-inner {
  display: flex; align-items: stretch; gap: var(--space-48);
  width: 100%; max-width: var(--content-max);
}
.khero-content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-32); flex: 0 1 637px; min-width: 0; }
.khero-title {
  margin: 0;
  font-family: var(--font-family-primary); font-weight: 700;
  font-size: var(--font-size-h1); line-height: var(--line-height-h1);
  color: var(--color-text-primary);
  /* Balance the line lengths so a long title breaks into even lines instead of
     leaving a single orphan word on the last one. Progressive enhancement:
     browsers without it just wrap normally. */
  text-wrap: balance;
}
.khero-accent { color: var(--color-text-brand); }
.khero-desc {
  margin: 0; max-width: var(--body-max);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-b1); line-height: var(--line-height-b1);
  color: var(--color-text-primary);
}
/* Inline prose links: same treatment as .kacc-desc a and .kfaq-answer a so
   body-copy links read the same across the site. Without this the browser
   default #0000EE wins. */
.khero-desc a {
  color: var(--color-text-brand);
  text-decoration: underline; text-underline-offset: 2px;
}
.khero-desc a:hover { text-decoration: none; }
/* 20px is the shared button-row gap: .khero-actions, .kstep-actions,
   .kcta-actions and .kpcta-actions all use it so multi-button rows space the
   same wherever they appear. (.kstab-actions keeps its own tighter gap — those
   are the smaller card-level buttons.) */
.khero-actions { display: flex; gap: var(--space-20); flex-wrap: wrap; }

/* Media on the right (image or video placeholder) */
.khero-media {
  flex: 1 1 0; min-width: 0; align-self: stretch;
  border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(135deg, #10233b 0%, #0b3a5c 55%, #0091ce 100%);
}
.khero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A real embed in the media slot, for heroes carrying an actual video rather
   than the gradient-and-play-button placeholder. Fills the slot the same way
   the image does; the slot already clips to its border radius. */
.khero-media iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---- Normal variant (content 60%, media 40%, aspect-ratio locked) ------- */
/* flex: 6 1 0 / flex: 4 1 0 — both start at 0 and grow in 6:4 ratio, giving
   strict 60/40 split regardless of viewport width. align-self: flex-start on
   the media lets aspect-ratio drive its height instead of stretching to the
   content column height. */
.khero--normal .khero-content { flex: 6 1 0; }
.khero--normal .khero-media { flex: 4 1 0; align-self: flex-start; aspect-ratio: 16 / 9; min-height: 0; }

/* ---- Center variant (no media) --------------------------------
   No max-width on the content column: capping it at --body-max forced long
   h1s to wrap early and strand a single word on the last line. The column now
   runs to the hero's 1280 inner width and .khero-title balances its own lines;
   .khero-desc keeps its own --body-max cap for readability, so only the
   heading gains the extra width. */
.khero--center .khero-inner { justify-content: center; }
.khero--center .khero-content { align-items: center; text-align: center; flex-basis: auto; }
.khero--center .khero-actions { justify-content: center; }

/* ================================================================
   Gradient band — the hero, plus the stats strip where one directly
   follows it. Everything past the band alternates canvas/card via the
   rules below, so the gradient no longer runs across half the page.
   Matched on the class suffix rather than a list of names: the per-page
   names (khome-, kprod-, kscen-, kpart-) now style identically and only
   differ in what they wrap, and the alternation below already selects
   the band this way. A new page just needs a *-gradient-band class.
   Keep the band's class attribute to that one name so the suffix
   selector still matches.
   ================================================================ */
[class$="-gradient-band"] {
  background: linear-gradient(180deg, var(--color-info-background) 1%, var(--color-surface-card) 50%);
}
[class$="-gradient-band"] .khero { background: transparent; }
[class$="-gradient-band"] .kstat { background: transparent; }
/* The tinted card these pages established is now the default in stats.css, so no
   band-specific override is needed here. */

/* ================================================================
   Alternating section backgrounds after the hero band
   ----------------------------------------------------------------
   First section after the band is canvas, the next card, and so on.
   Two selectors because the counting origin differs: on a banded page
   the band is a <div>, so the first top-level <section> is already the
   one after it; on an unbanded page the hero is itself section 1 and
   the alternation has to start at 2.
   The blue CTA band and the FAQ that follows it are excluded so their
   own colours stand, and so are the sections that carry a gradient or
   tint of their own (pricing, status, partner CTA).
   Each rule also publishes --alt-contrast: the opposite of the background it
   just set. A card nested inside can read it to stay visible whichever way the
   alternation lands, instead of hardcoding one surface and colliding when the
   section happens to match it.
   ================================================================ */
main > [class$="-gradient-band"] ~ section:nth-of-type(odd):not(.kcta-section):not(.kpcta-section):not(.kfaq-section):not(.kprc-section):not(.ksts-section):not(.kctc-section--partner),
main > section.khero ~ section:nth-of-type(even):not(.kcta-section):not(.kpcta-section):not(.kfaq-section):not(.kprc-section):not(.ksts-section):not(.kctc-section--partner) {
  background: var(--color-surface-canvas);
  --alt-contrast: var(--color-surface-card);
}
main > [class$="-gradient-band"] ~ section:nth-of-type(even):not(.kcta-section):not(.kpcta-section):not(.kfaq-section):not(.kprc-section):not(.ksts-section):not(.kctc-section--partner),
main > section.khero ~ section:nth-of-type(odd):not(.kcta-section):not(.kpcta-section):not(.kfaq-section):not(.kprc-section):not(.ksts-section):not(.kctc-section--partner) {
  background: var(--color-surface-card);
  --alt-contrast: var(--color-surface-canvas);
}

/* ================================================================
   Solutions hero (product logo + pill tab nav, colored accent, video)
   ================================================================ */
.khero--solutions { gap: var(--space-48); }

.khero-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); width: 100%; max-width: var(--content-max); }
.khero-logo { height: 48px; width: auto; display: block; flex-shrink: 0; }

.khero-tabs {
  display: flex; align-items: center; gap: var(--space-8);
  padding: var(--space-4);
  background: #ffffff;
  border-radius: var(--radius-2xl);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 2px 4px 0 rgba(0, 0, 0, 0.04);
}
.khero-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  padding: var(--space-12) var(--space-20);
  border: none; background: none; cursor: pointer;
  border-radius: var(--radius-xl);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-b2); line-height: var(--line-height-b2); font-weight: 500;
  color: #181d23; text-decoration: none; white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}
.khero-tab:hover { color: #0071a2; background: transparent; }
.khero-tab.is-active { background: #0071a2; color: #ffffff; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06); }
.khero-tab.is-active:hover { color: #ffffff; background: #0071a2; }
.khero-tab svg { width: 24px; height: 24px; flex-shrink: 0; transition: transform 0.2s ease; color: inherit; }

/* "Scenarios" tab dropdown (hover / focus) */
.khero-tab-scenarios { position: relative; }
.khero-tab-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px;
  display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8);
  background: var(--color-surface-card); border-radius: var(--radius-2xl);
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.06), 0 2px 4px 0 rgba(0,0,0,0.04);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease; z-index: 20;
}
.khero-tab-scenarios:hover .khero-tab-dropdown,
.khero-tab-scenarios:focus-within .khero-tab-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.khero-tab-scenarios:hover .khero-tab svg,
.khero-tab-scenarios:focus-within .khero-tab svg { transform: rotate(180deg); }
.khero-tab-dropdown a {
  padding: var(--space-8) var(--space-12); border-radius: var(--radius-sm);
  font-size: var(--font-size-b3); line-height: var(--line-height-b3);
  color: var(--color-text-primary); text-decoration: none; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.khero-tab-dropdown a:hover { background: #f7f9fb; color: var(--color-info-default); }
.khero-tab-dropdown a.is-active { background: #ebf5ff; color: var(--color-info-default); }

/* Collapsed single-dropdown selector (shown when the topbar row is < 900px) */
.khero-menu { display: none; position: relative; flex-shrink: 0; }
.khero-menu-toggle {
  display: inline-flex; align-items: center; gap: var(--space-8);
  padding: var(--space-12) var(--space-20); border: none; cursor: pointer;
  background: #ffffff;
  border-radius: var(--radius-2xl);
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.06), 0 2px 4px 0 rgba(0,0,0,0.04);
  font-family: var(--font-family-secondary); font-size: var(--font-size-b2); line-height: var(--line-height-b2); font-weight: 500;
  color: var(--color-text-brand);
}
.khero-menu-toggle svg { width: 24px; height: 24px; flex-shrink: 0; transition: transform 0.2s ease; }
.khero-menu.is-open .khero-menu-toggle svg { transform: rotate(180deg); }
.khero-menu-panel {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px;
  display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8);
  background: var(--color-surface-card); border-radius: var(--radius-2xl);
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.06), 0 2px 4px 0 rgba(0,0,0,0.04);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease; z-index: 25;
}
.khero-menu.is-open .khero-menu-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.khero-menu-panel a, .khero-menu-label {
  padding: var(--space-8) var(--space-12); border-radius: var(--radius-sm);
  font-size: var(--font-size-b3); line-height: var(--line-height-b3); white-space: nowrap;
}
.khero-menu-panel a { color: var(--color-text-primary); text-decoration: none; transition: background 0.15s ease, color 0.15s ease; }
.khero-menu-label { color: var(--color-text-secondary); }
.khero-menu-panel a.khero-menu-sub { padding-left: var(--space-24); }
.khero-menu-panel a:hover, .khero-menu-panel a.is-active { background: var(--color-surface-canvas); color: var(--color-info-default); }

/* Switch pills -> single dropdown based on the ROW width (container query) */
.khero-topbar { container-type: inline-size; }

/* Below 375 the collapsed pill nav and the product switcher can no longer
   share a line once the nav label is long: "Descripción general" wants 225px
   and the switcher 115px, which with the 16px gap needs 356px. At 375 they
   still fit by shrinking, so the wrap is scoped under that rather than
   applied everywhere, and no layout at or above 375 changes. Without it the
   nav escaped the bar and pushed the page sideways on a 320px phone. */
@media (max-width: 374px) {
  .khero-topbar { flex-wrap: wrap; }
}
@container (max-width: 900px) {
  .khero-tabs { display: none; }
  .khero-menu { display: flex; }
}

/* Solutions layout: fixed content/media widths (658 + 574 + 48 = 1280) */
.khero--solutions .khero-inner { align-items: flex-start; }
.khero--solutions .khero-content { flex: 1 1 0; min-width: 0; container-type: inline-size; container-name: khero-content; }
.khero--solutions .khero-desc { color: var(--color-text-secondary); }

/* ---- Scenario additions: integrates chips + icon bullets ---- */
.khero-integrates { display: flex; flex-direction: column; gap: var(--space-12); }
.khero-integrates-label {
  margin: 0;
  font-family: var(--font-family-secondary); font-weight: 500;
  font-size: var(--font-size-h5); line-height: var(--line-height-h5);
  color: var(--color-text-primary);
}
.khero-chips { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.khero-chip {
  display: inline-block;
  background: var(--color-info-background);
  border-radius: var(--radius-md);
  padding-block: var(--space-8); padding-inline: var(--space-16);
  font-family: var(--font-family-secondary); font-weight: 500;
  font-size: var(--font-size-b3); line-height: var(--line-height-b3);
  color: var(--color-text-brand);
  white-space: nowrap;
}
.khero-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-12); }
.khero-bullet {
  display: flex; align-items: center; gap: var(--space-12);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-b2); line-height: var(--line-height-b2);
  color: var(--color-text-primary);
}
.khero-bullet-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-info-background);
  /* Brand-blue glyph on the light blue disc, matching the check mark used in
     the comparison table and pricing cards. */
  color: var(--color-text-brand);
  display: flex; align-items: center; justify-content: center;
}
.khero-bullet-icon svg { width: 22px; height: 22px; display: block; }

.khero-media--video { flex: 0 0 40%; align-self: flex-start; aspect-ratio: 16 / 9; position: relative; }
.khero-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: #ff0000; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  /* Fixed white, not a theme token: the glyph sits on the fixed YouTube red
     above and has to stay white in both themes. The icon itself is
     colour-agnostic, so the component decides. */
  color: #fff;
}
.khero-play svg { width: 42%; height: 42%; display: block; }

/* ================================================================
   Responsive (no tablet/mobile hero design provided — sensible stack)
   ================================================================ */
@media (max-width: 1072px) {
  .khero, .khero--solutions { padding-block: var(--space-48); padding-inline: var(--space-32); }
}

@media (max-width: 900px) {
  .khero, .khero--solutions { gap: var(--space-32); }
  .khero-inner, .khero--solutions .khero-inner { flex-direction: column; align-items: stretch; gap: var(--space-32); }
  /* Stacked order: title -> desc -> integrates -> bullets -> actions -> media.
     display:contents hoists content children into the inner flex for ordering. */
  .khero-content { display: contents; }
  .khero-title { order: 1; }
  .khero-desc { order: 2; }
  .khero-integrates { order: 3; }
  .khero-bullets { order: 4; }
  .khero-actions { order: 5; }
  .khero-media { order: 6; align-self: stretch; min-height: 280px; }
  .khero-media--video { order: 6; width: 100%; min-height: 0; }

  /* Normal variant stays side-by-side until 767px — cancel the stacking rules above. */
  .khero--normal .khero-inner { flex-direction: row; align-items: stretch; }
  .khero--normal .khero-content { display: flex; }
  .khero--normal .khero-title,
  .khero--normal .khero-desc,
  .khero--normal .khero-actions { order: unset; }
  .khero--normal .khero-media { order: unset; align-self: flex-start; min-height: 0; }

  /* ...unless the hero opts in to stacking here. A --normal hero carrying real
     media (the About hero's video) is squeezed too narrow at 40% of a 900px
     viewport. These restate the generic rules above at the same specificity as
     the cancellation, so source order lets them through. */
  .khero--stack-900 .khero-inner { flex-direction: column; align-items: stretch; gap: var(--space-32); }
  .khero--stack-900 .khero-content { display: contents; }
  .khero--stack-900 .khero-title { order: 1; }
  .khero--stack-900 .khero-desc { order: 2; }
  .khero--stack-900 .khero-actions { order: 3; }
  .khero--stack-900 .khero-media { order: 4; align-self: stretch; aspect-ratio: 16 / 9; min-height: 0; }
}

@media (max-width: 767px) {
  .khero, .khero--solutions { padding-block: var(--space-32); padding-inline: var(--space-16); }
  .khero-actions .kbtn { flex: 1 1 auto; }
  .khero--center .khero-content { align-items: flex-start; text-align: left; }
  .khero--center .khero-actions { justify-content: flex-start; }

  /* Normal variant stacks at 767px: title > desc > CTAs > media (image last). */
  .khero--normal .khero-inner { flex-direction: column; align-items: stretch; gap: var(--space-32); }
  .khero--normal .khero-content { display: contents; }
  .khero--normal .khero-title { order: 1; }
  .khero--normal .khero-desc { order: 2; }
  .khero--normal .khero-actions { order: 3; }
  .khero--normal .khero-media { order: 4; align-self: stretch; aspect-ratio: 16 / 9; min-height: 0; }
}

/* ================================================================
   3-CTA wrap layout (.khero-actions--triple)
   When the three buttons no longer fit on one row they become a
   two-row block: the primary on row 1, the two secondaries on row 2.

   The block is a grid of two content-sized columns with
   width: fit-content, so it hugs the pair of secondaries; the primary
   spans both columns and therefore fills the BLOCK, not the whole
   content column beside the media. Plain flex could not express that:
   flex: 1 0 100% stretches the primary to the container, and the
   container has no way to shrink to one of its own rows.

   Narrower still, two secondaries stop fitting side by side, so the
   grid collapses to one full-width column and each button takes a row.
   Works in both side-by-side and stacked hero modes.
   ================================================================ */

/* --- the two-row shape --- */

/* Side-by-side hero: fires when the content column container is too
   narrow to hold all three buttons (measured total = 646px). */
@container khero-content (max-width: 648px) {
  .khero-actions--triple { display: grid; grid-template-columns: max-content max-content; width: fit-content; }
  .khero-actions--triple .kbtn-primary { grid-column: 1 / -1; }
}

/* Stacked hero: display:contents removes the container, so use a
   media query covering the viewport range where the full-width
   section is also too narrow for all 3 buttons (viewport - 64px padding < 646px). */
@media (max-width: 709px) {
  .khero-actions--triple { display: grid; grid-template-columns: max-content max-content; width: fit-content; }
  .khero-actions--triple .kbtn-primary { grid-column: 1 / -1; }
}

/* Spanish labels are longer, so the switch has to fire earlier: measured on
   /es/keytos-shield the three need well over the English set's 646px, and
   without this they wrapped into primary-plus-one-secondary instead.
   :lang keys off the <html lang> the layout already sets. */
@container khero-content (max-width: 766px) {
  .khero-actions--triple:lang(es) { display: grid; grid-template-columns: max-content max-content; width: fit-content; }
  .khero-actions--triple:lang(es) .kbtn-primary { grid-column: 1 / -1; }
}
@media (max-width: 828px) {
  .khero-actions--triple:lang(es) { display: grid; grid-template-columns: max-content max-content; width: fit-content; }
  .khero-actions--triple:lang(es) .kbtn-primary { grid-column: 1 / -1; }
}

/* Centered hero: center the two-row block itself. justify-content cannot do it,
   because width: fit-content means the tracks already fill the box exactly, so
   there is no free space inside to distribute. At 900px and below .khero-content
   is display:contents, so there is no flex parent whose align-items could center
   it either; an auto inline margin works in both modes. Above 767px only: at
   767px and below a centered hero deliberately switches to left-aligned. */
@media (min-width: 768px) {
  .khero--center .khero-actions--triple { margin-inline: auto; }
}

/* --- one column, once the two secondaries no longer fit side by side --- */
@container khero-content (max-width: 390px) {
  .khero-actions--triple { grid-template-columns: minmax(0, 1fr); width: auto; }
}
@media (max-width: 454px) {
  .khero-actions--triple { grid-template-columns: minmax(0, 1fr); width: auto; }
}
@container khero-content (max-width: 435px) {
  .khero-actions--triple:lang(es) { grid-template-columns: minmax(0, 1fr); width: auto; }
}
@media (max-width: 499px) {
  .khero-actions--triple:lang(es) { grid-template-columns: minmax(0, 1fr); width: auto; }
}

/* ================================================================
   Partner network hero variant (.khero--partner)
   Anchor pill row styles live in partner.css.
   Background is inherited from base .khero gradient.
   ================================================================ */


/* ================================================================
   Product switcher (.khero-switch)
   The hero's product logo doubles as a menu for jumping between
   products. At rest it looks like a plain logo; on hover or keyboard
   focus it gains a white pill background and a chevron, matching the
   pill nav's radius, and opens a dropdown of the other products.
   Same hover/focus-within mechanism as the Scenarios dropdown, so it
   needs no JS.
   ================================================================ */
.khero-switch { position: relative; flex-shrink: 0; }

.khero-switch-btn {
  display: flex; align-items: center; gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border: none; background: transparent; cursor: pointer;
  border-radius: var(--radius-2xl);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.khero-switch:hover .khero-switch-btn,
.khero-switch:focus-within .khero-switch-btn {
  background: var(--color-surface-card);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 2px 4px 0 rgba(0, 0, 0, 0.04);
}

/* Chevron is laid out from the start but collapsed, so revealing it does not
   shift the logo. */
.khero-switch-chevron {
  width: 0; opacity: 0; flex-shrink: 0;
  color: var(--color-text-brand);
  transition: width 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}
.khero-switch:hover .khero-switch-chevron,
.khero-switch:focus-within .khero-switch-chevron { width: 20px; opacity: 1; }
.khero-switch:hover .khero-switch-chevron { transform: rotate(180deg); }

/* Dropdown mirrors .khero-tab-dropdown, but anchored left under the logo */
.khero-switch-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px;
  display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8);
  background: var(--color-surface-card); border-radius: var(--radius-2xl);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 2px 4px 0 rgba(0, 0, 0, 0.04);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 20;
}
.khero-switch:hover .khero-switch-dropdown,
.khero-switch:focus-within .khero-switch-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}

.khero-switch-dropdown a {
  display: flex; align-items: center;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition: background 0.15s ease;
}
.khero-switch-dropdown a:hover { background: var(--color-info-background); }
.khero-switch-dropdown a.is-active { background: var(--color-info-background); }
.khero-switch-dropdown img { height: 28px; width: auto; display: block; }

@media (max-width: 767px) {
  .khero-switch-btn { padding: var(--space-4) var(--space-8); }
  .khero-switch-dropdown { min-width: 200px; }
  .khero-switch-dropdown img { height: 24px; }
  /* The logo is sized by height with width:auto, so its rendered width is set
     by the product's aspect ratio. At 48px the widest wordmark (EZMonitor,
     107x26 -> 198px) plus the collapsed nav overflows a 375px topbar and the
     page scrolls sideways; the narrowest (EZCA, 50x26) has room to spare.
     36px keeps every wordmark inside the row, including once the switcher
     chevron expands on focus. */
  .khero-logo { height: 36px; }
}