/**
 * Merchant sales demo — neutral-first design system (host shell + scoped widget overrides).
 * Tokens: --bb-* (BoozeButler / brand-agnostic UI)
 */
:root {
  --bb-bg-primary: #ffffff;
  --bb-bg-secondary: #f7f7f8;
  --bb-text-primary: #111111;
  --bb-text-secondary: #6b6b6f;
  --bb-border: rgba(0, 0, 0, 0.07);
  --bb-accent: #1f2a2a;
  --bb-accent-hover: #121818;
  --bb-accent-soft: rgba(31, 42, 42, 0.08);
  --bb-accent-line: rgba(31, 42, 42, 0.14);
  --bb-radius: 16px;
  --bb-font: "DM Sans", system-ui, -apple-system, sans-serif;
  --bb-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --bb-space-section: 1.35rem;
  --bb-space-block: 1.2rem;
}

.merchant-demo-page {
  margin: 0;
  min-height: 100vh;
  font-family: var(--bb-font);
  font-size: 16px;
  color: var(--bb-text-primary);
  background: var(--bb-bg-secondary);
  line-height: 1.55;
}

.merchant-demo-page * {
  box-sizing: border-box;
}

.md-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.5rem 1rem;
  background: var(--bb-accent);
  color: var(--bb-bg-primary);
  z-index: 100;
}
.md-skip:focus {
  left: 0.5rem;
  top: 0.5rem;
}

.md-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.55rem 1.25rem;
  background: var(--bb-bg-primary);
  border-bottom: 1px solid var(--bb-border);
}

.md-logo {
  font-family: var(--bb-serif);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--bb-text-primary);
  text-decoration: none;
}

.md-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
}

.md-nav a {
  color: var(--bb-text-secondary);
  text-decoration: none;
}
.md-nav a:hover {
  color: var(--bb-text-primary);
}

.md-nav .md-nav-cta {
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  background: var(--bb-text-primary);
  color: var(--bb-bg-primary) !important;
  font-weight: 600;
  font-size: 0.8125rem;
}
.md-nav .md-nav-cta:hover {
  background: var(--bb-accent);
  color: var(--bb-bg-primary) !important;
}

.md-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
}

.md-context {
  padding: 1.65rem 0 1.1rem;
  border-bottom: 1px solid var(--bb-border);
  margin-bottom: var(--bb-space-section);
}

.md-crumb {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  color: var(--bb-text-secondary);
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 500;
}

.md-h1 {
  margin: 0 0 0.45rem;
  font-family: var(--bb-serif);
  font-size: clamp(1.85rem, 3.4vw, 2.25rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--bb-text-primary);
}

.md-lead {
  margin: 0;
  max-width: 38rem;
  font-size: 1rem;
  line-height: 1.58;
  color: var(--bb-text-secondary);
}

.md-merchant-intro {
  margin: 0 0 1.85rem;
  padding: 0 0 0 0.85rem;
  background: transparent;
  border: none;
  border-left: 1px solid var(--bb-accent-line);
  font-size: 0.875rem;
  line-height: 1.58;
  color: var(--bb-text-secondary);
  max-width: 38rem;
}
.md-merchant-intro strong {
  color: var(--bb-text-primary);
  font-weight: 600;
}

.md-widget-section {
  margin-top: 0.25rem;
  margin-bottom: 3rem;
  padding-top: 0.5rem;
}

.md-widget-section h2 {
  margin: 0 0 0.5rem;
  font-family: var(--bb-serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--bb-text-primary);
}

.md-widget-sub {
  display: none;
}

/* Tabs: neutral track, white active — no accent fill */
.md-tabs {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 3px;
  margin-bottom: 0.55rem;
  background: var(--bb-bg-secondary);
  border: 1px solid var(--bb-border);
  border-radius: 10px;
}

.md-tab {
  appearance: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0 0.95rem;
  min-height: 42px;
  border-radius: 8px;
  color: var(--bb-text-secondary);
  background: transparent;
  transition: color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.md-tab:hover {
  color: var(--bb-text-primary);
}
.md-tab[aria-selected="true"] {
  background: var(--bb-bg-primary);
  color: var(--bb-text-primary);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.05),
    0 2px 8px rgba(0, 0, 0, 0.06);
  outline: none;
}

