/* =============================================================================
   Resources — Dental Acquisitions
   -----------------------------------------------------------------------------
   Rebuilt 2026-09-07 from the supplied design. The page it replaced was a
   content library (.rs-cards, .rs-chips, .rs-tools, .rs-news); all of those
   blocks went with the content they held, which was invented. See the view's
   header comment.

   What is left is a question router: five stage columns and nineteen
   question/answer/destination rows. The rows are .da-row, so the hairlines, the
   three-track grid and the single-column collapse all come from
   marketing/da_system.css; this file changes the track ratios and the label's
   treatment, and adds the two blocks the design needs that nothing shared has.

   Scoped without a page-root class: marketing_page_stylesheet_tag loads
   marketing/pages/<action>.css, so this file is only ever on /resources and a
   bare .rs-* selector is page-local by construction.

   Reads var(--da-*) / var(--da-sec-*) only. Colour literals belong in
   colors_and_type.css.

   MOTION. The shared reveal system does the bands, the blocks and the row
   cascades. One page-local transition: each stage's tick grows out of its
   heading, which is the vertical twin of what .da-rule already does with
   scaleX. It is neutralised under .da-motion--quiet at the foot of this file.
   ============================================================================= */

/* ═══ THE PREMISE ══════════════════════════════════════════════════════════
   One column, no photograph and no figure. The page's whole job is to get a
   reader to their question in one screen, and anything beside the copy here
   competes with the five stages immediately below it. */
.rs-hero__lede { max-width: 44em; }
.rs-hero .da-link { margin-top: var(--sp-8); }

/* Two sentences, the second in the accent, flowing as one paragraph rather than
   breaking. Same treatment as /professionals; the measure controls the wrap. */
.rs-h2 { max-width: 24em; }

/* ═══ THE FIVE STAGES ══════════════════════════════════════════════════════
   Five columns of heading + tick + questions. Deliberately NOT five cards: a
   bordered box per stage reads as five products to choose between, where these
   are five descriptions of one journey and a reader belongs to exactly one. */
.rs-stages {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-8);
  margin-top: var(--sp-16);
}
.rs-stage { min-width: 0; }
.rs-stage__name {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--e-card-title-sm);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--da-sec-ink);
}

/* The design's tally mark: a 2px teal tick between the stage and its questions.
   A mark inside the block, not a border on its edge, which is the device this
   codebase bans. Rendered as its own element so it can grow on reveal. */
.rs-stage__tick {
  display: block;
  width: 2px;
  height: 17px;
  margin: var(--sp-4) 0;
  background: var(--da-sec-accent);
}
.rs-stage__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}
.rs-stage__list li {
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  line-height: 1.5;
  color: var(--da-sec-body);
}

/* ═══ A GROUP OF QUESTIONS ═════════════════════════════════════════════════ */
.rs-group + .rs-group { margin-top: var(--sp-16); }
.rs-group__label {
  margin: var(--sp-16) 0 0;
  font-family: var(--font-brand);
  font-size: var(--e-meta);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tk-eyebrow);
  text-transform: uppercase;
  color: var(--da-sec-accent);
}
.rs-group + .rs-group .rs-group__label { margin-top: 0; }
.rs-rows { margin-top: var(--sp-6); }

/* ═══ A QUESTION ROW ═══════════════════════════════════════════════════════
   Three tracks: question | answer | destination. Measured off the design at
   1440 (384 / 583 / 256 of 1281), expressed as ratios so the row keeps its
   proportions rather than its pixels.

   The destination track is a real column, not .da-row's `auto` third track:
   that one is sized for a nowrap tag like "PAID", and these labels are up to
   four words ("Sellers, your transition team"). */
.rs-row {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 2.3fr) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: start;
}
/* The question is the row's subject, so it reads as a sentence in ink rather
   than as .da-row__label's uppercase accent term. */
.rs-row__q {
  font-size: var(--e-body-sm);
  font-weight: var(--fw-bold);
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--da-sec-ink);
}
.rs-row__a { color: var(--da-sec-muted); }
.rs-row__dest { min-width: 0; text-align: right; }

/* The destination. A text action, but NOT .da-link: that one carries a rule
   under the whole label, and nineteen of those down a right-hand column reads
   as a second set of hairlines cutting across the row grid. This underlines on
   hover instead. */
