/*
  Download — Website Refresh 2026 1e (Figma), "Download" frame.
  Source: https://www.figma.com/design/2W6CyIAW3cKDEqdv26CeE2/Website-Refresh-2026-1e?node-id=8064-42718

  Requires tokens.css, typography.css, buttons.css, flash.css, and
  case-study-cover.css to be loaded first. Structurally almost
  identical to the Case Study component, but every reusable piece was
  already built for something else:

  - Cover + badge: .rs-case-study-cover / .rs-case-study-cover__flash
    (Figma's own layer for this is literally named "Case Study" here
    too, confirming it's the same component reused, not coincidence).
  - Badge colour: .rs-flash--download (Purple/700, white text) — this
    was built when Flash itself was implemented but never used until
    now, since that demo only showed the Case Study colour in context.
  - Heading: .rs-heading.rs-heading--h3, same 20px margin-bottom
    override as Case Study.
  - Checklist: .rs-icon-list / .rs-icon-list-item from typography.css,
    unchanged.
  - Button: .rs-button.rs-button--outline-neutral, unchanged.

  Background colour uses --color-neutral-100 directly. Figma had this
  bound to a separate "Website/Background/100" variable, but that was
  a leftover from an old naming scheme not yet cleaned up in the
  file, not a real semantic distinction — using the primitive here
  instead of the (now removed) alias.

  Only the card shell, paragraph spacing, and the icon list's
  bottom margin (specific to this composition, not a general Icon
  List default) are new.
*/

.rs-download {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-48);
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-48);
  border-radius: var(--space-16);
  background-color: var(--color-neutral-100);
}

.rs-download__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 0%;
  min-width: 0;
  align-self: stretch;
}

.rs-download__text .rs-heading--h3 {
  margin-bottom: var(--space-20);
}

.rs-download__body {
  margin: 0 0 var(--space-24) 0;
  width: 100%;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-neutral-900);
}

.rs-download__text .rs-icon-list {
  width: 100%;
  margin-bottom: var(--space-32);
}

@media (max-width: 768px) {
  .rs-download {
    flex-direction: column;
  }
  .rs-download .rs-case-study-cover {
    width: 100%;
  }
}