/*
 * THE LIGHTNING ADJUST 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 `<LightningAdjustStyles>` rather
 * than `import`ed, for the reason given at the top of chrome.css.
 *
 * Class prefix `sf-la-`.
 *
 * ═══ WHAT WAS TRANSPLANTED AND WHAT WAS NOT ═══
 *
 * The legacy fragment ships thirteen inline `<style>` blocks, and the loudest
 * thing in them is a purple-to-pink linear gradient with two radial overlays
 * behind the introduction film, a second lavender gradient behind the how-to,
 * and a flat blue field behind the answers. NONE of that is transplanted, and
 * that is the ruling rather than an omission: Ryan's W104 names the CONTENT as
 * the good thing ("copy with images and all"), the playbook says tokenize the
 * styling to the storefront's system, and this storefront has one dark
 * (`--brand-color-media-well-a`), one tint (`--brand-color-well`) and one navy
 * (`--brand-color-nav`) — three grounds it uses everywhere, none of them purple.
 * A pop-up that arrived carrying a fourth and fifth palette would be exactly the
 * inconsistency the shared shell exists to stop.
 *
 * WHAT IS TRANSPLANTED IS THE STRUCTURE AND THE SEQUENCE: the black masthead
 * with the bolt lockup, a centred lede, the film, five bullets, the how-to with
 * its three-mode switch, the callout photograph over a numbered list with the
 * add-on card beside it, and the answers as cards. That order is the fragment's,
 * unchanged.
 *
 * ═══ THE FRAME IS NOT HERE ═══
 *
 * `modal.css` owns the dialog reset, scrim, panel, rise, navy header row, close
 * cross and scrolling content row; a copy left 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 same measure decision `rust-armor.css` records,
 * and for the same reason: two illustrated documents at one rhythm.
 */

.sf-la__panel {
  width: 780px;
}

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

/* The shell rings its cross and its scrim; every control in this pop-up's BODY
 * is this sheet's to ring (`ball.css`'s header called this out). */
