.trust-variant {
  --trust-gold: #f8d47f;
  --trust-gold-edge: #bf8c38;
  --trust-surface: var(--color-surface-card-warm);
  --trust-tint: color-mix(in srgb, var(--color-surface-tone-07) 55%, var(--paper));
  margin-block: 30px 0;
  color: var(--ink);
}

.trust-variant-switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}

.trust-variant-switcher > span { margin-right: 6px; color: var(--muted); font-size: 11px; }
.trust-variant-switcher a,
.trust-filter button {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 11px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: transparent;
  color: var(--ink);
  font: 500 12px/1.3 var(--sans);
}
.trust-variant-switcher a:hover, .trust-filter button:hover { background: var(--trust-tint); }
.trust-variant-switcher a[aria-current="page"], .trust-filter button[aria-pressed="true"] {
  border-color: var(--line);
  background: var(--trust-tint);
  color: var(--teal);
}

.trust-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  min-width: 0;
  padding: 12px;
  border-radius: 14px;
  color: var(--ink);
}
.trust-item:is(a):hover .trust-title { text-decoration: underline; text-underline-offset: 3px; }
.trust-icon {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  background: var(--color-surface-tone-07);
  color: var(--teal);
}
.trust-icon svg { width: 18px; height: 18px; }
.trust-copy { display: grid; gap: 3px; min-width: 0; }
.trust-title { font: 600 14px/1.3 var(--sans); }
.trust-detail { color: var(--muted); font: 400 12px/1.4 var(--sans); }
.trust-discount { background: var(--trust-gold); border: 1px solid var(--trust-gold-edge); }
.trust-discount .trust-icon { background: color-mix(in srgb, var(--paper) 58%, var(--trust-gold)); }
.trust-discount .trust-detail { color: var(--ink); }

/* The line shares a single frame and uses quiet separators. */
.trust-variant--line .trust-list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--trust-surface);
}
.trust-variant--line .trust-list > li + li:not(:last-child) { border-inline-start: 1px solid var(--line); }
.trust-variant--line .trust-item:not(.trust-discount) .trust-icon { background: transparent; }
.trust-variant--line .trust-item { border-radius: 11px; }

/* Soft tiles put a small visual marker above the text. */
.trust-variant--tiles .trust-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.trust-variant--tiles .trust-item { align-items: flex-start; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); background: var(--trust-tint); }
.trust-variant--tiles .trust-icon { flex-basis: 30px; width: 30px; height: 30px; border-radius: 9px; }
.trust-variant--tiles .trust-discount { background: var(--trust-gold); border-color: var(--trust-gold-edge); }

