/*
 * THE RUST ARMOR POP-UP — the legacy window shade, re-expressed in this
 * storefront's tokens (W104, Ryan 2026-09-03).
 *
 * Served as a static asset and pulled in by `<RustArmorStyles>` rather than
 * `import`ed, for the reason given at the top of chrome.css: a bundled import
 * attaches the chunk to the shared `[brand]` layout segment and Next then emits
 * a <link> to it on every brand's every page.
 *
 * Class prefix `sf-ra-`.
 *
 * ═══ WHAT WAS TRANSPLANTED AND WHAT WAS NOT ═══
 *
 * Playbook §3 says lift the markup and tokenize the values. Ryan's ruling names
 * the CONTENT as the good thing ("copy with images and all"), and the content
 * renders inside OUR design language — so the legacy fragment's eleven inline
 * `<style>` blocks are not imported. What IS transplanted is the STRUCTURE and
 * the SEQUENCE: a numbered climate checklist with a thumbnail per line, a dark
 * galvanization band with the pole standing beside its copy, a white card
 * floating on the bolts photograph, and the guarantee with its seal set into the
 * text. Every colour, size and radius below is a `--brand-*` or a platform
 * token.
 *
 * Four legacy values that are NOT tokens and are deliberate:
 *
 *   · the 30px numbered disc and its 39px bullet thumbnails — those are the
 *     asset's own pixels, not a scale step, and the source has no larger copy
 *     (see `tools/mirror-shade-images.mjs`).
 *   · `1.4` line-height on the band's paragraphs, the legacy's own measure.
 *   · the stainless card's own white ground, which is the whole point of that
 *     section's drawing: copy floating on a photograph.
 *
 * ═══ THE FRAME IS NOT HERE ═══
 *
 * `modal.css` owns the dialog reset, the scrim's wash and inset, the panel's
 * ground/radius/shadow/rise, the navy header row, the close cross and the
 * scrolling content row. This sheet declares NONE of them — a copy left here
 * would RACE the shell's on whichever <link> React hoisted last, which is the
 * hazard `tests/modal-shell.test.ts` sweeps for. The one frame number that is
 * this board's is the panel width.
 *
 * 780 IS THE DELIVERY TIMELINE'S, and it is a measure decision: this pop-up
 * runs four illustrated sections and its longest paragraph is 330 characters.
 * At 780 with the 32px inset that paragraph sets at roughly 88 characters a
 * line; the ball modal's 520 would run it to five more lines and the two-column
 * galvanization band would have no second column to give.
 */

.sf-ra__panel {
  width: 780px;
}

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

/*
 * THE CONTROLS THIS SHEET ADDS need their own ring: the shell rings its close
 * cross and its scrim, and nothing else, because until now no pop-up body
 * carried a control. This one carries five (four "map" links and the film's
 * poster), so the ring block is back — `ball.css`'s header predicted exactly
 * this ("a control added to this modal's BODY later needs a ring block back
 * here").
 */
