/* WHAT YOU GET / "How it works" — sticky stacked cards.
   Every metric here is measured: docs/research/components/what-you-get.spec.md
   Breakpoints match Framer's: desktop >=1280, tablet 810-1023.98, mobile <=809.98. */

.gf-wyg{
  --wyg-card-r:16px;
  --wyg-pin:120px;
  --wyg-panel:rgba(15,15,15,.85);
  --wyg-hair:rgba(255,255,255,.1);
  --wyg-ease-in:cubic-bezier(.2,.05,.2,1);
  --wyg-dur:.7s;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:0 40px;
  /* Full bleed. This cap put the whole SECTION in a 1600px box, so on any screen wider than that
     its ground stopped 1600px across and the page went black down both sides. The content keeps
     its own 1080 column inside, so only the ground moves. */
  margin-inline:auto;
  position:relative;
}
.gf-wyg__inner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:64px;
  padding:80px 0 0;
  width:100%;
  max-width:var(--container);
  position:relative;
}

/* ---------------------------------------------------------------- head */
.gf-wyg__head{display:flex;align-items:flex-end;gap:36px;width:100%}
.gf-wyg__head-l{flex:1 0 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:24px}
.gf-wyg__head-r{flex:1 0 0;display:flex;justify-content:flex-end;align-items:center;padding:0 0 4px 32px}

.gf-wyg__title{
  font-family:var(--font);
  font-size:40px;line-height:54px;letter-spacing:-1.6px;font-weight:500;
  color:var(--white);
  text-wrap:balance;
}
.gf-wyg__title-soft{color:var(--ink-65)}

.gf-wyg__lead{
  width:100%;max-width:350px;
  font-size:16px;line-height:24px;letter-spacing:-.16px;
  color:var(--ink-80);
  text-wrap:balance;
}

/* ---------------------------------------------------------------- chip */
.gf-wyg-chip{
  display:inline-flex;align-items:center;justify-content:center;
  gap:12px;
  padding:4px 16px;
  height:30px;
  background:var(--wyg-hair);
  border-radius:393px;
  position:relative;
  overflow:hidden;
  flex:0 0 auto;
}
/* only the section eyebrow carries the hairline ring (chips[0] border-width 1px, cards 0px) */
.gf-wyg-chip--outlined::after{
  content:"";position:absolute;inset:0;
  border:1px solid var(--wyg-hair);
  border-radius:393px;
  pointer-events:none;
}
.gf-wyg-chip__dot{
  width:7px;height:7px;flex:0 0 auto;
  border-radius:215px;
  background:var(--ink);
  animation:gf-wyg-pulse 2.04s linear infinite;
}
@keyframes gf-wyg-pulse{0%,100%{opacity:0}50%{opacity:1}}
.gf-wyg-chip__label{
  font-size:14px;line-height:21px;letter-spacing:-.28px;
  color:var(--ink-80);
  white-space:pre;
}

/* --------------------------------------------------------------- stack */
.gf-wyg__stack{position:relative;width:100%}
.gf-wyg__triggers{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;
  overflow:clip;
  pointer-events:none;
}
.gf-wyg__triggers>i{flex:1 0 0;display:block}

.gf-wyg__cards{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:48px;
  width:100%;
  position:relative;
  margin:0;padding:0;list-style:none;
}

/* ---------------------------------------------------------------- card */
.gf-wyg-card{
  position:sticky;top:var(--wyg-pin);
  z-index:1;
  display:flex;
  width:100%;
  border-radius:var(--wyg-card-r);
}
/* the halo: a second 1px ring 8px outside the card. Card 1 only, as measured. */
.gf-wyg-card__halo{
  position:absolute;inset:-8px;z-index:0;
  border-radius:24px;
  overflow:hidden;
  background:#000;
  pointer-events:none;
}
.gf-wyg-card__halo::after{
  content:"";position:absolute;inset:1px;
  border-radius:23px;
  background:var(--panel-3);
}
.gf-wyg-card__inner{
  flex:1 0 0;
  position:relative;
  display:flex;
  background:var(--wyg-panel);
  border-radius:var(--wyg-card-r);
  overflow:clip;
  transform-origin:50% 50%;
  will-change:transform,opacity;
}
/* the card border: 1px of rgba(255,255,255,.1), lit by the spotlight underneath */
.gf-wyg-card__border{
  position:absolute;inset:0;z-index:0;
  border-radius:var(--wyg-card-r);
  overflow:hidden;
  background:var(--wyg-hair);
  pointer-events:none;
}
.gf-wyg-card__border::after{
  content:"";position:absolute;inset:1px;
  border-radius:15px;
  background:var(--wyg-panel);
}
.gf-wyg-spot{
  position:absolute;inset:0;
  opacity:0;
  pointer-events:none;
  will-change:opacity,background;
  background:radial-gradient(735px at 0 0, rgba(255,255,255,.25), transparent);
}

