/* /apps/ in the lab (pool 2, item 9, 16.09.2026): only what the sub-page
   language of lab.css does not already give. The card is the featured card of
   the home (.sps-card); the head, buttons, tags, footer and dock are shared. */

/* Alexa, 19.10.2026: regular headings and light explanatory copy, as on home.
   Labels, tags and controls keep their established emphasis. */
.lab--apps :is(.sp-title, .sps-title) {
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.035em;
  line-height: 1.12;
}
.lab--apps .sp-title { line-height: 1.08; }
.lab--apps .apps-title-secondary { color: var(--home-heading-mute, #92989d); }
.lab--apps .sps-title { font-size: clamp(32px, 3.2vw, 48px); }
.lab--apps :is(.sp-explain, .sps-lead, .cmp-test, .apl-foot) { font-weight: 300; }
.lab--apps :is(.sp-explain, .apl-foot) { color: #b6babd; }
.lab--apps .apps-nowrap { white-space: nowrap; }

/* The list of apps starts where the visuals of a service page start. */
.apl { margin-top: 40px; padding: 0 var(--g); }
.apl .sps-card { margin-top: 0; }
.apl .sps-card + .sps-card { margin-top: 12px; }

/* Height on wide screens (Alexa, 19.10.2026: «на 2К слишком вытянутая
   карточка, нужно её на высоту сделать на 30% больше»). The card stood at 448
   at every desktop width, 2512 wide on her 2560 monitor. Now 582 there (+30 %),
   the 448 of her 1512 laptop and narrower stays, and between them the height
   follows the width, so no width jumps. */
@media (min-width: 1513px) {
  .apl .sps-visual { min-height: calc(12.786vw + 246.67px); }
}

/* The app's icon on the tile of the site — the same plate and the same icon
   size as the case card and the service thumbnail (.svs-media.is-tile in
   lab.css); here the slot is the featured card's visual, which fills its
   frame absolutely, so the tile centres inside that frame. */
.apl .sps-media.is-tile {
  display: grid;
  place-items: center;
  background: var(--silver-action);
}
.apl .sps-media.is-tile img {
  width: 32%;
  height: auto;
  object-fit: contain;
  border-radius: 22%;
}

/* Actions of the card (Alexa, 19.10.2026): the homepage pair in the copy
   column — the visual keeps the right part at full height. Two dark buttons
   of equal width, 4 apart, on the card's edge (4 from its left and bottom,
   as #dealer on home); the note to their right, centred on them. Where the
   column is too narrow for both, the note goes under the pair and the pair
   fills the column, as on home. Phones stack the pair full width. */
.apl .apl-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: auto -28px -28px;
  padding-top: 36px;
}
/* A grid at its own content width gives both 1fr columns the width of the
   longer label: equal boxes without a number. */
.apl .apl-buy-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; flex: 1 0 auto; }
.apl .apl-buy-pair > .lab-btn { display: flex; min-width: 0; padding-inline: 16px; }
/* The free width goes to the note while it shares the line; alone, the pair
   takes it. 28 left aligns the folded note with the copy above. */
.apl .apl-buy-notes { flex: 999 1 8em; min-width: 8em; padding: 12px 24px 12px 28px; }
.apl .apl-buy .cmp-test { margin: 0; color: #5c5c60; }

/* Closing line of the collection, at the card, in the quiet voice of the page. */
.apl-foot { margin: 20px var(--g) 0; max-width: 44ch; font: 400 15px/22px "Inter", sans-serif; color: var(--ink-mute); }

@media (max-width: 719.98px) {
  .lab--apps .sps-title { font-size: clamp(30px, 7.5vw, 36px); }
  .apl { margin-top: 32px; }
  .apl .sps-media.is-tile img { width: 36%; }
  .apl .apl-buy { margin: auto -16px 0; padding-top: 24px; }
  .apl .apl-buy-pair { grid-template-columns: minmax(0, 1fr); flex-basis: 100%; }
  .apl .apl-buy-notes { padding: 8px 16px 12px; }
}