/* ==========================================================================
   VibeCash product page
   --------------------------------------------------------------------------
   VibeCash-specific styling only. The reusable product-page furniture - the
   checked and bulleted lists, the numbered flow, the screenshot gallery and its
   lightbox, the specification table, the pricing card, the notes, the fine
   print, the hero overflow guard and the breakable inline code rule - lives in
   product-page.css, which this page loads alongside this file.

   That split exists because VibeCash is the second page to need them. The
   overflow guard and the lightbox were originally written for Preads alone and
   carried a note that VibeCash had the same defects at a larger size; copying
   them here instead of lifting them would have left two of each to drift.

   Everything below is scoped .vc-* and belongs to the redesigned page:
   the release pill, the gradient headline, the hero mockup glow, the trust
   strip, the tabbed feature showcase, the filterable gallery, the stack chips,
   the two-card plan comparison, the copy toast and the sticky buy bar.

   Two rules are load-bearing for accessibility rather than decoration:

   1. Every colour is a theme token, so the whole page follows light and dark
      from one set of rules with no dark-mode duplicate.
   2. Both interactive components (tabs, gallery filters) render their content
      visible and are only hidden once JavaScript marks them ready
      ([data-vc-tabs-ready] / [data-vc-gallery-ready]). Hiding panels in CSS
      alone would leave a visitor with scripting disabled reading an empty
      section - which is the same defect as shipping the feature text inside a
      collapsed element.

   There is deliberately no rule for the gallery's portrait modifier. It used to
   live here, keyed on four capture filenames, and was removed rather than
   carried forward: every VibeCash capture is a 1600x1000 landscape screenshot,
   so a 4:5 tile box cropped roughly three quarters of the width off each of
   them and left an unreadable vertical sliver. The 16:10 default in
   product-page.css matches the assets as they actually are, and
   `.hs-shot--portrait` remains available in the shared file for any genuinely
   tall capture added later.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page-local tokens

   One gradient extension, scoped to the hero headline. The theme sanctions
   #6D4AFF -> #8B6CFF; the headline asks for a third stop to lift the last
   word. In light mode that stop is a deeper indigo rather than cyan, because a
   cyan tail on a #F8F9FC page lands near 2:1 and the headline is large display
   text that has to stay legible; the cyan stop ships in dark mode, where it
   measures around 9:1 against #0F1117.
   -------------------------------------------------------------------------- */

:root,
[data-theme="light"] {
  --vc-grad-headline: linear-gradient(104deg, #5b4be8 0%, #6d4aff 46%, #7c5cff 100%);
}

[data-theme="dark"] {
  --vc-grad-headline: linear-gradient(104deg, #8b6cff 0%, #6d4aff 48%, #22d3ee 100%);
}

/* --------------------------------------------------------------------------
   Release pill

   The prompt calls for a pulsing "v2.0 released" badge. The version is not
   hardcoded: it is read from the product row, so the pill cannot go stale when
   the release is bumped.
   -------------------------------------------------------------------------- */

.vc-release {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 12px;
  margin-bottom: 22px;
  border-radius: var(--hs-radius-full);
  border: 1px solid rgba(109, 74, 255, 0.24);
  background: var(--hs-primary-lighter);
  color: var(--hs-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: var(--hs-shadow-sm);
}

[data-theme="dark"] .vc-release {
  color: #b9a8ff;
  border-color: rgba(139, 108, 255, 0.3);
}

/* The dot is the only moving part, and it stops on its own under reduced
   motion - the theme's global opt-out only shortens animation duration, which
   would otherwise leave a 2s pulse running as a 0.00002s flicker. */
.vc-release-dot {
  position: relative;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hs-success);
}

.vc-release-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--hs-success);
  animation: vc-release-pulse 2.2s ease-out infinite;
}

