/* CTA pill indicator - explore rows, footer next, portal, drawer (Phase B) */

.mc-cta-pill-host {
  position: relative;
  --mc-cta-pill-ink-rest: var(--mc-ink);
  --mc-cta-pill-ink: #0a0a0a;
  --mc-cta-pill-border-rest: transparent;
  --mc-cta-indicator-bg: rgba(15, 23, 42, 0.08);
  --mc-cta-indicator-ring: rgba(15, 23, 42, 0.1);
  --mc-cta-indicator-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --mc-cta-indicator-bg-hover: rgba(255, 255, 255, 0.96);
  --mc-cta-indicator-ring-hover: rgba(255, 255, 255, 0.92);
}

.mc-cta-indicator {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 0;
  height: 0;
  border-radius: 999px;
  background: var(--mc-cta-indicator-bg, var(--mc-chrome-indicator-bg, rgba(15, 23, 42, 0.08)));
  border: 1px solid var(--mc-cta-indicator-ring, var(--mc-chrome-indicator-ring, rgba(255, 255, 255, 0.62)));
  box-shadow: var(--mc-cta-indicator-shadow, var(--mc-chrome-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.55)));
  opacity: 0;
  transform: translate3d(0, 0, 0);
  pointer-events: none;
  will-change: transform, width, height;
}

.mc-cta-pill {
  position: relative;
  z-index: 1;
}

/* Explore row CTA chips */
.mc-cta-pill-host--ready .mc-id-explore-rows__cta,
.mc-cta-pill-host--ready .mc-gl-explore__cta {
  background: transparent;
  box-shadow: none;
  border-color: var(--mc-cta-pill-border-rest, transparent);
  color: inherit;
}

.mc-cta-pill-host--ready:is(:hover, :focus-within) .mc-id-explore-rows__cta,
.mc-cta-pill-host--ready:is(:hover, :focus-within) .mc-gl-explore__cta {
  color: inherit;
}

.mc-cta-pill-host:not(.mc-cta-pill-host--ready):hover .mc-id-explore-rows__cta,
.mc-cta-pill-host:not(.mc-cta-pill-host--ready):focus-within .mc-id-explore-rows__cta,
.mc-cta-pill-host:not(.mc-cta-pill-host--ready):hover .mc-gl-explore__cta,
.mc-cta-pill-host:not(.mc-cta-pill-host--ready):focus-within .mc-gl-explore__cta {
  color: inherit;
}

.mc-cta-pill-host--ready:hover .mc-cta-indicator,
.mc-cta-pill-host--ready:focus-within .mc-cta-indicator {
  background: var(--mc-cta-indicator-bg, rgba(15, 23, 42, 0.08));
  border-color: var(--mc-cta-indicator-ring, rgba(15, 23, 42, 0.1));
  box-shadow: var(--mc-cta-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.55));
}

.mc-cta-pill-host--ready:is(:hover, :focus-within) {
  color: var(--mc-cta-pill-ink-rest, var(--mc-ink));
}

/* Surface pills: rest ink must beat hardcoded footer/pager colors */
.mc-cta-pill-host--ready.mc-cta-pill--surface {
  color: var(--mc-cta-pill-ink-rest, var(--mc-ink));
}

/* Surface pills: ink on host; children inherit so hover beats shell hardcoded colors */
.mc-id-pager__link.mc-cta-pill-host--ready .mc-id-pager__label,
.mc-id-pager__link.mc-cta-pill-host--ready .mc-id-pager__arrow,
.mc-gl-pager__link.mc-cta-pill-host--ready .mc-gl-pager__label,
.mc-gl-pager__link.mc-cta-pill-host--ready .mc-gl-pager__arrow,
.mc-id-footer__next.mc-cta-pill-host--ready .mc-id-footer__next-label,
.mc-id-footer__next.mc-cta-pill-host--ready .mc-id-footer__next-arrow,
.mc-gl-footer__next.mc-cta-pill-host--ready .mc-gl-footer__next-label,
.mc-gl-footer__next.mc-cta-pill-host--ready .mc-gl-footer__next-arrow {
  color: inherit;
}