.gf-wyg-card__copy{
  flex:1 0 0;
  position:relative;z-index:1;
  display:flex;
  align-items:flex-start;
  padding:8px;
  border-radius:var(--wyg-card-r);
  overflow:hidden;
}

/* text column */
.gf-wyg-card__text{
  flex:1 1 auto;
  min-width:0;
  align-self:stretch;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:48px;
  padding:40px;
  overflow:clip;
}
.gf-wyg-card__block{
  flex:1 0 0;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:24px;
  padding-inline-end:24px;
  overflow:hidden;
}
.gf-wyg-card__h{
  max-width:455px;
  font-family:var(--font);
  font-size:28px;line-height:37.8px;letter-spacing:-.84px;font-weight:400;
  color:var(--ink);
  text-wrap:balance;
}
.gf-wyg-card__p{
  max-width:440px;
  font-size:14px;line-height:21px;letter-spacing:-.28px;
  color:var(--ink-80);
  text-wrap:balance;
}
.gf-wyg-card__note{
  display:flex;align-items:flex-start;gap:8px;
  font-size:14px;line-height:21px;letter-spacing:-.28px;
  color:var(--ink-80);
}
.gf-wyg-card__ico{flex:0 0 auto;width:21px;height:21px;color:var(--ink-80);opacity:.9}

/* media column: aspect is 1064/1224 at every breakpoint, which is what sets the card height */
.gf-wyg-card__media{
  flex:0 0 50%;max-width:50%;
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1064/1224;
  overflow:clip;
}
.gf-wyg-card__media--right{border-radius:4px 8px 8px 4px}
.gf-wyg-card__media--left{border-radius:8px 4px 4px 8px}

.gf-wyg-media{
  container-type:inline-size;
  position:relative;
  width:100%;height:100%;
  overflow:hidden;
  border-radius:inherit;
  transform-origin:50% 50%;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.09), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
}

/* -------------------------------------------------- card 1: phone feed */
.gf-wyg-phone{
  position:absolute;left:50%;transform:translateX(-50%);
  top:7cqw;
  width:52cqw;
  display:flex;flex-direction:column;
  border-radius:6cqw;
  border:.19cqw solid rgba(255,255,255,.14);
  background:rgba(10,10,10,.72);
  box-shadow:rgba(0,0,0,.5) 0 2cqw 6cqw 0;
  overflow:hidden;
}
.gf-wyg-phone__top{display:flex;flex-direction:column;gap:2.4cqw;padding:3cqw 3cqw 2.4cqw}
.gf-wyg-phone__head{display:flex;align-items:center;gap:2.6cqw}
.gf-wyg-phone__avatar{
  width:13cqw;height:13cqw;flex:0 0 auto;
  border-radius:50%;overflow:hidden;
  border:.19cqw solid rgba(255,255,255,.2);
}
.gf-wyg-phone__avatar img{width:100%;height:100%;object-fit:cover}
.gf-wyg-phone__id{display:flex;flex-direction:column;gap:.4cqw;min-width:0}
.gf-wyg-phone__id b{font-size:3cqw;line-height:1.3;font-weight:600;color:var(--ink)}
.gf-wyg-phone__id i{font-size:2.4cqw;line-height:1.3;font-style:normal;color:rgba(255,255,255,.55)}
.gf-wyg-phone__bio{font-size:2.4cqw;line-height:1.5;color:rgba(255,255,255,.7)}
.gf-wyg-phone__hl{display:flex;gap:2.4cqw}
.gf-wyg-phone__hl i{
  width:10cqw;height:10cqw;border-radius:50%;
  border:.38cqw solid rgba(255,255,255,.22);
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.1), rgba(255,255,255,.03));
}
.gf-wyg-phone__tabs{
  display:flex;justify-content:center;gap:14cqw;
  padding-top:2.2cqw;
  border-top:.19cqw solid rgba(255,255,255,.1);
}
.gf-wyg-phone__tabs i{
  width:3.2cqw;height:3.2cqw;display:block;
  color:rgba(255,255,255,.3);
  background-image:radial-gradient(currentColor 38%,transparent 42%);
  background-size:1.6cqw 1.6cqw;
}
.gf-wyg-phone__tabs i.is-on{color:rgba(255,255,255,.85)}
.gf-wyg-phone__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6cqw}
.gf-wyg-phone__cell{display:block;aspect-ratio:1;overflow:hidden;background:rgba(255,255,255,.05)}
.gf-wyg-phone__cell img{width:100%;height:100%;object-fit:cover}

