@charset "UTF-8";
/* ===== Asana Usage Stories index (/usage-story/) — scoped to .rs-ausx =====
 *
 * Compiles to css/asana-usage-stories.min.css. Enqueued by
 * template-asana-usage-stories.php through rs_enqueue_template_style().
 *
 * SCOPE NOTE. .rs-ausx, deliberately NOT .rs-aus — that is the root class the
 * SINGULAR usage-story template opens under, and pages/asana-usage-story.scss
 * scopes everything to it. Two files, two roots, no overlap; the single page's
 * dark hero and this page's white one would otherwise fight.
 *
 * FIGMA SOURCES (file SnreFPrtbc7XZTfHcuGznW, "Remote Sensei Universe"):
 *   33528:21720  frame — "Asana usage stories - collective - desktop - EN"
 *   33528:21822  hero band, PL ("1st") — the geometry used below
 *   33096:22800  the "AUS card" component
 *   33528:21724  bottom CTA
 *
 * WHY THE PL FRAME IS THE GEOMETRY SOURCE AND THE EN FRAME IS NOT.
 * The two frames are the same design, but the EN one is missing the hero's lead
 * paragraph — the designer filled in the Polish copy and left the English slot
 * empty rather than deleting a paragraph from the design. The PL frame's hero
 * therefore carries the complete stack (stars / script title / 24px gap / lead,
 * 618 wide), and the sentence it holds is exactly the one both language versions
 * of the page already render on staging. Building from EN alone would have
 * silently dropped the page's only body copy above the fold.
 *
 * The container is 1146px at desktop ($container-max-widths xl in this theme),
 * which is Figma's 1440 - 2x147, so every px below is a 1:1 transcription rather
 * than a scaled guess.
 *
 * Colours are all on the token ramp (css/rs-design-tokens.css): #f9f9f9
 * grey-light-50, #fffffe white-pure, #34383c black-prime, #5d636a black-second,
 * #d8e2e3 grey-light-30, #408897 teal-00, #ffc94b yellow-00, and the coral CTA
 * gradient is --rs-gradient-coral verbatim. Literals are written out because this
 * entry point cannot see main.scss's variables and the tokens sheet is a
 * dependency of this one, not an import of it.
 */
/* ---- Hero -------------------------------------------------------------------- */
/*
 * Figma "1st": a 1440x610 white plate with a 24px radius on its bottom two
 * corners only, the waves plate inset flush to its right edge, and the title
 * group at y180. The 76px header sits inside that 610 in Figma but is a sibling
 * element here, so the band's own padding is 610 measured from below it:
 * 216-76 = 140 above the title's first flow child, 610-476 = 134 below it.
 */
.rs-ausx-hero {
  position: relative;
  overflow: hidden; /* clips the waves plate to the rounded bottom corners */
  padding: 140px 0 134px;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  background: #fffffe;
}

/*
 * The waves are 1182x610 pinned to the band's right edge — Figma x258 of 1440.
 * The asset is img/waves-story-yellow.svg, a recolour of the white
 * images/waves-head-story.svg the SINGULAR page's dark hero uses: same geometry,
 * same alpha-gradient mask baked in, stroke swapped to #FFC94B. A recolour rather
 * than a second export because the two are the same artwork at two brightnesses,
 * and an <img> cannot be tinted in CSS.
 *
 * Kept as a background on a pseudo-element rather than an <img>: it is decoration
 * with no alt text to give, and background-position does the right-edge pin that
 * an <img> would need a wrapper for.
 */
.rs-ausx-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 1182px;
  max-width: 100%;
  background: url("../img/waves-story-yellow.svg") no-repeat right center;
  background-size: cover;
  pointer-events: none;
}

.rs-ausx-hero > .container {
  position: relative; /* above the waves */
  z-index: 1;
}

/*
 * Figma's title column: 618 wide, centred, 24px between the script title and the
 * lead. 618 is the lead's measure, not the title's — the title is 402 (PL) / 362
 * (EN) and centres inside it.
 */
.rs-ausx-hero__col {
  max-width: 618px;
  margin: 0 auto;
  text-align: center;
}

