@charset "UTF-8";
/* ===== Asana Usage Story (pure PHP) — scoped to .rs-aus ===== */
/* Bootstrap (grid/utilities/.card/.btn/etc.) and .head__story (dark hero band + waves bg)
   already ship in main.min.css — this block only covers what neither provides. */
.rs-aus-logo {
  max-height: 32px;
  width: auto;
}

.rs-aus-sidebar-logo {
  max-height: 24px;
  width: auto;
}

/* the_content() headings arrive bare (no Bootstrap classes); Reboot zeroes their
   margin-top, so consecutive elements run together without this. Live's rhythm is
   uneven by design: a big gap before a marker, a tight gap marker->title, a normal
   gap heading->body — a single uniform margin-top can't reproduce that, hence the
   sibling-selector overrides below. */
.rs-aus-body h4, .rs-aus-body h5, .rs-aus-body h6 {
  margin-top: 2rem;
  margin-bottom: 1.25rem;
}

.rs-aus-body h6 {
  margin-top: 3.75rem;
}

.rs-aus-body h6 + h4 {
  margin-top: 1.25rem;
}

.rs-aus-body > h4:first-child, .rs-aus-body > h6:first-child {
  margin-top: 0;
}

/* Roman round 2 #4 — "gap between a chapter title and its content should be 40px",
   here and for every chapter. Chapter titles are the <h4>s. */
.rs-aus-body h4 {
  margin-bottom: 2.5rem;
}

/* Roman round 2 #2 — the page title uses the GLOBAL h1 style, read off Figma
   30369-30300: Montserrat 700, 48px/1.2, #34383C, left-aligned, full container
   width. This replaces round 1's centered .h2-scale treatment, which was matched
   off live; Roman's ruling is that Figma, not live, is the styling reference.
   Round 3 #1: centered — Roman's call on the rendered page, the one thing the
   Figma text node itself doesn't carry (Plumb emits no text-align).
   Round 5 #1: 60px from the title to the cover image — Roman's site-wide rule
   for these articles. The banner is the first thing inside post_content and
   arrives wrapped in a wpautop <p> with no margin-top, so the whole gap is the
   title's own margin-bottom; the markup's mb-4 (24px) is gone with it. */
.rs-aus-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.2;
  color: #34383C;
  text-align: center;
  margin-bottom: 3.75rem;
}

/* Roman round 2 #3 — the dot tag "should not break like this". Round 1 put the
   coral bullet inline inside the label text, so a two-word label ("Integrations
   with Asana") wrapped underneath the dot and pushed the value out of line.
   Figma 30369-30446 makes the row a flex row (gap 30) whose label is its own
   flex row (gap 10, align center) with the 4px dot as a separate, non-shrinking
   item — so the label wraps as a block beside the dot, never under it. */
.rs-aus-sidebar-row {
  display: flex;
  gap: 1.875rem;
  align-items: flex-start;
}

.rs-aus-sidebar-label {
  display: flex;
  gap: 0.625rem;
  align-items: baseline;
  flex: 0 0 8.5rem;
  color: #5D636A;
}

.rs-aus-sidebar-value {
  color: #408897;
  min-width: 0;
}

.rs-aus-bullet {
  color: #F35B54;
  font-size: 0.25rem;
  flex: 0 0 auto;
  line-height: 1.5;
}

@media (max-width: 575.98px) {
  .rs-aus-sidebar-row {
    flex-direction: column;
    gap: 0.125rem;
  }
  .rs-aus-sidebar-label {
    flex: 0 0 auto;
  }
}
/* post_content's numbered-section headings arrive as bare <h4>/<h6> with no
   heading font at all (Reboot inherits the site's body-copy font, Hind Madurai,
   for anything without an explicit font-family) — restyled to the same
   Montserrat/bold/centered treatment every other heading on the site uses.
   The <h6> "01"/"02" markers get a light flanking-dash treatment standing in
   for the target's cursive "Dancing Script" (not loaded on this template). */
.rs-aus-body h4 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: #34383C;
  text-align: center;
}