.sf-ra__map:focus-visible,
.sf-ra__film:focus-visible,
.sf-ra__offsite-link:focus-visible {
  outline: var(--sf-focus-ring, 2px solid var(--brand-color-accent, #c4530a));
  outline-offset: var(--sf-focus-ring-offset, 2px);
}

/* ON THE DARK BAND the accent ring does not clear 3:1, so the two controls
 * inside it take the site's existing on-dark pair — chrome.css's own precedent,
 * and the same swap `modal.css` makes for the cross on the navy header. */
.sf-ra__gal .sf-ra__film:focus-visible,
.sf-ra__gal .sf-ra__offsite-link:focus-visible {
  outline: var(--sf-focus-ring-on-dark, 2px solid var(--brand-color-accent-on-dark, #ffb27a));
}

/* ------------------------------------------- the two sections (W125) ----- */

/*
 * EXACTLY TWO SECTIONS, in the site's own header treatment (W125, Ryan
 * 2026-09-04): "Do I need it?" and "What's Included?", with the three
 * galvanization / fasteners / guarantee headings DEMOTED to subheaders beneath
 * the second.
 *
 * THE HEADER ITSELF IS NOT DRAWN HERE. `.sf-sec-head` lives in `sections.css`
 * and is pulled in by `<SectionStyles>` — the same 40px tinted circle and title
 * the category table, the category reviews and the PDP's chapters all draw. A
 * pop-up that restated those rules in its own prefix would be a sixth idea of
 * what a section header is, which is the thing W125 is correcting.
 */

.sf-ra__section {
  /* W127 — AIR BY PROXIMITY. A header sits 20px from its own first content and
   * 64px from the section it follows, so the grouping is legible before a word
   * is read. The legacy had one margin doing both jobs and "What's Included"
   * ended up nearer the bullets it ended than the band it opens. */
  padding: 0 32px;
}

.sf-ra__section:first-of-type {
  padding-top: 30px;
}

.sf-ra__section--included {
  margin-top: 64px;
}

/*
 * THE SUBHEADER, one clear step under `.sf-sec-head__title`.
 *
 * It is the PDP engineering chapter's STANDFIRST register — `--text-card-header`
 * at 700, which globals.css already uses for exactly this relationship (a claim
 * under a section head). Reusing that rung rather than inventing an in-between
 * size is what keeps three subheaders from reading as a third level.
 *
 * globals.css styles every h1-h4 with the heading face at weight 500, a -0.015em
 * track, 1.12 leading and `text-wrap: balance`; all five are restated. `wrap` is
 * the initial value and is spelled `wrap` rather than `normal`, because `normal`
 * is `white-space`'s keyword and gets dropped at parse time (the site-wide
 * defect found 2026-08-26).
 */
.sf-ra__sub {
  color: var(--brand-color-ink, #17181a);
  font-family: var(--brand-font-body, system-ui, sans-serif);
  font-size: var(--text-card-header);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.3;
  margin: 0 0 14px;
  text-wrap: wrap;
}

.sf-ra__sub--on-dark {
  color: var(--brand-color-surface, #ffffff);
}

/* ------------------------------------------------- 1 — do I need it? ----- */

/*
 * W126: THE BULLETS SIT UNDER THE HEADER'S TEXT, NOT BESIDE ITS CIRCLE.
 *
 * Ryan: the thumbnails "read at the same level as the header icon… they all
 * look like they're at the same level." They were 39px against a 40px header
 * circle, starting at the same x — which is a peer, not a child, in both
 * dimensions at once.
 *
 * `--space-icon-indent` (54px = the 40px circle + the head's 14px gap) is the
 * platform's own answer to this: it is what the PDP chapter's eyebrow uses to
 * sit under its header's TITLE rather than under its mark. Borrowing it here
 * means the indent moves if the circle ever does.
 */
.sf-ra__bullets {
  display: grid;
  gap: 13px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0 120px 0 var(--space-icon-indent);
}

.sf-ra__bullet {
  align-items: center;
  display: flex;
  gap: 13px;
}

/*
 * 26px, AGAINST THE HEADER CIRCLE'S 40. The source files are 39px square (the
 * legacy has no larger original), so drawing them at 26 also puts them at 1.5x
 * — the one asset in this pop-up that got SHARPER by being ruled smaller.
 */
.sf-ra__bullet-icon {
  display: block;
  flex: none;
  height: 26px;
  width: 26px;
}

.sf-ra__bullet-text {
  color: var(--brand-color-ink-soft, #44464a);
  font-size: var(--text-body);
  line-height: 1.5;
}

/*
 * The board's quiet link on a BUTTON. A control that does not navigate is not an
 * anchor (the storefront's standing rule), and a button arrives with a UA
 * background, border, padding, font and alignment that all have to be undone
 * before the quiet treatment can be seen at all — the same reset
 * `.sf-flow-quiet--button` performs, restated in this sheet's prefix because a
 * pop-up must not depend on flow.css being on the page.
 */
.sf-ra__map {
  background: none;
  border: 0;
  color: var(--brand-color-muted, #6c6a62);
  cursor: pointer;
  font: inherit;
  margin-left: 6px;
  padding: 0;
  /* HOSTS A CLIPPED NAME (`.sf-modal__sr` is `position: absolute`), so it is
   * positioned — playbook §5's sr-span overflow trap, which is only harmless
   * when the nearest positioned ancestor is close by. */
  position: relative;
  text-decoration: underline;
}

.sf-ra__map:hover {
  color: var(--brand-color-ink-soft, #44464a);
}

/* ------------------------------------------ 2a — hot dip galvanization --- */

/*
 * THE DARK BAND. The legacy paints this ground with `ra_gal_background.png` —
 * measured, a 178 KB, 520 x 520 picture of the flat colour #2F3338. It is a
 * token here: `--brand-color-media-well-a` (#23262E) is the palette's own
 * lighter dark, already the ground of the category film well, the delivery
 * player and the lightbox stage.
 *
 * FULL BLEED inside the panel — no inline padding on the band itself, so its
 * ground runs edge to edge the way the legacy's did, and the copy takes the
 * inset instead.
 */
/*
 * THE CLIPPING WRAPPER — W130's bleed, made safe.
 *
 * MEASURED DEFECT, caught by `tools/shadegate.mjs`: the pole is 820px wide in a
 * 780px panel and hangs past its right edge, and an out-of-flow box that wide
 * EXTENDS THE CONTENT ROW'S SCROLLABLE WIDTH — `scrollWidth` read 1068 against
 * a 780 client, i.e. the whole pop-up could be scrolled sideways.
 *
 * `clip-path: inset(-2000px 0)` WAS TRIED FIRST and is recorded here because it
 * looks like the right tool and is not: it clipped the ink correctly and left
 * `scrollWidth` at 1100. Clipping paints; it does not change layout.
 *
 * `overflow: hidden` does change layout — and on its own it would also clip the
 * pole's RISE, which is the whole ruling. So the wrapper is pulled UP over the
 * bullets by 200px and padded back down by the same 200, putting the band
 * exactly where it was while giving the pole 200px of clipped headroom to rise
 * into. `pointer-events` is handed back to the band alone, because a
 * transparent box lying over the last two bullets would otherwise swallow their
 * "map" presses.
 */
.sf-ra__gal-clip {
  margin: -180px -32px 0;
  overflow: hidden;
  padding-top: 200px;
  pointer-events: none;
  position: relative;
}

.sf-ra__gal {
  background: var(--brand-color-media-well-a, #23262e);
  margin-top: 0;
  pointer-events: auto;
  /*
   * W130 — THE POLE'S CONTAINING BLOCK, and the right-hand gutter it stands in.
   *
   * `position: relative` makes this band the pole's anchor; the padding-right
   * reserves the column it stands in so no line of copy ever runs under it. The
   * band does NOT clip (no `overflow`), which is the whole point: the pole is
   * taller than the band and rises out of the top, over the bullets above,
   * exactly as the legacy's `bottom: 0; right: -285px` did.
   */
  padding: 28px 32px 30px;
  /* The gutter the pole stands in, plus the 32px the band regained by
   * bleeding — so the copy's measure is what it was. */
  padding-right: 282px;
  position: relative;
}

.sf-ra__gal-copy {
  /* Above the pole in the stacking order — the copy is what has to be readable
   * where the two meet. Both are positioned, so DOM order alone would put the
   * pole on top. */
  position: relative;
  z-index: 2;
}

/* 1.4 IS THE LEGACY'S OWN MEASURE on this band, kept verbatim: it is a shorter
 * leading than the site's 1.5/1.6 body rhythm, and on a dark ground that is
 * right rather than sloppy. */
.sf-ra__gal-para {
  color: color-mix(in srgb, var(--brand-color-surface, #ffffff) 84%, transparent);
  font-size: var(--text-body);
  line-height: 1.4;
  margin: 0 0 16px;
}

/*
 * THE FILM'S SLOT (W128) — the two numbers the shared expand frame cannot know.
 *
 * REST is 296, the width the legacy drew its poster at. EXPANDED is the band's
 * whole inner measure: this column, plus the gutter the pole stands in, which
 * is what "full pop-up width, overlaying the right-rail photo" means in
 * arithmetic. `rust-armor-modal.tsx` carries the same ratio as a number for the
 * companion scroll, and a test holds the two together.
 *
 * Everything else about the box — the frame, the shadow, the 280ms curve, the
 * control pill — is `embed-expand.css`'s, and is the category hero's.
 */
.sf-ra__film {
  --sf-xp-w: 296px;
  margin-top: 4px;
  /* OVER THE POLE WHEN IT GROWS, which is the ruling: the expanded film
   * overlays the right-rail photo rather than being clipped by it. */
  z-index: 3;
}

.sf-ra__film[data-big="true"] {
  --sf-xp-w: calc(100% + 218px);
}

.sf-ra__film-caption {
  color: color-mix(in srgb, var(--brand-color-surface, #ffffff) 84%, transparent);
  font-size: var(--text-small);
  line-height: 1.4;
  margin: 10px 0 0;
  max-width: 296px;
}

/* The running time, one rung quieter than the sentence it ends — the legacy
 * greys it against the same band. */
.sf-ra__film-time {
  color: var(--brand-color-placeholder-on-dark, #5a5d66);
}

.sf-ra__offsite {
  color: color-mix(in srgb, var(--brand-color-surface, #ffffff) 84%, transparent);
  font-size: var(--text-small);
  line-height: 1.6;
  margin: 16px 0 0;
}

.sf-ra__offsite-link {
  color: var(--brand-color-surface, #ffffff);
  text-decoration: underline;
}

.sf-ra__offsite-link:hover {
  color: var(--brand-color-accent-on-dark, #ffb27a);
}

.sf-ra__components {
  margin-top: 26px;
}

.sf-ra__components-title {
  color: var(--brand-color-surface, #ffffff);
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 14px;
}

.sf-ra__component-list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sf-ra__component {
  align-items: center;
  color: color-mix(in srgb, var(--brand-color-surface, #ffffff) 84%, transparent);
  display: flex;
  font-size: var(--text-small);
  gap: 10px;
  line-height: 1.4;
}

/* The legacy's `.selected` — the one component the photograph beside it shows. */
.sf-ra__component--on {
  color: var(--brand-color-surface, #ffffff);
  font-weight: 700;
}

.sf-ra__component-tick {
  align-items: center;
  display: flex;
  flex: none;
}

/*
 * W130 — THE POLE BLEEDS AND RISES, and it is bottom-aligned.
 *
 * Ryan, beside the legacy: "much larger — extends up into the do-I-need-it
 * bullet area like legacy — and BOTTOM-ALIGNED (the shadow makes the current
 * cutoff look odd)." It was a 240px flex item INSIDE the band, so its top was
 * wherever the band's top was and its own drop shadow got sliced off there.
 *
 * ABSOLUTE AGAINST THE BAND is what fixes both at once: `bottom` puts its base
 * on the band's floor and nothing constrains its top, so a picture taller than
 * the band stands out of it — over the bullets, the way the legacy's
 * `bottom: 0; right: -285px` did. `.sf-ra__gal-clip` above is what keeps that
 * bleed from turning into a horizontally scrollable pop-up.
 *
 * ═══ TUNED BY LOOKING, AT 1440, AND THEN MEASURED ═══
 *
 * Ryan asked for a visual pass and these are its numbers. The asset is
 * 847 x 968 and the SOLID pole is only 137px of that width (measured: alpha
 * > 200 spans x 395..531, 16%) — the rest is a wide soft shadow. That is why
 * the drawn width is so much larger than the pole looks:
 *
 *   width 820   puts the solid pole at 132 CSS wide — against the previous
 *               draw's ~54 — and makes the whole image 937 tall.
 *   right -281  lands the solid pole at x 953..1085 in the 780 panel: 25px
 *               clear of the panel's right edge, and 21px clear of the longest
 *               bullet's text (measured 932). Ryan's "not colliding with text",
 *               asserted rather than eyeballed.
 *   bottom -14  the asset carries its own contact shadow in its last rows;
 *               dropping it 14px puts the SHADOW on the band's edge and the
 *               pole's base above it, which is what "bottom-aligned" reads as.
 *
 * MEASURED RESULT: the pole's top lands at y 349 against the bullet list's
 * bottom at 398 — so it rises 173px out of the band and 49px into the bullet
 * area, with no line of text within 21px of it.
 *
 * z-index 1: over the band's ground, under `.sf-ra__gal-copy` (2) so the copy
 * stays readable, and under `.sf-ra__film` (3) so an expanded film overlays it.
 */
.sf-ra__pole {
  bottom: -14px;
  display: block;
  height: auto;
  pointer-events: none;
  position: absolute;
  right: -281px;
  width: 820px;
  z-index: 1;
}

/* --------------------------------------- 2b — stainless steel fasteners -- */

/*
 * COPY FLOATING ON A PHOTOGRAPH — the legacy's own drawing, and the reason the
 * bolts are a background rather than an `<img>`: the band's height is the
 * CARD's, and the picture fills whatever that turns out to be. Its description
 * rides a clipped span in the markup instead of an `alt`.
 *
 * `position: relative` because that clipped span is `position: absolute`
 * (playbook §5's sr-span trap).
 *
 * ═══ W161 (Ryan, 2026-09-04): FULL WIDTH, AND FAR MORE AIR ═══
 *
 * Two faults in one band, and he had already asked once about the second:
 * "background not full width; MORE air above/below the white text card so the
 * bolts photo reads."
 *
 * FULL WIDTH. The band sat inside `.sf-ra__section--included`'s 32px inset, so
 * the photograph stopped 32px short of the panel on each side and read as a
 * picture in a frame rather than as the section's own ground. It bleeds back
 * out through that inset now — the same `margin-inline` the galvanization band
 * and the Lightning Adjust players already use, so all three full-bleed
 * elements in these pop-ups do it one way.
 *
 * THE AIR IS THE LEGACY'S OWN NUMBER, MEASURED, NOT INCREMENTED. Ryan asked to
 * overshoot rather than nudge, so I went and read the fragment:
 * `#ra_stainless { padding-top: 200px; padding-bottom: 200px; }` against a card
 * of `padding: 40px 20px 10px`. My first pass shipped 60, the last one 96, and
 * both were still guesses at a number the source states outright. It is 200
 * here — matching the legacy exactly — which puts roughly 200px of bolts above
 * the card and 200 below it, and finally lets the photograph be a photograph.
 */
.sf-ra__stainless {
  background-color: var(--brand-color-media-well-a, #23262e);
  background-image: url("/brands/produnk/shades/raStainless.webp");
  background-position: center center;
  background-size: cover;
  margin-left: -32px;
  margin-right: -32px;
  padding: 200px 32px;
  position: relative;
}

.sf-ra__stainless-card {
  background: var(--brand-color-surface, #ffffff);
  border-radius: var(--radius-inner);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--brand-color-ink, #17181a) 35%, transparent);
  padding: 28px;
}

/*
 * `.sf-ra__card-title` STOOD HERE AND IS GONE (W125, 2026-09-04). It drew the
 * stainless and guarantee headings at the same size and weight as the
 * galvanization band's, which is correct — they ARE the same level — but as
 * three separate rules that could drift. They are all `.sf-ra__sub` now, which
 * is the one subheader rung, declared once at the top of this sheet.
 */

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

.sf-ra__para + .sf-ra__para {
  margin-top: 14px;
}

/* ----------------------------------------------------- 2c — guarantee ---- */

.sf-ra__guarantee {
  padding: 34px 32px 36px;
}

/* SET INTO THE TEXT, which is the legacy's `float: right`. 209 x 156 is the
 * asset's own size; there is no larger source. */
.sf-ra__seal {
  border-radius: var(--radius-inner);
  float: right;
  height: auto;
  margin: 0 0 16px 24px;
  max-width: 209px;
  width: 45%;
}

/* A float in the last block would otherwise hang below the panel's own bottom
 * edge, so the block closes over it. */
.sf-ra__guarantee::after {
  clear: both;
  content: "";
  display: table;
}

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

/*
 * THE SCRIM'S PHONE INSET IS THE SHELL'S — 15px, the page's own ruled gutter, at
 * the site's own 767.98 cut. What changes here is this pop-up's content rhythm
 * and the one layout that cannot survive the narrower panel: the galvanization
 * band's two columns become one, with the pole under its copy rather than
 * beside it.
 */
@media (max-width: 767.98px) {
  .sf-ra__section {
    padding: 0 20px;
  }

  .sf-ra__section:first-of-type {
    padding-top: 24px;
  }

  .sf-ra__section--included {
    margin-top: 48px;
  }

  /*
   * THE BULLETS KEEP AN INDENT, BUT THE PHONE'S. `.sf-sec-head` drops its
   * circle to 34px at this rung with an 11px gap, so its own text column starts
   * at 45 rather than 54 — the same number `pdp.css` moves its eyebrow to. The
   * hierarchy W126 is about survives; the measure does not lose 9px it needs.
   */
  .sf-ra__bullets {
    padding-left: 45px;
  }

  /*
   * THE BLEED MATCHES THE RUNG'S OWN INSET. The wrapper pulls out by exactly
   * `.sf-ra__section`'s padding, which is 32 at desktop and 20 here — leaving
   * the desktop number in place bled 12px too far each side and scrolled the
   * pop-up sideways (measured 372 against a 360 client).
   */
  .sf-ra__gal-clip {
    margin: 20px -20px 0;
    padding-top: 0;
  }

  .sf-ra__gal {
    padding: 24px 20px 26px;
  }

  /*
   * ═══ W199 ITEM 6: TWO RAILS AT THE PHONE RUNG TOO ═══
   *
   * Ryan, walking the shades on a phone: the pole "stacks below, small — you
   * can't tell what it is", and the ruling is that the bullet list is the LEFT
   * rail and the photograph the RIGHT one, beside it, right-aligned and larger,
   * "because the photo is what the copy is talking about".
   *
   * WHAT WAS HERE BEFORE, AND WHY IT WAS WRONG. W130 stood the pole down at this
   * rung on the reasoning that a 470px bleed against a 330px measure "is not
   * larger, it is a picture of a pole with a paragraph behind it". The
   * arithmetic that reasoning missed is that this asset is 84% SHADOW: the solid
   * pole is only 137 of its 847 pixels (measured, alpha > 200 spans x 395..531).
   * So the 200px block it fell back to drew a pole 32px wide — a sliver, which
   * is exactly what "you can't tell what it is" describes. The bleed is not a
   * luxury here, it is the only way this particular picture gets any presence at
   * all, and `.sf-ra__gal-clip` already exists to absorb it.
   *
   * SO IT IS THE DESKTOP TECHNIQUE, RE-TUNED — absolute against the band,
   * bottom-anchored, bleeding right past the panel edge, with the copy holding a
   * reserved gutter. The numbers, all measured at a 360 panel:
   *
   *   width 374    puts the SOLID pole at 60 CSS wide, against the 32 the
   *                stood-down block drew: not a desktop-sized pole, but one you
   *                can read as a pole. It draws 428 tall.
   *   right -124   the solid pole spans 46.6%..62.7% of the drawn width, so at
   *                374 its right edge sits 140px inside the image's. -124 lands
   *                that edge 16px clear of the band's inner right edge —
   *                right-aligned, per the ruling, with the shadow running off
   *                the panel where the clip takes it.
   *   bottom -14   the asset carries its contact shadow in its last rows, the
   *                same 14px drop the desktop uses so the SHADOW meets the
   *                band's edge and the pole's base stands above it.
   *
   * THE STACK AT THE NARROWEST RUNG IS DESIGNED, NOT INHERITED. `min-height`
   * on the components block is what reserves the rail: the pole is out of flow,
   * so without it the band would close up behind the picture and the pole would
   * rise over the film. 404 is the pole's drawn height less the 24 of band
   * padding its base sits in — i.e. the block is exactly as tall as the picture
   * beside it, which is what makes the two read as one row rather than as a
   * photograph that happens to overlap some text.
   */
  .sf-ra__components {
    min-height: 404px;
    /* The left rail's measure. 88 clears the solid pole's left edge by 12px, so
     * no line of text runs under any part of the pole itself. */
    padding-right: 88px;
  }

  .sf-ra__pole {
    bottom: -14px;
    position: absolute;
    right: -124px;
    width: 374px;
  }

  /* The film has nothing to expand into once the pole's gutter is gone; the
   * shared sheet already hides the control at this rung and defuses
   * `[data-big]`, so this only has to say what the rest width is. */
  .sf-ra__film {
    --sf-xp-w: 100%;
  }

  /*
   * THE BLEED MATCHES THE RUNG (20 here, 32 at desktop) — the same rule the
   * galvanization band's wrapper follows, and the same defect avoided: a
   * desktop -32 against a 20px inset scrolls the pop-up sideways.
   *
   * THE AIR SCALES RATHER THAN HOLDING AT 200. The legacy shade never had a
   * phone rung for this band (it only shifted the background across), and 200
   * top and bottom on a 360px panel is two thirds of a screen of concrete
   * before a word. 120 keeps the ruling's INTENT — the photograph reads, well
   * clear of the card — at a height a thumb can still get past.
   */
  .sf-ra__stainless {
    margin-left: -20px;
    margin-right: -20px;
    padding: 120px 20px;
  }

  .sf-ra__stainless-card {
    padding: 22px;
  }

  .sf-ra__guarantee {
    padding: 26px 20px 28px;
  }

  /* THE FLOAT GOES at the phone rung. A 45% picture beside a 290px measure
   * leaves five or six words a line, which is not a paragraph. */
  .sf-ra__seal {
    float: none;
    margin: 0 0 18px;
    max-width: 100%;
    width: 209px;
  }
}