/* Vetfluence · trust.css — the homepage "three chances to earn trust" section.
   Remove with the <link> to this file and the <!-- trust:start --> block in
   index.html (or run undo.py --copy). */
.trust__meter { position: relative; display: flex; align-items: center; gap: 14px; margin: 34px 0 26px; }
.trust__meter span { font: 600 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--slate-light, #8fb7c6); }
.trust__meter i { position: relative; flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.trust__meter i::after { content: ""; position: absolute; inset: 0; transform-origin: 0 50%; border-radius: inherit; background: linear-gradient(90deg, #6da894, #8fd0b6); box-shadow: 0 0 12px rgba(143, 208, 182, .5); }

.trust__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.trust__step { position: relative; display: grid; align-content: start; gap: 10px; padding: 26px 24px 28px; border-radius: var(--r-lg, 18px); background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 26px 50px -34px rgba(0, 0, 0, .7); }
.trust__n { font: 800 clamp(40px, 4.4vw, 56px)/.85 var(--f-display); letter-spacing: -.03em; color: var(--slate-light, #8fb7c6); }
.trust__when { margin: 0; font: 600 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #8fd0b6; }
.trust__step p:last-child { margin: 0; color: var(--muted-ink, #b6c6cc); line-height: 1.55; }
.trust__src { margin-top: 28px; max-width: 72ch; color: var(--invert-muted); border-color: var(--invert-line); }
.trust__src a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .trust__steps { grid-template-columns: 1fr; } }

/* The meter fills as the section scrolls through the window, where the
   browser can tie an animation to scroll. Elsewhere it simply shows full. */
@keyframes trust-fill { from { transform: scaleX(.04); } to { transform: scaleX(1); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .trust { view-timeline: --trust block; }
    .trust__meter i::after { animation: trust-fill linear both; animation-timeline: --trust; animation-range: entry 35% cover 62%; }
    /* each chance lights as the meter reaches it */
    @keyframes trust-lit { from { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 26px 50px -34px rgba(0, 0, 0, .7); } to { box-shadow: inset 0 0 0 1.5px rgba(143, 208, 182, .55), 0 26px 50px -30px rgba(0, 0, 0, .75); } }
    .trust__step { animation: trust-lit linear both; animation-timeline: --trust; }
    .trust__step:nth-child(1) { animation-range: entry 40% cover 42%; }
    .trust__step:nth-child(2) { animation-range: entry 70% cover 52%; }
    .trust__step:nth-child(3) { animation-range: cover 45% cover 62%; }
  }
}