/* Program pages -- /stem, /programs/roblox and every program page after them.
 * Loaded by those pages alone, through each one's `stylesheet` in
 * inventory/pages.json; the layout is templates/pages/program.html.
 *
 * ONE STYLESHEET FOR ALL OF THEM, so a change to spacing or colour lands on
 * every program page at once. It began as static/stem.css, whose values it
 * keeps exactly, so /stem looks the same on it as it did on its own sheet;
 * the catalog, badge and filter rules were added for /programs/roblox.
 *
 * NOT in shim/arrayscape.css, which loads on all seventy pages: a selector
 * here that escaped its prefix would restyle the whole site, and lint-build
 * cannot see CSS. Every selector is prefixed as-prog-. It is linked
 * immediately before the shim's stylesheet, which puts it after every Wix
 * <style> block, so these rules win without needing !important.
 *
 * COLOURS come from the brand guideline (PDF Guideline.pdf). The site theme
 * already defines them as variables on :root, and the shared CSS that carries
 * those arrives with the page, so they are referenced rather than restated:
 *     navy    #2E3F66  rgb(var(--color_11))
 *     yellow  #FFCD18  rgb(var(--color_43))
 *
 * FONTS: questrial is the site's heading and body face and arrives with the
 * shared CSS. It has exactly one weight, so `bold` here is the browser's
 * synthetic bold -- which is what every other bold word on the site already is.
 * See #122.
 *
 * TWO VIEWPORT WIDTHS, NOT THREE. The mobile tree pins the viewport with
 * <meta name="viewport" content="width=320">, because the Wix mobile chrome is
 * built for it -- so the phone case is 320px, not 390. The desktop tree is
 * never usefully narrower than 980px, because every Wix section on it carries
 * min-width:980px. Mobile-first below: the base rules are the 320px case, and
 * the two media queries add the tablet and desktop cases.
 */

/* ---- shared ------------------------------------------------------------- */

.as-prog {
  --as-navy: rgb(var(--color_11));
  --as-yellow: rgb(var(--color_43));
  --as-ink: #1a1f36;
  --as-body: #4a5068;
  --as-muted: #5f657c;
  --as-on-navy: #d9ddee;
  --as-on-navy-dim: #c3c9de;
  --as-tag: #edeff6;
  --as-hairline: #e6e3da;
  --as-hover: #cbcfd9;
  --as-dash: #9ca2b8;
  --as-panel: #dce0ec;
  --as-card-shadow: 0 6px 20px rgba(26, 31, 54, 0.10);
  --as-shot-w: 96px;

  box-sizing: border-box;
  background: #f6f4ee;
  font-family: questrial, sans-serif;
  color: var(--as-body);
}

.as-prog *,
.as-prog *::before,
.as-prog *::after { box-sizing: inherit; }

/* :where() DELIBERATELY. Written as `.as-prog p { margin: 0 }` this reset is
 * specificity (0,1,1) and beats every single-class rule below it -- the
 * mistake that once collapsed all of /stem's spacing. :where() contributes
 * nothing to specificity, so the reset sits at (0,1,0) and anything later
 * wins. */
.as-prog :where(p, h1, h2, h3, h4, ul, figure, figcaption) { margin: 0; padding: 0; }

.as-prog :where(ul) { list-style: none; }

.as-prog-wrap {
  max-width: 980px;
  margin: 0 auto;
}

.as-prog-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Every yellow button: the banner's and a closing card's. min-height rather
 * than height, so a label that wraps on a 320px screen makes the button
 * taller instead of spilling out of it. */
