/* Scrollytelling "Blog e opportunità" — Home Fiscotto.
   Scroll-driven sticky section with 3-column layout:
   - Left: Hero editorial article card with rich gradient & integrated CTA
   - Center: iPhone mockup with seamless full-bleed display & scrolling feed
   - Right: 2 compact pill cards (deadlines + opportunities) */

/* ── Scroll Track: container that creates the scroll runway ── */
.signals-scroll-track {
  position: relative;
}

.js .signals-scroll-track {
  height: 225vh;
}

/* ── Sticky Viewport: pins visual content seamlessly during scroll ── */
.signals-sticky {
  position: relative;
}

.js .signals-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(150deg, #f9f6fc 0%, #f3edf8 50%, #eee6f5 100%);
}

/* ── Shell: visual container ── */
.signals-shell {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-block: 80px;
  background: linear-gradient(150deg, #f9f6fc 0%, #f3edf8 50%, #eee6f5 100%);
}

.js .signals-shell {
  padding-block: 0;
  border-block: 0;
  background: transparent;
}

/* Decorative ring (top-left) */
.signals-shell::before {
  position: absolute;
  top: -150px;
  left: -120px;
  width: 360px;
  height: 360px;
  border: 60px solid rgba(217, 231, 208, .55);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

/* Decorative ring (bottom-right) */
.signals-shell::after {
  position: absolute;
  bottom: -100px;
  right: -80px;
  width: 280px;
  height: 280px;
  border: 50px solid rgba(118, 82, 181, .06);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

/* ── Inner container: calibrated to fit standard screen heights ── */
.signals-inner {
  position: relative;
  width: min(100% - 48px, 1140px);
  margin-inline: auto;
  padding-block: clamp(14px, 2.5vh, 28px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── Heading: Centered, prominent & impactful ── */
.signals-heading {
  text-align: center;
  margin-bottom: clamp(16px, 2.4vh, 26px);
}

.signals-copy {
  max-width: 720px;
  margin-inline: auto;
}

.signals-copy .eyebrow {
  display: inline-flex;
  margin-bottom: 10px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
}

.signals-copy h2 {
  margin: 0 0 10px;
  color: #291b42;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.12;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.signals-copy h2 em {
  color: var(--purple);
  font-style: normal;
}

.signals-copy p {
  max-width: 580px;
  margin-inline: auto;
  margin-block: 0;
  color: #5c5368;
  font-size: 14px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════════════
   STAGE: 3-Column balanced layout
   ═══════════════════════════════════════════════════════════════ */
.signals-stage {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 1.15fr;
  gap: clamp(18px, 2.5vw, 36px);
  align-items: center;
  justify-items: center;
}

.signals-col {
  width: 100%;
}

.signals-col-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.signals-col-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.signals-mobile-progress {
  display: none;
}

/* ── Phone Mockup (Center) ── */
.phone-mockup {
  position: relative;
  width: clamp(178px, 16vw, 225px);
  width: clamp(178px, min(16vw, 27svh), 225px);
  aspect-ratio: 534 / 1112;
  flex-shrink: 0;
  z-index: 2;
  filter: drop-shadow(0 22px 45px rgba(41, 27, 66, .20));
}

/* Vector SVG frame sits directly over the screen */
.phone-frame {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Screen viewport sits comfortably behind the opaque bezel for 100% full-bleed fit */
.phone-screen {
  position: absolute;
  top: 0.5%;
  left: 2.5%;
  width: 95%;
  height: 99%;
  overflow: hidden;
  border-radius: 24px;
  z-index: 1;
  background: #1e221d;
}

/* Feed image inside — scrolls smoothly based on active card */
.phone-feed {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
  transform: translateY(0%);
}

/* ── iOS Status Bar (fixed solid overlay at top of phone screen) ── */
.phone-status-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 9.2%;
  padding: 1.8% 8.5% 0;
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  align-items: center;
  z-index: 3;
  pointer-events: none;
  box-sizing: border-box;
  background: linear-gradient(to bottom, #faf9f6 0 78%, transparent 78%);
  color: #1a1c20;
}

.status-clock {
  display: block;
  width: 42%;
  height: auto;
  justify-self: start;
  opacity: 0.95;
}

.status-icons {
  grid-column: 3;
  width: 72%;
  display: grid;
  grid-template-columns: 18fr 18fr 28fr;
  align-items: center;
  justify-self: end;
  gap: 7%;
}

.status-icon {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  opacity: 0.95;
}

.status-icon.icon-cellular {
  transform: translateY(.25px);
}

/* ── Base Card Styles ── */
.signal-card {
  position: relative;
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(75, 47, 109, .08);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.signal-card::before {
  position: absolute;
  top: -36px;
  right: -28px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(118, 82, 181, .06);
  content: "";
  pointer-events: none;
}

/* Category pills */
.signal-kind {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.signal-card-news .signal-kind {
  background: var(--lilac-deep);
  color: var(--purple);
}

.signal-card-snippet .signal-kind {
  background: var(--warm);
  color: #906c1d;
}

.signal-card-opportunity .signal-kind {
  background: #fce6df;
  color: #a44a34;
}

/* ── Card 1: Left Hero Card (Vertical, Rich Gradient & CTA) ── */
.signal-card-hero {
  padding: 24px 22px;
  min-height: 290px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(155deg, #ffffff 0%, #fbf8fe 50%, #f3ebfc 100%);
  border: 1px solid #dcd1ec;
  box-shadow: 0 18px 42px rgba(75, 47, 109, .10);
}

.signal-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.signal-read-badge {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--purple);
  background: rgba(118, 82, 181, .1);
  padding: 3px 8px;
  border-radius: 6px;
}

.signal-card-hero h3 {
  margin: 10px 0 8px;
  color: #291b42;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.25;
  letter-spacing: -.02em;
}

.signal-card-hero p {
  margin: 0;
  color: #635b70;
  font-size: 13px;
  line-height: 1.6;
}

.signal-hero-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 14px;
  border-top: 1px solid #ece4f5;
}

.signal-card-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--purple);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(118, 82, 181, .25);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.signal-card-action:hover {
  background: #5d3f94;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(118, 82, 181, .35);
  color: #ffffff;
}

.signal-card-action:active {
  transform: translateY(0) scale(.97);
}

/* ── Card 2 & 3: Right Compact Pills (Rich Gradients) ── */
.signal-card-pill {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.signal-card-snippet {
  background: linear-gradient(155deg, #ffffff 0%, #fffdf8 60%, #fbf3e4 100%);
  border: 1px solid #ebdcc0;
}

.signal-card-opportunity {
  background: linear-gradient(155deg, #ffffff 0%, #fffbf9 60%, #faeee9 100%);
  border: 1px solid #eed0c7;
}

.signal-pill-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.signal-pill-date {
  font-size: 11px;
  font-weight: 800;
  color: #906c1d;
  background: #fff8e8;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #f3e4bc;
}

.signal-pill-badge {
  font-size: 10.5px;
  font-weight: 700;
  color: #a44a34;
  background: #fff1ed;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #fcdad1;
}

.signal-card-pill h3 {
  margin: 0;
  color: #291b42;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.signal-card-pill p {
  margin: 0;
  color: #6d6478;
  font-size: 12px;
  line-height: 1.5;
}

/* ── CTA wrap ── */
.signals-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(16px, 2.5vh, 26px);
}

.signals-cta {
  flex: 0 0 auto;
}

.signals-cta-intro {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL-DRIVEN ENTRANCE ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

/* Phone entrance */
.js .signals-scroll-track .phone-mockup {
  opacity: 0;
  transform: scale(.92) translateY(18px);
  will-change: transform, opacity;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.js .signals-scroll-track .phone-mockup[data-revealed] {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Base Card hidden state */
.js .signals-scroll-track .signal-card {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

/* Card 1 (Hero Left): enters from LEFT */
.js .signals-scroll-track .signal-card-hero {
  transform: translateX(-50px) scale(.96);
}

.js .signals-scroll-track .signal-card-hero[data-revealed] {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* Card 2 & 3 (Right Pills): enter from RIGHT */
.js .signals-scroll-track .signal-card-snippet {
  transform: translateX(45px) scale(.96);
}

.js .signals-scroll-track .signal-card-opportunity {
  transform: translateX(45px) scale(.96);
}

.js .signals-scroll-track .signal-card-snippet[data-revealed],
.js .signals-scroll-track .signal-card-opportunity[data-revealed] {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* The highlighted card follows the content currently framed by the phone. */
.js .signals-scroll-track .signal-card[data-revealed][data-active] {
  transform: translateX(0) scale(1.018);
  border-color: rgba(118, 82, 181, .42);
  box-shadow: 0 20px 48px rgba(75, 47, 109, .16);
}

/* CTA entrance */
.js .signals-scroll-track .signals-cta-wrap {
  opacity: 0;
  transform: translateY(14px) scale(.96);
  will-change: transform, opacity;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}

.js .signals-scroll-track .signals-cta-wrap[data-revealed] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .js .signals-scroll-track {
    height: auto;
  }

  .js .signals-sticky {
    position: relative;
    height: auto;
  }

  .js .signals-scroll-track .signal-card,
  .js .signals-scroll-track .phone-mockup,
  .js .signals-scroll-track .signals-cta-wrap {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 761px) and (max-width: 960px) {
  .signals-inner {
    width: min(100% - 32px, 900px);
    padding-block: clamp(12px, 1.8vh, 20px);
  }

  .signals-heading {
    margin-bottom: clamp(12px, 1.8vh, 18px);
  }

  .signals-stage {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: clamp(12px, 1.8vw, 18px);
  }

  .signals-col-center {
    display: flex;
  }

  .phone-mockup {
    width: clamp(160px, min(22vw, 23svh), 190px);
  }

  .signal-card-hero {
    min-height: 260px;
    padding: 20px 18px;
  }

  .signal-card-pill {
    padding: 14px 15px;
  }
}

@media (max-width: 960px) and (orientation: landscape) {
  .js .signals-scroll-track {
    height: auto;
  }

  .js .signals-sticky {
    position: relative;
    min-height: auto;
    height: auto;
    overflow: clip;
  }

  .signals-shell,
  .js .signals-shell {
    overflow: clip;
    padding-block: 60px;
    border-block: 1px solid #ebe4f2;
    background: linear-gradient(150deg, #f9f6fc 0%, #f3edf8 50%, #eee6f5 100%);
  }
}

@media (min-width: 961px) and (max-height: 720px) {
  .signals-inner {
    padding-block: 10px;
  }

  .signals-heading {
    margin-bottom: 12px;
  }

  .signals-copy .eyebrow {
    margin-bottom: 6px;
  }

  .signals-copy h2 {
    margin-bottom: 6px;
    font-size: clamp(27px, 3vw, 36px);
  }

  .signals-copy p {
    font-size: 13px;
    line-height: 1.45;
  }

  .phone-mockup {
    width: clamp(170px, 26svh, 190px);
  }

  .signals-cta-wrap {
    margin-top: 12px;
  }
}

@media (max-width: 760px) {
  .js .signals-scroll-track {
    height: auto;
  }

  .js .signals-sticky {
    position: relative;
    min-height: auto;
    height: auto;
    overflow: clip;
  }

  .signals-shell,
  .js .signals-shell {
    overflow: clip;
    padding-block: 60px;
    border-block: 1px solid #ebe4f2;
    background: linear-gradient(150deg, #f9f6fc 0%, #f3edf8 50%, #eee6f5 100%);
  }

  .signals-stage {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .signals-col-center {
    display: flex;
    flex-direction: column;
    order: -1;
    margin-bottom: 12px;
  }

  .phone-mockup {
    width: min(200px, 62vw);
  }

  .phone-feed {
    transition-duration: .45s;
  }

  .signal-card-hero {
    min-height: auto;
    position: relative;
    cursor: pointer;
  }

  .signal-card-hero .signal-card-action::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 22px;
    z-index: 15;
    cursor: pointer;
  }

  .js .signals-scroll-track .signal-card,
  .js .signals-scroll-track .phone-mockup {
    transform: translateY(20px);
  }

  .js .signals-scroll-track .signal-card[data-revealed],
  .js .signals-scroll-track .phone-mockup[data-revealed] {
    opacity: 1;
    transform: translateY(0);
  }

  .js .signals-scroll-track .signal-card[data-revealed][data-active] {
    transform: translateY(0);
  }

  .signals-cta-wrap {
    width: 100%;
  }

  .signals-cta-wrap .signals-cta {
    width: 100%;
    justify-content: center;
  }

  /* Mobile story: one pinned scene, a fixed phone and a horizontal card lane. */
  .js .signals-scroll-track[data-mobile-story] {
    --mobile-heading-top: clamp(82px, 10.5svh, 94px);
    --mobile-phone-top: clamp(82px, 10.5svh, 94px);
    --mobile-phone-intro-shift: clamp(175px, 24svh, 200px);
    --mobile-card-height: clamp(126px, 18svh, 150px);
    --mobile-card-bottom: clamp(10px, 2.5svh, 22px);
    height: 430svh;
  }

  .js .signals-scroll-track[data-mobile-story] .signals-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
  }

  .js .signals-scroll-track[data-mobile-story] .signals-shell {
    height: 100%;
    padding-block: 0;
    border-block: 0;
    background: transparent;
  }

  .js .signals-scroll-track[data-mobile-story] .signals-inner {
    position: relative;
    width: min(100% - 32px, 430px);
    height: 100%;
    padding: 0;
    justify-content: flex-start;
  }

  .js .signals-scroll-track[data-mobile-story] .signals-heading {
    position: absolute;
    top: var(--mobile-heading-top);
    right: 0;
    left: 0;
    z-index: 8;
    margin: 0;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity .32s ease, transform .42s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
  }

  .js .signals-scroll-track[data-mobile-story]:not([data-mobile-phase="intro"]) .signals-heading {
    opacity: 0;
    transform: translate3d(0, -22px, 0);
  }

  .js .signals-scroll-track[data-mobile-story] .signals-copy .eyebrow {
    margin-bottom: 6px;
  }

  .js .signals-scroll-track[data-mobile-story] .signals-copy h2 {
    margin-bottom: 6px;
    font-size: clamp(24px, 7vw, 29px);
    line-height: 1.08;
  }

  .js .signals-scroll-track[data-mobile-story] .signals-copy p {
    max-width: 350px;
    font-size: 11.5px;
    line-height: 1.35;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .js .signals-scroll-track[data-mobile-story] .signals-stage {
    position: absolute;
    inset: 0;
    min-height: 100%;
    display: block;
    z-index: 6;
  }

  .js .signals-scroll-track[data-mobile-story] .signals-col-center {
    position: absolute;
    top: var(--mobile-phone-top);
    left: 50%;
    z-index: 5;
    width: auto;
    margin: 0;
    display: flex;
    transform: translate3d(-50%, 0, 0);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
  }

  .js .signals-scroll-track[data-mobile-story][data-mobile-phase="intro"] .signals-col-center {
    transform: translate3d(-50%, var(--mobile-phone-intro-shift), 0);
  }

  .js .signals-scroll-track[data-mobile-story] .phone-mockup {
    width: clamp(155px, min(50vw, 24svh), 195px);
    filter: drop-shadow(0 16px 30px rgba(41, 27, 66, .18));
    transform: scale(var(--mobile-phone-scale, 1));
    transform-origin: top center;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
  }

  .js .signals-scroll-track[data-mobile-story] .phone-feed {
    transition: transform .58s cubic-bezier(.22, 1, .36, 1);
  }

  .js .signals-scroll-track[data-mobile-story] .signals-mobile-progress {
    min-height: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
    color: #5f487f;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
  }

  .signals-mobile-progress-dots {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .signals-mobile-progress-dots i {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(118, 82, 181, .25);
    transition: width .25s var(--ease), background-color .25s var(--ease);
  }

  .signals-mobile-progress-dots i[data-active] {
    width: 16px;
    background: var(--purple);
  }

  .js .signals-scroll-track[data-mobile-story] .signals-col-left,
  .js .signals-scroll-track[data-mobile-story] .signals-col-right {
    display: contents;
  }

  .js .signals-scroll-track[data-mobile-story] .signal-card,
  .js .signals-scroll-track[data-mobile-story] .signal-card[data-revealed] {
    position: absolute;
    left: 50%;
    bottom: var(--mobile-card-bottom);
    z-index: 6;
    width: min(calc(100% - 8px), 360px);
    height: var(--mobile-card-height);
    box-sizing: border-box;
    opacity: var(--mobile-card-opacity, 0);
    transform: translate3d(calc(-50% + var(--mobile-card-x, 106vw)), 0, 0) scale(var(--mobile-card-scale, .945));
    box-shadow: 0 16px 38px rgba(75, 47, 109, .13);
    transition: opacity .34s ease, transform .52s cubic-bezier(.22, 1, .36, 1), border-color .2s ease, box-shadow .2s ease;
    will-change: transform, opacity;
    pointer-events: none;
  }

  .js .signals-scroll-track[data-mobile-story] .signal-card[data-revealed][data-active] {
    z-index: 10;
    pointer-events: auto;
  }

  .js .signals-scroll-track[data-mobile-story] .signal-card:not([data-active]) * {
    pointer-events: none !important;
  }

  .js .signals-scroll-track[data-mobile-story] .signal-card-hero {
    min-height: 0;
    padding: clamp(10px, 1.6svh, 14px) 16px;
    gap: 4px;
    cursor: pointer;
  }

  .js .signals-scroll-track[data-mobile-story] .signal-card-hero .signal-card-action::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 22px;
    z-index: 15;
    cursor: pointer;
  }

  .js .signals-scroll-track[data-mobile-story] .signal-card-hero h3 {
    margin: 3px 0 2px;
    font-size: clamp(15px, 4.2vw, 18px);
    line-height: 1.18;
  }

  .js .signals-scroll-track[data-mobile-story] .signal-card-hero p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.32;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .js .signals-scroll-track[data-mobile-story] .signal-hero-footer {
    padding-top: 4px;
  }

  .js .signals-scroll-track[data-mobile-story] .signal-card-action {
    padding: 7px 15px;
    font-size: 11px;
    pointer-events: auto !important;
    position: relative;
    z-index: 12;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }

  .js .signals-scroll-track[data-mobile-story] .signal-card-pill {
    padding: clamp(12px, 2svh, 17px) 16px;
    justify-content: space-between;
  }

  .js .signals-scroll-track[data-mobile-story] .signal-card-pill .signal-card-body {
    display: grid;
    gap: 5px;
  }

  .js .signals-scroll-track[data-mobile-story] .signal-card-pill h3 {
    font-size: clamp(15px, 4.2vw, 17px);
  }

  .js .signals-scroll-track[data-mobile-story] .signal-card-pill p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11.5px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .js .signals-scroll-track[data-mobile-story] .signals-cta-wrap,
  .js .signals-scroll-track[data-mobile-story] .signals-cta-wrap[data-revealed] {
    position: absolute;
    right: 0;
    bottom: var(--mobile-card-bottom);
    left: 0;
    z-index: 1;
    width: min(calc(100% - 8px), 360px);
    height: var(--mobile-card-height);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    opacity: var(--mobile-cta-progress, 0);
    transform: translate3d(0, var(--mobile-cta-y, 22px), 0) scale(var(--mobile-cta-scale, .96));
    transition: opacity .38s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
    visibility: hidden;
  }

  .js .signals-scroll-track[data-mobile-story] .signals-cta-intro {
    display: block;
    margin: 0;
    color: #3f3154;
    font-size: 14px;
    font-weight: 750;
    text-align: center;
  }

  .js .signals-scroll-track[data-mobile-story] .signals-cta {
    width: auto;
    min-width: 190px;
  }

  .js .signals-scroll-track[data-mobile-story] .signals-cta-wrap[data-active],
  .js .signals-scroll-track[data-mobile-story] .signals-cta-wrap:focus-within {
    z-index: 10;
    pointer-events: auto;
    visibility: visible;
  }

  .js .signals-scroll-track[data-mobile-story] .signals-cta-wrap:focus-within {
    opacity: 1;
    transform: none;
  }

  .js .signals-scroll-track[data-mobile-story] .signal-card:focus-within {
    z-index: 10;
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
  }

  .signals-story-in-view .assistant-launcher {
    opacity: 0;
    transform: translateX(calc(100% + 20px));
    pointer-events: none;
  }

  .signals-story-in-view .assistant-launcher:focus-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  @media (max-height: 700px) {
    .js .signals-scroll-track[data-mobile-story] .signal-card-hero p {
      -webkit-line-clamp: 1;
    }
  }
}