@keyframes vc-release-pulse {
  0% {
    transform: scale(0.6);
    opacity: 0.8;
  }
  70% {
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vc-release-dot::after {
    animation: none;
    opacity: 0.35;
  }
}

/* --------------------------------------------------------------------------
   Hero headline and CTAs
   -------------------------------------------------------------------------- */

.vc-hero-title {
  margin-bottom: 22px;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.vc-hero-title .vc-grad {
  background-image: var(--vc-grad-headline);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.vc-hero-lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--hs-muted);
  max-width: 42rem;
}

/* Price carried inside the primary CTA, so the number the buyer is being asked
   for is on the button they are about to press rather than only further down. */
.vc-cta-price {
  /* .btn and .hs-btn-premium both carry an absolutely positioned ::after
     overlay, and a positioned pseudo-element paints above ordinary inline
     content. Without this the price chip sits under the shimmer. */
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 10px;
  margin-left: 4px;
  border-radius: var(--hs-radius-full);
  background: rgba(255, 255, 255, 0.18);
  /* theme.css clamps .btn-lg to 14px, so 0.82em resolved to 11.5px - too
     small for the one number the buyer is being asked for. */
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Hero mockup

   The existing product frame with a neon wash behind it. The glow is a blurred
   pseudo-element on the wrapper rather than a box-shadow on the frame, so it
   reads as light spilling from behind the window instead of a border artefact.
   -------------------------------------------------------------------------- */

.vc-hero-visual {
  position: relative;
}

.vc-hero-visual::before {
  content: "";
  position: absolute;
  inset: 6% 4%;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(109, 74, 255, 0.25), transparent 68%);
  filter: blur(28px);
  pointer-events: none;
}

.vc-hero-visual .hs-product-frame {
  box-shadow:
    0 0 0 1px rgba(109, 74, 255, 0.16),
    0 30px 70px -34px rgba(109, 74, 255, 0.5),
    0 0 50px rgba(109, 74, 255, 0.18);
}

/* Two counters pinned to the mockup, echoing the proof strip immediately
   below the fold. Hidden below lg rather than stacked: on a phone the hero
   column is already the full width and the two would cover the screenshot. */
.vc-float-stat {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--hs-radius-md);
  border: 1px solid var(--hs-border);
  background: var(--hs-surface);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--hs-shadow-md);
  font-size: 13px;
  white-space: nowrap;
}

.vc-float-stat b {
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--hs-heading);
}

.vc-float-stat span {
  color: var(--hs-muted);
}

.vc-float-stat i {
  color: var(--hs-primary);
  font-size: 16px;
}

.vc-float-stat--a {
  top: -18px;
  left: -26px;
}

.vc-float-stat--b {
  bottom: -18px;
  right: -18px;
}

@media (max-width: 1199.98px) {
  .vc-float-stat--a {
    left: -8px;
  }

  .vc-float-stat--b {
    right: -6px;
  }
}

@media (max-width: 991.98px) {
  .vc-float-stat {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Trust strip

   Four promises a buyer checks before the first scroll. Each one is a fact the
   release can be opened and verified against; nothing here counts towards a
   feature the product does not have.
   -------------------------------------------------------------------------- */

.vc-trust {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-lg);
  background: var(--hs-border);
  overflow: hidden;
  box-shadow: var(--hs-shadow-md);
}

@media (min-width: 576px) {
  .vc-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .vc-trust {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.vc-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 18px;
  background: var(--hs-surface);
}

.vc-trust-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--hs-radius-md);
  background: var(--hs-primary-lighter);
  color: var(--hs-primary);
  font-size: 18px;
}

/* --hs-primary is tuned for a light surface. On the dark surface it sits at
   ~3.2:1, under the 4.5:1 needed for the small text that uses it here, so
   primary-coloured text switches to the lighter violet - the same move the
   release pill makes above. */
[data-theme="dark"] .vc-filter[aria-pressed="true"] {
  color: #b9a8ff;
  border-color: rgba(139, 108, 255, 0.45);
}

[data-theme="dark"] .vc-plan-eyebrow {
  color: #b9a8ff;
}