.as-prog-btn {
  display: inline-block;
  min-height: 52px;
  padding: 15px 28px;
  border: 0;
  border-radius: 10px;
  background: var(--as-yellow);
  color: var(--as-navy);
  font-family: questrial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.as-prog-btn:hover,
.as-prog-btn:focus {
  background: var(--as-hover);
  color: var(--as-navy);
}

.as-prog-btn:focus-visible {
  outline: 3px solid var(--as-navy);
  outline-offset: 3px;
}

/* ---- banner ------------------------------------------------------------- */

.as-prog-banner {
  background: var(--as-navy);
  padding: 36px 20px 40px;
}

.as-prog-h1 {
  color: #fff;
  font-size: 42px;
  font-weight: bold;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.as-prog-intro {
  margin-top: 24px;
  color: var(--as-on-navy);
  font-size: 18px;
  line-height: 1.45;
}

.as-prog-sub {
  margin-top: 24px;
  color: var(--as-on-navy-dim);
  font-size: 16px;
  line-height: 1.5;
}

.as-prog-cta { margin-top: 24px; }

.as-prog-banner .as-prog-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}

/* An optional second way in, drawn as a link rather than a second button so
 * the banner keeps one yellow call to action. */
.as-prog-link {
  padding: 11px 0;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  line-height: 22px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.as-prog-link:hover,
.as-prog-link:focus { color: var(--as-yellow); }

.as-prog-link:focus-visible {
  outline: 3px solid var(--as-yellow);
  outline-offset: 3px;
}

/* The photo cluster: three cards over two, overlapping, each tilted a few
 * degrees and alternating left and right. The overlap is a negative margin
 * rather than absolute positioning, so the rows stay centred at any width. */
.as-prog-shots { margin-top: 32px; }

.as-prog-shots-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.as-prog-shots-row-low { margin-top: -6px; }

.as-prog-shot {
  width: var(--as-shot-w);
  flex: 0 0 auto;
  padding: 10px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.as-prog-shot + .as-prog-shot { margin-left: -12px; }

.as-prog-shot-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 148 / 111;
  object-fit: cover;
  border-radius: 3px;
}

.as-prog-shot-cap {
  margin-top: 7px;
  color: var(--as-ink);
  font-size: 12px;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
}

/* Later cards sit on top of earlier ones so the overlap reads left to right. */
.as-prog-shot-a { transform: rotate(-4deg); z-index: 1; }
.as-prog-shot-b { transform: rotate(3deg);  z-index: 2; }
.as-prog-shot-c { transform: rotate(-2deg); z-index: 3; }
.as-prog-shot-d { transform: rotate(3deg);  z-index: 4; }
.as-prog-shot-e { transform: rotate(-3deg); z-index: 5; }
.as-prog-shot-f { transform: rotate(2deg);  z-index: 6; }

/* ---- how it works ------------------------------------------------------- */

.as-prog-how {
  background: #fff;
  border-bottom: 1px solid var(--as-hairline);
  padding: 28px 20px;
}

.as-prog-how-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.as-prog-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--as-tag);
  color: var(--as-navy);
}

.as-prog-how-h {
  margin-top: 12px;
  color: var(--as-ink);
  font-size: 17px;
  font-weight: bold;
  line-height: 1.25;
}

.as-prog-how-p {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.45;
}

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

.as-prog-section { padding: 40px 20px 0; }

.as-prog-section:last-of-type { padding-bottom: 56px; }

/* With fine print below, the last section's note and the fine print are two
 * lines of small print: keep them close rather than a full section gap apart. */
.as-prog-section:last-of-type:has(~ .as-prog-fine) { padding-bottom: 32px; }

.as-prog-h2 {
  color: var(--as-ink);
  font-size: 32px;
  font-weight: bold;
  line-height: 1.1;
}

.as-prog-lede {
  margin-top: 12px;
  font-size: 17px;
  line-height: 1.5;
}

.as-prog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 32px;
}

.as-prog-grid-catalog { margin-top: 20px; }

.as-prog-note {
  margin-top: 32px;
  font-size: 13px;
  line-height: 1.5;
}

/* Optional fine print at the foot of the page, above the site footer: a
 * trademark notice on the Roblox page. Set off by a hairline rather than a
 * band, so it reads as small print and not as another section. The footer
 * itself cannot take another row without breaking its Wix layout, which is
 * why this lives on the page (2026-10-29). */
.as-prog-fine {
  width: calc(100% - 40px);
  max-width: 980px;
  margin: 0 auto;
  padding: 20px 0 32px;
  border-top: 1px solid var(--as-hairline);
  color: var(--as-muted);
  font-size: 12px;
  line-height: 1.5;
}

/* ---- cards -------------------------------------------------------------- */

/* A list section's checklist: plain lines, each after a green tick, in a
 * white card the height of the navy ask card beside it. */
.as-prog-checks { display: grid; gap: 14px; }

.as-prog-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--as-ink);
  font-size: 17px;
  line-height: 1.45;
}

.as-prog-check-ico {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #2d8054;
}

.as-prog-card-list .as-prog-card-body { padding: 28px; }


.as-prog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--as-card-shadow);
}

.as-prog-card-media { position: relative; }

.as-prog-card-img {
  display: block;
  width: 100%;
  object-fit: cover;
  background: var(--as-panel);
}