/*
 * The h1 is one element carrying two visual parts: a 20px eyebrow pinned to the
 * top-right of the script word, and the script word itself. Inline-block so the
 * eyebrow's `right: 0` lands on the actual glyph run rather than on the 618px
 * column — Figma pins it to the title box's right edge, and that box hugs the
 * word in both languages ("Stories" 362, "Historie" 402).
 */
.rs-ausx-hero__title {
  position: relative;
  display: inline-block;
  margin: 0;
  text-align: left;
}

.rs-ausx-hero__script {
  display: block;
  color: #34383c;
  font-family: var(--rs-font-script, "Dancing Script", cursive);
  font-weight: 700;
  font-size: 140px;
  line-height: 1;
}

.rs-ausx-hero__eyebrow {
  position: absolute;
  top: 3px;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #5d636a;
  /* Figma's eyebrow node names no family, i.e. the file default. "Asana Usage"
     measures 136px there at 20px: Hind Madurai renders 109, Montserrat 136. */
  font-family: var(--rs-font-display, "Montserrat", sans-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  white-space: nowrap;
}

.rs-ausx-hero__eyebrow img {
  width: 22px;
  height: 20px;
}

/*
 * Three "Soft Star" vectors, 36/20/10px, at Figma's own offsets inside a 56x41
 * box that sits 45px above the script word and flush with its left edge. The
 * glow is Figma's 0 0 24px #fff5dea6 — a drop-shadow filter, not box-shadow,
 * because the shape is a star and not its bounding box.
 *
 * The drift animation is the one the SINGULAR usage-story page runs on its own
 * spark cluster (.rs-aus-sparks, pages/asana-usage-story.scss) — same 2s linear
 * infinite alternate +-5px, same reduced-motion gate. Copied rather than shared
 * because the two entry points cannot see each other and a four-line keyframe is
 * not worth a config partial; if a third consumer appears, extract it.
 */
.rs-ausx-hero__stars {
  position: absolute;
  left: 0;
  top: -86px;
  width: 56px;
  height: 41px;
  animation: rs-ausx-spark 2s linear infinite alternate;
  pointer-events: none;
}

.rs-ausx-hero__stars svg {
  position: absolute;
  display: block;
  color: #ffc94b;
  filter: drop-shadow(0 0 24px rgba(255, 245, 222, 0.65));
}

.rs-ausx-hero__stars .rs-ausx-star--lg {
  left: 0;
  top: 5px;
  width: 36px;
  height: 36px;
}

.rs-ausx-hero__stars .rs-ausx-star--md {
  left: 36px;
  top: 5px;
  width: 20px;
  height: 20px;
}

.rs-ausx-hero__stars .rs-ausx-star--sm {
  left: 25px;
  top: 0;
  width: 10px;
  height: 10px;
}

@keyframes rs-ausx-spark {
  from {
    transform: translate(0, -5px);
  }
  to {
    transform: translate(0, 5px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rs-ausx-hero__stars {
    animation: none;
  }
}
/* Figma: 20px/1.6, black-second, 24px below the title, 618 measure. */
.rs-ausx-hero__lead {
  margin: 24px 0 0;
  color: #5d636a;
  font-size: 20px;
  line-height: 1.6;
}

/* ---- The list ---------------------------------------------------------------- */
/*
 * Figma "2nd": 1800 tall on a #f9f9f9 plate, the 1680 list inset 60 top and
 * bottom. Each row is a 264-tall card, then 40px, then a hairline, then 40px —
 * including after the last card, which is why the divider is rendered after every
 * item rather than between them.
 */
.rs-ausx-list {
  padding: 60px 0;
  background: #f9f9f9;
}

.rs-ausx-list__sep {
  height: 0;
  margin: 40px 0;
  border: 0;
  border-top: 1px solid #d8e2e3;
  opacity: 1; /* Bootstrap's <hr> ships .25 */
}

/*
 * The trailing separator keeps its line but gives up its bottom margin, so the
 * band's own 60px is the whole distance to the edge. Raman measured 60 there and
 * the render was 100: the last hr's 40 was stacking on the band padding, which
 * reads as an arbitrary extra gap right where the grey plate meets the CTA's
 * white one. Between cards nothing moves — only the last one has nothing below it.
 */
.rs-ausx-list__sep:last-of-type {
  margin-bottom: 0;
}

/*
 * Card: a fixed 362x264 thumbnail, a 30px gutter, and a 754 content column that
 * distributes to the card's full height (space-between puts the link on the
 * bottom edge whatever the excerpt's length).
 */
.rs-ausx-card {
  display: flex;
  gap: 30px;
  align-items: stretch;
}

.rs-ausx-card__media {
  flex: 0 0 362px;
  display: block;
  overflow: hidden;
  border-radius: 4px;
}

.rs-ausx-card__media img {
  display: block;
  width: 100%;
  height: 264px;
  object-fit: cover;
}

.rs-ausx-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  min-height: 264px;
}

/* Figma: 16px between the pill and the company name, 8px from that pair to the
   blurb — so the 8 belongs to the group, not to the heading. */
.rs-ausx-card__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 8px;
}

.rs-ausx-card__label {
  align-self: flex-start;
  padding: 4px 16px;
  border-radius: 100px;
  background: #408897;
  color: #fffffe;
  font-family: var(--rs-font-body, "Hind Madurai", sans-serif);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
}

.rs-ausx-card__title {
  margin: 0;
  color: #34383c;
  font-family: var(--rs-font-display, "Montserrat", sans-serif);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.3;
  /* PL runs long and its compound nouns do not wrap where English does. */
  hyphens: auto;
  overflow-wrap: break-word;
}

.rs-ausx-card__title a {
  color: inherit;
  text-decoration: none;
}

.rs-ausx-card__title a:hover,
.rs-ausx-card__title a:focus-visible {
  color: #408897;
}

.rs-ausx-card__excerpt {
  margin: 0;
  color: #5d636a;
  font-family: var(--rs-font-serif, "Lora", Georgia, serif);
  font-size: 18px;
  line-height: 1.65;
}

.rs-ausx-card__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  color: #408897;
  font-family: var(--rs-font-body, "Hind Madurai", sans-serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
}

.rs-ausx-card__link i {
  font-size: 16px;
  line-height: 1.6;
  transition: transform 0.2s ease-out;
}

.rs-ausx-card__link:hover,
.rs-ausx-card__link:focus-visible {
  color: #35717d;
}

.rs-ausx-card__link:hover i {
  transform: translateX(4px);
}

/* ---- Bottom CTA -------------------------------------------------------------- */
/*
 * Figma 33528:21724 — a 1146x402 coral card on a 60px white band. The same
 * treatment template-asana-vs.php carries at the foot of its article; the values
 * are re-stated rather than shared because the two entry points cannot see each
 * other and this is the second consumer, not yet a pattern. A third one is the
 * signal to lift both into config/.
 */
.rs-ausx-cta-band {
  padding: 60px 0;
  background: #fffffe;
}

.rs-ausx-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 40px;
  border-radius: 4px;
  background-color: #f37465;
  background-image: var(--rs-gradient-coral, linear-gradient(135deg, #f18e70 0%, #f37465 100%));
  box-shadow: 0 50px 60px -30px rgba(47, 47, 47, 0.1), 0 20px 20px -10px rgba(47, 47, 47, 0.05);
  color: #fffffe;
}

.rs-ausx-cta__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.rs-ausx-cta__badge {
  display: block;
  margin: 0 0 30px;
}

/* Figma's `text` frame: 529 wide, 168 tall, a 20px column gap, 30 below the badge
   and 40 above the button. The heading overflows it to 582 by design. */
.rs-ausx-cta__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 0 40px;
}

.rs-ausx-cta__title {
  margin: 0;
  max-width: 582px;
  font-family: var(--rs-font-display, "Montserrat", sans-serif);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.3;
  hyphens: auto;
  overflow-wrap: break-word;
}

.rs-ausx-cta__sub {
  margin: 0;
  max-width: 529px;
  font-size: 20px;
  line-height: 1.6;
}

/* Figma's `atom/btns` color=black, type="with arrow". */
.rs-ausx-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 15px 30px;
  border-radius: 4px;
  background: #34383c;
  color: #fffffe;
  /* Figma's node says weight 400; 700 is kept because every other button on the
     site is 700 and the reviewed twin at the foot of template-asana-vs.php is
     too. Only the size steps 16 -> 18, which is what makes the box 52 tall. */
  font-family: var(--rs-font-display, "Montserrat", sans-serif);
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  text-decoration: none;
  box-shadow: 0 20px 40px -10px rgba(38, 50, 56, 0.2);
  transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.rs-ausx-cta__btn:hover,
.rs-ausx-cta__btn:focus-visible {
  background: #21252a;
  color: #fffffe;
  box-shadow: 0 10px 20px -5px rgba(38, 50, 56, 0.3);
}

.rs-ausx-cta__btn i {
  font-size: 18px;
}

/*
 * Figma's screens block is 420x310. The shipped asset (images/single-vs/screens.png,
 * 506x396, the same collage staging serves from uploads) is a slightly taller crop,
 * so the HEIGHT is what is pinned — 310 makes the copy column the taller of the two
 * and the card lands on Figma's 402, which a 420-wide box did not.
 */
.rs-ausx-cta__art {
  flex: 0 0 auto;
  margin: 0;
}

/* The box is Figma's 420x310; `contain` letterboxes the taller 506x396 crop inside
   it rather than cropping the screenshots, so the block occupies the design's
   footprint without the asset being re-cut. */
.rs-ausx-cta__art img {
  display: block;
  width: 420px;
  height: 310px;
  max-width: 100%;
  object-fit: contain;
  object-position: right center;
}

/* ---- Below xl: the container narrows, everything else holds ------------------- */
@media (max-width: 1199.98px) {
  .rs-ausx-card__media {
    flex-basis: 300px;
  }
  .rs-ausx-cta__art img {
    width: 340px;
    height: 251px;
  }
}
@media (max-width: 991.98px) {
  .rs-ausx-hero {
    padding: 90px 0 80px;
  }
  .rs-ausx-hero__script {
    font-size: 96px;
  }
  .rs-ausx-hero__stars {
    top: -62px;
    transform-origin: left bottom;
  }
  .rs-ausx-card {
    flex-direction: column;
    gap: 20px;
  }
  .rs-ausx-card__media {
    flex: 0 0 auto;
  }
  .rs-ausx-card__media img {
    height: auto;
    aspect-ratio: 362/264;
  }
  .rs-ausx-card__body {
    min-height: 0;
  }
  .rs-ausx-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }
  .rs-ausx-cta__art img {
    width: 420px;
    height: auto;
  }
}
/*
 * 375px, checked in Polish. "Historie" at 96px overflows a 345px column, and the
 * eyebrow ("Użycia Asany", 12 characters against English's 11) has to drop under
 * the pin rather than beside it — at this width there is no right edge to pin to
 * that does not push the word off-screen.
 */