.mc-id-pager__link.mc-cta-pill-host--ready .mc-id-pager__kicker,
.mc-gl-pager__link.mc-cta-pill-host--ready .mc-gl-pager__kicker,
.mc-id-footer__next.mc-cta-pill-host--ready .mc-id-footer__next-kicker,
.mc-gl-footer__next.mc-cta-pill-host--ready .mc-gl-footer__next-kicker {
  color: color-mix(in srgb, currentColor 72%, transparent);
}

/* Footer next + doc pager */
.mc-cta-pill--surface.mc-cta-pill-host--ready {
  border-radius: 999px;
}

.mc-id-pager__link.mc-cta-pill--surface,
.mc-gl-pager__link.mc-cta-pill--surface,
.mc-id-footer__next.mc-cta-pill--surface,
.mc-gl-footer__next.mc-cta-pill--surface {
  border-radius: 999px;
  box-sizing: border-box;
  min-height: var(--mc-cta-pill-min-h);
  min-width: min(100%, var(--mc-cta-pill-min-w));
  max-width: min(100%, var(--mc-cta-pill-max-w));
  width: fit-content;
  padding: var(--mc-cta-pill-pad-y) var(--mc-cta-pill-pad-x);
}

.mc-gl-footer__next.mc-cta-pill--surface,
.mc-id-footer__next.mc-cta-pill--surface {
  align-items: center;
  justify-content: space-between;
  gap: var(--mc-cta-pill-gap);
}

.mc-cta-pill-host--ready.mc-cta-pill--surface:is(:hover, :focus-within) {
  color: var(--mc-cta-pill-ink-rest, var(--mc-ink));
}

.mc-portal-card--light.mc-cta-pill-host {
  --mc-cta-pill-ink-rest: #111110;
  --mc-cta-pill-ink: #f8fafc;
  --mc-cta-pill-border-rest: rgba(15, 23, 42, 0.14);
  --mc-cta-indicator-bg: rgba(15, 23, 42, 0.07);
  --mc-cta-indicator-ring: rgba(15, 23, 42, 0.12);
  --mc-cta-indicator-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --mc-cta-indicator-bg-hover: rgba(15, 23, 42, 0.92);
  --mc-cta-indicator-ring-hover: rgba(15, 23, 42, 0.2);
}

.mc-portal-card--dark.mc-cta-pill-host {
  --mc-cta-pill-ink-rest: #f8fafc;
  --mc-cta-pill-ink: #0a0a0a;
  --mc-cta-pill-border-rest: rgba(255, 255, 255, 0.22);
  --mc-cta-indicator-bg: rgba(255, 255, 255, 0.1);
  --mc-cta-indicator-ring: rgba(255, 255, 255, 0.18);
  --mc-cta-indicator-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --mc-cta-indicator-bg-hover: rgba(255, 255, 255, 0.96);
  --mc-cta-indicator-ring-hover: rgba(255, 255, 255, 0.92);
}

.mc-id-pager__link.mc-cta-pill--surface .mc-cta-indicator,
.mc-gl-pager__link.mc-cta-pill--surface .mc-cta-indicator,
.mc-id-footer__next.mc-cta-pill--surface .mc-cta-indicator,
.mc-gl-footer__next.mc-cta-pill--surface .mc-cta-indicator {
  border-radius: 999px;
  box-sizing: border-box;
}

.mc-id-pager,
.mc-gl-pager {
  overflow: visible;
}

.mc-id-pager__link.mc-cta-pill-host--ready,
.mc-gl-pager__link.mc-cta-pill-host--ready,
.mc-id-footer__next.mc-cta-pill-host--ready,
.mc-gl-footer__next.mc-cta-pill-host--ready {
  overflow: visible;
  isolation: isolate;
}

