/**
 * Action landings (followers or subscribers, likes, comments) under each
 * platform growth service. Layered on platform-growth.css and cheap-ig.css;
 * scoped to .igl-page, with one accent modifier per network.
 */

.igl-page {
  --igl-pink: var(--pg-accent);
  --igl-pink-ink: color-mix(in srgb, var(--pg-accent) 72%, #000);
  --igl-pink-soft: color-mix(in srgb, var(--pg-accent) 9%, #fff);
  --igl-ok: #0f8a4b;
  --igl-ok-soft: #e9f8f0;
  --igl-wait: #a35a00;
  --igl-wait-soft: #fff6e6;
  --igl-no: #b42318;
  --igl-no-soft: #fdeeec;
}

.igl-page--tt {
  --pg-accent: #111;
  --pg-accent-soft: #f4fffe;
  --pg-accent-glow: rgba(37, 244, 238, 0.22);
  --pg-on-dark: #25f4ee;
  --pg-grad: linear-gradient(135deg, #25f4ee 0%, #111 48%, #fe2c55 100%);
}

.igl-page--yt {
  --pg-accent: #ff0033;
  --pg-accent-soft: #fff5f6;
  --pg-accent-glow: rgba(255, 0, 51, 0.16);
  --pg-on-dark: #ff5470;
  --pg-grad: linear-gradient(145deg, #ff0033 0%, #c40028 100%);
}

.igl-page--fb {
  --pg-accent: #1877f2;
  --pg-accent-soft: #f3f8ff;
  --pg-accent-glow: rgba(24, 119, 242, 0.16);
  --pg-on-dark: #5b9cff;
  --pg-grad: linear-gradient(145deg, #4b91f7 0%, #1877f2 100%);
}

/* ── Hero ── */
.igl-page .pg-hero__rail {
  padding-top: 56px;
  padding-bottom: 72px;
}

.igl-page .pg-hero .ip-title {
  max-width: 15em;
}

/* Red hero: brand red with a warm glow behind the scene. */
.igl-page .igl-hero {
  --pg-on-dark: #ff8fbf;
  color: #fff;
  background:
    radial-gradient(ellipse 55% 60% at 82% 30%, rgba(255, 92, 74, 0.35), transparent 70%),
    radial-gradient(ellipse 40% 50% at 8% 100%, rgba(0, 0, 0, 0.28), transparent 70%),
    linear-gradient(168deg, #7a0101 0%, #9b0000 55%, #5c0108 100%);
}

.igl-page .igl-hero .ip-title {
  color: #fff;
}

.igl-page .igl-hero .ip-lead {
  color: rgba(255, 255, 255, 0.84);
}

.igl-page .igl-hero .ip-btn--primary {
  color: #9b0000;
  background: #fff;
  border-color: #fff;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.45);
}

.igl-page .igl-hero .ip-btn--primary:hover,
.igl-page .igl-hero .ip-btn--primary:focus {
  color: #6e0101;
  filter: none;
}

.igl-page .igl-hero .ip-btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
}

.igl-page .igl-hero .ip-btn--ghost:hover,
.igl-page .igl-hero .ip-btn--ghost:focus {
  color: #9b0000;
  background: #fff;
  border-color: #fff;
}

.igl-hero__actions {
  margin-top: 28px;
}

.igl-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.igl-btn i {
  font-size: 13px;
  transition: transform 0.2s ease;
}

.igl-btn:hover i,
.igl-btn:focus-visible i {
  transform: translateX(3px);
}

/* ── One explainer video under the steps (the hero "Watch how it works" button scrolls here) ── */
.igl-page .igl-how-head {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
}

.igl-page .igl-how-head .fp-how__lead {
  margin-top: 20px;
}

.igl-page .igl-how-head .fp-how__head-aside {
  padding: 0;
}

.igl-page .igl-video {
  max-width: 480px;
  margin: 0 0 0 auto;
  opacity: 1;
  transform: none;
}

@media (max-width: 991px) {
  .igl-page .igl-how-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .igl-page .igl-video {
    max-width: none;
    margin-left: 0;
  }
}

.igl-page #pg-video {
  scroll-margin-top: 96px;
}

.igl-page .igl-hero .pg-watch {
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: none;
}

.igl-page .igl-video .pg-video__play {
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
}

.igl-page .igl-video .pg-video__play .pg-play__disc {
  width: 58px;
  height: 58px;
  font-size: 22px;
}

/* ── Quick answers ── */
.igl-glance {
  position: relative;
  z-index: 3;
  background: #fff;
  border-top: 1px solid var(--fp-line);
  border-bottom: 1px solid var(--fp-line);
}

.igl-glance__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.igl-glance__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 26px 22px;
}

.igl-glance__item + .igl-glance__item {
  border-left: 1px solid var(--fp-line);
}

.igl-glance__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--igl-pink-soft);
  color: var(--igl-pink);
  font-size: 15px;
}

.igl-glance__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.igl-glance__label {
  font-family: var(--fp-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fp-dim);
}

.igl-glance__value {
  font-family: var(--fp-display);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--fp-ink);
}

