
.mel-trust-eyebrow-row {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; margin-bottom: 18px;
}
.mel-trust-rule {
  height: 1px; flex: 1 1 0; max-width: 120px;
  background: linear-gradient(90deg, transparent, rgba(148,163,184,.25));
}
.mel-trust-rule--r { transform: rotate(180deg); }
.mel-trust-eyebrow {
  max-width: 38ch; font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 10px; font-weight: 600; line-height: 1.7;
  letter-spacing: .19em; text-transform: uppercase; text-align: center;
  color: var(--mel-text-tertiary, #a7b2c6);
}

/* The row: N equal slots on a hairline baseline. */
.mel-sig { position: relative; padding-block: 10px 14px; container-type: inline-size; }
.mel-sig-row {
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  align-items: center; min-height: 72px;
  animation: mel-sig-in .5s ease both;
}
@keyframes mel-sig-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.mel-sig-base {
  position: absolute; left: 4%; right: 4%; bottom: 6px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148,163,184,.28) 12%, rgba(148,163,184,.28) 88%, transparent);
}
.mel-sig-pulse {
  position: absolute; left: 4%; bottom: 3px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
  background: #9185FA; box-shadow: 0 0 10px 2px rgba(145,133,250,.55);
  animation: mel-sig-run 5.2s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes mel-sig-run {
  0% { transform: translateX(0); opacity: 0; }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { transform: translateX(92cqw); opacity: 0; }
}

/* A slot: grey wordmark with its colour twin stacked on top. */
.mel-trust-logo {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 64px; margin-inline: 6px; text-decoration: none; border-radius: 4px;
}
.mel-trust-logo:focus-visible { outline: 2px solid var(--mel-text-secondary, #9185fa); outline-offset: 4px; }
.mel-sig-layer { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.mel-sig-layer.color { position: absolute; inset: 0; opacity: 0; }
.mel-trust-img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 34px;
  object-fit: contain; user-select: none; -webkit-user-drag: none;
}
/* A slot never lets its wordmark(s) spill into the next one. */
.mel-trust-logo, .mel-sig-layer { min-width: 0; overflow: hidden; }
.mel-sig-layer .mel-partner-wordmarks { display: flex; align-items: center; gap: 10px; max-width: 100%; min-width: 0; }
.mel-sig-layer .mel-partner-wordmarks .mel-trust-img { min-width: 0; flex: 0 1 auto; }
.mel-sig-layer.grey .mel-trust-img { filter: grayscale(1); opacity: .7; }
/* The wake: the colour twin brightens as the pulse passes this slot. */
.mel-sig-layer.color {
  animation: mel-sig-wake 5.2s ease-in-out infinite;
  animation-delay: calc(5.2s * ((var(--i) + .5) / var(--n) - .09));
}
@keyframes mel-sig-wake { 0%, 20%, 100% { opacity: 0; } 8% { opacity: 1; } }
.mel-trust-logo:hover .mel-sig-layer.color,
.mel-trust-logo:focus-visible .mel-sig-layer.color { opacity: 1; animation: none; }
.mel-sig:hover :is(.mel-sig-pulse, .mel-sig-layer.color),
.mel-sig:focus-within :is(.mel-sig-pulse, .mel-sig-layer.color) { animation-play-state: paused; }
:root:not(.light) .mel-trust-img[src="/partners/modelrush_horizontal_transparent.png"] { filter: invert(1); }
:root:not(.light) .mel-sig-layer.grey .mel-trust-img[src="/partners/modelrush_horizontal_transparent.png"] { filter: invert(1) grayscale(1); }
:root:not(.light) .mel-trust-img[src="/partners/beejtech_horizontal_transparent_light.svg"] { content: url("/partners/beejtech_horizontal_transparent_dark.svg"); }
:root:not(.light) .mel-trust-img[src="/partners/writingmate_horizontal_light.svg"] { content: url("/partners/writingmate_horizontal_dark.webp"); }

.mel-trust-seeall {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 8px 0;
  color: var(--mel-text-secondary, #bac6d8);
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 10px; font-weight: 600; line-height: 1.5;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  transition: color 200ms ease;
}
.mel-trust-seeall svg { transition: transform 200ms ease; }
.mel-trust-seeall:hover, .mel-trust-seeall:focus-visible { color: var(--mel-text-primary, #f0f4fa); }
.mel-trust-seeall:focus-visible { outline: 2px solid #9185fa; outline-offset: 4px; }
.mel-trust-seeall:hover svg { transform: translateX(3px); }

/* Trusted by + Secured by side by side on desktop, split by a hairline
   (the wrapper lives in LandingPage/index.tsx). A screen of its own on every
   width, content centred (phones: small-viewport height, stable while the
   URL bar moves). */
.mel-trust-duo { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.mel-trust-duo-rule { display: none; }
@media (min-width: 1024px) {
  .mel-trust-duo {
    display: grid; grid-template-columns: minmax(0, 2fr) 1px minmax(0, 1fr);
    align-items: center; column-gap: clamp(32px, 4vw, 64px);
    max-width: 1280px; margin: 0 auto; padding: 44px 24px 52px;
    /* Its own full screen (dynamic viewport), content centred in it. */
    min-height: 100dvh; align-content: center;
  }
  .mel-trust-duo > section { padding: 0 !important; }
  .mel-trust-duo-rule { display: block; align-self: stretch; background: linear-gradient(180deg, transparent, rgba(148,163,184,.25), transparent); }
}
@media (max-width: 600px) {
  .mel-trust-eyebrow-row { gap: 12px; margin-bottom: 10px; }
  .mel-trust-eyebrow { font-size: 9px; letter-spacing: .14em; }
  .mel-trust-logo { height: 56px; }
  .mel-trust-img { max-height: 28px; }
}
/* Phones: a continuous rolling bar (two equal segments, -50% loop). Each
   wordmark keeps its optical size; the gap, not a fixed slot, spaces them, so
   long and short marks never collide. */
@keyframes mel-trust-roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mel-roll {
  overflow: hidden; padding-block: 8px;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mel-roll-track { display: flex; width: max-content; align-items: center; animation: mel-trust-roll var(--mel-roll-dur, 40s) linear infinite; }
.mel-roll-seg { display: flex; flex-shrink: 0; align-items: center; gap: 40px; padding-inline: 20px; }
.mel-roll .mel-trust-logo { height: 52px; margin: 0; overflow: visible; }
.mel-roll .mel-sig-layer.grey .mel-trust-img { filter: grayscale(1); opacity: .75; }
.mel-roll:active .mel-roll-track, .mel-roll:focus-within .mel-roll-track { animation-play-state: paused; }
/* Two-wordmark partners (Qwen + Alibaba Cloud) stay side by side in the bar:
   the shared wordmark CSS stacks them on phones, which breaks a marquee row. */
.mel-roll .mel-partner-wordmarks { flex-direction: row !important; gap: 12px !important; }
.mel-roll .mel-partner-wordmarks::after { width: 1px !important; height: 26px !important;
  background: linear-gradient(transparent, var(--mel-text-tertiary, #8090aa) 25%, var(--mel-text-tertiary, #8090aa) 75%, transparent) !important; }
@media (prefers-reduced-motion: reduce) {
  .mel-roll { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .mel-roll-track { animation: none; }
  .mel-roll-seg[aria-hidden="true"] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mel-sig-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; animation: none; }
  .mel-sig-pulse, .mel-sig-layer.color { display: none; }
  .mel-trust-seeall, .mel-trust-seeall svg { transition: none; }
  .mel-trust-seeall:hover svg { transform: none; }
}