/* A photo card is a fixed height, as /stem's always were. */
.as-prog-card-img-photo { height: 210px; }

/* A wide card is 16:9, the shape of a Roblox thumbnail, so a set of them reads
 * as one catalog; a picture supplied at another shape is cropped to the
 * centre rather than letterboxed. */
.as-prog-card-img-wide {
  height: auto;
  aspect-ratio: 16 / 9;
}

/* A card whose picture has not arrived yet: a plain panel the same shape,
 * naming its genre, so the grid does not jump when the picture is added. */
.as-prog-card-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: var(--as-tag);
  color: var(--as-navy);
  font-size: 16px;
  font-weight: bold;
}

.as-prog-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.2;
}

.as-prog-badge-highlight {
  background: var(--as-yellow);
  color: var(--as-navy);
}

.as-prog-badge-dark {
  background: var(--as-ink);
  color: #fff;
}

.as-prog-badge-inline { position: static; }

.as-prog-card-body { padding: 22px 24px; }

.as-prog-game .as-prog-card-body {
  flex: 1;
  padding-bottom: 0;
}

.as-prog-eyebrow {
  color: var(--as-muted);
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.as-prog-card-h {
  color: var(--as-ink);
  font-size: 24px;
  font-weight: bold;
  line-height: 1.15;
}

.as-prog-eyebrow + .as-prog-card-h { margin-top: 6px; }

.as-prog-label-wrap { margin-top: 12px; }

/* A card's optional link to a page of its own: underlined navy text under
 * the card's sentence, not a button, so each section keeps one call to action. */
.as-prog-card-more { margin-top: 14px; }

.as-prog-card-link {
  color: var(--as-navy);
  font-size: 16px;
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.as-prog-card-link:hover,
.as-prog-card-link:focus { color: var(--as-ink); }

.as-prog-card-link:focus-visible {
  outline: 3px solid var(--as-navy);
  outline-offset: 3px;
}

.as-prog-label {
  display: inline-block;
  padding: 4px 9px;
  border: 1px solid var(--as-navy);
  border-radius: 6px;
  color: var(--as-navy);
  font-size: 13px;
  font-weight: bold;
  line-height: 1.2;
}

.as-prog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.as-prog-tag {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--as-tag);
  color: var(--as-navy);
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2;
}

.as-prog-card-p {
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.45;
}

.as-prog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.as-prog-fits {
  display: flex;
  gap: 6px;
}

/* Solid navy is a good fit; dashed grey is not. The two differ in fill,
 * border style and text colour, so the difference survives colour blindness
 * and a black-and-white printout. */
.as-prog-fit {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.2;
}

.as-prog-fit-on {
  border: 1px solid var(--as-navy);
  background: var(--as-navy);
  color: #fff;
}

.as-prog-fit-off {
  border: 1px dashed var(--as-dash);
  background: #fff;
  color: var(--as-muted);
}

.as-prog-style {
  margin-left: auto;
  padding: 5px 12px;
  font-size: 13px;
}

/* A catalog card's description, under its own small heading. */
.as-prog-card-sub {
  margin-top: 18px;
  color: var(--as-ink);
  font-size: 14px;
  font-weight: bold;
  line-height: 1.3;
}

.as-prog-card-p.as-prog-about {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.5;
}

/* With no heading over it, the description sits straight under the grade
 * blocks and needs the room the heading used to give it. */
.as-prog-meta + .as-prog-card-p.as-prog-about { margin-top: 14px; }

.as-prog-card-foot {
  margin: 18px 24px 0;
  padding: 12px 0 18px;
  border-top: 1px solid var(--as-hairline);
  font-size: 13px;
}

.as-prog-card-foot strong { color: var(--as-ink); }

/* The closing card: navy, no picture, contents centred down the card. */
.as-prog-card-ask {
  justify-content: center;
  background: var(--as-navy);
  box-shadow: none;
}

.as-prog-card-ask .as-prog-card-body { padding: 28px; }

.as-prog-ask-h {
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  line-height: 1.15;
}

.as-prog-ask-p {
  margin-top: 12px;
  color: var(--as-on-navy);
  font-size: 17px;
  line-height: 1.45;
}

/* Full width of the card body rather than shrink-to-fit: a long label wraps
 * whatever the padding, and a full-width button that wraps reads as
 * deliberate where an inline one reads as cramped. */
.as-prog-btn-card {
  display: block;
  min-height: 48px;
  padding: 13px 20px;
}

/* ---- the catalog filter --------------------------------------------------
 *
 * The radios come first inside .as-prog-filter so every later sibling -- the
 * labels, the counts, the grid -- can be reached with `:checked ~`. They are
 * visually hidden but still focusable: a keyboard user tabs to the group and
 * moves with the arrow keys, and the focused one's label shows the ring.
 * f0 is "all"; f1..f4 are the groups, matching scripts/add-pages' MAX_GROUPS.
 */

.as-prog-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
}