.sf-la__bullet-link:focus-visible,
.sf-la__reply-link:focus-visible,
.sf-la__tab:focus-visible,
.sf-la__mode:focus-visible {
  outline: var(--sf-focus-ring, 2px solid var(--brand-color-accent, #c4530a));
  outline-offset: var(--sf-focus-ring-offset, 2px);
}

/* ON A DARK GROUND the accent ring does not clear 3:1, so the controls sitting
 * on one take the site's existing on-dark pair — chrome.css's own precedent. */
.sf-la__dark .sf-la__bullet-link:focus-visible,
.sf-la__answers .sf-la__reply-link:focus-visible {
  outline: var(--sf-focus-ring-on-dark, 2px solid var(--brand-color-accent-on-dark, #ffb27a));
  outline-offset: var(--sf-focus-ring-offset, 2px);
}

/* ------------------------------- W133: the one continuous dark section ---- */

/*
 * ═══ THE PHOTOGRAPH AND THE BLACK ARE ONE CONTAINER ═══
 *
 * Ryan: "the top logo+wordmark GO; the LIGHTNING BOLT image STAYS and fades
 * SEAMLESSLY into a BLACK section" holding the lede, the video and the bullets,
 * "then FADES to a darker gray."
 *
 * THE SEAM COLOUR IS MEASURED, NOT PICKED. `laMasthead.webp`'s bottom row,
 * sampled across all 1157 columns: mean rgb(1,1,1) = #010101, with a luminance
 * range of 0..6 — i.e. the photograph really does end in a uniform near-black.
 * So the container's ground starts at #010101 and the photograph sits on it
 * with nothing between them; there is no edge to see because there is no colour
 * change at the edge. `--brand-color-ink` (#17181a) would have been a 22-level
 * step across the full width, which is exactly the band-under-a-picture look
 * the ruling is against.
 *
 * THE GRADIENT IS AT THE BOTTOM, not across the whole section: the black runs
 * the length of the lede, the film and the bullets and only turns in the last
 * stretch, to `--brand-color-media-well-a` (#23262E) — the palette's own dark
 * gray, and the ground the pop-up's other dark surfaces use.
 */
.sf-la__dark {
  /*
   * HOW FAR THE MARK HANGS BELOW THE PHOTO BAND (W202). Declared here because
   * BOTH the band and the lede are children of this element and both need the
   * number: the band is what the mark hangs off, the lede is what has to start
   * clear of it. 132 = the mark's 372 plus its 10px top inset, less the band's
   * own 250.
   */
  --sf-la-mark-drop: 132px;
  background-image: linear-gradient(
    180deg,
    #010101 0%,
    #010101 72%,
    var(--brand-color-media-well-a, #23262e) 100%
  );
  padding-bottom: 44px;
}

/*
 * ═══ W162: THE OPENING BAND — PHOTOGRAPH AND HEADLINE, ONE IMAGE ═══
 *
 * Ryan: the lede goes bigger and bolder and OVERLAYS the lightning photo, with
 * more air between it and the video.
 *
 * `object-position: bottom` IS LOAD-BEARING, not a preference. W133's seamless
 * seam is this asset's own LAST ROW — measured #010101 across all 1157 columns
 * — so the band's ground and the photograph's bottom edge are the same colour
 * and there is no edge to see. Cropping from the TOP is therefore the only crop
 * that keeps the seam, and it also removes the brightest part of the frame.
 */
/*
 * NAMED `__opening`, NOT `__hero`, AND THAT IS NOT A STYLE CHOICE. This sheet
 * already has a `.sf-la__hero` — the what's-included callout PHOTOGRAPH — and
 * it declares `display: block` further down the file. A second `.sf-la__hero`
 * here lost the cascade to it on source order alone, silently: the band stopped
 * being a flex container, the lede stopped bottom-aligning, and nothing
 * errored. Found by measuring the lede's y against the band's (they were
 * equal). One class, one element.
 */
.sf-la__opening {
  /*
   * W202: THE MARK LEAVES THE FLOW, AND THAT IS THE WHOLE TRICK.
   *
   * Hanging a 382px child off a 250px band the obvious way — flex-start and a
   * top margin — GROWS THE BAND to 382, and the photograph is `cover` on the
   * band, so it promptly upscaled to 1.528 and every word of W172's blur
   * complaint came straight back. Measured, not guessed: the band read 382 on
   * the first attempt.
   *
   * `position: absolute` on the mark is what separates the two. The band keeps
   * its 250 because nothing in flow asks for more, the photograph stays at
   * 1.000, and the mark hangs wherever it likes. `justify-content` no longer
   * reaches it either, so it centres itself — see `.sf-la__logo`.
   */
  align-items: flex-start;
  display: flex;
  /*
   * ═══ W172 (Ryan, 2026-09-04): SMALLER, AND THE BLUR WAS THE UPSCALE ═══
   *
   * "Make the lightning photo at the top smaller — will bring up the text some
   * closer to the top and reduce the blur of the lightning image. At some point
   * you made the lightning photo bigger (don't know why)."
   *
   * THE WHY WAS MINE: W168 grew this band 300 → 340 so that lifting the
   * headline 72px off the foot did not eat the photograph it now sits on. That
   * traded a sharper picture for a taller one, and Ryan is right that it was
   * the wrong trade.
   *
   * AND THE BLUR HAS AN EXACT CAUSE. `laMasthead.webp` is 1157 x 250, and
   * `object-fit: cover` scales by whichever axis binds. At the 780px panel the
   * HEIGHT binds, so the scale is simply `band / 250`:
   *
   *     band 340  ->  scale 1.360   36% UPSCALE   (what Ryan was looking at)
   *     band 300  ->  scale 1.200   20% upscale   (W162's original)
   *     band 250  ->  scale 1.000   none          <- this
   *     band 230  ->  scale 0.920   downscaled
   *
   * 250 IS THE ASSET'S OWN HEIGHT, so the band is now exactly 1:1 — every pixel
   * drawn is a pixel that was photographed, and there is no resampling left to
   * blur. It is also smaller than the band W162 shipped, which is what he
   * asked for. The picture still crops HORIZONTALLY (1157 scaled into 780
   * leaves 377px cropped), which is where the composition comes from and is
   * unchanged.
   */
  min-height: 250px;
  /*
   * ═══ W199 SAID 3x WAS IMPOSSIBLE HERE. W202 SHOWS THE TRAP ═══
   *
   * The 250 above is the asset: `laMasthead.webp` is 1157x250 native, so at a
   * 780 panel `cover` scale is max(780/1157, H/250) and H = 250 is exactly
   * 1.000. Every pixel above it upscales the photograph, which is the blur W172
   * ruled against. That much was right and still stands.
   *
   * WHAT WAS WRONG WAS THE NEXT STEP. W199 reasoned: a 3x mark is 372 tall, a
   * 372 mark needs a 430 band, a 430 band is a 72% upscale, therefore 3x is
   * impossible — and flagged it as needing a photograph nobody has. The hidden
   * premise in that chain is THE MARK MUST FIT INSIDE THE BAND, which was never
   * ruled, only inherited from a composition where it happened to. Ryan lifted
   * it in one line ("the mark may overflow the photo band if the composition
   * wants it") and the whole ceiling dissolved: the photo stays at 1.000 and the
   * mark is 372 anyway, hanging out of the band's foot.
   *
   * WORTH KEEPING BECAUSE THE SHAPE RECURS. A constraint that is real (the
   * asset's resolution) got silently welded to an assumption that was not (the
   * mark's box), and the pair was reported as a hard ceiling. The tell was that
   * the flag asked for a NEW PHOTOGRAPH — an expensive answer to a question
   * nobody had checked was actually being asked.
   *
   * The mark itself was never the constraint: it has been
   * `/brands/produnk/lightning-adjust.svg` — vector — since W104, and it is
   * BYTE-IDENTICAL (md5 9b0a7515…) to the `lightning_adjust_logo.svg` supplied
   * with this ruling. There was nothing to swap; there was a box to open.
   */
  position: relative;
}

/*
 * W173 REVISED: THE BAND HOLDS THE LOGO AND NOTHING ELSE.
 *
 * Ryan resolved W172 and W173 pulling against each other — a smaller photograph
 * that also had to carry a logo AND a headline with plenty of air — by taking
 * the headline out of the picture entirely: "the logo will be near the bottom
 * of the lightning photo and then text will be below that." So this band is one
 * centred, bottom-anchored child, and the lede is a sibling on the black.
 */
.sf-la__opening {
  align-items: flex-end;
  justify-content: center;
}

/*
 * ═══ W173: THE BOLT, IN THE PHOTOGRAPH, WITH A HEAVY SHADOW ═══
 *
 * `filter: drop-shadow`, NOT `box-shadow`, and that is the whole reason this is
 * a filter rather than a shadow: `box-shadow` follows an element's BOX, so on a
 * transparent SVG it would draw a rectangle floating behind a bolt. A
 * `drop-shadow` filter is generated from the alpha channel, so it follows the
 * letterforms — three of them stacked, in the same #010101 family as the lede's
 * five-layer treatment, so the two read as one lighting model rather than two
 * effects that happen to be dark.
 *
 * THE SIZE IS WHAT THE BAND CAN HOLD, and that is a real constraint rather than
 * a preference — see the tension note on `.sf-la__lede`.
 */
.sf-la__logo {
  display: block;
  /*
   * W176 NEEDED A HEAVIER SHADOW, and the gate is what said so. Growing the
   * bolt 88 → 124 and lifting it 26 → 62 moved it out of the photograph's dark
   * foot and up into the lightning itself (its top now sits 64px into a 250px
   * band, in the brightest tenth), where the ring around the mark measured
   * 3.1:1 — under the 4.5:1 bar it had cleared at 19.1:1 when it sat lower and
   * smaller. A bigger mark on a brighter ground needs MORE shadow, not less.
   *
   * CHAINED `drop-shadow` FILTERS COMPOUND: each one takes the previous one's
   * output as its input, so three tight passes build a dense halo rather than
   * three faint ones laid side by side. That is what carries the 2-3px ring the
   * gate samples, which a single Gaussian at 50% strength could not.
   */
  /*
   * W199 NEEDED IT HEAVIER AGAIN, FOR THE SAME REASON W176 DID. A drop-shadow's
   * radius is ABSOLUTE while the mark it wraps is not: growing the bolt 124 →
   * 208 (and 62 → 186 on the phone) left the same halo wrapped around a much
   * bigger edge, so proportionally it thinned — and the mark also moved up into
   * brighter lightning. Measured before this change: worst 2.9:1 at desktop and
   * 3.6:1 on the phone, both under the 4.5 bar they had cleared.
   *
   * The radii scale with the mark and there are now FOUR tight passes at full
   * black rather than three. The tight ones are what the gate actually samples
   * (it reads a ring 2px off the mark's own alpha edge), so density close in is
   * worth more here than a wider outer bloom — the round that went to a heavier
   * OUTER bloom instead moved the worst pixel by a tenth, and adding a fourth
   * tight pass moved it by three and a half.
   *
   * MEASURED AFTER: worst 7.7:1 at desktop and 9.3:1 on the phone, mean 19.7
   * and 19.9. Both rungs clear the 4.5 bar with room, which matters because the
   * mark is now large enough that a future nudge upward would otherwise put it
   * straight back under.
   */
  filter:
    drop-shadow(0 0 5px rgb(1, 1, 1))
    drop-shadow(0 0 9px rgb(1, 1, 1))
    drop-shadow(0 0 16px rgb(1, 1, 1))
    drop-shadow(0 0 26px rgb(1, 1, 1));
  /*
   * W176: LARGER AGAIN (88 → 124), and Ryan accepted the tighter air that
   * comes with it — "logo LARGER, tighter air around it is OK". At 124 in a
   * 250px band with a 62px gap below, 64px of lightning remains above the
   * bolt: the mark now dominates the band, which is what "for visual effect"
   * asks for once the headline has left it (W173 revised).
   */
  /*
   * ═══ W202: THE FULL 3x AT LAST — 372, AND IT LEAVES THE BAND ═══
   *
   * 124 (W176) → 208 (W199, the band's inner limit) → 372, which is 3.0x the
   * size Ryan was looking at when he first said "about three times larger". It
   * is 122px taller than the band that used to hold it, and that is the point:
   * the head sits up in the lightning and the bolt's tail runs down out of the
   * photograph into the black the lede sits on, tying the two grounds together
   * instead of stopping dead on the seam between them.
   *
   * VECTOR, SO THERE IS NO SIZE AT WHICH THIS COSTS ANYTHING. The mark is an
   * SVG; 372 is as crisp as 124 was.
   */
  height: 372px;
  /* NEAR THE BOTTOM OF THE PHOTOGRAPH, per the ruling — far enough off the edge
   * to read as sitting IN the picture rather than on its rim, and it is also
   * where the frame is darkest (the asset's last 20% measures luminance 7 and
   * below), so the mark has its best ground before its shadow does anything. */
  /* W176 MOVES IT UP. The logo is bottom-anchored, so a LARGER bottom margin
   * lifts it — 26 → 62 puts the bolt in the band's middle rather than sitting
   * on its floor. */
  /* W202 REPLACES THE FOOT WITH A HEAD. The mark hung off the band's BOTTOM
   * while it still fitted inside; now that it is taller than the band, what
   * needs positioning is its top. 10px inside the band's edge puts the bolt's
   * point in the brightest part of the storm. */
  left: 50%;
  position: absolute;
  top: 10px;
  /* CENTRED WITHOUT `justify-content`, which cannot reach an out-of-flow child.
   * A transform rather than `margin-left: -125px` so the number is not a copy
   * of the height/aspect arithmetic waiting to go stale. */
  transform: translateX(-50%);
  width: auto;
  z-index: 1;
}

.sf-la__photo {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center bottom;
  position: absolute;
  width: 100%;
}

/*
 * THE SCRIM, REDUCED — W168 MOVED THE JOB TO THE SHADOW.
 *
 * W162 made this wash carry the contrast alone, and it worked: worst-case
 * white-on-ground measured 16.2:1 desktop and 7.4:1 phone. It cost the
 * photograph, though — a broad dark wash over the lower half is a lot of
 * lightning turned to slurry — and Ryan's W168 asks for the picture back.
 *
 * A TEXT SHADOW IS THE BETTER TOOL, and the reason is that it is LOCAL. A scrim
 * has to darken everything the text MIGHT sit on, because it cannot know where
 * the glyphs are; a shadow darkens the few pixels around each letter and leaves
 * the rest of the frame alone. Over lightning — where the bright pixels are
 * thin high-contrast forks rather than a broad field — that difference is most
 * of the picture.
 *
 * So this is a GRADE now, not a mask: it carries the foot of the frame down to
 * the section's own #010101 (still W133's measured seam, unchanged) and leaves
 * the middle of the photograph alone. Through the top 40% it is effectively
 * absent (0 → 0.06), which is the part of the picture Ryan wanted back; it only
 * deepens across the last quarter, which is the band the headline occupies.
 *
 * THE 0.62 STOP IS A MEASURED NUMBER. With the shadow alone the ring around the
 * type read 6.1:1 at the desktop rung and 4.2:1 at the phone rung — where the
 * `cover` crop of a 4.63:1 photograph into a 250px band puts more lightning
 * behind the words — which is under the 4.5:1 bar. Deepening this one stop is
 * what carries the phone rung over it without touching the frame above 60%.
 * The legibility floor is still the shadow; this is the last few per cent.
 */
/*
 * TWO SCRIMS NOW (W202), AND THE SECOND ONE IS ART DIRECTION.
 *
 * The vertical gradient is W168/W170's and unchanged: it takes the photograph
 * down into the black the lede sits on.
 *
 * THE RADIAL ONE IS NEW, and it exists because a 372px mark on a bright storm
 * could not be made to read by growing its own halo. A `drop-shadow` blooms
 * from EVERY edge, so the cloud needed to darken the ground under the mark's
 * top also swallowed the lightning either side of it — measured: the halo that
 * cleared the contrast bar left the band reading as a black blob with a little
 * weather at the corners, which is the opposite of "up higher into the
 * lightning bolts INTO the photo".
 *
 * A radial scrim darkens only where the mark actually is. It is centred on the
 * mark's own column and biased to the top of the band, where the storm is
 * brightest and where the mark's head now sits; the flanking bolts keep their
 * full luminance. This is what a photographer would do to the plate rather than
 * what a filter can do to the logo.
 */
.sf-la__opening::after {
  background:
    radial-gradient(
      44% 88% at 50% 10%,
      rgba(1, 1, 1, 0.72) 0%,
      rgba(1, 1, 1, 0.5) 40%,
      rgba(1, 1, 1, 0.18) 70%,
      rgba(1, 1, 1, 0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(1, 1, 1, 0) 0%,
      rgba(1, 1, 1, 0.06) 40%,
      rgba(1, 1, 1, 0.62) 74%,
      #010101 97%
    );
  content: "";
  inset: 0;
  position: absolute;
}

/*
 * THE HEADLINE — bigger and bolder (W162), lines opened (W168), and since
 * W173's revision it sits on the section's own flat black rather than on the
 * photograph.
 *
 * `--text-section` (26px) at 700 is the storefront's headline rung, the same one
 * this pop-up's section headers wear. `line-height: 1.5` is W168's: at 26px bold
 * over two lines, 1.25 packed the first line's descenders into the second's
 * caps.
 *
 * ═══ THE FIVE-LAYER SHADOW STOOD HERE AND IS GONE (W173 revised) ═══
 *
 * Ryan: "drop shadow not really necessary on the text then." It is not — and
 * the arithmetic says so plainly. That shadow existed to hold white type over
 * lightning whose peaks measure luminance 254, where the ring around the
 * letterforms was reading 4.5:1 at the phone rung after four rounds of tuning.
 * On #010101 the same type reads 20.8:1 with nothing at all, and a heavy shadow
 * on flat black is a smudge rather than a lift.
 *
 * WHAT THE WORK BOUGHT IS NOT WASTED: the measurement it forced
 * (`tools/contrast.py`'s ring-around-the-ink) is what now gates the LOGO, which
 * is the element still sitting on the photograph.
 */
.sf-la__lede {
  color: var(--brand-color-surface, #ffffff);
  font-family: var(--brand-font-heading, system-ui, sans-serif);
  font-size: var(--text-section);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 620px;
  /*
   * W202: THE CLEARANCE IS DERIVED, NOT TYPED. The mark hangs
   * `--sf-la-mark-drop` past the band's foot, so the lede has to start that far
   * down PLUS its own air. Writing 158 here instead would be the same number in
   * two places: change the mark's height or its top inset and the lede would
   * quietly end up underneath it, which is a collision no gate would call
   * because both elements are exactly where their own rules put them.
   */
  padding-top: calc(var(--sf-la-mark-drop, 0px) + 26px);
  /* W176: UP TOWARD THE TOP (44 → 26 above), and much MORE air below before
   * the film — which is the other half of his note and is the film's own
   * `margin-top`, not this padding. */
  padding-bottom: 0;
  padding-left: 32px;
  padding-right: 32px;
  text-align: center;
}

/*
 * W176: EACH AUTHORED LINE IS ITS OWN BLOCK.
 *
 * `text-wrap: balance` came off the paragraph with the em-dash: the break is
 * editorial now, and balancing would have been free to re-flow the two claims
 * into one another at some width — which is exactly what made the dash version
 * read as one long sentence broken at an arbitrary point.
 */
.sf-la__lede-line {
  display: block;
}


.sf-la__film {
  --sf-xp-w: 100%;
  margin: 0 auto;
  /*
   * NO `max-width: 100%` HERE, and its absence is load-bearing. It capped the
   * slot at its PARENT's content width, which silently defeated the how-to
   * film's bleed: the negative margins widened the box and the cap put it
   * straight back to 716. Measured before and after — 716 then 780.
   */
}

/*
 * EACH FILM'S FRAME IS ITS FILM'S SHAPE, and the two differ.
 *
 * `embed-expand.css` defaults to 16:9 because that is what the category hero
 * is; the shared sheet exposes `--sf-xp-ratio` for exactly this. The
 * INTRODUCTION is 720 x 480 — a 3:2 master from the legacy homepage loop — and
 * in a 16:9 frame it letterboxed to two black bars 100px wide apiece. The
 * HOW-TO is a modern 1920 x 1080 and keeps the default.
 *
 * The alternative — cropping to fill — was rejected on the same grounds the
 * what's-included hero is uncropped: the intro film is a framed shot of a hoop
 * and a person, and `cover` would cut one of them off.
 */
/* W164: AIR BETWEEN THE HEADLINE AND THE FILM. They were butted, so the
 * headline read as the film's caption rather than as the section's opening.
 * W176 opens it further (40 → 64): with the lede lifted toward the top of its
 * own space, the gap below it had closed up again. */
.sf-la__film--intro {
  --sf-xp-ratio: 3 / 2;
  margin-top: 64px;
}

/*
 * W163/W164 SUPERSEDE W136's BLEED. This player used to break out through the
 * section's padding to reach the panel's edges; Ryan revised that — it takes
 * the gutter now, so its left edge lands on the same 32px as the section
 * header's ICON directly above it. The inset itself is the shared frame's
 * (`[data-gutter]` in `embed-expand.css`); what is left here is the AIR the
 * header needed, which was zero.
 */
/*
 * ZERO GUTTER FROM THE FRAME, because this player's SECTION already supplies
 * one: `.sf-la__howto` is padded 32px, so the shared `[data-gutter]` margin was
 * being added to it and the video sat at 394 while the header's icon sat at
 * 362 — the exact alignment W164 asks for, missed by one inset. The intro
 * player, whose dark section has no padding, takes the frame's 32 and lands on
 * 362 the other way. Measured both.
 */
.sf-la__film--howto {
  --sf-xp-gutter: 0px;
  margin-top: 26px;
}

.sf-la__bullets {
  display: grid;
  gap: 14px;
  list-style: none;
  /* W164: and more air below the film before the bullets start. */
  margin: 42px auto 0;
  max-width: 500px;
  padding: 0 32px;
}

/* The legacy's 5px white dot on the left, drawn as an absolute box so it stays
 * with the first line at any wrap. */
.sf-la__bullet {
  color: color-mix(in srgb, var(--brand-color-surface, #ffffff) 88%, transparent);
  font-size: var(--text-body);
  line-height: 1.5;
  padding-left: 16px;
  position: relative;
}

.sf-la__bullet::before {
  background: var(--brand-color-surface, #ffffff);
  border-radius: var(--radius-pill);
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  top: 0.55em;
  width: 5px;
}

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

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

/* ---------------------------------------- W135/W137/W138: how to use it -- */

/*
 * W138: WHITE, NEVER GRAY. This section wore `--brand-color-well` — the site's
 * tint — and Ryan struck it: "Three Modes: WHITE background (never gray)." It
 * follows a full-bleed dark section, so the tint was doing nothing the contrast
 * with the black was not already doing, and it made the mode diagrams (which are
 * line art on white) sit in a visible box.
 */
.sf-la__howto {
  background: var(--brand-color-surface, #ffffff);
  padding: 0 32px 44px;
}

/*
 * W135: MUCH MORE AIR ABOVE THE HEADING. It follows the dark section's own
 * bottom edge, so it is not just a new heading — it is a new subject, and 30px
 * read as "still the same block". 64 is the same distance the Rust Armor
 * pop-up puts between ITS two sections, which is where the number comes from.
 */
.sf-la__howto-head {
  padding-top: 64px;
}

/*
 * W137: AND MUCH MORE BETWEEN THE FILM AND THREE MODES. The modes are a
 * different question from the film ("how does it work" vs "what are the
 * options"), and at 28 they read as the film's caption.
 */
.sf-la__modes-label {
  color: var(--brand-color-muted, #6c6a62);
  font-size: var(--text-small);
  margin: 56px 0 10px;
}

/*
 * THE THREE-MODE SWITCH IS STILL A TABLIST, and W138 did not obsolete it.
 *
 * The ruling changed the PANEL's ground and its arrangement (photo right, text
 * left) — not the fact that three mutually exclusive modes share one space. The
 * alternative reading, three stacked rows, would put three 300px diagrams and
 * three paragraphs on screen at once inside a pop-up that already runs six
 * sections, and would lose the one thing the tabs communicate: that these are
 * THREE MODES OF ONE MECHANISM rather than three features. So the mechanics —
 * roving tabindex, arrow/Home/End, selection-follows-focus — are untouched.
 *
 * `overflow-x: auto` is the legacy's own answer to three tabs in a narrow
 * column and it is kept, because the alternative — wrapping them — puts a lone
 * third tab on its own line at exactly the width a phone uses.
 */
.sf-la__tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.sf-la__tab {
  background: var(--brand-color-surface, #ffffff);
  border: var(--border-control);
  border-radius: var(--radius-control);
  color: var(--brand-color-ink-soft, #44464a);
  cursor: pointer;
  flex: 1 1 0;
  font-family: inherit;
  font-size: var(--text-small);
  min-width: 0;
  padding: 9px 12px;
  white-space: nowrap;
}

/* 1.5px accent border IS the selection language on this site — never
 * normalised to 1px (tokens §1). Same treatment `.sf-flow-chip--on` wears, so a
 * shopper who has just used the option chips recognises it. */
.sf-la__tab--on {
  border: var(--border-selected);
  color: var(--brand-color-ink, #17181a);
  font-weight: 600;
}

/*
 * W138: PHOTO RIGHT, TEXT LEFT, AND THEY DO NOT MEET.
 *
 * `row-reverse` rather than reordering the markup: the DIAGRAM is the panel's
 * subject and reads first to a screen reader, and swapping the DOM to move it
 * visually would have moved it in the reading order too. The text column takes
 * the free space and the figure keeps its own width, so the 24px gap is real
 * slack at every panel width above the phone cut rather than a gap two
 * stretched boxes are pushing against — which is what "no interference" needs.
 */
.sf-la__mode {
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
  /* W165: more air between the text column and the right-rail diagram — at 28
   * the card's own edge nearly touched the diagram's white margin and the two
   * read as one block. */
  gap: 44px;
  margin-top: 26px;
}

/*
 * W170: THE STAGE IS A FIXED BOX AND ALL THREE DIAGRAMS LIVE IN IT.
 *
 * They share one aspect (334 x 492 apiece), so the stage can hold its own
 * height from the ratio and the figures fill it absolutely — which is what lets
 * three pictures occupy one space without the panel resizing as the selection
 * moves. 300 CSS against a 334px source is the honest maximum; there is no
 * larger original of any of them.
 */
.sf-la__mode-stage {
  aspect-ratio: 334 / 492;
  display: block;
  flex: none;
  position: relative;
  width: 300px;
}

/*
 * HIDDEN BY VISIBILITY, NOT BY DISPLAY. A `display: none` image is not
 * guaranteed to be decoded, and the decode is the half that costs the frame
 * W170 is about. `visibility: hidden` keeps the figure laid out and decoded,
 * and still takes it out of the accessibility tree — so only the selected
 * mode's `alt` is announced inside the panel.
 */
.sf-la__mode-figure {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: contain;
  position: absolute;
  visibility: hidden;
  width: 100%;
}

.sf-la__mode-figure[data-on="true"] {
  visibility: visible;
}

/*
 * W165 (Ryan, 2026-09-04): THE HOUSE FLOATING CARD.
 *
 * The paragraph sat as bare text beside a diagram, which on a white section
 * left it with nothing to sit ON. It wears `.sf-card` now — card.css's shared
 * ground, hairline, `--radius-control` radius and lift, the same definition the
 * add-on card and the accessory cards use — so this pop-up has ONE card, not a
 * third idea of one. What stays here is only what is this card's own.
 *
 * LEFT-ALIGNED, SAID OUT LOUD. The section's heading is centred and the tabs
 * stretch, so "the text is left-aligned" is a real instruction here rather than
 * an inherited default worth trusting (W138).
 */
.sf-la__mode-copy {
  align-self: center;
  min-width: 0;
  padding: 22px 24px;
  text-align: left;
}

.sf-la__mode-title {
  color: var(--brand-color-ink, #17181a);
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 8px;
}

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

/* ------------------------------------------------------ what's included -- */

/* FULL BLEED AND UNCROPPED. The callout numerals are baked into the photograph
 * and the list underneath keys into them, so it is an `<img>` at its own aspect
 * rather than the legacy's fixed-height `cover`, which cut one off. */
.sf-la__hero {
  display: block;
  height: auto;
  width: 100%;
}

.sf-la__included {
  padding: 0 32px 40px;
}

/* The same rhythm the how-to head keeps: well clear of the full-bleed
 * photograph above it, close to its own list. */
.sf-la__included-head {
  padding-bottom: 4px;
  padding-top: 40px;
}

.sf-la__included-cols {
  align-items: flex-start;
  display: flex;
  gap: 30px;
  /* W166: air between the section header and the numbered body. */
  margin-top: 34px;
}

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

.sf-la__included-cols > .sf-la__items {
  flex: 1 1 auto;
  min-width: 0;
}

/*
 * THE NUMBERED DISC sits in a fixed gutter and the heading and body share the
 * second column, which is a grid rather than the legacy's `padding-left: 50px`
 * plus an absolute disc: the absolute version puts the disc at the item's top
 * regardless of the heading's line count, and one of these five headings wraps
 * at the phone rung.
 */
.sf-la__item {
  column-gap: 12px;
  display: grid;
  /* W166: the numeral column halves with the disc. */
  grid-template-columns: 22px minmax(0, 1fr);
  row-gap: 6px;
}

/*
 * W139 (Ryan, 2026-09-04): "the number circles must align inline with their
 * headers — '1' level with 'High speed actuator' — ALL of them."
 *
 * It used to `grid-row: span 2` and centre itself across the heading AND the
 * body, which put the disc level with the gap between them — and moved it as
 * each item's body wrapped to a different number of lines, so the five discs
 * did not even agree with each other. `grid-row: 1` puts it in the HEADING'S
 * row, and `align-self: center` then centres it against ONE line box that is
 * the same height in every item.
 *
 * ═══ W166 (Ryan, same day): HALVED, BECAUSE 40 WAS COMPETING ═══
 *
 * "The circled list numbers shrink to roughly HALF — they compete with the
 * header icon." They were 40px, which is EXACTLY the section header's own icon
 * circle: five list markers drawn at the size of the thing that names the whole
 * section, so the eye read six peers. 22 is a marker again.
 *
 * The border drops 2px → 1.5px with it: a 2px ring on a 22px disc is a tenth of
 * its diameter and reads as a blob rather than a circle.
 *
 * EXPLICIT CARVE-OUT, RYAN'S OWN: the numerals printed ON the what's-included
 * PHOTOGRAPH are good and are not touched. They are baked into the image
 * (`laIncluded.webp`) and nothing in CSS could reach them anyway — recorded so
 * a later pass reading "the numbers were too big" does not go looking for a way.
 */
.sf-la__item-num {
  align-items: center;
  align-self: center;
  border: 1.5px solid var(--brand-color-nav, #192950);
  border-radius: var(--radius-pill);
  box-sizing: border-box;
  color: var(--brand-color-nav, #192950);
  display: flex;
  font-size: var(--text-micro);
  font-weight: 700;
  grid-row: 1;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.sf-la__item-head {
  align-self: center;
  color: var(--brand-color-ink, #17181a);
  font-size: var(--text-body);
  font-weight: 700;
  /* The disc is 22px now (W166); matching the heading's line box to it is what
   * keeps W139's "inline with their headers" true at the new size. */
  line-height: 22px;
}

/* The body starts in column 2 of row 2 — the disc no longer spans into it. */
.sf-la__item-body {
  grid-column: 2;
}

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

/*
 * W140 (Ryan, 2026-09-04): "the site's standard border radius." The card wore a
 * private restatement — `--radius-panel` (16px), a hairline and a bespoke lift —
 * where the storefront has had ONE card definition since W89: `.sf-card` in
 * `card.css`, whose `--sf-card-radius` is `--radius-control` (6px).
 *
 * SO THE ELEMENT WEARS `.sf-card` AND THIS, and what is left here is only what
 * is genuinely this card's: its width, and the fact that it clips the
 * photograph that runs to its own top edge. Every frame property is the shared
 * one, which is the same two-classes-one-frame arrangement every pop-up wears
 * over `modal.css`.
 */
.sf-la__optional {
  flex: none;
  overflow: hidden;
  padding-bottom: 18px;
  width: 300px;
}

.sf-la__optional-photo {
  background: var(--brand-color-well, #f1f0ec);
  display: block;
  height: auto;
  width: 100%;
}

.sf-la__optional .sf-la__items {
  padding: 18px 18px 0;
}

/* ------------------------------------------------------------ answers ---- */

.sf-la__answers {
  background: var(--brand-color-nav, #192950);
  padding: 36px 32px 40px;
}

.sf-la__answers-title {
  align-items: center;
  color: var(--brand-color-surface, #ffffff);
  display: flex;
  font-family: var(--brand-font-heading, system-ui, sans-serif);
  font-size: var(--text-section);
  font-weight: 700;
  gap: 10px;
  justify-content: center;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 26px;
  text-wrap: wrap;
}

.sf-la__answers-mark {
  align-items: center;
  color: var(--brand-color-surface, #ffffff);
  display: flex;
}

.sf-la__answer-list {
  display: grid;
  gap: 16px;
  margin: 0;
}

.sf-la__answer {
  background: var(--brand-color-surface, #ffffff);
  border-radius: var(--radius-panel);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-color-ink, #17181a) 30%, transparent);
  padding: 20px;
}

.sf-la__question {
  color: var(--brand-color-ink, #17181a);
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 8px;
}

/* globals.css does not zero a `<dd>`'s UA margin-inline-start, so it is said
 * here — the reply would otherwise be indented 40px against its question. */
.sf-la__reply {
  color: var(--brand-color-ink-soft, #44464a);
  font-size: var(--text-body);
  line-height: 1.5;
  margin: 0;
}

.sf-la__reply-link {
  color: var(--brand-color-accent, #c4530a);
  text-decoration: underline;
}

.sf-la__reply-link:hover {
  color: var(--brand-color-accent-strong, #9c420a);
}

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

/*
 * THE SCRIM'S PHONE INSET IS THE SHELL'S — 15px at the site's own 767.98 cut.
 * What changes here is this pop-up's content rhythm and the two layouts that
 * cannot survive the narrower panel: the mode panel and the included columns
 * both stack.
 */
@media (max-width: 767.98px) {
  /* W162 at the phone rung: the band is shorter (a 300px hero on an 844px
   * screen is a third of it before a word) and the headline steps down one
   * rung, but the overlay and its scrim are unchanged — the contrast story
   * must not depend on the viewport. */
  /*
   * W172 at the phone rung. 220 against the asset's 250 is a DOWNSCALE (0.88),
   * so this rung is sharper than 1:1 rather than merely un-blurred — the width
   * never binds here (360 needs only 0.31), so the height is free to shrink.
   * It stops at 220 rather than going lower because the headline wraps to three
   * lines at this measure and needs photograph above it to sit on.
   */
  .sf-la__opening {
    /*
     * 210 AT THIS RUNG — a DOWNSCALE of 0.84 against the asset's 250, so this
     * rung is sharper than 1:1 rather than merely un-blurred. The width never
     * binds here (360 needs only 0.31), and with the headline no longer inside
     * the band it only has to hold the logo.
     */
    /*
     * W199 ITEM 8 TAKES IT TO 250, WHICH IS STILL NOT AN UPSCALE. 210 was a
     * 0.84 downscale; 250 is exactly 1.000, the same ceiling the desktop rung
     * sits at. The extra 40px is what lets the logo be three times larger here
     * — the rung Ryan was actually holding when he ruled — without the mark
     * touching the band's top edge.
     */
    min-height: 250px;
  }

  .sf-la__dark {
    /* NOTHING HANGS BELOW THE BAND AT THIS RUNG, so the lede's derived
     * clearance resolves to its own air alone. */
    --sf-la-mark-drop: 0px;
  }

  /*
   * ═══ W199 ITEM 8: THE FULL 3x, BECAUSE THIS RUNG HAS THE ROOM ═══
   *
   * 62 → 186 is 3.0x exactly, and it fits because the phone band was carrying a
   * 0.84 downscale it did not need. With a 34px foot the mark's top lands 30px
   * below the band's edge — up in the bolts, per the ruling, with headroom
   * rather than pressed against the frame.
   *
   * THE RUNGS NOW DIVERGE ON PURPOSE (3.0x here, 1.7x at desktop). That is not
   * drift: the desktop band is pinned at the asset's native height and has no
   * headroom to give, and the ceiling note on `.sf-la__opening` above carries
   * the arithmetic. Where the room existed, the ruling is met in full.
   */
  /*
   * THE PHONE MARK STAYS AT 3x AND STAYS INSIDE THE BAND (W202, Ryan: "phone
   * already at 3x — keep it"). 186 in a 250 band still fits, so this rung needs
   * none of the overflow the desktop one just gained — which is why the drop is
   * zeroed below rather than inherited.
   *
   * `margin-bottom` RETIRED BY NAME: it positioned the mark while the mark was
   * a bottom-anchored flex child. It is out of flow now and positioned by `top`,
   * so a margin here would have done nothing at all while still reading like it
   * did — the kind of leftover that survives three passes because removing it
   * changes no pixel.
   */
  .sf-la__logo {
    height: 186px;
    top: 14px;
  }

  .sf-la__lede {
    font-size: var(--text-product);
    /* SHORTHAND ON PURPOSE: with the drop zeroed above, the derived top would
     * resolve to its desktop air (26) and this rung wants 32. Stating all four
     * keeps that intent visible instead of leaving a calc that silently
     * disagrees with the number a reader sees. */
    padding: 32px 20px 0;
  }

  /* THE GUTTER NARROWS WITH THE RUNG, and it is one custom property because
   * the shared frame reads it — the same 20px every other block here takes. */
  .sf-la__film {
    --sf-xp-gutter: 20px;
  }

  /* AND THE HOW-TO KEEPS ITS ZERO. Its section supplies the inset at every
   * rung, so the frame must add none — the desktop override alone lost to
   * this media query's later `.sf-la__film` rule and the film sat at 55
   * against its header icon's 35. */
  .sf-la__film--howto {
    --sf-xp-gutter: 0px;
  }

  .sf-la__bullets {
    padding-left: 20px;
    padding-right: 20px;
  }

  .sf-la__howto {
    padding: 0 20px 32px;
  }

  .sf-la__film--howto {
    margin-left: -20px;
    margin-right: -20px;
  }

  /* W135's air, scaled to the rung — 48 against the desktop's 64, the same
   * step the Rust Armor pop-up takes between its sections. */
  .sf-la__howto-head {
    padding-top: 48px;
  }

  .sf-la__modes-label {
    margin-top: 40px;
  }

  /* THE TABS STOP SHARING THE ROW. `flex: 1 1 0` on three `nowrap` labels
   * overflows below about 330px of measure; giving them their intrinsic width
   * lets the row scroll instead, which is what `overflow-x: auto` was for. */
  .sf-la__tab {
    flex: none;
  }

  /* W138's right/left arrangement is a DESKTOP composition — at 330px of
   * measure a 300px diagram beside a paragraph is not two columns, it is a
   * collision. The panel stacks, diagram first, which is also its reading
   * order. */
  .sf-la__mode {
    display: block;
  }

  .sf-la__mode-stage {
    margin: 0 auto 18px;
    max-width: 100%;
  }

  /* The card keeps its treatment; only its padding steps down. */
  .sf-la__mode-copy {
    padding: 18px 18px;
  }

  /*
   * ═══ W199 ITEM 9: THE BAKED NUMERALS, MAGNIFIED BY CROPPING ═══
   *
   * Ryan: the what's-included numerals "got too small on mobile — can barely
   * see them"; desktop is fine. They are printed INTO `laIncluded.webp` (W166
   * recorded that carve-out explicitly), so no rule can restyle them — the only
   * lever is how large the photograph itself is drawn. At 780 the baked discs
   * land near 28 CSS px; at 360 the same photograph draws them at 13, which is
   * the whole complaint.
   *
   * SO THE PHONE RUNG CROPS INSTEAD OF SHRINKING. A 450px box at 360 wide makes
   * `cover` scale by height instead of width — 1.9x the previous draw — and
   * shows the middle 53% of the frame. The four numerals sit between 29% and 72%
   * of the width (measured on the mirrored asset), so ALL FOUR survive the crop
   * with room to spare, which is the constraint the markup comment has carried
   * since W133: "a crop that loses one loses the list's meaning". What goes is
   * driveway and fence. The discs land near 25px, within sight of the desktop's
   * 28.
   *
   * There is no quality cost: the asset is far larger than either rung draws it,
   * so this is a crop, not an enlargement.
   */
  .sf-la__hero {
    height: 450px;
    object-fit: cover;
    object-position: center;
  }

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

  /* W166 SCALES WITH ITS REFERENCE. `.sf-sec-head`'s icon drops to 34px at
   * this rung, so "roughly half" is 18, not the desktop's 22 — a numeral that
   * kept 22 against a 34px icon is 0.65x and starts competing again. */
  .sf-la__item {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .sf-la__item-num {
    font-size: 10px;
    height: 18px;
    width: 18px;
  }

  .sf-la__item-head {
    line-height: 18px;
  }

  .sf-la__included-cols {
    display: block;
  }

  .sf-la__optional {
    margin-top: 24px;
    width: auto;
  }

  .sf-la__answers {
    padding: 30px 20px 32px;
  }
}