.mc-id-pager__link.mc-cta-pill-host--ready:is(:hover, :focus-within),
.mc-gl-pager__link.mc-cta-pill-host--ready:is(:hover, :focus-within),
.mc-id-footer__next.mc-cta-pill-host--ready:is(:hover, :focus-within),
.mc-gl-footer__next.mc-cta-pill-host--ready:is(:hover, :focus-within) {
  z-index: 1;
}

/* Portal discover cards */
.mc-portal-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 34px;
  margin-top: 4px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--mc-ink);
}

/* Portal CTA sits in meta below thumb; ink follows page, not thumb tone */
.mc-cta-pill-host--ready .mc-portal-card__cta {
  border-color: var(--mc-cta-pill-border-rest, transparent);
  background: transparent;
  color: var(--mc-cta-pill-ink-rest, inherit);
}

.mc-portal-card--light.mc-cta-pill-host--ready:is(:hover, :focus-within) .mc-portal-card__cta,
.mc-portal-card--dark.mc-cta-pill-host--ready:is(:hover, :focus-within) .mc-portal-card__cta {
  color: var(--mc-cta-pill-ink-rest, inherit);
}

/* Drawer download CTA */
.mc-nav-drawer__cta.mc-cta-pill--surface {
  position: relative;
  z-index: 1;
  background: transparent;
  border: 1px solid transparent;
}

.mc-cta-pill-host--ready .mc-nav-drawer__cta.mc-cta-pill--surface {
  background: transparent;
}

.mc-nav-drawer__cta.mc-cta-pill--surface:hover,
.mc-nav-drawer__cta.mc-cta-pill--surface:focus-visible {
  background: transparent;
  color: #fff;
}

.mc-nav-drawer__cta.mc-cta-pill-host--ready:hover .mc-cta-indicator,
.mc-nav-drawer__cta.mc-cta-pill-host--ready:focus-within .mc-cta-indicator {
  background: var(--mc-cta-indicator-bg, rgba(255, 255, 255, 0.1));
  border-color: var(--mc-cta-indicator-ring, rgba(255, 255, 255, 0.18));
}

/* Dark overview hubs (night) */
.mc-id-page--overview .mc-cta-pill-host,
.mc-gl-page--overview .mc-cta-pill-host {
  --mc-cta-pill-ink-rest: #f8fafc;
  --mc-cta-pill-ink: #0a0a0a;
  --mc-cta-pill-border-rest: rgba(255, 255, 255, 0.22);
  --mc-cta-indicator-bg: rgba(255, 255, 255, 0.14);
  --mc-cta-indicator-ring: rgba(255, 255, 255, 0.22);
  --mc-cta-indicator-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --mc-cta-indicator-bg-hover: rgba(255, 255, 255, 0.96);
  --mc-cta-indicator-ring-hover: rgba(255, 255, 255, 0.92);
}

.mc-id-explore-rows a.mc-cta-pill-host--ready,
.mc-gl-explore a.mc-cta-pill-host--ready {
  color: var(--mc-cta-pill-ink-rest, inherit);
}

html.mc-theme-day body:is(.mc-identity-overview, .mc-guidelines-overview, .mc-learn-overview, .mc-diy-overview, .mc-assets-overview) .mc-cta-pill-host,
html.mc-day-mode body:is(.mc-identity-overview, .mc-guidelines-overview, .mc-learn-overview, .mc-diy-overview, .mc-assets-overview) .mc-cta-pill-host {
  --mc-cta-pill-ink-rest: #111827;
  --mc-cta-pill-ink: #f8fafc;
  --mc-cta-pill-border-rest: rgba(15, 23, 42, 0.14);
  --mc-cta-indicator-bg: rgba(15, 23, 42, 0.07);
  --mc-cta-indicator-ring: rgba(15, 23, 42, 0.12);
  --mc-cta-indicator-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --mc-cta-indicator-bg-hover: rgba(15, 23, 42, 0.92);
  --mc-cta-indicator-ring-hover: rgba(15, 23, 42, 0.2);
}

