/*
 * THE "SAFETY COMES STANDARD" POP-UP — the legacy window shade, re-expressed in
 * this storefront's tokens (W181, Ryan 2026-09-04).
 *
 * Served as a static asset and pulled in by `<SafetyStyles>` rather than
 * `import`ed, for the reason given at the top of chrome.css.
 *
 * Class prefix `sf-saf-`.
 *
 * WHAT WAS TRANSPLANTED: the SEQUENCE (hero, lede beside its film, the padding
 * section with its two checked pads and their value badges, then the four
 * shorter sections) and the two-column lede row the legacy switches on above
 * 768px. What was NOT: six inline `<style>` blocks, a 40px dark title band the
 * shell's header already is, and a `--gray-background` tint that this site
 * spells `--brand-color-well`.
 *
 * THE FRAME IS NOT HERE. `modal.css` owns the dialog, scrim, panel, rise,
 * header row, close cross and scrolling content row; a copy in this sheet would
 * RACE it on whichever <link> React hoisted last. The one frame number that is
 * this board's is the panel width — 780, the measure every shade pop-up uses.
 */

.sf-saf__panel {
  width: 780px;
}

/* ------------------------------------------------------- the focus ring -- */

.sf-saf__film:focus-visible {
  outline: var(--sf-focus-ring, 2px solid var(--brand-color-accent, #c4530a));
  outline-offset: var(--sf-focus-ring-offset, 2px);
}

/* ------------------------------------------------------------- the top --- */

/* FULL BLEED. The legacy draws a 300px band cropped to `cover`; here the
 * photograph keeps its own aspect, because at 780 the asset is 640 wide and
 * cropping it further would lose the children the picture is of. */
.sf-saf__hero {
  display: block;
  height: auto;
  width: 100%;
}

/*
 * THE LEDE BESIDE ITS FILM — the legacy's own desktop arrangement
 * (`#saf_intro` becomes a flex row above 768px, with the poster at 302px).
 */
.sf-saf__lede-row {
  align-items: center;
  background: var(--brand-color-well, #f1f0ec);
  display: flex;
  gap: 30px;
  padding: 36px 32px;
}

.sf-saf__lede {
  color: var(--brand-color-ink-soft, #44464a);
  flex: 1;
  font-size: var(--text-body);
  line-height: 1.5;
  margin: 0;
  min-width: 0;
}

/* 302 IS THE ASSET'S OWN WIDTH and the legacy's own draw; there is no larger
 * source, so this is the honest maximum. */
.sf-saf__film {
  background: none;
  border: 0;
  cursor: pointer;
  display: block;
  flex: none;
  padding: 0;
  position: relative;
  width: 302px;
}

.sf-saf__film-poster {
  border: 3px solid var(--brand-color-surface, #ffffff);
  border-radius: var(--radius-inner);
  box-sizing: border-box;
  display: block;
  height: auto;
  width: 100%;
}

/*
 * The 44px white disc the legacy centres on the poster, with the play triangle
 * drawn in CSS rather than as a 512px PNG — the same border trick the Lightning
 * Adjust film control uses, and the same 44px the Rust Armor one does.
 */
.sf-saf__film-play {
  background: var(--brand-color-surface, #ffffff);
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 10px rgba(11, 12, 14, 0.36);
  height: 44px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
}

.sf-saf__film-play::after {
  border-bottom: 7px solid transparent;
  border-left: 12px solid var(--brand-color-ink, #17181a);
  border-top: 7px solid transparent;
  content: "";
  left: 50%;
  position: absolute;
  top: 50%;
  /* OPTICAL CENTRING: a right-pointing triangle's visual centre sits left of
   * its box's, so it is nudged right of true centre. */
  transform: translate(-40%, -50%);
}

/* ----------------------------------------------------- the sections ------ */

/*
 * THE SECTION HEADS ARE `.sf-sec-head`'s, from `sections.css` — the same
 * treatment W125 ruled for the Rust Armor pop-up and the same one the category
 * table and the PDP chapters wear. The legacy numbered these 1-5 with a dark
 * disc; the platform's header already carries a circle, and two circles side by
 * side would be two ideas of what a section header is (W125's own argument).
 */
.sf-saf__section {
  padding: 34px 32px 0;
}

.sf-saf__section:last-of-type {
  padding-bottom: 38px;
}

.sf-saf__para {
  color: var(--brand-color-ink-soft, #44464a);
  font-size: var(--text-body);
  line-height: 1.6;
  margin: 18px 0 0;
}

/* SET INTO THE COPY, which is the legacy's `float: right` above 768px. */
.sf-saf__figure {
  border-radius: var(--radius-inner);
  float: right;
  height: auto;
  margin: 6px 0 20px 26px;
  max-width: 320px;
  width: 45%;
}

.sf-saf__included {
  clear: both;
  color: var(--brand-color-ink, #17181a);
  font-size: var(--text-body);
  font-weight: 700;
  margin: 24px 0 0;
  padding-top: 18px;
}

.sf-saf__pads {
  display: grid;
  gap: 26px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

/* THE LEGACY'S CHECKED LIST, with the tick drawn as this site's own mark
 * instead of a 25px PNG background. */
.sf-saf__pad {
  display: grid;
  column-gap: 14px;
  grid-template-columns: 22px minmax(0, 1fr);
}

.sf-saf__pad-tick {
  align-items: center;
  color: var(--brand-color-good, #1f7a4d);
  display: flex;
  height: 22px;
  justify-content: center;
}

.sf-saf__pad-body {
  min-width: 0;
}

.sf-saf__pad-name {
  color: var(--brand-color-ink, #17181a);
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.sf-saf__pad-promise {
  color: var(--brand-color-muted, #6c6a62);
  font-size: var(--text-small);
  line-height: 1.4;
  margin: 4px 0 0;
}

/*
 * THE VALUE BADGE. The legacy sets it in a bordered pill with a "free" icon;
 * here it is the site's own good/soft pair, which is what every other "included
 * at no cost" statement on this storefront already wears.
 */
.sf-saf__value {
  background: var(--brand-color-good-soft, #e9f3ee);
  border-radius: var(--radius-control);
  color: var(--brand-color-good, #1f7a4d);
  display: inline-block;
  font-size: var(--text-small);
  font-weight: 600;
  margin: 14px 0 0;
  padding: 7px 12px;
}

/* -------------------------------------------------------------- a phone -- */

@media (max-width: 767.98px) {
  /* THE LEDE ROW STACKS, which is the legacy's own rung: its flex only turns on
   * above 768, and below it the poster is a centred 302px block. */
  .sf-saf__lede-row {
    display: block;
    padding: 26px 20px;
  }

  .sf-saf__film {
    margin: 26px auto 0;
    max-width: 100%;
  }

  .sf-saf__section {
    padding: 26px 20px 0;
  }

  .sf-saf__section:last-of-type {
    padding-bottom: 28px;
  }

  /* THE FLOAT GOES. A 45% picture beside a 320px measure leaves five or six
   * words a line, which is not a paragraph. */
  .sf-saf__figure {
    float: none;
    margin: 20px 0 0;
    max-width: 100%;
    width: 100%;
  }
}