.as-prog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.as-prog-pick {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--as-navy);
  border-radius: 999px;
  background: #fff;
  color: var(--as-navy);
  font-size: 16px;
  font-weight: bold;
  line-height: 1.2;
  cursor: pointer;
}

.as-prog-pick:hover { background: var(--as-tag); }

#as-prog-f0:checked ~ .as-prog-filters .as-prog-pick-0,
#as-prog-f1:checked ~ .as-prog-filters .as-prog-pick-1,
#as-prog-f2:checked ~ .as-prog-filters .as-prog-pick-2,
#as-prog-f3:checked ~ .as-prog-filters .as-prog-pick-3,
#as-prog-f4:checked ~ .as-prog-filters .as-prog-pick-4 {
  background: var(--as-navy);
  color: #fff;
}

#as-prog-f0:focus-visible ~ .as-prog-filters .as-prog-pick-0,
#as-prog-f1:focus-visible ~ .as-prog-filters .as-prog-pick-1,
#as-prog-f2:focus-visible ~ .as-prog-filters .as-prog-pick-2,
#as-prog-f3:focus-visible ~ .as-prog-filters .as-prog-pick-3,
#as-prog-f4:focus-visible ~ .as-prog-filters .as-prog-pick-4 {
  outline: 3px solid var(--as-yellow);
  outline-offset: 3px;
}

#as-prog-f1:checked ~ .as-prog-grid .as-prog-game:not(.fit-1),
#as-prog-f2:checked ~ .as-prog-grid .as-prog-game:not(.fit-2),
#as-prog-f3:checked ~ .as-prog-grid .as-prog-game:not(.fit-3),
#as-prog-f4:checked ~ .as-prog-grid .as-prog-game:not(.fit-4) {
  display: none;
}

/* Under the group the catalog names in `badge_first_in`, games with a badge
 * ("Teen favorite") come first, so the strongest picks for that group are
 * what its visitors see before scrolling. The closing card stays last. */
.as-prog-first-1 > #as-prog-f1:checked ~ .as-prog-grid .is-badged,
.as-prog-first-2 > #as-prog-f2:checked ~ .as-prog-grid .is-badged,
.as-prog-first-3 > #as-prog-f3:checked ~ .as-prog-grid .is-badged,
.as-prog-first-4 > #as-prog-f4:checked ~ .as-prog-grid .is-badged {
  order: -1;
}

.as-prog-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
  margin-top: 20px;
  padding: 14px 18px;
  border: 1px solid var(--as-hairline);
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  line-height: 1.3;
}

.as-prog-legend-h {
  color: var(--as-ink);
  font-weight: bold;
}

.as-prog-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.as-prog-legend .as-prog-style { margin-left: 0; }

.as-prog-counts { margin-top: 18px; }

.as-prog-count {
  display: none;
  color: var(--as-ink);
  font-size: 15px;
  font-weight: bold;
}

#as-prog-f0:checked ~ .as-prog-counts .as-prog-count-0,
#as-prog-f1:checked ~ .as-prog-counts .as-prog-count-1,
#as-prog-f2:checked ~ .as-prog-counts .as-prog-count-2,
#as-prog-f3:checked ~ .as-prog-counts .as-prog-count-3,
#as-prog-f4:checked ~ .as-prog-counts .as-prog-count-4 {
  display: block;
}

/* ---- the two trees, and why the breakpoints sit where they do -------------
 *
 * There is no fluid middle. The mobile tree pins its viewport to width=320 and
 * the desktop tree never lays out narrower than 980px. So 601px separates the
 * two trees -- nothing legitimately renders between 320 and 600 -- and
 * everything above it gets the full-size layout.
 */

/* ---- video -------------------------------------------------------------- */

/* A click-to-play YouTube video, at most 640px wide and centred. Until it is
 * clicked it is our own picture and a link; shim/arrayscape.js then puts
 * YouTube's player in the same 16:9 box, so the page does not move when it
 * starts. See render_video in scripts/add-pages. */