/* Light document shells: doc pager + footer next pills */
.mc-gl--identity-light .mc-id-pager__link.mc-cta-pill-host,
.mc-gl--identity-light .mc-gl-pager__link.mc-cta-pill-host,
.mc-gl--identity-light .mc-id-footer__next.mc-cta-pill-host,
.mc-gl--identity-light .mc-gl-footer__next.mc-cta-pill-host,
.mc-gl--guidelines-light .mc-id-pager__link.mc-cta-pill-host,
.mc-gl--guidelines-light .mc-gl-pager__link.mc-cta-pill-host,
.mc-gl--guidelines-light .mc-id-footer__next.mc-cta-pill-host,
.mc-gl--guidelines-light .mc-gl-footer__next.mc-cta-pill-host,
.mc-gl--learn-light .mc-id-pager__link.mc-cta-pill-host,
.mc-gl--learn-light .mc-gl-pager__link.mc-cta-pill-host,
.mc-gl--learn-light .mc-id-footer__next.mc-cta-pill-host,
.mc-gl--learn-light .mc-gl-footer__next.mc-cta-pill-host,
.mc-gl--assets-light .mc-id-pager__link.mc-cta-pill-host,
.mc-gl--assets-light .mc-gl-pager__link.mc-cta-pill-host,
.mc-gl--assets-light .mc-id-footer__next.mc-cta-pill-host,
.mc-gl--assets-light .mc-gl-footer__next.mc-cta-pill-host,
.mc-gl--diy-light .mc-id-pager__link.mc-cta-pill-host,
.mc-gl--diy-light .mc-gl-pager__link.mc-cta-pill-host,
.mc-gl--diy-light .mc-id-footer__next.mc-cta-pill-host,
.mc-gl--diy-light .mc-gl-footer__next.mc-cta-pill-host {
  --mc-cta-pill-ink-rest: #111110;
  --mc-cta-pill-ink: #f8fafc;
  --mc-cta-indicator-bg: rgba(15, 23, 42, 0.07);
  --mc-cta-indicator-ring: rgba(15, 23, 42, 0.1);
  --mc-cta-indicator-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --mc-cta-indicator-bg-hover: rgba(15, 23, 42, 0.92);
  --mc-cta-indicator-ring-hover: rgba(15, 23, 42, 0.2);
}

/* Night: light doc shells flip to dark page bg */
html.mc-theme-night .mc-gl--identity-light .mc-id-pager__link.mc-cta-pill-host,
html.mc-theme-night .mc-gl--identity-light .mc-gl-pager__link.mc-cta-pill-host,
html.mc-theme-night .mc-gl--identity-light .mc-id-footer__next.mc-cta-pill-host,
html.mc-theme-night .mc-gl--identity-light .mc-gl-footer__next.mc-cta-pill-host,
html.mc-theme-night .mc-gl--guidelines-light .mc-id-pager__link.mc-cta-pill-host,
html.mc-theme-night .mc-gl--guidelines-light .mc-gl-pager__link.mc-cta-pill-host,
html.mc-theme-night .mc-gl--guidelines-light .mc-id-footer__next.mc-cta-pill-host,
html.mc-theme-night .mc-gl--guidelines-light .mc-gl-footer__next.mc-cta-pill-host,
html.mc-theme-night .mc-gl--learn-light .mc-id-pager__link.mc-cta-pill-host,
html.mc-theme-night .mc-gl--learn-light .mc-gl-pager__link.mc-cta-pill-host,
html.mc-theme-night .mc-gl--learn-light .mc-id-footer__next.mc-cta-pill-host,
html.mc-theme-night .mc-gl--learn-light .mc-gl-footer__next.mc-cta-pill-host,
html.mc-theme-night .mc-gl--assets-light .mc-id-pager__link.mc-cta-pill-host,
html.mc-theme-night .mc-gl--assets-light .mc-gl-pager__link.mc-cta-pill-host,
html.mc-theme-night .mc-gl--assets-light .mc-id-footer__next.mc-cta-pill-host,
html.mc-theme-night .mc-gl--assets-light .mc-gl-footer__next.mc-cta-pill-host,
html.mc-theme-night .mc-gl--diy-light .mc-id-pager__link.mc-cta-pill-host,
html.mc-theme-night .mc-gl--diy-light .mc-gl-pager__link.mc-cta-pill-host,
html.mc-theme-night .mc-gl--diy-light .mc-id-footer__next.mc-cta-pill-host,
html.mc-theme-night .mc-gl--diy-light .mc-gl-footer__next.mc-cta-pill-host {
  --mc-cta-pill-ink-rest: #f0f0eb;
  --mc-cta-pill-ink: #0a0a0a;
  --mc-cta-indicator-bg: rgba(255, 255, 255, 0.12);
  --mc-cta-indicator-ring: rgba(255, 255, 255, 0.18);
  --mc-cta-indicator-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --mc-cta-indicator-bg-hover: rgba(255, 255, 255, 0.96);
  --mc-cta-indicator-ring-hover: rgba(255, 255, 255, 0.92);
}