[data-theme="dark"] .vc-trust-icon {
  color: #b9a8ff;
}

.vc-trust-item strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--hs-heading);
}

/* The descriptive second line. Scoped one level deeper than a bare
   `.vc-trust-item span` on purpose: the icon is also a <span>, and the
   un-scoped selector is the more specific of the two, so it would reach across
   and flatten the icon's grid centring, 18px size and primary colour. */
.vc-trust-item > span > span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--hs-muted);
}

/* --------------------------------------------------------------------------
   Tabbed feature showcase

   The tab strip is a horizontally scrollable row on narrow screens rather than
   a wrapped block, because five wrapped buttons push the first panel below the
   fold on a phone and the section reads as a wall of chips.
   -------------------------------------------------------------------------- */

.vc-tablist {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.vc-tablist::-webkit-scrollbar {
  display: none;
}

.vc-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 11px 18px;
  border-radius: var(--hs-radius-full);
  border: 1px solid var(--hs-border);
  background: var(--hs-surface);
  color: var(--hs-muted);
  font: 600 14px/1.2 var(--font-body);
  white-space: nowrap;
  /* Padding alone rendered these at 43px on touch, a hair under the 44px
     comfortable target. */
  min-height: 44px;
  justify-content: center;
  transition:
    color var(--hs-transition),
    border-color var(--hs-transition),
    background-color var(--hs-transition),
    transform var(--hs-transition);
}

@media (hover: hover) and (pointer: fine) {
  .vc-tab {
    min-height: 0;
  }
}

.vc-tab i {
  font-size: 16px;
  color: var(--hs-primary);
}

@media (hover: hover) {
  .vc-tab:hover {
    color: var(--hs-heading);
    border-color: rgba(109, 74, 255, 0.3);
    transform: translateY(-1px);
  }
}

.vc-tab[aria-selected="true"] {
  color: #fff;
  border-color: transparent;
  background-image: var(--hs-grad-primary);
  box-shadow: var(--hs-shadow-sm);
}

.vc-tab[aria-selected="true"] i {
  color: #fff;
}

.vc-tab:focus-visible {
  outline: 2px solid var(--hs-primary);
  outline-offset: 3px;
}

.vc-tab-panel {
  animation: vc-panel-in 260ms ease-out;
}

@keyframes vc-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-vc-tabs-ready] .vc-tab-panel {
  display: none;
}

[data-vc-tabs-ready] .vc-tab-panel.is-active {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .vc-tab-panel {
    animation: none;
  }
}

/* Panel header: a one-line promise for the tab, so a visitor who lands on the
   section from a link knows what the selected tab is before reading a card. */
.vc-tab-intro {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  padding: 18px 20px;
  border: 1px solid var(--hs-border);
  border-left: 3px solid var(--hs-primary);
  border-radius: var(--hs-radius-md);
  background: var(--hs-surface);
}

.vc-tab-intro i {
  flex: 0 0 auto;
  font-size: 20px;
  color: var(--hs-primary);
  margin-top: 2px;
}

.vc-tab-intro p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--hs-muted);
}

/* --------------------------------------------------------------------------
   Filterable screenshot gallery
   -------------------------------------------------------------------------- */