/* ── Inside Flustle: the example task ── */
.igl-inside {
  background:
    radial-gradient(ellipse 50% 60% at 90% 30%, rgba(221, 42, 123, 0.1), transparent 70%),
    var(--fp-wash);
  border-bottom: 1px solid var(--fp-line);
}

.igl-inside__rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px 64px;
  align-items: center;
  padding-top: 96px;
  padding-bottom: 104px;
}

.igl-inside .ip-lead {
  max-width: 44ch;
}

.igl-legend {
  display: grid;
  gap: 16px;
  margin: 28px 0 32px;
  padding: 0;
  list-style: none;
}

.igl-legend li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--fp-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--fp-muted);
}

.igl-legend strong {
  display: block;
  font-family: var(--fp-display);
  font-size: 16.5px;
  color: var(--fp-ink);
}

.igl-legend__n {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pg-grad);
  color: #fff;
  font-family: var(--fp-display);
  font-size: 14px;
  font-weight: 800;
}

.igl-app {
  margin: 0;
  overflow: hidden;
  border: 1px solid #e3e6ec;
  border-radius: 22px;
  background: #fff;
  box-shadow:
    0 40px 80px -40px rgba(20, 23, 31, 0.35),
    0 0 0 6px rgba(255, 255, 255, 0.6);
  transform: rotate(-1deg);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.igl-app:hover {
  transform: rotate(0deg) translateY(-4px);
}

.igl-app__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid #eef0f4;
  background: #fafbfc;
}

.igl-app__bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e1e4ea;
}

.igl-app__bar em {
  margin-left: 10px;
  font-family: var(--fp-sans);
  font-size: 12px;
  font-style: normal;
  color: var(--fp-dim);
}

.igl-app__body {
  padding: 22px;
}

.igl-task {
  display: flex;
  align-items: center;
  gap: 14px;
}

.igl-task__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--pg-grad);
  color: #fff;
  font-size: 18px;
}

.igl-task__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.igl-task__title {
  font-family: var(--fp-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--fp-ink);
}

.igl-task__target {
  font-family: var(--fp-sans);
  font-size: 13px;
  color: var(--fp-dim);
}

.igl-task__tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f3f6;
  font-family: var(--fp-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fp-dim);
}

.igl-progress {
  margin: 20px 0 18px;
}

.igl-progress__top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-family: var(--fp-sans);
  font-size: 13px;
  color: var(--fp-dim);
}

.igl-progress__top strong {
  font-family: var(--fp-display);
  color: var(--fp-ink);
}

.igl-progress__bar {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #f1f3f6;
}

.igl-progress__bar i {
  display: block;
  width: 6%;
  height: 100%;
  border-radius: inherit;
  background: var(--pg-grad);
  transform-origin: left;
}

.igl-app__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  font-family: var(--fp-sans);
  font-size: 13px;
  color: var(--fp-dim);
}

.igl-app__foot i {
  color: var(--igl-ok);
}

/* Entrance: cards drop in one by one and the bar fills. */
.igl-inside.fp-reveal:not(.is-inview) .igl-progress__bar i {
  transform: scaleX(0);
}