.md-tab-context {
  margin: 0 0 1.15rem;
  max-width: 38rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--bb-text-secondary);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.md-tab-context-line {
  display: block;
}

.md-mode-callout {
  margin: 0 0 1.15rem;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  background: var(--bb-bg-secondary);
  border: 1px solid var(--bb-border);
  max-width: 100%;
}

.md-mode-callout-title {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bb-text-secondary);
  margin-bottom: 0.25rem;
}

.md-mode-callout-body {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--bb-text-primary);
  font-weight: 500;
}

.md-mode-price {
  font-weight: 600;
  color: var(--bb-text-primary);
}

.md-mode-price-note {
  font-weight: 500;
  color: var(--bb-text-secondary);
  font-size: 0.75rem;
}

.md-panel[hidden] {
  display: none !important;
}

/* Single premium surface */
.md-embed-frame {
  border: 1px solid var(--bb-border);
  border-radius: 20px;
  background: var(--bb-bg-primary);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 14px 40px rgba(0, 0, 0, 0.055);
  padding: 1.35rem 1.65rem 2rem;
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.md-mode-callout + .widget-wrap {
  margin-top: 0;
}

.md-embed-frame .widget-wrap {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* —— Footer: single quiet text action (refine / restart) —— */
#md-widget-bottle .boozebutler-widget .bbw-results-actions,
#md-widget-serveled .boozebutler-widget .bbw-results-actions {
  margin-top: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--bb-border);
  justify-content: flex-start !important;
}

#md-widget-bottle .boozebutler-widget button.bbw-cta.bbw-retry,
#md-widget-serveled .boozebutler-widget button.bbw-cta.bbw-retry {
  min-height: auto !important;
  width: auto !important;
  align-self: flex-start;
  padding: 0.35rem 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--bb-text-secondary) !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  font-size: 0.8125rem !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
#md-widget-bottle .boozebutler-widget button.bbw-cta.bbw-retry:hover,
#md-widget-serveled .boozebutler-widget button.bbw-cta.bbw-retry:hover {
  background: transparent !important;
  color: var(--bb-text-primary) !important;
}

#md-widget-bottle .boozebutler-widget button.bbw-cta-secondary.bbw-retake-quiz,
#md-widget-serveled .boozebutler-widget button.bbw-cta-secondary.bbw-retake-quiz {
  min-height: auto !important;
  padding: 0.55rem 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--bb-text-secondary) !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  width: auto;
  align-self: flex-start;
}
#md-widget-bottle .boozebutler-widget button.bbw-cta-secondary.bbw-retake-quiz:hover,
#md-widget-serveled .boozebutler-widget button.bbw-cta-secondary.bbw-retake-quiz:hover {
  background: transparent !important;
  color: var(--bb-text-primary) !important;
}

/* Other primary CTAs (non-footer) — still accent, not green */
#md-widget-bottle .boozebutler-widget button.bbw-cta:not(.bbw-cta-secondary):not(.bbw-retry),
#md-widget-serveled .boozebutler-widget button.bbw-cta:not(.bbw-cta-secondary):not(.bbw-retry) {
  min-height: 44px;
  border-radius: 12px !important;
  background: var(--bb-accent) !important;
  color: var(--bb-bg-primary) !important;
  border: 0 !important;
  font-weight: 600 !important;
}
#md-widget-bottle .boozebutler-widget button.bbw-cta:not(.bbw-cta-secondary):not(.bbw-retry):hover,
#md-widget-serveled .boozebutler-widget button.bbw-cta:not(.bbw-cta-secondary):not(.bbw-retry):hover {
  background: var(--bb-accent-hover) !important;
}

#md-widget-bottle .boozebutler-widget .bbw-opt.bbw-selected,
#md-widget-serveled .boozebutler-widget .bbw-opt.bbw-selected {
  background: var(--bb-accent) !important;
  border-color: var(--bb-accent) !important;
  color: var(--bb-bg-primary) !important;
}

