/* Applications rail: every card the same height, with one spacing system inside.

   HEIGHT. Each scene is drawn at a fixed aspect ratio (wide 587:540, medium 464:540).
   The medium card is the tallest, so its width (--m) is the master size and the wide
   cards are sized from it (m x 587/464). All 18 scenes then share one art height and
   every scene keeps the proportions it was designed at.

   SPACING. Everything below is a multiple of --m, so the rhythm holds at every size:
     pad       outer margin: text, boxes and panels all sit this far from the card edge
     eyebrow   the category label (icon + name) sits at pad / pad
     body-top  where each scene's first element starts (eyebrow + one gap)
     gap       the space between stacked blocks                                          */

#section-3 .stories-track{
  --m:clamp(258px,22vw,340px);
  --fs-pad:calc(var(--m) * .07);
  --fs-eyebrow-fs:calc(var(--m) * .06);
  --fs-eyebrow-h:calc(var(--m) * .084);
  --fs-gap:calc(var(--m) * .038);
  --fs-body-top:calc(var(--fs-pad) + var(--fs-eyebrow-h) + var(--fs-gap));
  --fs-radius:calc(var(--m) * .056);
  --fs-prompt-h:12.3%;
}
@media(max-width:760px){#section-3 .stories-track{--m:clamp(240px,64vw,420px)}}
@media(max-width:450px){#section-3 .stories-track{--m:68vw}}

/* ---- Equal height: widths derive from the tallest (medium) card ---- */
#section-3 .fluid-story-card{flex:0 0 calc(var(--m) * 587 / 464)}
#section-3 .fluid-story-card.medium{flex:0 0 var(--m)}
#section-3 .story-link .fs-art{margin-bottom:16px}

/* ---- Eyebrow: same spot, same size on every card ---- */
#section-3 .fs-art>.fs-eyebrow{
  top:var(--fs-pad);left:var(--fs-pad);
  gap:calc(var(--fs-eyebrow-fs) * .42);
  min-height:var(--fs-eyebrow-h);
  font-size:var(--fs-eyebrow-fs);line-height:1.1;
}
#section-3 .fs-art>.fs-eyebrow .fs-category-icon{width:1.4em;height:1.4em}

/* ---- Capability cards (Marketing, Social selling, Sales, Growth, New markets,
        Relationships, Retention, Customer service, Learning, Fraud, Security, Engineering) ---- */
#section-3 .fs-capability-card>h3{top:var(--fs-body-top);left:var(--fs-pad);right:var(--fs-pad)}
#section-3 .fs-capability-card .fs-cap-work{
  left:var(--fs-pad);right:var(--fs-pad);
  /* one fixed panel for every card: starts one gap under the two-line headline,
     ends one gap above the footer line */
  top:calc(var(--fs-body-top) + 17.7cqw + var(--fs-gap));
  bottom:calc(var(--fs-pad) + 3.4cqw + var(--fs-gap));
  min-height:0;
  border-radius:var(--fs-radius);
}
/* Engineering has the most rows (3 + a button); tighten its rhythm so it fits the shared panel */
#section-3 .fs-capability-card .fs-build-work{gap:1.3cqw;padding-block:3.3cqw}
#section-3 .fs-capability-card .fs-build-work>button{margin-top:1cqw}
#section-3 .fs-capability-card .fs-cap-foot{left:var(--fs-pad);right:var(--fs-pad);bottom:var(--fs-pad)}

/* ---- Commerce ---- */
#section-3 .fs-commerce>.fs-prompt,
#section-3 .fs-field>.fs-prompt{
  top:var(--fs-body-top);left:var(--fs-pad);right:var(--fs-pad);height:var(--fs-prompt-h);
}
#section-3 .fs-commerce .fs-campaign{inset:calc(var(--fs-body-top) + var(--fs-prompt-h) + var(--fs-gap)) 0 0}
#section-3 .fs-commerce .fs-campaign>h3{top:var(--fs-pad);left:var(--fs-pad)}
#section-3 .fs-commerce .fs-launch-pill{left:var(--fs-pad);bottom:var(--fs-pad)}

/* ---- Payments ---- */
#section-3 .fs-payments .fs-payment-prompt{
  top:var(--fs-pad);right:var(--fs-pad);height:var(--fs-eyebrow-h);
  display:flex;align-items:center;padding:0 2.8cqw;box-sizing:border-box;white-space:nowrap;
}
#section-3 .fs-payments .fs-payment-title{top:var(--fs-body-top);left:var(--fs-pad)}
#section-3 .fs-payments .fs-subscription-panel{inset:45% var(--fs-pad) var(--fs-pad);border-radius:var(--fs-radius)}

/* ---- Field ---- */
#section-3 .fs-field .fs-field-actions{
  top:calc(var(--fs-body-top) + var(--fs-prompt-h) + var(--fs-gap));
  left:var(--fs-pad);right:var(--fs-pad);gap:var(--fs-gap);
}
#section-3 .fs-field .fs-launch-preview{
  inset:calc(var(--fs-body-top) + var(--fs-prompt-h) + var(--fs-gap) + 26.4cqw + var(--fs-gap) + var(--fs-gap)) var(--fs-pad) var(--fs-pad);
  border-radius:var(--fs-radius);
}

/* ---- Cowork ---- */
#section-3 .fs-cowork .fs-cowork-bar{top:var(--fs-body-top);left:var(--fs-pad);right:var(--fs-pad)}
#section-3 .fs-cowork .fs-presence-maya{top:31%}

/* ---- Intelligence ---- */
#section-3 .fs-intelligence>h3{top:var(--fs-body-top);left:var(--fs-pad)}
#section-3 .fs-intelligence .fs-intelligence-total{left:var(--fs-pad)}
#section-3 .fs-intelligence .fs-insight-note{right:var(--fs-pad)}
#section-3 .fs-intelligence .fs-revenue-chart{left:var(--fs-pad);width:calc(100% - var(--fs-pad) * 2)}
#section-3 .fs-intelligence .fs-intelligence-footnote{left:var(--fs-pad);bottom:var(--fs-pad)}

/* ---- Compliance ---- */
#section-3 .fs-compliance .fs-review-before{
  top:var(--fs-body-top);left:var(--fs-pad);right:var(--fs-pad);border-radius:var(--fs-radius);
}
#section-3 .fs-compliance .fs-review-after{inset:55% var(--fs-pad) var(--fs-pad);border-radius:var(--fs-radius)}
#section-3 .fs-compliance .fs-rewrite-arrow{top:calc((var(--fs-body-top) + 29% + 55%) / 2 - 5%)}