@media (max-width: 767.98px) {
  .rs-ausx-hero {
    padding: 64px 0 56px;
  }
  .rs-ausx-hero__col {
    text-align: center;
  }
  .rs-ausx-hero__title {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
  }
  .rs-ausx-hero__script {
    font-size: 64px;
  }
  .rs-ausx-hero__eyebrow {
    position: static;
    justify-content: center;
    margin-top: 8px;
    font-size: 18px;
  }
  /* The h1 becomes a centred column here, so the stars centre with it rather
     than pinning to a left edge that is now the full page width. */
  .rs-ausx-hero__stars {
    top: -40px;
    left: 0;
    right: 0;
    margin-inline: auto;
  }
  .rs-ausx-hero__lead {
    font-size: 18px;
  }
  .rs-ausx-list {
    padding: 40px 0;
  }
  .rs-ausx-list__sep {
    margin: 30px 0;
  }
  .rs-ausx-card__title {
    font-size: 24px;
  }
  .rs-ausx-card__excerpt {
    font-size: 16px;
  }
  .rs-ausx-cta-band {
    padding: 40px 0;
  }
  .rs-ausx-cta {
    padding: 24px;
    gap: 24px;
  }
  .rs-ausx-cta__title {
    font-size: 24px;
  }
  .rs-ausx-cta__text {
    margin-bottom: 30px;
    gap: 16px;
  }
  .rs-ausx-cta__sub {
    font-size: 18px;
  }
  .rs-ausx-cta__badge {
    margin-bottom: 20px;
  }
}