.as-prog-video {
  position: relative;
  /* Two-thirds of the wrap, centred: at the full 980px it stood 552px tall,
   * as much page as two rows of cards (2026-11-02). */
  max-width: 640px;
  margin: 32px auto 0;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 16 / 9;
  background: var(--as-navy);
  box-shadow: var(--as-card-shadow);
}

.as-prog-video-link,
.as-prog-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.as-prog-video-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.as-prog-video-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 14px 18px 28px;
  color: #fff;
  font-size: 16px;
  line-height: 1.3;
  background: linear-gradient(rgba(0, 0, 0, 0.55), transparent);
}

.as-prog-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.as-prog-video-play svg { transition: transform 0.15s ease; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); }
/* YouTube red from the start rather than its grey-until-hovered: a poster is
 * a busy title card, and a grey button on it read as part of the picture
 * (2026-10-31). It grows a little when pointed at. */
.as-prog-video-play-bg { fill: #f00; }
.as-prog-video-play-fg { fill: #fff; }

.as-prog-video-link:hover .as-prog-video-play svg,
.as-prog-video-link:focus-visible .as-prog-video-play svg { transform: scale(1.1); }

.as-prog-video-link:focus-visible {
  outline: 3px solid var(--as-yellow);
  outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
  .as-prog-video-play svg { transition: none; }
  .as-prog-video-link:hover .as-prog-video-play svg,
  .as-prog-video-link:focus-visible .as-prog-video-play svg { transform: none; }
}

@media (min-width: 601px) {
  .as-prog { --as-shot-w: 168px; }

  .as-prog-h1 { font-size: 68px; }
  .as-prog-intro { font-size: 21px; }
  .as-prog-sub { font-size: 18px; }

  .as-prog-banner { padding: 56px 40px 64px; }
  .as-prog-shots { margin-top: 40px; }
  .as-prog-shots-row-low { margin-top: -8px; }
  .as-prog-shot + .as-prog-shot { margin-left: -16px; }
  .as-prog-shot-cap { font-size: 14px; }

  .as-prog-how { padding: 36px 20px; }
  .as-prog-how-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .as-prog-how-h { font-size: 19px; }
  .as-prog-how-p { font-size: 16px; }

  .as-prog-section { padding: 64px 20px 0; }
  .as-prog-section:last-of-type { padding-bottom: 96px; }
  .as-prog-section:last-of-type:has(~ .as-prog-fine) { padding-bottom: 40px; }
  .as-prog-h2 { font-size: 44px; }
  .as-prog-lede { font-size: 18px; }

  .as-prog-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .as-prog-grid-2 { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .as-prog-grid-2 .as-prog-card-h { font-size: 26px; }
  .as-prog-card-img-photo { height: 240px; }
  .as-prog-card-ask .as-prog-card-body { padding: 36px; }
}

/* ---- the banner's two columns --------------------------------------------
 *
 * Side by side at every desktop width, text left and photos right. From 980px
 * -- the narrowest the desktop tree lays out -- the photos are 148px and the
 * heading 56px, so text and cluster fit inside 40px side padding; from 1232px
 * they are full size with 80px padding. The banner used to stack below 1232px,
 * which made it jump from 440px to 760px tall as a window was narrowed
 * (2026-10-29).
 *
 * No fixed height: the banner is as tall as its content. A 620px minimum left
 * a band of empty navy under the button on both pages (2026-10-29).
 */

@media (min-width: 980px) {
  .as-prog { --as-shot-w: 148px; }

  .as-prog-h1 { font-size: 56px; }
  .as-prog-intro { font-size: 19px; }

  .as-prog-banner {
    display: flex;
    align-items: center;
    padding: 56px 40px;
  }

  .as-prog-banner-grid {
    display: grid;
    grid-template-columns: minmax(0, 560px) 1fr;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 1120px;
  }

  .as-prog-shots { margin-top: 0; }
  .as-prog-shot + .as-prog-shot { margin-left: -14px; }
  .as-prog-shot-cap { font-size: 13px; }
}

@media (min-width: 1232px) {
  .as-prog { --as-shot-w: 168px; }

  .as-prog-h1 { font-size: 68px; }
  .as-prog-intro { font-size: 21px; }

  .as-prog-banner { padding: 56px 80px; }
  .as-prog-shot + .as-prog-shot { margin-left: -16px; }
  .as-prog-shot-cap { font-size: 14px; }
}