/*
 * D-279 (owner, 6 Nov: a reference image, "update the testimonial section on the basis of this reference"): the home page's
 * testimonials as a glass carousel. Markup: partials/voices-glass; script: front_js/voices-glass.js. Brand kept: coral
 * #f05d49, glass cards, the Pacifico script for the coral word, glossy solid icons with white glyphs, the CTA bevel (D-278).
 */
.vg { --vg-coral: #f05d49; --vg-coral-2: #ff8b78; --vg-ink: #1d2333; --vg-text: #3f3833; --vg-gut: clamp(16px, 4vw, 56px); --vg-w: 420px;
  position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding-top: clamp(56px, 7vw, 96px); }
.vg::before { content: ""; position: absolute; z-index: -1; right: -160px; top: 8%; width: 560px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 139, 120, .2), rgba(255, 139, 120, 0) 68%); pointer-events: none; }
.vg__in { width: min(1288px, calc(100% - 2 * var(--vg-gut))); margin-inline: auto; display: grid; gap: 40px 56px;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "filters filters" "copy stage"; align-items: center; }

/* the filter pills */
.vg__filters { grid-area: filters; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.vg__filter { appearance: none; border: 0; cursor: pointer; padding: 11px 20px; border-radius: 999px; font: 600 14.5px/1 var(--font-body, Inter, sans-serif); color: var(--vg-ink);
  background: linear-gradient(150deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 0 0 1px rgba(240, 93, 73, .12), 0 12px 24px -18px rgba(92, 23, 14, .35);
  transition: transform .25s cubic-bezier(.16, 1.04, .3, 1), box-shadow .25s, color .25s; }
.vg__filter:hover { transform: translateY(-1px); color: var(--vg-coral); }
.vg__filter.is-active { color: #fff; background: var(--cy-cta-bg, linear-gradient(95deg, #ff8b78, #f05d49 58%, #e5503c));
  box-shadow: var(--cy-cta-bevel, inset 0 1px 0 rgba(255, 255, 255, .35)), 0 12px 22px -14px rgba(240, 93, 73, .7); }
.vg__filter:focus-visible, .vg__arrow:focus-visible, .vg__dot:focus-visible, .vg__all:focus-visible { outline: 3px solid var(--vg-coral); outline-offset: 3px; }

/* left: the copy */
.vg__copy { grid-area: copy; display: grid; justify-items: start; gap: 20px; }
.vg__tag { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 9px 18px 9px 12px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--vg-ink);
  background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 10px 24px -14px rgba(92, 23, 14, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.vg__wave { display: inline-flex; align-items: center; gap: 2px; width: 26px; height: 26px; justify-content: center; border-radius: 50%;
  background: radial-gradient(120% 90% at 30% 14%, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, 0) 55%), linear-gradient(150deg, var(--vg-coral-2), #e5503c); }
.vg__wave i { width: 2px; height: 12px; border-radius: 2px; background: #fff; transform-origin: center; }
.vg__wave i:nth-child(1), .vg__wave i:nth-child(5) { height: 5px; }
.vg__wave i:nth-child(2), .vg__wave i:nth-child(4) { height: 9px; }
.vg__title { margin: 0; font-size: clamp(40px, 4.6vw, 68px) !important; line-height: 1.04 !important; font-weight: 800 !important; letter-spacing: -.04em !important; color: var(--vg-ink) !important; text-transform: none !important; text-wrap: balance; }
.vg__title::before { content: none !important; }
.vg__title em { font-family: var(--font-script, "Pacifico", cursive); font-style: normal; font-weight: 400; letter-spacing: 0; padding-inline: .04em .1em;
  background: linear-gradient(95deg, var(--vg-coral-2) 0%, var(--vg-coral) 45%, #e0442f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vg__sub { margin: 0; max-width: 430px; font-size: 17px; line-height: 1.55; color: var(--vg-text); }
.vg__nav { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.vg__arrow { appearance: none; border: 0; cursor: pointer; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: var(--vg-coral);
  background: linear-gradient(150deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .7)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 0 0 1px rgba(240, 93, 73, .14), 0 14px 26px -16px rgba(92, 23, 14, .4);
  transition: transform .25s cubic-bezier(.16, 1.04, .3, 1), box-shadow .25s, background .25s, color .25s; }
.vg__arrow .cy-icon { width: 22px; height: 22px; stroke-width: 2.2; }
.vg__arrow[data-vg-next], .vg__arrow:hover { color: #fff; background: var(--cy-cta-bg, linear-gradient(95deg, #ff8b78, #f05d49 58%, #e5503c));
  box-shadow: var(--cy-cta-bevel, inset 0 1px 0 rgba(255, 255, 255, .35)), 0 14px 26px -14px rgba(240, 93, 73, .7); }
.vg__arrow:hover { transform: translateY(-2px); }
.vg__arrow:active { transform: translateY(0); box-shadow: var(--cy-cta-bevel-in, inset 0 2px 4px rgba(0, 0, 0, .2)); }
.vg__all { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; font-size: 15px; font-weight: 600; color: var(--vg-coral); text-decoration: none; }
.vg__all .cy-icon { width: 18px; height: 18px; transition: transform .25s; }
.vg__all:hover { color: #d4442f; text-decoration: none; }
.vg__all:hover .cy-icon { transform: translateX(3px); }
.vg__rating { display: inline-flex; align-items: center; gap: 12px; margin: 8px 0 0; font-size: 15px; color: var(--vg-text); }
.vg__rating b { color: var(--vg-ink); font-weight: 700; }
.vg__rating a { color: inherit; text-decoration: none; }
.vg__rating a:hover { color: var(--vg-coral); }
.vg__faces { display: inline-flex; }
.vg__faces .vg__av { width: 36px; height: 36px; font-size: 12px; box-shadow: 0 0 0 3px #fff, 0 6px 12px -6px rgba(92, 23, 14, .4); }
.vg__faces .vg__av + .vg__av { margin-left: -10px; }

/* the glossy initials avatar */
.vg__av { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font-size: 15px; font-weight: 700; color: #fff; letter-spacing: .02em; --as: #ff8b78; --ac: #e5503c;
  background: radial-gradient(120% 90% at 30% 14%, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, .12) 36%, rgba(255, 255, 255, 0) 58%), linear-gradient(150deg, var(--as), var(--ac));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -5px 10px rgba(0, 0, 0, .12), 0 10px 18px -10px var(--ac); text-shadow: 0 1px 1px rgba(0, 0, 0, .15); }
.vg__av--dpi { --as: #a78bfa; --ac: #6d4fd8; }
.vg__av--hospital { --as: #4fd1c5; --ac: #0f8f86; }
.vg__av--claims { --as: #5ed58a; --ac: #1a9a50; }
.vg__av--legal { --as: #6aa8ff; --ac: #2f63d6; }

/* right: the cards */
.vg__stage { grid-area: stage; position: relative; min-width: 0; outline: 0; }
.vg__track { display: grid; padding: 18px 0 26px 14px; }
.vg__track > * { grid-area: 1 / 1; width: var(--vg-w); max-width: 100%; justify-self: start; }
.vg__back { z-index: 2; border-radius: 28px; transform: rotate(-7deg) translate(-8px, 12px); transform-origin: 30% 80%;
  background: radial-gradient(120% 80% at 20% 0, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%), linear-gradient(150deg, var(--vg-coral-2), #e5503c);
  box-shadow: 0 30px 50px -28px rgba(240, 93, 73, .8); }
.vg__card { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 30px 30px 24px; border-radius: 28px; color: var(--vg-text);
  background: linear-gradient(150deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .72) 100%); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(240, 93, 73, .08), 0 30px 54px -32px rgba(92, 23, 14, .42), 0 2px 8px rgba(92, 23, 14, .05);
  transform-origin: 50% 100%; transition: transform .75s cubic-bezier(.2, .8, .2, 1), opacity .6s ease, filter .6s ease; }
.vg__card[hidden] { display: none; }
.vg__card[data-pos="0"] { z-index: 3; transform: rotate(-1.5deg); }
.vg__card[data-pos="1"] { z-index: 1; transform: translate(56%, 16px) rotate(4deg) scale(.9); opacity: .9; cursor: pointer; }
.vg__card[data-pos="2"] { z-index: 0; transform: translate(100%, 34px) rotate(8deg) scale(.8); opacity: .55; cursor: pointer; filter: saturate(.7); }
.vg__card[data-pos="prev"] { z-index: 4; transform: translate(-40%, 30px) rotate(-12deg) scale(.9); opacity: 0; pointer-events: none; }
.vg__card[data-pos="out"] { z-index: 0; transform: translate(130%, 50px) rotate(12deg) scale(.7); opacity: 0; pointer-events: none; }
.vg__card:is([data-pos="1"], [data-pos="2"]):hover { opacity: 1; }
.vg__cat { position: absolute; top: 22px; right: 24px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--vg-coral);
  background: rgba(240, 93, 73, .08); box-shadow: inset 0 0 0 1px rgba(240, 93, 73, .16); }
.vg__q { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; color: #fff;
  background: radial-gradient(120% 90% at 30% 14%, rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, .14) 36%, rgba(255, 255, 255, 0) 58%), linear-gradient(150deg, var(--vg-coral-2), #e5503c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -6px 12px rgba(0, 0, 0, .12), 0 12px 22px -10px rgba(240, 93, 73, .7); }
.vg__q .cy-icon { width: 24px; height: 24px; }
.vg__text { margin: 0; flex: 1; }
.vg__text p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--vg-ink); }
.vg__text em { font-style: italic; font-weight: 600; color: var(--vg-coral); }
.vg__more { margin-left: 4px; font-weight: 600; color: var(--vg-coral); }
.vg__who { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid rgba(240, 93, 73, .12); }
.vg__id { display: grid; gap: 2px; margin: 0; min-width: 0; font-size: 13.5px; line-height: 1.35; color: #6b625c; }
.vg__id b { font-size: 16px; font-weight: 700; color: var(--vg-ink); }
.vg__city { display: inline-flex; align-items: center; gap: 4px; }
.vg__city .cy-icon { width: 14px; height: 14px; color: var(--vg-coral); }
.vg__stars { display: inline-flex; gap: 2px; margin-left: auto; color: #f5b301; }
.vg__stars .cy-icon { width: 16px; height: 16px; filter: drop-shadow(0 1px 1px rgba(160, 100, 0, .25)); }
.vg__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; width: var(--vg-w); max-width: 100%; padding-left: 14px; }
.vg__dot { appearance: none; border: 0; padding: 0; cursor: pointer; width: 9px; height: 9px; border-radius: 999px; background: rgba(240, 93, 73, .25); transition: width .35s, background .35s; }
.vg__dot.is-on { width: 28px; background: var(--cy-cta-bg, #f05d49); }
.vg__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* bottom: the coral arc and the pill */
.vg__foot { position: relative; margin-top: clamp(28px, 4vw, 48px); padding: 62px var(--vg-gut) 26px; text-align: center; }
.vg__arc { position: absolute; z-index: -1; left: 0; top: 0; width: 100%; height: 100%; min-height: 140px; }
.vg__brand { position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 20px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--vg-ink);
  background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 0 0 1px rgba(240, 93, 73, .16), 0 14px 30px -16px rgba(240, 93, 73, .55); }
.vg__brand img { width: 18px; height: 18px; border-radius: 4px; }
.vg__brand i { font-style: normal; color: var(--vg-coral); }
.vg .voices-disclaimer { margin: 0 auto; max-width: 640px; text-align: center; }
.vg .voices-disclaimer a { color: inherit; text-decoration: underline; text-decoration-color: rgba(240, 93, 73, .45); }

@media (prefers-reduced-motion: no-preference) {
  .vg__wave i { animation: vg-wave 1.1s ease-in-out infinite alternate; }
  .vg__wave i:nth-child(2) { animation-delay: -.2s; }
  .vg__wave i:nth-child(3) { animation-delay: -.45s; }
  .vg__wave i:nth-child(4) { animation-delay: -.7s; }
  .vg__wave i:nth-child(5) { animation-delay: -.9s; }
}
@keyframes vg-wave { from { transform: scaleY(.45); } to { transform: scaleY(1.15); } }
@media (prefers-reduced-motion: reduce) { .vg__card, .vg__filter, .vg__arrow, .vg__dot { transition: none; } }

/* laptops: narrower cards */
@media (max-width: 1279px) { .vg { --vg-w: 380px; } .vg__card { padding: 26px 24px 22px; } .vg__text p { font-size: 16px; } }
/* tablets and phones: one column, the cards under the copy; only the next card peeks */
@media (max-width: 999px) {
  .vg { --vg-w: 460px; }
  .vg__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "filters" "stage"; gap: 26px; }
  .vg__filters { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--vg-gut)); padding: 4px var(--vg-gut) 10px; scrollbar-width: none; }
  .vg__filters::-webkit-scrollbar { display: none; }
  .vg__filter { flex: none; }
  .vg__card[data-pos="1"] { transform: translate(12%, 14px) rotate(3deg) scale(.94); opacity: .7; }
  .vg__card[data-pos="2"] { transform: translate(22%, 26px) rotate(6deg) scale(.88); opacity: 0; }
}
@media (max-width: 600px) {
  .vg { --vg-w: calc(100vw - 2 * var(--vg-gut) - 34px); }
  .vg__title { font-size: clamp(34px, 10vw, 44px) !important; }
  .vg__sub { font-size: 16px; }
  .vg__nav { flex-wrap: wrap; }
  .vg__arrow { width: 48px; height: 48px; }
  .vg__card { padding: 24px 20px 20px; gap: 14px; }
  .vg__cat { position: static; align-self: flex-start; order: -1; }
  .vg__q { width: 40px; height: 40px; border-radius: 13px; }
  .vg__text p { font-size: 15.5px; }
  .vg__who { flex-wrap: wrap; }
  .vg__stars { margin-left: 62px; }
  .vg__rating { flex-wrap: wrap; }
}

/* the cards nearly solid white glass, so the coral card behind and the peeking cards' text do not show through */
.vg__card { background: linear-gradient(150deg, rgba(255, 255, 255, .99) 0%, rgba(255, 251, 250, .96) 100%); }
.vg__card:is([data-pos="1"], [data-pos="2"]) .vg__text p { color: #4a4440; }
.vg__faces .vg__av { font-size: 11px; letter-spacing: 0; }
.vg__card[data-pos="1"] { opacity: 1; }
@media (min-width: 1000px) { .vg__card[data-pos="2"] { transform: translate(84%, 34px) rotate(8deg) scale(.8); } }
.vg__faces .vg__av + .vg__av { margin-left: -6px; }
body .vg .voices-disclaimer[class] { color: #6b625c; }

/* ===== D-285 (owner, screenshot: "set the testimonial section properly, it is not merging with other sections; check the UX
   fundamentals"): ===== */
/* 1. the joins: less space above (the calculators section already ends with its own space), and the coral glow under the
   arc fades out instead of stopping in a hard line where the next section starts (OLD: padding-top up to 96px; a flat cut) */
.vg { padding-top: clamp(32px, 3.5vw, 48px); }
.vg__foot { padding-bottom: 44px; }
.vg__arc { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%); }
/* 2. readable small text: coral text below 18px in a deeper coral (#c23b28, 4.7 - 5.3 : 1); the brand coral stays for fills,
   icons and the large "Inspire" (OLD: #f05d49 at 2.9 - 3.3 : 1) */
.vg__all, .vg__text em, .vg__more, .vg__cat, .vg__filter:not(.is-active):hover { color: #c23b28; }
.vg__all:hover { color: #a8321f; }
/* 3. the peeking cards read as "next", not as text to read: their content is quieter */
.vg__card[data-pos="1"] > * { opacity: .5; }
.vg__card[data-pos="2"] > * { opacity: .4; }
.vg__card > * { transition: opacity .5s ease; }
/* 4. the dots and the pause button under the front card; each dot has a 24px tap area (OLD: 9px) */
.vg__ctrl { display: flex; align-items: center; justify-content: center; gap: 14px; width: var(--vg-w); max-width: 100%; margin-top: 12px; padding-left: 14px; }
.vg__ctrl .vg__dots { width: auto; margin: 0; padding: 0; gap: 4px; }
.vg__dot { position: relative; margin: 0 4px; }
.vg__dot::before { content: ""; position: absolute; inset: -8px -4px; }
.vg__pause { appearance: none; border: 0; cursor: pointer; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; color: #c23b28;
  background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px rgba(240, 93, 73, .2), 0 6px 14px -8px rgba(92, 23, 14, .35); }
.vg__pause[hidden] { display: none; }
.vg__pause svg { width: 14px; height: 14px; fill: currentColor; }
.vg__pause .vg__ic-play, .vg__pause.is-paused .vg__ic-pause { display: none; }
.vg__pause.is-paused .vg__ic-play { display: block; }
.vg__pause:hover { color: #fff; background: var(--cy-cta-bg, #f05d49); }
.vg__pause:focus-visible { outline: 3px solid #f05d49; outline-offset: 3px; }
/* 5. phones: the filter row fades at its edges, so it reads as a row that scrolls */
@media (max-width: 999px) {
  .vg__filters { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--vg-gut), #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--vg-gut), #000 calc(100% - 40px), transparent 100%); }
}

/* D-286 (owner: "do what you think is best" on the filter placement): desktop - the filter pills move from above the heading
   into the right column, right above the cards they filter, so the heading is read first and the controls sit next to what
   they change. Phones already run heading, filters, cards. OLD (D-279): a centred row above the whole section. */
@media (min-width: 1000px) {
  .vg__in { grid-template-areas: "copy filters" "copy stage"; grid-template-rows: auto 1fr; row-gap: 18px; }
  .vg__copy { align-self: center; }
  .vg__filters { justify-content: flex-start; align-self: end; gap: 8px; padding-left: 14px; }
  .vg__filter { padding: 9px 16px; font-size: 14px; }
}
/* D-286: in the right column the six pills sit as a tidy 3 + 3 grid (equal column widths), not a row of five and a lone sixth */
@media (min-width: 1000px) {
  .vg__filters { display: grid; grid-template-columns: repeat(3, max-content); justify-content: start; gap: 8px; }
  .vg__filter { text-align: center; }
}

/* D-287 (owner, screenshot of the 3 + 3 pill grid: "not good, try differently for tabs"): underline tabs - one row of text
   tabs on a hairline, a coral bar sliding under the active one (front_js/voices-glass.js moves it). Same on every width; on a
   narrow screen the row scrolls sideways (edges fade, D-285) and the chosen tab scrolls into view.
   OLD: D-279 glass pills in a centred row; D-286 the same pills as a 3 + 3 grid above the cards. */
.vg .vg__filters { position: relative; display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 22px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; padding-top: 2px; padding-bottom: 0; box-shadow: inset 0 -1px 0 rgba(29, 35, 51, .1); }
.vg .vg__filters::-webkit-scrollbar { display: none; }
.vg .vg__filter { flex: none; padding: 10px 0 13px; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  font-size: 14.5px; font-weight: 600; color: #6b625c; white-space: nowrap; transform: none; transition: color .25s; }
.vg .vg__filter:hover { color: var(--vg-ink); transform: none; }
.vg .vg__filter.is-active { color: #c23b28; background: none; box-shadow: none; }
.vg .vg__filter:focus-visible { outline: 2px solid #f05d49; outline-offset: 2px; border-radius: 4px; }
.vg__ink { position: absolute; left: 0; bottom: 0; width: 0; height: 3px; border-radius: 3px; pointer-events: none;
  background: var(--cy-cta-bg, linear-gradient(95deg, #ff8b78, #f05d49 58%, #e5503c)); box-shadow: 0 2px 8px rgba(240, 93, 73, .45);
  transition: left .4s cubic-bezier(.2, .8, .2, 1), width .4s cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) { .vg__ink { transition: none; } }
@media (min-width: 1000px) { .vg .vg__filters { margin-left: 14px; padding-left: 0; align-self: end; } }
@media (max-width: 1279px) and (min-width: 1000px) { .vg .vg__filters { gap: 18px; } .vg .vg__filter { font-size: 14px; } }
/* D-287: the tab row scales with the screen so it fits on one line from about 1280px up; below that it scrolls, with faded edges */
@media (min-width: 1000px) { .vg .vg__filters { gap: clamp(12px, 1.25vw, 20px); } .vg .vg__filter { font-size: clamp(13.5px, 1.05vw, 14.5px); } }
@media (max-width: 1279px) and (min-width: 1000px) {
  .vg .vg__filters { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent 100%); }
}
/* D-304: "Trusted by 10,000+ Doctors" above the rating line */
.vg .vg__trusted { margin: 6px 0 -8px; font-size: 15px; color: var(--vg-ink); }
.vg .vg__trusted b { font-weight: 700; color: #c23b28; }

/* D-315 (council UX-29): the dots looked right but were 9px to tap. Each dot now has an invisible 24px tap area around it
   (a transparent ring), so fingers hit them; the drawn dot is unchanged. */
.vg__dot { position: relative; }
.vg__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 24px); height: 24px; transform: translate(-50%, -50%); }