/* Roman round 2 #6 — "Why it's teal? Use black-prime". Round 1 made every <h5>
   teal because that is what live computes. Only the h5 INSIDE a callout card is
   teal in Figma (30369-30324); a bare sub-chapter h5 is black-prime. The two are
   distinguishable structurally — the callout is the one preceded by an icon —
   so the base rule is black-prime and .rs-aus-hl re-teals its own heading. */
.rs-aus-body h5 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.4;
  color: #34383C;
}

/* The 01/02/03 markers use Dancing Script, as live does — now self-hosted in
   css/rs-fonts.css, so this is the real face rather than the Montserrat-italic
   stand-in it replaced. Live requests "700italic", but Google ships no italic
   face for this family; the slant is synthesised from the 700 upright, which is
   why font-style: italic here reproduces live exactly. */
.rs-aus-body h6 {
  font-family: "Dancing Script", cursive;
  font-style: italic;
  font-weight: 700;
  font-size: 1.125rem;
  color: #A0BABD;
  text-align: center;
}

/* Live's flanking dashes are a pale, deliberately faint tint distinct from the text
   color — currentColor made them read as heavy as the "01" text itself. */
.rs-aus-body h6::before, .rs-aus-body h6::after {
  content: "";
  display: inline-block;
  width: 2rem;
  border-top: 1px solid #D8E2E3;
  vertical-align: middle;
  margin: 0 0.75rem;
}

/* Sidebar company card: live is a flush square card with tighter, evenly-spaced
   meta rows and no bold on the values. */
.rs-aus-sidebar {
  border-radius: 0;
  padding: 1.875rem;
}

.rs-aus-sidebar figure {
  margin-bottom: 1.3125rem;
}

.rs-aus-sidebar-row {
  margin-top: 0.625rem;
}

/* Bootstrap's rem-based `small` shrinks with the mobile root font-size; live keeps
   sidebar type a fixed 14px at every viewport. */
.rs-aus-sidebar small {
  font-size: 14px;
}

/* ---- Roman round 2 #5: callout card (Figma 30369-30324 "highlight") ----
   White card, 4px radius, 30px padding, icon and text in a row with a 20px gap,
   title over body with a 15px gap. Title teal Montserrat 700 20px/1.4, body
   Lora 400 18px/1.65 #5D636A. Wrapper built by rs_aus_wrap_content_blocks(). */
/* Background is white (--rs-white-pure = #FFFFFE), per Figma 30369-30338, which
   Oskar chose over live's pale teal (#F0F8F9) in an explicit override of the
   usual "staging wins on pixel conflicts" rule. Everything else here already
   matched live: 30px padding, 4px radius, 20px icon gap, 24px #408897 icon,
   teal heading, Lora 18px body.
   NOT copied from live: its internal alignment. On live the heading sits in the
   icon-box widget's flex column while the paragraphs belong to a separate
   text-editor widget below, so the heading ends up indented 44px (icon 24 + gap
   20) from its own body copy. Here the heading and the body are both children of
   .rs-aus-hl-body, so they share a left edge by construction — which is the
   alignment Oskar asked for, and reproducing live would have re-broken it. */
