.wol{
  --wol-ink:       #000;
  --wol-ink-fade:  #6e7c8e;
  --wol-body:      #525252;
  --wol-card:      #f7f7f7;
  --wol-star:      #f6b429;

  --wol-heart-w:   1040px; /* full heart width — up from 800 */
  --wol-heart-top: 96;     /* Figma px from section top to the heart's lobes */
  --wol-glow:      .65;    /* glow strength, 1 = the raw Figma values */
  --wol-fade-top:  330;    /* Figma px where the heart starts dissolving */

  --wol-delay:     .15s;   /* pure white for this long */
  --wol-rise:      .7s;    /* then the gradient comes up */
  --wol-ease:      cubic-bezier(.22,.68,.24,1);
}

.wol *,.wol *::before,.wol *::after{ box-sizing:border-box; }

.wol{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#fff;
  padding-bottom:clamp(28px,2.9vw,40px);
  font-family:'Geist','Geist Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;

  /* --wol-b == 1 Figma pixel, so the glow keeps its proportions
     from 320px wide up to the 1387px design width */
  container-type:inline-size;
  --wol-b:1px;
}
@supports (width:1cqw){ .wol{ --wol-b:min(1px, 0.0721cqw); } }   /* 1 / 1387, capped */

/* ---------- heart ---------------------------------------------------- */
.wol__glow{
  position:absolute; z-index:0;
  left:50%; top:calc(var(--wol-heart-top) * var(--wol-b));
  width:min(74%, var(--wol-heart-w));
  transform:translateX(-50%);
  aspect-ratio:1100/935.008;
  pointer-events:none;
}
.wol__stage{ position:absolute; inset:0; }   /* the heart never moves */

.wol-heart{
  position:absolute; inset:0;
  filter:
    drop-shadow(0 0 calc(64  * var(--wol-b)) rgba(0,145,255,0))
    drop-shadow(0 0 calc(134 * var(--wol-b)) rgba(144,2,209,0));
}
.wol-heart svg{ display:block; width:100%; height:100%; }
.wol-heart__tint{ opacity:0; }

.wol.is-lit .wol-heart{
  filter:
    drop-shadow(0 calc(-36 * var(--wol-b)) calc(64  * var(--wol-b)) rgba(0,145,255,calc(.40 * var(--wol-glow))))
    drop-shadow(0 calc(-70 * var(--wol-b)) calc(134 * var(--wol-b)) rgba(144,2,209,calc(.25 * var(--wol-glow))));
  transition:filter var(--wol-rise) var(--wol-ease) var(--wol-delay);
}
.wol.is-lit .wol-heart__tint{
  opacity:1;
  transition:opacity var(--wol-rise) var(--wol-ease) var(--wol-delay);
}

.wol__fade{
  position:absolute; z-index:1;
  left:0; right:0;
  top:calc(var(--wol-fade-top) * var(--wol-b));
  bottom:0;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 30%);
  pointer-events:none;
}

/* ---------- heading -------------------------------------------------- */
.wol__inner{ position:relative; z-index:2; }
.wol__head{
  padding-top:clamp(150px,23vw,330px);
  display:flex; flex-direction:column; align-items:center; gap:16px;
  text-align:center;
}
.wol__title{
  margin:0; width:min(579px,90vw);
  font-weight:500; font-size:clamp(30px,3.46vw,48px);
  line-height:1.2; letter-spacing:-.0417em;
  background:linear-gradient(180deg,var(--wol-ink) 0%,var(--wol-ink-fade) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wol__sub{
  margin:0; width:min(434px,86vw);
  font-weight:400; font-size:clamp(15px,1.3vw,18px);
  line-height:1.333; color:var(--wol-body);
}

/* ---------- marquee -------------------------------------------------- */
.wol__rail{ position:relative; margin-top:clamp(40px,5.48vw,76px); --wol-gap:clamp(14px,2.09vw,29px); }
.wol__track{ display:flex; gap:var(--wol-gap); width:max-content; animation:wolMarquee 70s linear infinite; }
.wol__set{ display:flex; gap:var(--wol-gap); }
@keyframes wolMarquee{ to{ transform:translateX(calc(-50% - var(--wol-gap)/2)) } }
.wol__rail:hover .wol__track,
.wol__rail:focus-within .wol__track{ animation-play-state:paused; }

/* Figma "Rectangle 6853/6854" */
.wol__rail::before,.wol__rail::after{
  content:''; position:absolute; top:0; bottom:0; z-index:2;
  width:clamp(48px,11.6vw,161px); pointer-events:none;
}
.wol__rail::before{ left:0;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.wol__rail::after { right:0; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

.wol-card{
  flex:none; width:clamp(280px,40.4vw,561px);
  background:var(--wol-card); border-radius:20px;
  padding:clamp(20px,2.3vw,32px);
  display:flex; flex-direction:column; gap:16px;
}
.wol-card__title{ margin:0; font-weight:500; font-size:clamp(16px,1.3vw,18px); line-height:1.333; color:var(--wol-ink); overflow-wrap:anywhere; }
.wol-card__body { margin:0; font-weight:400; font-size:clamp(14px,1.15vw,16px); line-height:1.5; color:var(--wol-body); overflow-wrap:anywhere; }

/* ---------- ratings, in each platform's own currency -------------------
   Trustpilot scores in green tiles, G2 in its own red-orange stars. Using one
   generic gold star for both would misreport where the review came from, and
   the platform is half the credibility. Unearned positions stay but go grey,
   so a 4 reads as a 4 rather than as a short row. */
.wol-card__src{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.wol-rate{ display:flex; align-items:center; gap:3px; flex:none; }
.wol-tile{
  width:18px; height:18px; border-radius:2px; flex:none;
  display:grid; place-items:center; background:#00B67A;
}
.wol-tile--off{ background:#DCDCE6; }
.wol-tile svg{ display:block; width:12.5px; height:12.5px; fill:#fff; }
.wol-rate--g2{ gap:2px; }
.wol-g2s{ width:16px; height:16px; display:grid; place-items:center; flex:none; }
.wol-g2s svg{ display:block; width:16px; height:16px; fill:#FF492C; }
.wol-g2s--off svg{ fill:#DCDCE6; }
/* ---------- the line that carries the point ---------------------------
   A marquee gives each card a couple of seconds in view, which is not long
   enough to read 60 words. One phrase per quote is marked so the eye lands
   on the claim and the rest reads as the context around it — the reviewer's
   own words either way, nothing is cut. */
.wol-hl{
  background:linear-gradient(180deg, rgba(20,99,245,.09), rgba(20,99,245,.13));
  color:var(--wol-ink); font-weight:500;
  border-radius:4px; padding:.1em .22em; margin:0 -.06em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.wol-card__plat{ font-size:12px; font-weight:500; letter-spacing:.01em; color:var(--wol-body); opacity:.65; }
.wol-card__by{
  margin-top:auto; padding-top:4px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:13px; font-weight:400; color:var(--wol-body);
}
.wol-card__who{ opacity:.75; }
/* the platforms both mark a review as bought-and-verified; saying so is the
   difference between a quote and a quote you can go and check */
.wol-card__badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:12px; color:#1E9E6A; opacity:.9;
}
.wol-card__tick{ width:13px; height:13px; color:#1E9E6A; flex:none; }

/* ---------- reduced motion ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .wol.is-lit .wol-heart,
  .wol.is-lit .wol-heart__tint{ transition:none; }
  .wol__track{ animation:none; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .wol__set[aria-hidden="true"]{ display:none; }
}