/* ------------------------------------------- cards 2/3: browser window */
.gf-wyg-win{
  position:absolute;
  top:8cqw;left:5cqw;right:5cqw;bottom:-12cqw;
  display:flex;flex-direction:column;
  border-radius:2.6cqw;
  border:.19cqw solid rgba(255,255,255,.14);
  background:rgba(10,10,10,.6);
  box-shadow:rgba(0,0,0,.5) 0 2cqw 6cqw 0;
  overflow:hidden;
}
.gf-wyg-win__bar{
  flex:0 0 auto;
  display:flex;align-items:center;gap:2.4cqw;
  height:7cqw;
  padding:0 2.6cqw;
  background:rgba(255,255,255,.05);
  border-bottom:.19cqw solid rgba(255,255,255,.09);
}
.gf-wyg-win__dots{display:flex;align-items:center;gap:1.1cqw;flex:0 0 auto}
.gf-wyg-win__dots i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:rgba(255,255,255,.22)}
.gf-wyg-win__url{
  flex:1 1 auto;
  display:flex;align-items:center;justify-content:center;
  height:4cqw;
  border-radius:2cqw;
  background:rgba(255,255,255,.07);
  font-size:2.1cqw;line-height:1;
  color:rgba(255,255,255,.5);
}
.gf-wyg-win__shot{flex:1 1 auto;display:block;min-height:0}
/* House rule (base.css .gf-shot): a 1024x538 site capture fits the slot width and anchors top,
   so headlines are never cut sideways; the slot carries the shot's own edge colour beneath it. */
/* The window is a window onto a page, so the shot fills it and is cropped by it. It used to be
   height:auto with object-fit:fill, which took a 1024x538 card, stretched it across the frame and
   left the bottom third of the window empty; the plates here are shot at the frame's own 4:5. */
.gf-wyg-win__shot img{width:100%;height:100%;object-fit:cover;object-position:50% 0}


/* ------------------------------------------------------------ entrance */
.js .gf-wyg [data-wyg-in]{opacity:0;transform:translateY(24px)}
.js .gf-wyg [data-wyg-in].is-in{
  opacity:1;transform:none;
  transition:opacity var(--wyg-dur) var(--wyg-ease-in) var(--d,0s),
             transform var(--wyg-dur) var(--wyg-ease-in) var(--d,0s);
}
.js .gf-wyg [data-wyg-media]{opacity:0;transform:scale(1.1)}
.js .gf-wyg [data-wyg-media].is-in{
  opacity:1;transform:none;
  transition:opacity var(--wyg-dur) var(--wyg-ease-in),
             transform var(--wyg-dur) var(--wyg-ease-in);
}

/* --------------------------------------------------------- tablet 810+ */
@media (max-width:1023.98px){
  .gf-wyg{padding:0 24px}
  .gf-wyg__inner{gap:36px}

  .gf-wyg__head{flex-direction:column;align-items:flex-start;justify-content:center;gap:16px}
  .gf-wyg__head-l,.gf-wyg__head-r{flex:0 0 auto;width:100%}
  .gf-wyg__head-r{justify-content:flex-start;align-items:center;padding:0 0 4px}
  .gf-wyg__title{font-size:32px;line-height:43.2px;letter-spacing:-1.28px}

  /* Triggers layer is display:none below desktop, so nothing pins */
  .gf-wyg__triggers{display:none}
  .gf-wyg__cards{gap:24px;padding:0 0 80px}
  .gf-wyg-card{position:relative;top:auto}
  .gf-wyg-card__halo{display:none}
  .gf-wyg-card__inner{transform:none!important;opacity:1!important}

  .gf-wyg-card__copy{flex-direction:column;padding:8px}
  .gf-wyg-card__media{order:0;width:100%;max-width:none;flex:0 0 auto}
  .gf-wyg-card__text{order:1;flex:0 0 auto;width:100%;min-width:0;align-self:auto;gap:24px;padding:20px}
  .gf-wyg-card__block{flex:0 0 auto;gap:16px}
  .gf-wyg-card__note{padding-top:16px}
  .gf-wyg-card__h{font-size:22px;line-height:29.7px;letter-spacing:-.66px}
  .gf-wyg-card__media--right,.gf-wyg-card__media--left{border-radius:4px 8px 8px 4px}

  /* card 1 measures 12px / 17px below desktop where cards 2 and 3 measure 8px / 24px */
  .gf-wyg-card--1 .gf-wyg-card__copy{padding:12px}
  .gf-wyg-card--1 .gf-wyg-card__text{gap:17px}

}

/* The lead keeps its 350px cap at every breakpoint: measured 350 at 768 and 342 (= full column,
   below the cap) at 390. Framer's own 810-1279 variant is not in the capture; the rules above
   reproduce both measured viewports. */

/* ------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion:reduce){
  .gf-wyg-chip__dot{animation:none;opacity:.7}
  .gf-wyg-spot{display:none}
  .gf-wyg-card{position:relative;top:auto}
  .gf-wyg-card__inner{transform:none!important;opacity:1!important}
  .gf-wyg-card__halo{display:none}
  .js .gf-wyg [data-wyg-in],
  .js .gf-wyg [data-wyg-media]{opacity:1;transform:none;transition:none}
}