.vc-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.vc-filter {
  padding: 8px 15px;
  border-radius: var(--hs-radius-full);
  border: 1px solid var(--hs-border);
  background: var(--hs-surface);
  color: var(--hs-muted);
  font: 600 13px/1.2 var(--font-body);
  /* Comfortable touch height; the text alone left the control at 34px, below
     the 44px target a thumb can reliably hit. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition:
    color var(--hs-transition),
    border-color var(--hs-transition),
    background-color var(--hs-transition);
}

.vc-filter:hover {
  color: var(--hs-heading);
  border-color: rgba(109, 74, 255, 0.3);
}

/* Mouse users get the tighter pill back; touch gets the larger target. */
@media (hover: hover) and (pointer: fine) {
  .vc-filter {
    min-height: 0;
  }
}

.vc-filter[aria-pressed="true"] {
  color: var(--hs-primary);
  border-color: rgba(109, 74, 255, 0.4);
  background: var(--hs-primary-lighter);
}

.vc-filter:focus-visible {
  outline: 2px solid var(--hs-primary);
  outline-offset: 2px;
}

[data-vc-gallery-ready] .vc-shot-group {
  display: none;
}

[data-vc-gallery-ready] .vc-shot-group.is-active {
  display: block;
}

.vc-shot-group + .vc-shot-group {
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Stack chips
   -------------------------------------------------------------------------- */

.vc-stack-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.vc-stack-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--hs-radius-md);
  border: 1px solid var(--hs-border);
  background: var(--hs-surface);
  box-shadow: var(--hs-shadow-sm);
  transition:
    transform var(--hs-card-transition),
    border-color var(--hs-card-transition);
}

@media (hover: hover) {
  .vc-stack-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(109, 74, 255, 0.3);
  }
}

.vc-stack-badge i {
  font-size: 18px;
  color: var(--hs-primary);
}

.vc-stack-badge b {
  display: block;
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--hs-heading);
}

.vc-stack-badge span {
  display: block;
  font-size: 12.5px;
  color: var(--hs-muted);
}

/* --------------------------------------------------------------------------
   Two-card plan comparison

   The featured card is the one holding the real price, so it carries the
   gradient border and the ribbon. The border is a two-layer background rather
   than a border-image so the radius stays consistent with the cards around it.
   -------------------------------------------------------------------------- */

.vc-plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

@media (min-width: 992px) {
  .vc-plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.vc-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px 28px;
  border-radius: var(--hs-radius-lg);
  border: 1px solid var(--hs-border);
  background: var(--hs-surface);
  box-shadow: var(--hs-shadow-md);
}

.vc-plan--featured {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--hs-surface), var(--hs-surface)) padding-box,
    var(--hs-grad-primary) border-box;
  box-shadow: var(--hs-shadow-lg);
}

.vc-ribbon {
  position: absolute;
  top: -1px;
  right: 24px;
  padding: 6px 14px;
  border-radius: 0 0 10px 10px;
  background-image: var(--hs-grad-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vc-plan-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hs-primary);
}

.vc-plan h3 {
  margin: 8px 0 6px;
  font-size: 22px;
}

.vc-plan-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--hs-muted);
}

.vc-plan-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 4px;
  font-family: var(--font-heading);
}

.vc-plan-price b {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--hs-heading);
}

.vc-plan-price s {
  font-size: 1.1rem;
  color: var(--hs-muted);
  opacity: 0.8;
}

.vc-plan-price span {
  font-size: 14px;
  color: var(--hs-muted);
}

/* The currency mark. Declared with the parent in the selector because a bare
   `.vc-plan-price .vc-currency` loses to `.vc-plan-price span` on specificity,
   and the generic caption size would then swallow it. */
.vc-plan-price .vc-currency {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--hs-heading);
}

.vc-plan h4 {
  margin: 24px 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hs-muted);
}

/* Included / excluded lists. Two marks, because the excluded list is the part
   a buyer scans for and a tick there would read as a promise. */
.vc-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.vc-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--hs-muted);
}

.vc-list li i {
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1.5;
}

.vc-list--yes li i {
  color: var(--hs-success);
}

.vc-list--no li i {
  color: var(--hs-warning);
}

.vc-list strong {
  color: var(--hs-heading);
  font-weight: 600;
}

.vc-plan-foot {
  margin-top: auto;
}

.vc-plan-foot .btn {
  width: 100%;
}

.vc-plan-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--hs-muted);
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   Copy toast

   One element reused for every copy action on the page. role=status with
   aria-live=polite, so the confirmation is announced rather than only shown.
   -------------------------------------------------------------------------- */