.rs-dest {
  display: inline;
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  font-weight: var(--fw-medium);
  line-height: 1.45;
  color: var(--da-sec-accent);
  text-decoration: none;
  transition: color var(--dur-hover-out) linear;
}
.rs-dest:hover {
  color: var(--da-sec-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.rs-dest:focus-visible { outline: none; box-shadow: var(--nav-focus-ring); }
/* The arrow travels on hover. It is inline in a wrapping label, so it is
   margin, not transform: a transform on an inline box does nothing. */
.rs-dest .ico {
  --ico: 15px;
  vertical-align: -2px;
  margin-left: 2px;
  transition: margin-left var(--dur-hover-out) linear;
}
.rs-dest:hover .ico { margin-left: 6px; }

/* ═══ A BAND'S CLOSING ROW ═════════════════════════════════════════════════ */
.rs-close {
  margin-top: var(--sp-16);
  padding-top: var(--sp-10);
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
}
.rs-close .da-close__text { margin: 0; max-width: 26em; }

/* ═══ THE WAY OUT ══════════════════════════════════════════════════════════ */
.rs-cta .da-lede { max-width: 40em; }
.rs-cta__tagline {
  margin: var(--sp-16) 0 0;
  padding-top: var(--sp-8);
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
  font-family: var(--font-brand);
  font-size: var(--e-card-title-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: var(--da-sec-accent);
}

/* ═══ MOTION, page-local ═══════════════════════════════════════════════════
   The tick grows out of the heading as its stage arrives: scaleY on a 2x17 bar,
   which is the vertical twin of what .da-rule does with scaleX and, like it,
   does not reflow.

   Keyed to .da-stagger[data-reveal], the attribute that gets the container
   observed, and NOT to a bare .rs-stages. A hidden state keyed to anything else
   can outlive the thing that would reveal it: the professionals page shipped a
   roster stuck at opacity 0 that way (doc 24.1). A .da-stagger group is never
   split, so its own .is-in is the right hook here. */
.da-motion .rs-stages[data-reveal] .rs-stage__tick {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--dur-reveal) var(--ease-reveal) var(--reveal-delay, 0ms);
}
.da-motion .rs-stages[data-reveal].is-in .rs-stage__tick { transform: none; }

/* Reduce Motion gets the state, not the travel. !important for the same reason
   the shared quiet block needs it: site.css's global reset forces
   transition-duration to 0.01ms and would turn this into a pop. */
.da-motion--quiet .rs-stage__tick {
  transform: none !important;
  transition: opacity 360ms linear !important;
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════════
   The shared breakpoints (1099 / 899 / 639), so a band and its contents change
   together. */
/* THE STAGE LADDER, and why it starts this high. A column's width here is
   (viewport - scrollbar - 2*nav-pad - 4*gap) / 5, so five stages need about
   1320px to match the 229px the design gives them at 1440. Measured at 1024
   they were 167px, where "Building the Deal Team" takes three lines and its
   questions run to about twenty characters a line. Three up at 1100 measures
   315px, which is wider than the design's own column. */
@media (max-width: 1219px) {
  .rs-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-10) var(--sp-8); }
}

@media (max-width: 1099px) {
  /* The destination column gives way first: it holds at most four short words,
     where the answer holds a full sentence. */
  .rs-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-6); }
}

@media (max-width: 899px) {
  /* Two up. Five items leave one alone on the last row, which needs no
     reordering: doc 18.4's warning is about a THREE-item grid halving, where
     the odd one out has to span or be moved with `order` and the focus order
     stops matching the visual order. */
  .rs-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* .da-row collapses to one column here (da_system.css), so the three cells
     stack: question, answer, destination. The destination stops being a
     right-hand column and becomes the row's last line, which is where a reader
     scanning a stacked row expects the action. */
  .rs-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .rs-row__dest { text-align: left; }
}

@media (max-width: 639px) {
  .rs-stages { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .rs-close { margin-top: var(--sp-12); padding-top: var(--sp-8); }
  .rs-group + .rs-group { margin-top: var(--sp-12); }
  .rs-group__label { margin-top: var(--sp-12); }
  .rs-cta__tagline { margin-top: var(--sp-10); padding-top: var(--sp-6); }
}