/* No nested “cards” inside the frame */
#md-widget-bottle .boozebutler-widget .bbw-card,
#md-widget-bottle .boozebutler-widget .bbw-flavor-profile,
#md-widget-bottle .boozebutler-widget .bbw-featured-hero-content,
#md-widget-serveled .boozebutler-widget .bbw-card,
#md-widget-serveled .boozebutler-widget .bbw-flavor-profile,
#md-widget-serveled .boozebutler-widget .bbw-featured-hero-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: var(--bb-space-block);
}

#md-widget-bottle .boozebutler-widget .bbw-featured-hero-content,
#md-widget-serveled .boozebutler-widget .bbw-featured-hero-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#md-widget-bottle .boozebutler-widget .bbw-profile-summary,
#md-widget-serveled .boozebutler-widget .bbw-profile-summary {
  margin-bottom: var(--bb-space-section);
}

#md-widget-bottle .boozebutler-widget .bbw-results-trust,
#md-widget-serveled .boozebutler-widget .bbw-results-trust {
  margin-bottom: var(--bb-space-section);
}

#md-widget-bottle .boozebutler-widget .bbw-featured-hero,
#md-widget-serveled .boozebutler-widget .bbw-featured-hero {
  margin-bottom: var(--bb-space-section);
}

#md-widget-bottle .boozebutler-widget .bbw-featured-hero-content > * + *,
#md-widget-serveled .boozebutler-widget .bbw-featured-hero-content > * + * {
  margin-top: var(--bb-space-section);
}

/* Ensure hint/copy never sits inside CTA chrome */
#md-widget-bottle .boozebutler-widget .bbw-featured-hero-ctas .bbw-serve-led-hint,
#md-widget-serveled .boozebutler-widget .bbw-featured-hero-ctas .bbw-serve-led-hint {
  display: none !important;
}

#md-widget-bottle .boozebutler-widget .bbw-more-ways,
#md-widget-serveled .boozebutler-widget .bbw-more-ways {
  margin: var(--bb-space-section) 0 0.85rem;
  font-size: 0.62rem !important;
  letter-spacing: 0.06em !important;
  text-transform: lowercase !important;
  color: var(--bb-text-secondary) !important;
  font-weight: 600 !important;
}

/* Labels quieter (~30% less presence) */
#md-widget-bottle .boozebutler-widget .bbw-featured-hero-label,
#md-widget-serveled .boozebutler-widget .bbw-featured-hero-label,
#md-widget-bottle .boozebutler-widget .bbw-featured-hero-section-label,
#md-widget-serveled .boozebutler-widget .bbw-featured-hero-section-label,
#md-widget-bottle .boozebutler-widget .bbw-profile-summary .bbw-taste-passport-eyebrow,
#md-widget-serveled .boozebutler-widget .bbw-profile-summary .bbw-taste-passport-eyebrow {
  text-transform: lowercase !important;
  letter-spacing: 0.03em !important;
  font-weight: 500 !important;
  font-size: 0.62rem !important;
  color: var(--bb-text-secondary) !important;
}

#md-widget-bottle .boozebutler-widget .bbw-taste-passport .bbw-taste-passport-eyebrow,
#md-widget-serveled .boozebutler-widget .bbw-taste-passport .bbw-taste-passport-eyebrow {
  text-transform: lowercase !important;
  font-size: 0.62rem !important;
  font-weight: 500 !important;
  color: var(--bb-text-secondary) !important;
}

/* Hero: titles dominate */
#md-widget-bottle .boozebutler-widget .bbw-featured-hero-header,
#md-widget-serveled .boozebutler-widget .bbw-featured-hero-header {
  margin-bottom: 0.35rem !important;
}

#md-widget-bottle .boozebutler-widget .bbw-featured-hero-name,
#md-widget-serveled .boozebutler-widget .bbw-featured-hero-name {
  font-size: 2.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em;
  line-height: 1.12 !important;
  color: var(--bb-text-primary) !important;
}

#md-widget-bottle .boozebutler-widget .bbw-featured-hero-conviction,
#md-widget-serveled .boozebutler-widget .bbw-featured-hero-conviction {
  font-size: 0.9rem !important;
  color: var(--bb-text-secondary) !important;
  font-style: normal !important;
  margin-top: 0.5rem !important;
}