/* Dark document shells */
.mc-gl--identity-dark .mc-id-pager__link.mc-cta-pill-host,
.mc-gl--identity-dark .mc-gl-pager__link.mc-cta-pill-host,
.mc-gl--identity-dark .mc-id-footer__next.mc-cta-pill-host,
.mc-gl--identity-dark .mc-gl-footer__next.mc-cta-pill-host,
.mc-gl--guidelines-dark .mc-id-pager__link.mc-cta-pill-host,
.mc-gl--guidelines-dark .mc-gl-pager__link.mc-cta-pill-host,
.mc-gl--guidelines-dark .mc-id-footer__next.mc-cta-pill-host,
.mc-gl--guidelines-dark .mc-gl-footer__next.mc-cta-pill-host,
.mc-gl--learn-dark .mc-id-pager__link.mc-cta-pill-host,
.mc-gl--learn-dark .mc-gl-pager__link.mc-cta-pill-host,
.mc-gl--learn-dark .mc-id-footer__next.mc-cta-pill-host,
.mc-gl--learn-dark .mc-gl-footer__next.mc-cta-pill-host,
.mc-gl--diy-dark .mc-id-pager__link.mc-cta-pill-host,
.mc-gl--diy-dark .mc-gl-pager__link.mc-cta-pill-host,
.mc-gl--diy-dark .mc-id-footer__next.mc-cta-pill-host,
.mc-gl--diy-dark .mc-gl-footer__next.mc-cta-pill-host,
.mc-gl--assets-dark .mc-id-pager__link.mc-cta-pill-host,
.mc-gl--assets-dark .mc-gl-pager__link.mc-cta-pill-host,
.mc-gl--assets-dark .mc-id-footer__next.mc-cta-pill-host,
.mc-gl--assets-dark .mc-gl-footer__next.mc-cta-pill-host {
  --mc-cta-pill-ink-rest: #f0f0eb;
  --mc-cta-pill-ink: #0a0a0a;
  --mc-cta-indicator-bg: rgba(255, 255, 255, 0.14);
  --mc-cta-indicator-ring: rgba(255, 255, 255, 0.22);
  --mc-cta-indicator-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --mc-cta-indicator-bg-hover: rgba(255, 255, 255, 0.96);
  --mc-cta-indicator-ring-hover: rgba(255, 255, 255, 0.92);
}

