/* ==========================================================================
   Trust — "People trust what looks right at first glance."
   Statement | Sunny the mascot | "earn their trust" pill, on --ice.
   The wrapper is a short scroll track; the section is sticky inside it so it
   can slide over the end of the pinned About section (about's wrapper has a
   negative bottom margin) and hold for a beat while the entrance scrubs.
   ========================================================================== */

.s-trust-wrap {
  --trust-h: max(var(--vhx), 900rem);
  position: relative;
  height: calc(var(--trust-h) * 1.1);
  background: var(--ice);
}
.s-trust {
  position: sticky;
  top: 0;
  min-height: var(--trust-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 190rem 0 150rem;
  background: var(--ice);          /* opaque: covers About's final sentence */
  color: var(--ink);
  overflow: hidden;
}

/* three columns (crency uses 33/33/33; our CTA label is longer, so the
   statement column gives a little of its slack to the pill), all centred
   on the mascot */
.trust__row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* ---------- Statement ---------- */
.trust__title {
  --wipe: 0;                       /* highlighter progress, tweened by trust.js */
  flex: 0 0 31%;
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--h3);
  line-height: .92;
  letter-spacing: -.03em;
  text-align: center;
  color: var(--ink);
}
/* cyan highlighter marker behind "what looks right" (wipes in left → right) */
.trust__mark {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}
.trust__mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -3.5%;
  top: -3%;
  width: 107%;
  height: 120%;
  border-radius: 15rem;
  background: var(--cyan);
  transform: scaleX(var(--wipe));
  transform-origin: 0 50%;
}

/* ---------- Mascot ---------- */
.trust__mascot {
  flex: 0 0 34%;
  position: relative;
  z-index: 2;                      /* title + pill appear to slide out from behind it */
}
.trust__squash { transform-origin: 50% 100%; }
.trust__sun {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 682 / 650;
  overflow: visible;
}

/* ---------- CTA: pill + round arrow (crency's arrow swap on hover) ---------- */
.trust__cta-cell {
  flex: 0 0 35%;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
}
.trust__cta {
  --fs: 58rem;
  --pad-y: 38rem;
  --arrow: calc(2 * var(--pad-y) + .7 * var(--fs));   /* circle = pill height */
  --arrow-ease: cubic-bezier(.645, .045, .355, 1);
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--fs);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: .92;
  white-space: nowrap;
  color: var(--ink);
  border-radius: 210rem;
}
.trust__pill {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  padding: var(--pad-y) 48rem;
  border-radius: 210rem;
  background: var(--cyan);
  line-height: .7;
}
.trust__label { position: relative; display: block; }
/* liquid fill: rises from below on enter, leaves through the top on exit */
.trust__fill {
  position: absolute;
  z-index: -1;
  left: -14%;
  bottom: -400%;
  width: 125%;
  height: 400%;
  border-radius: 100%;
  background: var(--yellow);
  pointer-events: none;
  transform: translateY(0);
  transition: transform .5s cubic-bezier(.25, .46, .45, .94);
}
.trust__cta.is-hover .trust__fill,
.trust__cta:focus-visible .trust__fill { transform: translateY(-50%); }
.trust__cta.is-out .trust__fill { transform: translateY(-125%); transition-duration: .4s; }
.trust__cta.is-reset .trust__fill { transform: translateY(0) !important; transition: none !important; }

.trust__arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--arrow);
  height: var(--arrow);
  border-radius: 50%;
  background: var(--ink);
  color: var(--ice);
  overflow: hidden;
  transition: transform .5s var(--arrow-ease), width .5s var(--arrow-ease), height .5s var(--arrow-ease);
}
.trust__arrow svg {
  width: 46%;
  height: 46%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* the "in" arrow points → and waits collapsed on the left */
.trust__arrow--in { width: 0; height: 0; transform: rotate(-90deg); }
.trust__arrow--in svg { transform: rotate(45deg); }
.trust__cta:focus-visible .trust__arrow--in { width: var(--arrow); height: var(--arrow); transform: rotate(0); }
.trust__cta:focus-visible .trust__arrow--out { width: 0; height: 0; transform: rotate(90deg); }
@media (hover: hover) {
  .trust__cta:hover .trust__arrow--in { width: var(--arrow); height: var(--arrow); transform: rotate(0); }
  .trust__cta:hover .trust__arrow--out { width: 0; height: 0; transform: rotate(90deg); }
}
.trust__cta:focus-visible { outline-color: var(--ink); outline-offset: 8rem; }

/* ---------- Tablet / phone: stacked, no pin ---------- */
@media (max-width: 991px) {
  .s-trust-wrap { height: auto; }
  .s-trust { position: relative; min-height: 0; padding: 80rem 0 90rem; }
  .trust__row { flex-direction: column; justify-content: center; gap: 48rem; }
  .trust__title { flex: none; font-size: 60rem; max-width: 640rem; }
  .trust__mascot { flex: none; width: 400rem; }
  .trust__cta-cell { flex: none; justify-content: center; width: 100%; }
  .trust__cta { --fs: 40rem; --pad-y: 36rem; }
  .trust__pill { padding: var(--pad-y) 50rem; }
}
@media (max-width: 743px) {
  .s-trust { padding: 70rem 0 80rem; }
  .trust__row { gap: 26rem; }
  .trust__title { font-size: 44rem; max-width: 358rem; }
  .trust__mascot { width: 300rem; }
  .trust__cta { --fs: 22rem; --pad-y: 22rem; }
  .trust__pill { padding: var(--pad-y) 32rem; }
}

/* ---------- Reduced motion: final, readable state ---------- */
html.reduced-motion .trust__title { --wipe: 1; }