#md-widget-bottle .boozebutler-widget .bbw-results-catalog-confidence,
#md-widget-serveled .boozebutler-widget .bbw-results-catalog-confidence {
  color: var(--bb-text-secondary) !important;
  font-weight: 500 !important;
  font-size: 0.78rem !important;
}

/* Serve-led & body hints: always on “paper”, never filled-button chrome */
#md-widget-bottle .boozebutler-widget .bbw-serve-led-hint,
#md-widget-serveled .boozebutler-widget .bbw-serve-led-hint,
#md-widget-bottle .boozebutler-widget .bbw-card-desc-secondary.bbw-serve-led-hint,
#md-widget-serveled .boozebutler-widget .bbw-card-desc-secondary.bbw-serve-led-hint {
  color: var(--bb-text-primary) !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  margin-top: 0.4rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
#md-widget-bottle .boozebutler-widget .bbw-serve-led-hint a,
#md-widget-serveled .boozebutler-widget .bbw-serve-led-hint a {
  color: var(--bb-accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

#md-widget-bottle .boozebutler-widget .bbw-featured-hero-ctas,
#md-widget-serveled .boozebutler-widget .bbw-featured-hero-ctas {
  order: 0 !important;
  margin-top: 0.3rem !important;
  gap: 0.65rem !important;
}

/* Bottle tab: commerce primary = add to cart link; recipe = secondary */
#md-widget-bottle .boozebutler-widget a.bbw-explore-bottle.bbw-featured-hero-cta-primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 1.2rem !important;
  border-radius: 12px !important;
  background: var(--bb-accent) !important;
  color: var(--bb-bg-primary) !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
#md-widget-bottle .boozebutler-widget a.bbw-explore-bottle.bbw-featured-hero-cta-primary:hover {
  background: var(--bb-accent-hover) !important;
  color: var(--bb-bg-primary) !important;
}

#md-widget-bottle .boozebutler-widget .bbw-view-recipe.bbw-featured-hero-cta-secondary {
  background: transparent !important;
  color: var(--bb-accent) !important;
  border: 1px solid var(--bb-accent-line) !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
}
#md-widget-bottle .boozebutler-widget .bbw-view-recipe.bbw-featured-hero-cta-secondary:hover {
  background: var(--bb-accent-soft) !important;
  color: var(--bb-accent) !important;
}

/* Guided serve: primary = view recipe */
#md-widget-serveled .boozebutler-widget .bbw-view-recipe.bbw-featured-hero-cta-primary {
  background: var(--bb-accent) !important;
  color: var(--bb-bg-primary) !important;
  border-radius: 12px !important;
  border: none !important;
  font-weight: 600 !important;
}
#md-widget-serveled .boozebutler-widget .bbw-view-recipe.bbw-featured-hero-cta-primary:hover {
  background: var(--bb-accent-hover) !important;
  color: var(--bb-bg-primary) !important;
}

#md-widget-serveled .boozebutler-widget .bbw-view-recipe.bbw-featured-hero-cta-secondary {
  background: transparent !important;
  color: var(--bb-accent) !important;
  border: 1px solid var(--bb-accent-line) !important;
}

/* Secondary cards: outline CTA, not solid accent */
#md-widget-bottle .boozebutler-widget .bbw-card-secondary a.bbw-btn.bbw-btn-primary,
#md-widget-serveled .boozebutler-widget .bbw-card-secondary a.bbw-btn.bbw-btn-primary {
  background: transparent !important;
  color: var(--bb-accent) !important;
  border: 1px solid var(--bb-accent-line) !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  padding: 0.45rem 0.85rem !important;
  border-radius: 10px !important;
  opacity: 1 !important;
}
#md-widget-bottle .boozebutler-widget .bbw-card-secondary a.bbw-btn.bbw-btn-primary:hover,
#md-widget-serveled .boozebutler-widget .bbw-card-secondary a.bbw-btn.bbw-btn-primary:hover {
  background: var(--bb-accent-soft) !important;
  color: var(--bb-accent) !important;
}

#md-widget-bottle .boozebutler-widget .bbw-featured-hero-media,
#md-widget-serveled .boozebutler-widget .bbw-featured-hero-media {
  max-height: 170px !important;
  min-height: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