html.mc-theme-day .mc-gl--identity-dark .mc-id-pager__link.mc-cta-pill-host,
html.mc-day-mode .mc-gl--identity-dark .mc-id-pager__link.mc-cta-pill-host,
html.mc-theme-day .mc-gl--identity-dark .mc-gl-pager__link.mc-cta-pill-host,
html.mc-day-mode .mc-gl--identity-dark .mc-gl-pager__link.mc-cta-pill-host,
html.mc-theme-day .mc-gl--identity-dark .mc-id-footer__next.mc-cta-pill-host,
html.mc-day-mode .mc-gl--identity-dark .mc-id-footer__next.mc-cta-pill-host,
html.mc-theme-day .mc-gl--identity-dark .mc-gl-footer__next.mc-cta-pill-host,
html.mc-day-mode .mc-gl--identity-dark .mc-gl-footer__next.mc-cta-pill-host,
html.mc-theme-day .mc-gl--guidelines-dark .mc-id-pager__link.mc-cta-pill-host,
html.mc-day-mode .mc-gl--guidelines-dark .mc-id-pager__link.mc-cta-pill-host,
html.mc-theme-day .mc-gl--guidelines-dark .mc-gl-pager__link.mc-cta-pill-host,
html.mc-day-mode .mc-gl--guidelines-dark .mc-gl-pager__link.mc-cta-pill-host,
html.mc-theme-day .mc-gl--guidelines-dark .mc-id-footer__next.mc-cta-pill-host,
html.mc-day-mode .mc-gl--guidelines-dark .mc-id-footer__next.mc-cta-pill-host,
html.mc-theme-day .mc-gl--guidelines-dark .mc-gl-footer__next.mc-cta-pill-host,
html.mc-day-mode .mc-gl--guidelines-dark .mc-gl-footer__next.mc-cta-pill-host,
html.mc-theme-day .mc-gl--learn-dark .mc-id-pager__link.mc-cta-pill-host,
html.mc-day-mode .mc-gl--learn-dark .mc-id-pager__link.mc-cta-pill-host,
html.mc-theme-day .mc-gl--learn-dark .mc-gl-pager__link.mc-cta-pill-host,
html.mc-day-mode .mc-gl--learn-dark .mc-gl-pager__link.mc-cta-pill-host,
html.mc-theme-day .mc-gl--learn-dark .mc-id-footer__next.mc-cta-pill-host,
html.mc-day-mode .mc-gl--learn-dark .mc-id-footer__next.mc-cta-pill-host,
html.mc-theme-day .mc-gl--learn-dark .mc-gl-footer__next.mc-cta-pill-host,
html.mc-day-mode .mc-gl--learn-dark .mc-gl-footer__next.mc-cta-pill-host,
html.mc-theme-day .mc-gl--diy-dark .mc-id-pager__link.mc-cta-pill-host,
html.mc-day-mode .mc-gl--diy-dark .mc-id-pager__link.mc-cta-pill-host,
html.mc-theme-day .mc-gl--diy-dark .mc-gl-pager__link.mc-cta-pill-host,
html.mc-day-mode .mc-gl--diy-dark .mc-gl-pager__link.mc-cta-pill-host,
html.mc-theme-day .mc-gl--diy-dark .mc-id-footer__next.mc-cta-pill-host,
html.mc-day-mode .mc-gl--diy-dark .mc-id-footer__next.mc-cta-pill-host,
html.mc-theme-day .mc-gl--diy-dark .mc-gl-footer__next.mc-cta-pill-host,
html.mc-day-mode .mc-gl--diy-dark .mc-gl-footer__next.mc-cta-pill-host,
html.mc-theme-day .mc-gl--assets-dark .mc-id-pager__link.mc-cta-pill-host,
html.mc-day-mode .mc-gl--assets-dark .mc-id-pager__link.mc-cta-pill-host,
html.mc-theme-day .mc-gl--assets-dark .mc-gl-pager__link.mc-cta-pill-host,
html.mc-day-mode .mc-gl--assets-dark .mc-gl-pager__link.mc-cta-pill-host,
html.mc-theme-day .mc-gl--assets-dark .mc-id-footer__next.mc-cta-pill-host,
html.mc-day-mode .mc-gl--assets-dark .mc-id-footer__next.mc-cta-pill-host,
html.mc-theme-day .mc-gl--assets-dark .mc-gl-footer__next.mc-cta-pill-host,
html.mc-day-mode .mc-gl--assets-dark .mc-gl-footer__next.mc-cta-pill-host {
  --mc-cta-pill-ink-rest: #111827;
  --mc-cta-pill-ink: #f8fafc;
  --mc-cta-indicator-bg: rgba(15, 23, 42, 0.07);
  --mc-cta-indicator-ring: rgba(15, 23, 42, 0.12);
  --mc-cta-indicator-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --mc-cta-indicator-bg-hover: rgba(15, 23, 42, 0.92);
  --mc-cta-indicator-ring-hover: rgba(15, 23, 42, 0.2);
}