.rs-aus-hl {
  display: flex;
  gap: 1.25rem;
  background: var(--rs-white-pure, #FFFFFE);
  border-radius: 4px;
  padding: 1.875rem;
  margin: 2.5rem 0;
}

.rs-aus-hl-icon {
  flex: 0 0 auto;
  line-height: 0;
}

.rs-aus-hl-icon p {
  margin: 0;
}

.rs-aus-hl-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Kit-glyph variant of the same 24px teal marker — the inline SVGs carry their
   colour in a fill attribute, an <i> has to be told. The parent's line-height:0
   is what keeps an SVG flush, so the glyph restores its own. */
.rs-aus-hl-icon i {
  display: block;
  font-size: 24px;
  line-height: 1;
  color: #408897;
}

.rs-aus-hl-body {
  min-width: 0;
  flex: 1 1 auto;
}

.rs-aus-hl-body > * {
  margin: 0;
}

.rs-aus-hl-body > * + * {
  margin-top: 0.9375rem;
}

/* h2 as well as h5, deliberately. The render-time regex reconstructs these boxes
   from legacy content where the heading is an <h5>, but the authored ACF block
   (rs_block_render_callout in inc/rs-blocks.php) emits an <h2> — per Roman's rule
   that section headings are H2. Matching only h5 meant a converted page silently
   lost its teal heading, which is exactly the "a converted page and an
   unconverted one look identical" promise in that block's own docblock. */
.rs-aus-body .rs-aus-hl-body h2, .rs-aus-body .rs-aus-hl-body h5 {
  margin: 0;
  color: #408897;
}

.rs-aus-hl-body p, .rs-aus-hl-body li {
  font-family: "Lora", serif;
  font-size: 1.125rem;
  line-height: 1.65;
  color: #5D636A;
}

/* ---- Roman round 2 #7: Remote Sensei commentary card (Figma 30369-30393) ----
   Teal 135deg gradient, 4px radius, 30px padding, white quote-right icon in a
   20px-gap row, everything inside reversed to white/near-white. The avatar is a
   48px circle with a 2px white ring; the signature <h6> keeps the Dancing Script
   face but has to lose the pale flanking dashes, which vanish on the gradient. */
.rs-aus-cm {
  display: flex;
  gap: 1.25rem;
  background: linear-gradient(135deg, #4B9EB0 0%, #408897 100%);
  border-radius: 4px;
  padding: 1.875rem;
  margin: 2.5rem 0;
  color: #F9FAF4;
}

.rs-aus-cm-icon {
  flex: 0 0 auto;
  color: #FFFFFE;
  font-size: 1.5rem;
  line-height: 1;
}

.rs-aus-cm-body {
  min-width: 0;
  flex: 1 1 auto;
}

.rs-aus-cm-body > * {
  margin: 0;
}

.rs-aus-cm-body > * + * {
  margin-top: 0.9375rem;
}

.rs-aus-body .rs-aus-cm-body h5 {
  margin: 0;
  color: #FFFFFE;
}

.rs-aus-cm-body p {
  font-family: "Lora", serif;
  font-size: 1.125rem;
  line-height: 1.65;
  color: #F9FAF4;
}

.rs-aus-cm-body img {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px #FFFFFE;
}

.rs-aus-cm-body a {
  color: inherit;
  text-decoration: none;
}

.rs-aus-body .rs-aus-cm-body h6::before, .rs-aus-body .rs-aus-cm-body h6::after {
  content: none;
}

/* ---- Roman round 3 #2: the byline (Figma 30369-30400) ----
   A row — 48px avatar, 16px gap, name over role — 20px under the last paragraph
   (the commentary's own column gap, wider than the 15px between paragraphs).
   Round 2 left the three source elements stacked, so the name inherited the
   article's Dancing Script h6 face and the underline from its /author/ link.
   Figma: name Hind Madurai 600 16px/1.5 #FFFFFE, role 400 14px/1.5 #D8E2E3. */
.rs-aus-cm-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}

.rs-aus-cm-author > p {
  margin: 0;
}

/* wpautop leaves an empty <p> where the byline's source newlines were; as a flex
   item it would double the gap between the avatar and the name. */
.rs-aus-cm-author > p:empty {
  display: none;
}

.rs-aus-cm-author-meta {
  display: flex;
  flex-direction: column;
}

.rs-aus-body .rs-aus-cm-author-meta h6 {
  margin: 0;
  font-family: "Hind Madurai", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
  color: #FFFFFE;
  text-align: left;
}

.rs-aus-body .rs-aus-cm-author-meta p {
  margin: 0;
  font-family: "Hind Madurai", sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #D8E2E3;
}

/* ---- Roman round 4: client quote card ----
   The toned-down sibling of the commentary card: same row (quote mark left,
   content right, 20px gap) and the same white/4px/30px box as the callout
   (30369-30324), but the quote mark is teal rather than white and there is no
   title. Live's own card supplies the rest — avatar beside name-over-role in a
   16px row above an italic quote, name black-prime, role muted.
   Wrapper built by rs_aus_wrap_content_blocks(). */
.rs-aus-q {
  display: flex;
  gap: 1.25rem;
  background: #FFFFFE;
  border-radius: 4px;
  padding: 1.875rem;
  margin: 2.5rem 0;
}

.rs-aus-q-icon {
  flex: 0 0 auto;
  color: #408897;
  font-size: 1.5rem;
  line-height: 1;
}

.rs-aus-q-body {
  min-width: 0;
  flex: 1 1 auto;
}

.rs-aus-q-body > * {
  margin: 0;
}

.rs-aus-q-body > * + * {
  margin-top: 0.9375rem;
}

/* Italic, as live sets on this widget — it is the only cue that reads as a quote
   once the block loses its title. Black-prime per Roman, not the callout's #5D636A. */
.rs-aus-q-body p {
  font-family: "Lora", serif;
  font-size: 1.125rem;
  line-height: 1.65;
  font-style: italic;
  color: #34383C;
}

.rs-aus-q-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* wpautop wraps the bare avatar and leaves an empty <p> behind the source
   newlines; both would otherwise become flex items and break the 16px gap. */
.rs-aus-q-author > p {
  margin: 0;
}

.rs-aus-q-author > p:empty {
  display: none;
}

.rs-aus-q-body img {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.rs-aus-q-author-meta {
  display: flex;
  flex-direction: column;
}

/* Same escape from the article's Dancing Script h6 as the commentary byline —
   including killing the flanking dashes, which is the visible bug here. */
.rs-aus-body .rs-aus-q-author-meta h6 {
  margin: 0;
  font-family: "Hind Madurai", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
  color: #34383C;
  text-align: left;
}

.rs-aus-body .rs-aus-q-author-meta h6::before, .rs-aus-body .rs-aus-q-author-meta h6::after {
  content: none;
}

.rs-aus-body .rs-aus-q-author-meta p {
  margin: 0;
  font-family: "Hind Madurai", sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  font-style: normal;
  color: #5D636A;
}

@media (max-width: 575.98px) {
  .rs-aus-hl, .rs-aus-cm, .rs-aus-q {
    flex-direction: column;
    gap: 0.9375rem;
    padding: 1.25rem;
  }
}
/* ---- Roman round 2 #1: the sparks animate on live ----
   Live runs a 2s linear infinite alternate ±5px vertical drift on the star
   widget (post-69429.css, @keyframes example). Reproduced verbatim, and gated
   behind prefers-reduced-motion. */
.rs-aus-sparks {
  animation: rs-aus-spark 2s linear infinite alternate;
}

@keyframes rs-aus-spark {
  from {
    transform: translate(0, -5px);
  }
  to {
    transform: translate(0, 5px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rs-aus-sparks {
    animation: none;
  }
}
/* ---- Roman round 2 #8: CTA (Figma 30369-30405) ----
   Coral 135deg gradient rather than the flat .bg-danger round 1 used, 4px radius,
   the two-layer soft drop shadow, 50px/60px padding, a 40px gap between the title
   block and the button. Headline is Dancing Script 700 56px/1 (self-hosted), not
   the Bootstrap .display-5 italic stand-in.

   Round 5 #2: the button is `.btn .btn-dark .btn-atom` — the global atom class in
   main.scss plus the global black face, replacing the page-local .rs-aus-cta-btn
   that had drifted to an 18px/600 label with a 20px icon gap, symmetric padding
   and no hover arrow travel. Roman's rule: buttons live globally, not per page. */
.rs-aus-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #F18E70 0%, #F37465 100%);
  border-radius: 4px;
  padding: 3.125rem 3.75rem;
  color: #FFFFFE;
  text-align: center;
  box-shadow: 0 50px 60px -30px rgba(47, 47, 47, 0.1), 0 20px 20px -10px rgba(47, 47, 47, 0.05);
}

/* The wave sheen Figma masks over the bottom of the card. Same asset live uses on
   this CTA (uploads/2024/06/waves-1-1.svg), vendored into the theme so nothing is
   fetched from an uploads path that differs per environment. */
.rs-aus-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/waves-cta-story.svg") bottom right/100% auto no-repeat;
  pointer-events: none;
}

.rs-aus-cta > * {
  position: relative;
}

.rs-aus-cta-headline {
  font-family: "Dancing Script", cursive;
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1;
  margin: 0;
}

.rs-aus-cta-blurb {
  font-size: 1.25rem;
  line-height: 1.6;
}

@media (max-width: 575.98px) {
  .rs-aus-cta {
    padding: 2rem 1.25rem;
  }
}
/* ---- Roman round 2 #9: "Check out other stories" (Figma 30369-30285) ----
   Section heading is a real <h2> (Roman: H1 is hero-only, every section heading
   is H2) at Montserrat 600 40px/1.3 #34383C, 60px above the cards. Cards follow
   the article-card component (30369-30292 default / -30293 hover): cream #F9FAF4,
   4px radius, 362x191 image, 20px inner padding, 15px/10px gaps, Lora excerpt,
   teal Hind Madurai link; hover swaps to white plus the two-layer shadow.
   Round 5 #2: the yellow button is `.btn .btn-warning .btn-atom` — same global
   atom, arrowless face, so it keeps the symmetric 30/30 padding. Its page-local
   .rs-aus-btn-yellow copy is gone. */
/* Section padding is 60px top and bottom, from the `others` frame in Figma
   30369-30285 (pad [60,147,60,147]). It was Bootstrap's `py-5` = 48px, so the
   space BEFORE the heading was 12px short while the space after it was already
   right. Owning it in a real class rather than a utility means the two sides of
   the heading are specified in the same place. */
.rs-aus-related {
  padding: 3.75rem 0;
}

.rs-aus-related-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.3;
  color: #34383C;
  margin-bottom: 3.75rem;
}

/* Card surface is #F9F9F9, not the cream this used to claim. Figma 30369-30292
   paints the card with a full-bleed `cnt` rect at #F9F9F9 sitting on top of the
   component frame's own #F9FAF4 fill — the rect covers the whole 362x436 box, so
   the rect is what you actually see. Reading the frame fill instead is what put
   cream here originally.
   display:flex + column is what lets the link bottom-align: the card is
   height:100%, the body grows into it, and the link takes margin-top:auto. */
.rs-aus-card {
  background: var(--rs-grey-light-50, #F9F9F9);
  border: 0;
  border-radius: 4px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.rs-aus-card:hover {
  background: #FFFFFE;
  box-shadow: 0 50px 60px -30px rgba(47, 47, 47, 0.1), 0 20px 20px -10px rgba(47, 47, 47, 0.05);
}

/* Figma paints the card thumbnail with scaleMode "fit" over a #25272B plate, not
   "crop" — object-fit:cover was slicing the "Asana Usage Story" wordmark off the
   top of every thumbnail. */
.rs-aus-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 362/191;
  object-fit: contain;
  background: #25272B;
}

.rs-aus-card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
  flex: 1 1 auto;
}

.rs-aus-card-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.4;
  color: #34383C;
  margin: 0;
}

.rs-aus-card-text {
  font-family: "Lora", serif;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #5D636A;
  margin: 0.625rem 0 0;
}

/* margin-top:auto pins the link to the bottom of the card so a row of cards with
   different excerpt lengths lines its links up, which is how Figma 30369-30292
   draws it. `auto` rather than a fixed offset because it collapses to the body's
   own 15px gap when the excerpt is long enough to fill the card — so the Figma
   spacing is the MINIMUM, never overridden. */
.rs-aus-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: auto;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.6;
  color: #408897;
  text-decoration: none;
}

.rs-aus-card-link:hover {
  color: #34383C;
}

/* Mobile: live's Elementor stack puts the company card first, above the article;
   Bootstrap's column source order (.col-lg-8 before .col-lg-4) puts it last. Flip
   visually via flex order — the DOM/source order is untouched. */
@media (max-width: 991.98px) {
  .rs-aus .col-lg-4 {
    order: -1;
  }
}