#md-widget-bottle .boozebutler-widget .bbw-featured-hero-media .bbw-featured-hero-img,
#md-widget-bottle .boozebutler-widget .bbw-featured-hero-media .bbw-featured-hero-video,
#md-widget-serveled .boozebutler-widget .bbw-featured-hero-media .bbw-featured-hero-img,
#md-widget-serveled .boozebutler-widget .bbw-featured-hero-media .bbw-featured-hero-video {
  height: 100% !important;
  object-fit: cover !important;
}

#md-widget-serveled .boozebutler-widget .bbw-featured-hero-media.bbw-hero-visual-gradient {
  background: linear-gradient(148deg, #1a2224 0%, #2c3538 42%, #171c1e 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
#md-widget-serveled .boozebutler-widget .bbw-featured-hero-media .bbw-featured-hero-img,
#md-widget-serveled .boozebutler-widget .bbw-featured-hero-media .bbw-featured-hero-video {
  filter: contrast(1.02) saturate(1.03);
}
#md-widget-serveled .boozebutler-widget .bbw-featured-hero-media::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.42) 100%) !important;
}

#md-widget-bottle .boozebutler-widget .bbw-featured-hero-why-works,
#md-widget-serveled .boozebutler-widget .bbw-featured-hero-why-works {
  background: var(--bb-bg-secondary) !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: 12px !important;
  padding: 0.7rem 0.8rem !important;
}

#md-widget-bottle .boozebutler-widget .bbw-featured-hero-why-list,
#md-widget-serveled .boozebutler-widget .bbw-featured-hero-why-list {
  margin: 0.35rem 0 0 !important;
  padding-left: 1rem !important;
  line-height: 1.4 !important;
}

#md-widget-bottle .boozebutler-widget .bbw-featured-hero-why-list li,
#md-widget-serveled .boozebutler-widget .bbw-featured-hero-why-list li {
  margin: 0.12rem 0 !important;
  font-size: 0.84rem !important;
  color: var(--bb-text-primary) !important;
}

#md-widget-bottle .boozebutler-widget .bbw-results-footer .bbw-taste-passport-actions-minimal,
#md-widget-serveled .boozebutler-widget .bbw-results-footer .bbw-taste-passport-actions-minimal {
  display: none !important;
}

#md-widget-bottle .boozebutler-widget .bbw-results-footer,
#md-widget-serveled .boozebutler-widget .bbw-results-footer {
  border-top: 1px solid var(--bb-border) !important;
  padding-top: var(--bb-space-section) !important;
}

#md-widget-bottle .boozebutler-widget .bbw-results-actions,
#md-widget-serveled .boozebutler-widget .bbw-results-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 1.15rem;
  padding-top: 0;
}

/* Supporting sections */
.md-strip {
  padding: 1.85rem 0 2.1rem;
  border-top: 1px solid var(--bb-border);
}

.md-strip h2 {
  margin: 0 0 1.1rem;
  font-family: var(--bb-serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--bb-text-primary);
}

.md-steps,
.md-outcomes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.35rem;
}

.md-step {
  padding: 1.5rem 1.25rem;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 0;
}

.md-outcome {
  padding: 1.5rem 1.35rem;
  background: var(--bb-bg-primary);
  border: 1px solid var(--bb-border);
  border-radius: 14px;
}

.md-step-num {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
  color: var(--bb-text-secondary);
  margin: 0 0 0.75rem;
}

.md-step h3,
.md-outcome h3 {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bb-text-primary);
  line-height: 1.3;
}

.md-step p,
.md-outcome p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--bb-text-secondary);
  line-height: 1.58;
}

.md-footer {
  margin-top: 2.75rem;
  padding: 1.35rem 0 0;
  border-top: 1px solid var(--bb-border);
  font-size: 0.75rem;
  color: var(--bb-text-secondary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.md-footer-mono {
  font-size: 0.6875rem;
  opacity: 0.65;
}

.md-rep-details {
  margin-top: 2.25rem;
  font-size: 0.75rem;
  color: var(--bb-text-secondary);
}
.md-rep-details summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--bb-text-secondary);
}

@media (max-width: 520px) {
  .md-topbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .md-embed-frame {
    padding: 1.65rem 1.2rem;
  }
}