.trust-spotlight {
  --spotlight-mint: #e7f4ed;
  --spotlight-mint-active: #cde7d9;
  --spotlight-mint-border: #91bba6;
  display: grid;
  grid-template-columns: clamp(210px, 23%, 254px) minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 34px);
  align-items: stretch;
}
.spotlight-ticket {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--spotlight-mint-border);
  border-radius: 16px;
  background: linear-gradient(135deg, #eff8f3, var(--spotlight-mint-active));
}
.spotlight-ticket .trust-marquee-icon {
  width: 44px;
  height: 44px;
  border: 1px solid var(--spotlight-mint-border);
  background: #f2faf5;
}
.spotlight-ticket-copy {
  min-width: 0;
  overflow-wrap: anywhere;
}
.spotlight-ticket-label {
  display: block;
  color: #285744;
  font: 700 10px/1.4 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.spotlight-ticket .trust-title { display: block; margin-top: 2px; font: 400 34px/1.05 var(--serif); }
.spotlight-ticket .trust-detail { display: block; margin-top: 4px; color: var(--ink); font-size: 13px; }
.spotlight-highlights { min-width: 0; }
.spotlight-highlights-head { margin-bottom: 6px; }
.spotlight-highlights-head h2 { margin: 0; font: 400 clamp(20px, 2.2vw, 25px)/1.12 var(--serif); }
.spotlight-viewport {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  border-radius: 12px;
}
.spotlight-viewport::-webkit-scrollbar { display: none; }
.spotlight-slides {
  --spotlight-gap: 10px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(165px, 29%, 235px);
  gap: var(--spotlight-gap);
  margin: 0;
  padding: 3px 0;
  list-style: none;
}
.spotlight-slides > li { min-width: 0; }
.spotlight-slides .trust-marquee-badge {
  gap: 10px;
  width: 100%;
  height: 100%;
  min-height: 60px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: none;
  cursor: pointer;
}
.spotlight-slides .trust-marquee-badge:hover { transform: none; border-color: var(--teal); background: var(--trust-tint); }
.spotlight-slides .trust-marquee-badge:hover .trust-marquee-icon { transform: none; }
.spotlight-slides .trust-marquee-icon { width: 32px; height: 32px; border-radius: 9px; background: var(--color-surface-tone-07); }
.spotlight-slides .trust-marquee-icon svg { width: 17px; height: 17px; }
.spotlight-slides .trust-marquee-copy { min-width: 0; gap: 2px; white-space: normal; overflow-wrap: anywhere; }
.spotlight-slides .trust-marquee-copy strong { font: 650 13px/1.2 var(--sans); letter-spacing: 0; }
.spotlight-slides .trust-marquee-copy > span { font: 500 11px/1.25 var(--sans); }
.spotlight-slides .trust-marquee-badge--discount { border-color: var(--spotlight-mint-border); background: var(--spotlight-mint); }
.spotlight-slides .trust-marquee-badge--discount .trust-marquee-icon { background: #d5eade; }
.spotlight-slides .trust-marquee-badge--discount:hover,
.spotlight-slides [aria-pressed="true"] { border-color: #54856d; background: var(--spotlight-mint-active); }
.spotlight-slides .trust-marquee-badge--discount:hover .trust-marquee-icon { color: var(--teal); }
.trust-spotlight :is(button, a, [tabindex]):focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.spotlight-slides .trust-marquee-badge:focus-visible { outline-offset: -3px; }

@media (any-pointer: fine) {
  .spotlight-viewport { cursor: grab; user-select: none; }
  .spotlight-slides .trust-marquee-badge { cursor: grab; }
  .spotlight-viewport[data-dragging],
  [data-dragging] .trust-marquee-badge { cursor: grabbing; }
}

@media (prefers-reduced-motion: reduce) {
  .spotlight-slides .trust-marquee-badge, .spotlight-slides .trust-marquee-icon { transition: none; }
}

.trust-panel { padding: 12px; border: 1px solid var(--line); border-radius: 17px; background: var(--trust-surface); }
.trust-panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.trust-panel-head h2 { margin: 0; font: 400 24px/1.15 var(--serif); }
.trust-filter { display: flex; flex-wrap: wrap; gap: 4px; }
.trust-variant--filter .trust-list { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }
.trust-variant--filter .trust-item { padding: 8px 10px; background: var(--trust-tint); }
.trust-variant--filter .trust-discount { background: var(--trust-gold); }

.trust-rail-controls { display: flex; gap: 6px; }
.trust-rail-controls button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--trust-surface);
  color: var(--teal);
  font: 500 18px/1 var(--sans);
  cursor: pointer;
}
.trust-rail-controls button:disabled { opacity: .4; cursor: default; }
.trust-rail-controls button:not(:disabled):hover { background: var(--trust-tint); }
.trust-rail {
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 30px) / 4);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 4px 4px 9px;
  scroll-padding-inline: 4px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.trust-rail > li { scroll-snap-align: start; }
.trust-rail .trust-item { border: 1px solid var(--line); background: var(--trust-surface); }
.trust-rail .trust-discount { border-color: var(--trust-gold-edge); background: var(--trust-gold); }

@media (max-width: 1040px) {
  .trust-variant--line .trust-list, .trust-variant--tiles .trust-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .trust-variant--line .trust-list > li + li:not(:last-child) { border: 0; }
  .trust-rail { grid-auto-columns: calc((100% - 20px) / 3); }
}
@media (max-width: 680px) {
  .trust-variant { margin-top: 22px; }
  .trust-variant--line .trust-list, .trust-variant--tiles .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-variant--line .trust-list > li:last-child, .trust-variant--tiles .trust-list > li:last-child { grid-column: 1 / -1; }
  .trust-spotlight { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .spotlight-ticket { padding-block: 10px; }
  .spotlight-ticket .trust-title { font-size: 30px; }
  .trust-variant--filter .trust-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr)); }
  .trust-rail { grid-auto-columns: min(86%, 280px); }
  .trust-item { padding: 9px; gap: 7px; }
  .trust-icon { flex-basis: 28px; width: 28px; height: 28px; }
  .trust-title { font-size: 13px; }
}

@media (max-width: 680px), (max-width: 950px) and (hover: none) and (pointer: coarse) {
  .spotlight-slides { grid-auto-columns: calc((100% - var(--spotlight-gap)) * 2 / 3); }
  .spotlight-slides > li { scroll-snap-align: start; }
  .spotlight-viewport:not([data-dragging]) { scroll-snap-type: x mandatory; }
}