.igl-inside .igl-progress__bar i {
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

/* ── Guide sections (used by pages whose copy includes them) ── */
.igl-edu,
.igl-verify,
.igl-tips {
  border-bottom: 1px solid var(--fp-line);
}

.igl-edu > .ip-rail,
.igl-verify > .ip-rail,
.igl-tips > .ip-rail {
  padding-top: 96px;
  padding-bottom: 104px;
}

.igl-edu,
.igl-verify {
  background: #fff;
}

.igl-tips {
  background: var(--fp-wash);
}

.igl-sec-head {
  max-width: 760px;
  margin-bottom: 44px;
}

.igl-sec-head .ip-lead {
  max-width: 60ch;
}

.igl-edu__grid,
.igl-tips__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.igl-tips__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.igl-edu__item,
.igl-tip {
  padding: 26px;
  border: 1px solid var(--fp-line);
  border-radius: 20px;
  background: #fff;
}

.igl-edu__item {
  background: var(--fp-wash);
}

.igl-edu__icon,
.igl-tip__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--igl-pink-soft);
  color: var(--igl-pink);
  font-size: 16px;
}

.igl-edu__item h3,
.igl-tip h3,
.igl-verify__col h3 {
  margin: 16px 0 0;
  font-family: var(--fp-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fp-ink);
}

.igl-edu__item p,
.igl-tip p {
  margin: 8px 0 0;
  font-family: var(--fp-sans);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--fp-muted);
}

.igl-tip .cig-textlink {
  margin-top: 12px;
  font-size: 14px;
}

.igl-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 760px;
  margin: 28px 0 0;
  font-family: var(--fp-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fp-ink);
}

.igl-note i {
  margin-top: 4px;
  color: var(--igl-pink);
}

/* "Your options compared": the homepage "The difference" band (.fp-vs), as cards. */
.igl-methods .fp-vs__intro {
  max-width: 68ch;
}

.igl-methods__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.igl-method {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--fp-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
}

.igl-method--bad {
  --fp-vs-accent: var(--fp-purple);
}

.igl-method--mid {
  --fp-vs-accent: var(--fp-cyan);
}

.igl-method--good {
  --fp-vs-accent: var(--fp-coral);
  border-color: rgba(255, 138, 118, 0.3);
  background: rgba(var(--fp-vs-rgb), 0.16);
}

.igl-method__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px 20px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--fp-line);
}

.igl-method__head .fp-vs__head-tag,
.igl-method__head .fp-vs__head-copy {
  margin: 0;
}

.igl-method--good .igl-method__head {
  border-bottom-color: transparent;
  background:
    radial-gradient(ellipse 70% 50% at 88% 0%, rgba(255, 128, 108, 0.34), transparent 60%),
    linear-gradient(168deg, #8f0101 0%, #b81414 52%, #6b0106 100%);
}

.igl-method--good .fp-vs__head-icon {
  background: #fff;
  border-color: #fff;
  color: #bd1111;
}

.igl-method--good .fp-vs__head-icon::before {
  border-color: rgba(255, 255, 255, 0.85);
  animation-delay: 2.4s;
}

.igl-method--good .fp-vs__head-copy {
  color: rgba(255, 255, 255, 0.82);
}

.igl-method--mid .fp-vs__head-icon::before {
  animation-delay: 1.2s;
}

.igl-method--bad .fp-vs__head-icon i {
  animation: fp-vs-jitter 3.6s ease-in-out infinite;
}

.igl-method--mid .fp-vs__head-icon i {
  animation: fp-vs-pop 3.6s ease-in-out infinite;
}

.igl-method--good .fp-vs__head-icon i {
  animation: fp-vs-spin 3.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.igl-method__body {
  flex: 1;
  padding: 6px 20px 22px;
}

.igl-method__label {
  margin: 18px 0 10px;
  font-family: var(--fp-label);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--fp-hint);
}

.igl-method__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.igl-method__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--fp-sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--fp-muted);
}

.igl-method--good .igl-method__list li {
  color: #fff;
  font-weight: 500;
}

.igl-method__list i {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border-radius: 50%;
  font-size: 10px;
}

.igl-method__list .is-no i {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
}

.igl-method__list .is-ok i {
  background: var(--fp-coral);
  color: #2a0107;
}

.igl-method--good .igl-method__list .is-ok i {
  background: #fff;
  color: #bd1111;
}

.igl-methods .igl-note {
  color: var(--fp-muted);
}

.igl-methods .igl-note i {
  color: var(--fp-coral);
}

