/* ==========================================================================
   The Gowishy difference — Figma page-y 2267→3673
   Heading 836 @ rel-y 85 · ball 70 · pill 579x54 · grid 1264 (3x2, 400x395)
   ========================================================================== */

.gw-diff {
  position: relative;
  background: var(--gw-white);
  padding-top: 85px;
  padding-bottom: 46px;
  overflow: clip;
}

/* ---- decorations (Figma 91:14 line, 91:15 bracket) ---------------------- */
.gw-diff__drop,
.gw-diff__bracket { position: absolute; pointer-events: none; }

.gw-diff__drop {
  top: 251px;
  left: 50%;
  margin-left: calc(722px - 50%);
  width: 1px;
  height: 99px;
  background: var(--gw-line);
}
.gw-diff__bracket {
  top: 350px;
  left: 50%;
  margin-left: calc(260px - 50%);
  width: 950px;
  height: 198px;
  border: 1px solid transparent;
  border-image: linear-gradient(0deg, transparent, var(--gw-line)) 1;
}

/* ---- intro stack --------------------------------------------------------- */
.gw-diff__intro {
  position: relative;
  left: -4px;           /* Figma Frame 46 is at x=298; dead centre would be 302 */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 836px;
  max-width: calc(100% - var(--gw-gutter) * 2);
  margin-inline: auto;
  text-align: center;
}

.gw-diff__title {
  width: 100%;
  font-family: var(--gw-font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 50.4px;
  color: var(--gw-violet);
}
.gw-diff__title-b { color: var(--gw-black); }

.gw-diff__sub {
  margin-top: 8px;
  width: 619px;
  max-width: 100%;
  font-size: var(--gw-t-body);
  line-height: 24px;
  color: var(--gw-ink);
}

.gw-diff__ball {
  margin-top: 32px;
  width: 70px;
  height: 70px;
  --sphere-frames: 30;
  --sphere-dur: 4s;
}

.gw-diff__pill {
  margin-top: 32px;
  padding: 10px 24px;
  border: 1px solid var(--gw-line);
  background: var(--gw-white);
  font-family: var(--gw-font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: var(--gw-black);
}

/* ---- specialist grid ----------------------------------------------------- */
.gw-diff__grid {
  position: relative;
  z-index: 1;
  margin: 57px auto 0;
  width: 1264px;
  max-width: calc(100% - var(--gw-gutter) * 2);
  display: grid;
  grid-template-columns: repeat(3, 400px);
  justify-content: center;
  column-gap: 32px;
  row-gap: 33px;
  align-items: start;   /* comp cards are a fixed height; do not stretch rows */
}

.gw-diff__card {
  width: 400px;
  height: 395px;
  padding: 10px;
  border: 1px solid var(--gw-gray-100);
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--gw-white);
}

.gw-diff__card-visual {
  width: 378px;
  height: 213px;
  border-radius: var(--gw-r-card);
  object-fit: cover;
}

.gw-diff__card-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; }

.gw-diff__card-title {
  font-family: var(--gw-font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 31.2px;
  color: var(--gw-violet);
  background: linear-gradient(90deg, #000000 0%, #6D28D9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* background-clip:text paints only inside the box, so a descender hanging
     below a tight line-height gets sliced off. Extend the box downward and take
     the space straight back so layout is untouched. */
  padding-bottom: 0.24em;
  margin-bottom: -0.24em;
}

.gw-diff__card-desc {
  font-size: var(--gw-t-body);
  line-height: 19.1px;
  color: var(--gw-black);
}

.gw-diff__closer {
  margin: 42px auto 0;
  width: 1053px;
  max-width: calc(100% - var(--gw-gutter) * 2);
  text-align: center;
  font-size: 24px;
  line-height: 28.6px;
  color: var(--gw-black);
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1360px) {
  .gw-diff__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gw-diff__card { width: auto; }
  .gw-diff__card-visual { width: 100%; height: auto; aspect-ratio: 378 / 213; }
}

@media (max-width: 1023px) {
  .gw-diff { padding-top: 64px; }
  .gw-diff__card { height: auto; }
  .gw-diff__drop, .gw-diff__bracket { display: none; }
  .gw-diff__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gw-diff__title { font-size: 30px; line-height: 40px; }
  .gw-diff__closer { font-size: 20px; line-height: 28px; }
}

@media (max-width: 720px) {
  .gw-diff__grid { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .gw-diff__card { height: auto; }
  .gw-diff__title { font-size: 24px; line-height: 32px; }
  .gw-diff__pill { font-size: 18px; line-height: 26px; }
  .gw-diff__closer { font-size: 17px; line-height: 25px; }
}

/* ==========================================================================
   Motion — gated on .gw-motion so the static comp (and ?nomotion, and
   reduced-motion) keeps the lines drawn exactly as designed.
   ========================================================================== */

.gw-motion .gw-diff:hover .gw-diff__ball { --sphere-dur: 2.2s; }

/* at rest the connectors are retracted; hovering the section grows them
   down from the ball and outward to frame the six cards */
.gw-motion .gw-diff__drop {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 480ms var(--gw-ease);
}
.gw-motion .gw-diff:hover .gw-diff__drop { transform: scaleY(1); }

.gw-motion .gw-diff__bracket {
  clip-path: inset(0 50% 100% 50%);
  transition: clip-path 720ms var(--gw-ease) 260ms;   /* after the drop lands */
}
.gw-motion .gw-diff:hover .gw-diff__bracket { clip-path: inset(0 0 0 0); }