/* Home portal cards - day mode (light page) */
html.mc-theme-day body.mc-section-home .mc-portal-card--dark.mc-cta-pill-host,
html.mc-day-mode body.mc-section-home .mc-portal-card--dark.mc-cta-pill-host,
html:not(.mc-theme-night):not(.mc-day-mode) body.mc-section-home .mc-portal-card--dark.mc-cta-pill-host {
  --mc-cta-pill-ink-rest: #111110;
  --mc-cta-pill-ink: #f8fafc;
  --mc-cta-pill-border-rest: rgba(15, 23, 42, 0.14);
  --mc-cta-indicator-bg: rgba(15, 23, 42, 0.07);
  --mc-cta-indicator-ring: rgba(15, 23, 42, 0.12);
  --mc-cta-indicator-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --mc-cta-indicator-bg-hover: rgba(15, 23, 42, 0.92);
  --mc-cta-indicator-ring-hover: rgba(15, 23, 42, 0.2);
}

html.mc-theme-day body.mc-section-home .mc-portal-card--light.mc-cta-pill-host,
html.mc-day-mode body.mc-section-home .mc-portal-card--light.mc-cta-pill-host,
html:not(.mc-theme-night):not(.mc-day-mode) body.mc-section-home .mc-portal-card--light.mc-cta-pill-host {
  --mc-cta-pill-ink-rest: #111110;
  --mc-cta-pill-ink: #f8fafc;
  --mc-cta-pill-border-rest: rgba(15, 23, 42, 0.14);
  --mc-cta-indicator-bg: rgba(15, 23, 42, 0.07);
  --mc-cta-indicator-ring: rgba(15, 23, 42, 0.12);
  --mc-cta-indicator-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --mc-cta-indicator-bg-hover: rgba(15, 23, 42, 0.92);
  --mc-cta-indicator-ring-hover: rgba(15, 23, 42, 0.2);
}

/* Home portal cards - night mode */
html.mc-theme-night body.mc-section-home .mc-portal-card--light.mc-cta-pill-host {
  --mc-cta-pill-ink-rest: #f0f0eb;
  --mc-cta-pill-ink: #0a0a0a;
  --mc-cta-pill-border-rest: rgba(255, 255, 255, 0.22);
  --mc-cta-indicator-bg: rgba(255, 255, 255, 0.12);
  --mc-cta-indicator-ring: rgba(255, 255, 255, 0.18);
  --mc-cta-indicator-bg-hover: rgba(255, 255, 255, 0.96);
  --mc-cta-indicator-ring-hover: rgba(255, 255, 255, 0.92);
}

html.mc-theme-night body.mc-section-home .mc-portal-card--dark.mc-cta-pill-host {
  --mc-cta-pill-ink-rest: #f8fafc;
  --mc-cta-pill-ink: #0a0a0a;
  --mc-cta-pill-border-rest: rgba(255, 255, 255, 0.22);
  --mc-cta-indicator-bg: rgba(255, 255, 255, 0.12);
  --mc-cta-indicator-ring: rgba(255, 255, 255, 0.18);
  --mc-cta-indicator-bg-hover: rgba(255, 255, 255, 0.96);
  --mc-cta-indicator-ring-hover: rgba(255, 255, 255, 0.92);
}