.vc-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 1085;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: var(--hs-radius-full);
  border: 1px solid var(--hs-border);
  background: var(--hs-surface);
  color: var(--hs-heading);
  font: 600 14px/1.2 var(--font-body);
  box-shadow: var(--hs-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 16px);
  transition:
    opacity var(--hs-transition),
    transform var(--hs-transition),
    visibility var(--hs-transition);
  pointer-events: none;
}

.vc-toast i {
  color: var(--hs-success);
  font-size: 16px;
}

.vc-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   Sticky buy bar

   Appears once the hero buttons have scrolled away and stands down again over
   the pricing section, so the sticky bar and the real price card never compete
   for the same pixel. Hidden until JavaScript marks it visible, because a fixed
   bar that ships visible would cover the cookie notice on first paint.
   -------------------------------------------------------------------------- */

.vc-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  border-top: 1px solid var(--hs-border);
  background: color-mix(in srgb, var(--hs-surface) 92%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 -12px 32px -24px rgba(15, 17, 23, 0.6);
  transform: translateY(110%);
  visibility: hidden;
  transition:
    transform var(--hs-card-transition),
    visibility var(--hs-card-transition);
}

.vc-sticky-cta.is-visible {
  transform: translateY(0);
  visibility: visible;
}

.vc-sticky-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 12px;
}

.vc-sticky-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-right: auto;
}

.vc-sticky-meta strong {
  font-family: var(--font-heading);
  font-size: 15px;
  line-height: 1.3;
  color: var(--hs-heading);
  white-space: nowrap;
}

.vc-sticky-meta span {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--hs-muted);
  white-space: nowrap;
}

.vc-sticky-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* The cookie notice is fixed to the same corner at z-index 9999. Lifting the
   bar above it keeps the Accept/Decline buttons clickable, which is the whole
   point of a sticky bar; the theme already relies on :has() for the navigation
   drawer, so the support floor is the same. */
body:has(.cookie-notice.is-visible) .vc-sticky-cta {
  bottom: 108px;
}

@media (max-width: 575.98px) {
  .vc-sticky-inner {
    gap: 10px;
  }

  .vc-sticky-meta span {
    display: none;
  }

  .vc-sticky-actions .btn {
    padding-inline: 16px;
  }

  /* The demo link is a duplicate of the hero and pricing links, so it is the
     first thing to go when the bar is down to two buttons on a 320px screen. */
  .vc-sticky-actions .btn-outline {
    display: none;
  }

  body:has(.cookie-notice.is-visible) .vc-sticky-cta {
    bottom: 150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vc-sticky-cta,
  .vc-toast {
    transition: none;
  }
}

/* The sticky bar's buttons are .btn-sm, which caps at 40px. That clears the
   24px WCAG minimum but is tight for a thumb on the one control that is meant
   to stay reachable while scrolling, so touch devices get more height. */
@media (hover: none), (pointer: coarse) {
  .vc-sticky-actions .btn-sm {
    min-height: 44px;
  }
}

/* --------------------------------------------------------------------------
   Accessibility adjustments

   The base rules for .hs-note-meta and .hs-about-breadcrumb live in the
   shared product-page/about stylesheets, which this page does not load.
   Rather than fork those shared rules, the two corrections this page needs
   are scoped here.
   -------------------------------------------------------------------------- */

/* .hs-note-meta sits at opacity .7 on an already-muted colour, which lands
   at 4.43:1 against the note background - just under the 4.5:1 minimum for
   body text. Dropping the opacity restores a passing ratio in both themes. */
/* Dimming via opacity blends the text toward the note's own background, which
   pushes it further under the minimum. A slightly darker muted tone achieves
   the same de-emphasis while staying legible. */
.hs-note-meta {
  opacity: 1;
  color: #5b6478;
}

[data-theme="dark"] .hs-note-meta {
  color: #a7b0c2;
}

/* The breadcrumb links are 16px tall inline text. Padding plus a matching
   negative margin grows the hit area without moving the text. */
.hs-about-breadcrumb a {
  display: inline-block;
  padding-block: 14px;
  margin-block: -14px;
}