.igl-methods.fp-reveal .fp-vs__head-icon i,
.igl-methods.fp-reveal .fp-vs__head-icon::before {
  animation-play-state: paused;
}

.igl-methods.fp-reveal.is-inview .fp-vs__head-icon i,
.igl-methods.fp-reveal.is-inview .fp-vs__head-icon::before {
  animation-play-state: running;
}

.igl-verify__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.igl-verify__col {
  padding: 28px;
  border-radius: 22px;
}

.igl-verify__col--yes {
  background: var(--igl-ok-soft);
}

.igl-verify__col--no {
  background: var(--igl-wait-soft);
}

.igl-verify__col h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}

.igl-verify__col--yes h3 i {
  color: var(--igl-ok);
}

.igl-verify__col--no h3 i {
  color: var(--igl-wait);
}

.igl-verify__col ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
  font-family: var(--fp-sans);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--fp-ink);
}

.igl-guides {
  background: #fff;
  border-top: 1px solid var(--fp-line);
}

.igl-guides > .ip-rail {
  padding-top: 56px;
  padding-bottom: 64px;
}

.igl-guides__title {
  margin: 0 0 20px;
  font-family: var(--fp-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fp-ink);
}

.igl-guides__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.igl-guides__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid var(--fp-line);
  border-radius: 14px;
  font-family: var(--fp-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--fp-ink);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.igl-guides__list a i {
  font-size: 12px;
  color: var(--igl-pink);
}

.igl-guides__list a:hover,
.igl-guides__list a:focus-visible {
  border-color: var(--igl-pink);
  color: var(--igl-pink-ink);
}

@media (max-width: 991px) {
  .igl-methods__grid,
  .igl-tips__grid,
  .igl-guides__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .igl-methods__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .igl-edu > .ip-rail,
  .igl-verify > .ip-rail,
  .igl-tips > .ip-rail {
    padding-top: 68px;
    padding-bottom: 76px;
  }
}

@media (max-width: 575px) {
  .igl-edu__grid,
  .igl-tips__grid,
  .igl-verify__grid,
  .igl-guides__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Mid-page CTA band ── */
.igl-band {
  background: var(--pg-grad);
  color: #fff;
}

.igl-band__rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  padding-top: 34px;
  padding-bottom: 34px;
}

.igl-band__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.igl-band__title {
  font-family: var(--fp-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.igl-band__note {
  font-family: var(--fp-sans);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
}

.igl-page .igl-band__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-color: #fff;
  background: #fff;
  color: var(--igl-pink-ink);
}

.igl-page .igl-band__btn:hover,
.igl-page .igl-band__btn:focus-visible {
  background: #fff;
  color: #7a0e43;
  filter: none;
  transform: translateY(-1px);
}

/* ── Sticky signup bar ── */
.igl-sticky {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 60;
  width: min(720px, calc(100% - 24px));
  opacity: 0;
  transform: translate(-50%, 24px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.igl-sticky.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.igl-sticky__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 10px 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(11, 13, 18, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 48px -20px rgba(11, 13, 18, 0.6);
  color: #fff;
}

.igl-sticky__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--pg-grad);
  font-size: 15px;
}

.igl-sticky__copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.igl-sticky__copy strong {
  overflow: hidden;
  font-family: var(--fp-display);
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.igl-sticky__copy span {
  font-family: var(--fp-sans);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.7);
}

.igl-sticky__btn {
  flex: none;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .igl-glance__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .igl-glance__item:nth-child(3) {
    border-left: 0;
  }

  .igl-glance__item:nth-child(n + 3) {
    border-top: 1px solid var(--fp-line);
  }

  .igl-inside__rail {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 68px;
    padding-bottom: 76px;
  }

  .igl-app {
    transform: none;
  }
}

@media (max-width: 575px) {
  .igl-glance__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .igl-glance__item + .igl-glance__item {
    border-left: 0;
    border-top: 1px solid var(--fp-line);
  }

  .igl-glance__item {
    padding: 18px 4px;
  }

  .igl-sticky {
    bottom: 10px;
  }

  .igl-sticky__copy span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .igl-app,
  .igl-sticky,
  .igl-inside .igl-progress__bar i {
    transition: none;
  }
}