/*
 * The shared product kit: the components every product page draws the same
 * way, ported from the approved ShareRing Me V3 page (product-sharering-me.css
 * on review-me-v3, rounds 3 to 7) and the Human Pass browser frame
 * (product-human-pass.css), renamed srpk- and scoped under .srpk-root.
 *
 * Markup comes from inc/product-kit.php. Loaded after scene-kit.css and before
 * the page's own stylesheet, so a page can override anything here at equal
 * specificity. No page ids: a page sizes its own scenes in its own file.
 *
 * ONE COMMIT, CHERRY-PICKED UNCHANGED onto every branch that uses it. Change
 * it in a new kit commit carried to each branch, never in place on one.
 *
 * Colours are the house style's tokens or values the Me page already uses.
 */

/* ---------------------------------------------------------------- Scene metrics */

/*
 * Every scene is one screen below the sticky header, as scene-kit.css sets it;
 * the kit restates that height with a header fallback (below) and sets the
 * PADDING: a short top, and a bottom gutter the chapter chevron and the
 * back-to-top button sit in, so neither ever covers content. --srpk-avail is
 * the height a scene's content can use; size visuals from it so a scene fills
 * the screen without being cut.
 */
.srpk-root {
  max-width: none;
  padding: 0;
  --srpk-top: clamp(40px, 6vh, 56px);
  --srpk-gutter: 80px;
  --srpk-pad: clamp(20px, 4vw, 64px);
  /* The sticky header's height: scene-flow.js publishes the measured value;
     until it does, the header token plus its 1px rule, so the first scene does
     not re-centre (a layout shift) when the script lands. */
  --srpk-header: var(--srk-header-h, calc(var(--header-h, 72px) + 1px));
  --srpk-avail: calc(var(--vph, 100dvh) - var(--srpk-header) - var(--srpk-top) - var(--srpk-gutter));
}

@media (max-width: 768px) {
  .srpk-root { --srpk-top: 44px; --srpk-gutter: 84px; }
}

.srk-page.srpk-root.srk-flow .srk-scene {
  min-height: calc(var(--vph, 100dvh) - var(--srpk-header));
  padding: var(--srpk-top) var(--srpk-pad) var(--srpk-gutter);
}

/*
 * The LAST scene keeps its bottom gutter whatever a page sets on its closer,
 * so the closer's content never sits on the footer's top edge and the band
 * the chapter chevron and the back-to-top button sit in stays clear when the
 * reader stops on it. (Where the footer itself lands is the footer's own
 * business, footer.php and footer.css, not the kit's.)
 */
.srk-page.srpk-root.srk-flow > .srk-scene:last-of-type {
  padding-bottom: var(--srpk-gutter);
}

/*
 * The house-style texture's faint marks (inc/house-style.php prints them as
 * svg.srh-cell-mark in the fixed grid behind the page, inside .srpk-root on
 * every kit page) read as tiny broken-image boxes beside headings on a phone
 * or tablet. Under 1000px the kit pages keep the grid and drop the marks.
 *
 * Fix pass 2: NO faint background drawing below 1000px on any scene of a kit
 * page, closers and FAQs included. The marks rule above was never the gap:
 * what still showed on the ShareLedger closer at 390 was that page's own
 * drawing (svg.srlg-blocks--faint, three rows of blocks at 14 per cent in
 * .srlg-closer-chain), which no rule about house-style marks could reach. So
 * the kit now also drops, under 1000px, anything a page marks .srpk-faint, and
 * any element whose class names a --faint variant. A page that draws faint
 * art behind a scene gives it one of those, or hides it itself.
 */
@media (max-width: 999px) {
  .srpk-root .srh-grid-texture .srh-cell-mark { display: none; }
  .srpk-root .srpk-faint,
  .srpk-root [class*="--faint"] { display: none !important; }
}

/* ---------------------------------------------------------------- Type */

/*
 * The floors. Desktop (1000px and up): body 20px, lede 22px, card text 17px,
 * card titles 21px. Tablet (700 to 999px): body 18px, card text 16px. Phone:
 * body 17px, lede 18px, card text 15px. Headings scale with clamp() and open to
 * a 1.14 line height so descenders never clip. Labels (eyebrows, pills) and
 * buttons sit at or above the card floor.
 */
.srpk-root {
  --srpk-body: 17px;
  --srpk-lede: 18px;
  --srpk-card: 15px;
  --srpk-card-title: 18px;
  --srpk-btn: 16px;
  --srpk-h2: clamp(28px, 7.4vw, 34px);
}

@media (min-width: 700px) {
  .srpk-root {
    --srpk-body: 18px;
    --srpk-lede: 20px;
    --srpk-card: 16px;
    --srpk-card-title: 19px;
    --srpk-btn: 17px;
    --srpk-h2: clamp(32px, 4.4vw, 44px);
  }
}

@media (min-width: 1000px) {
  .srpk-root {
    --srpk-body: 20px;
    --srpk-lede: 22px;
    --srpk-card: 17px;
    --srpk-card-title: 21px;
    --srpk-btn: 18px;
    --srpk-h2: clamp(40px, 3.6vw, 54px);
  }
}

/* Short desktop screens (a 1280x720 or 1366x768 laptop) give up heading size, never body size. */
@media (min-width: 1000px) and (max-height: 820px) {
  .srpk-root { --srpk-h2: clamp(34px, 3vw, 44px); }
}

.srk-page.srpk-root .srk-scene p,
.srk-page.srpk-root .srk-scene li,
.srk-page.srpk-root .srk-faq-answer {
  font-size: var(--srpk-body);
  line-height: 1.5;
}

.srk-page.srpk-root .srk-scene .srk-lede {
  margin-top: 0.8em;
  font-size: var(--srpk-lede);
  line-height: 1.45;
}

.srk-page.srpk-root .srk-scene h1,
.srk-page.srpk-root .srk-scene h2 {
  line-height: 1.14;
}

.srk-page.srpk-root .srk-scene h2 {
  font-size: var(--srpk-h2);
}

.srk-page.srpk-root .srpk-hero h1 {
  font-size: clamp(36px, 5.2vw, 76px);
  line-height: 1.16;
  padding-bottom: 0.04em;
}

@media (max-width: 699px) {
  .srk-page.srpk-root .srpk-hero h1 { font-size: 32px; }
}

.srk-page.srpk-root .srk-eyebrow {
  font-size: var(--srpk-card);
  letter-spacing: 0.14em;
  line-height: 1.3;
}

@media (max-width: 699px) {
  .srk-page.srpk-root .srk-eyebrow { margin-bottom: 0.7em; }
}

.srk-page.srpk-root .srk-btn {
  font-size: var(--srpk-btn);
  line-height: 1.25;
  min-height: 48px;
}

.srk-page.srpk-root .srk-faq-item summary {
  font-size: var(--srpk-card-title);
  line-height: 1.3;
}

/* A plain line under a lede: body size, softer ink, still well over 4.5:1. */
.srk-page.srpk-root .srk-scene .srpk-line {
  margin-top: 1em;
  max-width: 60ch;
  color: var(--srh-ink-soft);
}

.srk-page.srpk-root .srk-scene .srpk-line--strong { color: var(--srh-ink); }

/* ---------------------------------------------------------------- Layout helpers */

/* Copy beside a visual. Stacked under 900px, copy first. */
.srpk-split {
  display: grid;
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
}

@media (min-width: 900px) {
  .srpk-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/*
 * A scene whose visual takes whatever height the copy leaves: the inner box is
 * exactly --srpk-avail tall, the copy sits in an auto row and the visual in
 * the rest. Keep the copy short enough that the visual row always has room.
 */
.srpk-fill {
  display: grid;
  height: var(--srpk-avail);
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(14px, 2.6vh, 28px);
}

/*
 * A box a browser frame or a phone is fitted INTO, whole: the frame takes the
 * largest size that fits both the width and the height, so nothing is ever
 * cropped or cut. The box needs a definite height (a grid row, or an explicit
 * height set by the page).
 */
.srpk-fit {
  container-type: size;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------- Lockups */

/*
 * The 2026-09-01 kit horizontals, 100 units tall. Sizes are set for a
 * logotype-matched set: --srpk-k makes every other product draw taller so its
 * logotype's CAP HEIGHT matches Link's at the same size class. Measured
 * 7 Oct 2026 from the kit files rendered 1000px tall (a flat capital: R, L,
 * or the M of Me Modules): cap height Link 487.5px, Modules 456.75, Prove and
 * ShareLedger 389, Me 345, so k is Me 1.413, Prove and ShareLedger 1.253,
 * Modules 1.067. Me 1.414 and Prove 1.251 are the ShareRing Me page's values
 * (within 0.2 per cent); Modules was 1.094, matched on its first letter, which
 * drew its logotype 2.5 per cent tall. object-fit keeps the artwork in
 * proportion if a narrow column ever caps the width.
 */
.srk-page .srpk-lockup {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.srpk-lockup--link { --srpk-k: 1; }
.srpk-lockup--me { --srpk-k: 1.414; }
.srpk-lockup--prove,
.srpk-lockup--ledger { --srpk-k: 1.251; }
.srpk-lockup--modules { --srpk-k: 1.067; }
/* Fix pass 6: the Human Pass lockup (the approved ticket mark, the words
   beside it), cap height 519.67 at 1000px tall: k = 487.5 / 519.67. */
.srpk-lockup--human-pass { --srpk-k: 0.938; }

.srk-page .srpk-lockup--hero {
  height: calc(clamp(36px, 3.8vw, 56px) * var(--srpk-k, 1));
  margin-bottom: clamp(14px, 2.2vh, 24px);
}

.srk-page .srpk-lockup--head {
  height: calc(clamp(24px, 2.2vw, 32px) * var(--srpk-k, 1));
  margin-bottom: clamp(12px, 2vh, 20px);
}

.srk-page .srpk-lockup--row {
  height: calc(clamp(24px, 2.1vw, 32px) * var(--srpk-k, 1));
}

.srk-page .srpk-lockup--closer {
  height: calc(clamp(36px, 3.4vw, 50px) * var(--srpk-k, 1));
  margin: 0 auto clamp(16px, 2.6vh, 28px);
  object-position: center;
}

/* Two or more lockups side by side, their logotypes the same size. */
.srk-page .srpk-lockup--matched {
  height: calc(var(--srpk-match-h, 32px) * var(--srpk-k, 1));
}

/* A lockup in a tile body: a box tall enough for the tallest, so every
   title in a row starts on the same line. */
.srpk-brandbox {
  display: flex;
  align-items: center;
  height: calc(var(--srpk-brand-h, 25px) * 1.414);
  margin-bottom: 2px;
}

.srk-page .srpk-brand {
  width: auto;
  max-width: 100%;
  height: calc(var(--srpk-brand-h, 25px) * var(--srpk-k, 1));
}

@media (max-width: 699px) {
  .srpk-root { --srpk-brand-h: 18px; }
}

/* ---------------------------------------------------------------- Lockup words */

/*
 * Words beside a lockup ("Coming in the next version of" + ShareRing Me,
 * "inside" between two lockups): srpk_lockup_words() and srpk_lockup_pair().
 * The ShareRing Me page's "Share with" construction, made generic.
 *
 * CAP HEIGHT, by construction. --srpk-lw-h is the row's matched size (the
 * height Link's lockup would have); each lockup draws at --srpk-lw-h times its
 * own --srpk-k, so every wordmark's cap height is 0.4875 of --srpk-lw-h, and
 * the words' font size is 0.67 of it, so Inter Tight's cap height (0.7275 em)
 * is the same 0.4875. The row centres its items: every kit lockup has its
 * wordmark's caps centred on its own height, and Inter Tight's caps sit
 * centred in their line box, so the words' baseline lands on the wordmark's.
 *
 * WEIGHT, measured 7 Oct 2026 at equal cap height (Link logotype 400px tall,
 * Inter Tight at 268px): the logotype's stems are 0.164 of its cap height and
 * its ink covers 39.7 per cent of its cap band; Inter Tight 550 with no
 * tracking (the old pages' setting) has 0.159 stems but 41.9 per cent ink,
 * 6 per cent darker, because its letters are narrower and set closer, and
 * that is what reads as bold. 525 with 0.02em tracking keeps the stems within
 * 6 per cent (0.154) and the ink within 1 per cent of the wordmark's. Never
 * 600 or bold.
 *
 * --srpk-lw-h never lets the words fall under the type floors: 26px gives
 * 17.4px words on a phone, 28px gives 18.8px on a tablet, 30px and up gives
 * 20px and up on a desktop. Set it on the row (or any ancestor) to resize.
 */
.srpk-root { --srpk-lw-h: 26px; }

@media (min-width: 700px) {
  .srpk-root { --srpk-lw-h: 28px; }
}

@media (min-width: 1000px) {
  .srpk-root { --srpk-lw-h: clamp(30px, 2.6vw, 36px); }
}

.srpk-lw {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px calc(var(--srpk-lw-h) * 0.3);
  max-width: 100%;
}

.srpk-lw--center { justify-content: center; }

/* The word travels with the lockup after it (srpk_lockup_pair()). */
.srpk-lw-tail {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: calc(var(--srpk-lw-h) * 0.3);
  max-width: 100%;
}

.srk-page .srpk-lw .srpk-lw-mark {
  flex: 0 0 auto;
  width: auto;
  height: calc(var(--srpk-lw-h) * var(--srpk-k, 1));
}

.srk-page.srpk-root .srpk-lw-words {
  display: block;
  font-size: calc(var(--srpk-lw-h) * 0.67);
  line-height: 1.25;
  font-weight: 525;
  letter-spacing: 0.02em;
  color: #ffffff;
}

/* ---------------------------------------------------------------- Store badges */

.srpk-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 1.6em;
}

.srpk-badges a {
  display: inline-flex;
  line-height: 0;
  border-radius: 8px;
}

.srpk-badges a:focus-visible {
  outline: 2px solid var(--srk-accent-live, var(--srh-accent));
  outline-offset: 4px;
}

/* Both badges the same height, never under the 40px both brands set. */
.srk-page .srpk-badge {
  display: block;
  height: 48px;
  width: auto;
}

@media (max-width: 699px) {
  .srk-page .srpk-badge { height: 44px; }
  .srpk-badges { gap: 12px; margin-top: 1.2em; }
}

/* ---------------------------------------------------------------- Icons */

.srpk-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(77, 138, 255, 0.14);
  border: 1px solid rgba(77, 138, 255, 0.22);
  color: var(--srk-accent-live, var(--srh-accent));
}

.srpk-ic svg {
  width: 24px;
  height: 24px;
}

.srpk-ic--s {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.srpk-ic--s svg {
  width: 19px;
  height: 19px;
}

/* Icon rows: an icon, then a title and a gloss. */
.srpk-rows {
  list-style: none;
  padding: 0;
  margin: clamp(16px, 2.4vh, 26px) 0 0;
  display: grid;
  gap: 10px;
}

.srk-page.srpk-root .srpk-rows li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--srh-ink);
  line-height: 1.4;
}

.srpk-rows strong {
  color: var(--srh-pale);
  font-weight: 600;
}

/* ---------------------------------------------------------------- Pill */

.srk-page .srpk-pill {
  align-self: flex-start;
  margin-top: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--srk-accent-live, var(--srh-accent));
  color: var(--srh-pale);
  font-size: var(--srpk-card, 15px);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- Tile groups */

.srpk-tiles {
  display: grid;
  gap: clamp(12px, 1.6vw, 22px);
  margin-top: clamp(20px, 3.4vh, 40px);
}

@media (min-width: 1000px) {
  .srpk-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .srpk-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .srpk-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Under 1000px a tile group is a swipe row with the next tile peeking. */
@media (max-width: 999px) {
  .srpk-swipe {
    grid-auto-flow: column;
    grid-auto-columns: 44%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--srpk-pad));
    padding: 0 var(--srpk-pad) 8px;
    scroll-padding-inline: var(--srpk-pad);
    scrollbar-width: thin;
  }
  .srpk-swipe > * { scroll-snap-align: start; }
  .srpk-swipe--2rows { grid-template-rows: repeat(2, auto); }
}

@media (max-width: 699px) {
  .srpk-swipe { grid-auto-columns: 76%; gap: 10px; }
}

/* ---------------------------------------------------------------- Phone splits */

/*
 * NO SLICED CAROUSELS UNDER 1000px. A card group that would be a swipe row is
 * shown instead as whole cards, stacked, K to a scene, across as many snap
 * scenes as it needs (inc/product-kit.php: srpk_stack_class(),
 * srpk_stack_count(), srpk_stack_more(), srpk_capture()). At 1000px and up
 * nothing here applies: the desktop scene is exactly as it was and the extra
 * scenes are display:none.
 *
 *   .srpk-stack, .srpk-stack--K   the group: under 1000px, the first K cards
 *                                 only (K 1 to 3), stacked in one column under
 *                                 700px and side by side from 700 to 999px
 *   .srpk-stack-t--K              a different K from 700 to 999px (1 to 4;
 *                                 4 is a 2 x 2 grid)
 *   .srpk-stack-n--N              set by srpk_stack_more(): this scene holds N
 *                                 cards (N < K on the last one), drawn at the
 *                                 same size as the others and centred
 *   .srpk-stack--fill             cards fill the scene's height (photo tiles
 *                                 do this on their own)
 *   .srpk-stackbox                the scene inner: a column exactly the
 *                                 scene's usable height, the heading at its own
 *                                 height and the cards in the rest
 *   .srpk-more, --ph, --tab       an extra scene (all under 1000px, under 700px
 *                                 only, 700 to 999px only)
 *   .srpk-count, --ph, --tab      the "(2 of 3)" counter in an eyebrow
 *
 * Cards are never cut: a column of whole cards, never wider than the screen,
 * never taller than the scene (a picture header gives up height first, never
 * the words). Cards in a row are equal height, their bodies stretched so the
 * pills line up.
 */
.srpk-root { --srpk-stack-gap: 12px; }

@media (min-width: 1000px) {
  .srk-page .srpk-more { display: none !important; }
  .srpk-count { display: none; }
}

@media (max-width: 699px) {
  .srk-page .srpk-more--tab,
  .srpk-count--tab { display: none !important; }
}

@media (min-width: 700px) and (max-width: 999px) {
  .srpk-root { --srpk-stack-gap: 16px; }
  .srk-page .srpk-more--ph,
  .srpk-count--ph { display: none !important; }
}

.srpk-count {
  margin-left: 0.6em;
  white-space: nowrap;
}

/*
 * Fix pass 2. An INTRO scene (srpk_stack_more( array( 'intro' => 'ph' | 'tab'
 * | 'all' ) )): at that width the desktop scene draws its heading, lede and
 * own visual but none of the cards, carries no counter, and centres what it
 * has. The extra scenes carry every card, counted from "(1 of N)".
 */
@media (max-width: 699px) {
  .srk-page .srpk-stack.srpk-stack--intro-ph { display: none !important; }
  .srk-page .srpk-stackbox:has(> .srpk-stack--intro-ph) { justify-content: center; }
}

@media (min-width: 700px) and (max-width: 999px) {
  .srk-page .srpk-stack.srpk-stack--intro-tab { display: none !important; }
  .srk-page .srpk-stackbox:has(> .srpk-stack--intro-tab) { justify-content: center; }
}

/*
 * A desktop scene whose cards a series carries under 1000px (one group of
 * every card on the FIRST desktop scene, srpk_stack_more() with all of them):
 * the second desktop scene is srpk-desk-only. Give it no data-bg or
 * data-accent: scene-kit.js measures a hidden scene at offsetTop 0.
 */
@media (max-width: 999px) {
  .srk-page .srpk-desk-only { display: none !important; }
}

/*
 * Hide classes, for a phone (srpk_phone( ..., $cls )) or anything else that
 * cannot hold its floor at a width: under 700px, 700 to 999px, under 1000px,
 * and under 1000px on a screen under 800px tall (360x780).
 */
@media (max-width: 699px) {
  .srk-page .srpk-hide-ph { display: none !important; }
}

@media (min-width: 700px) and (max-width: 999px) {
  .srk-page .srpk-hide-tab { display: none !important; }
}

@media (max-width: 999px) {
  .srk-page .srpk-hide-mob { display: none !important; }
}

@media (max-width: 999px) and (max-height: 799px) {
  .srk-page .srpk-hide-short { display: none !important; }
}

@media (max-width: 999px) {
  .srk-page .srpk-stackbox {
    display: flex;
    flex-direction: column;
    height: var(--srpk-avail);
  }

  .srk-page .srpk-stackbox > * { flex: 0 0 auto; }

  .srk-page .srpk-stackbox > .srpk-stack {
    flex: 1 1 0;
    min-height: 0;
  }

  /* No swipe: one grid of whole cards, centred, never wider than the screen. */
  .srk-page .srpk-tiles.srpk-stack {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow: visible;
    overscroll-behavior-x: auto;
    scroll-snap-type: none;
    margin-inline: auto;
    padding: 0;
    width: 100%;
    gap: var(--srpk-stack-gap);
    align-content: center;
    grid-template-rows: repeat(var(--srpk-rows, 1), minmax(0, auto));
  }

  .srk-page .srpk-tiles.srpk-stack > * {
    min-width: 0;
    scroll-snap-align: none;
  }

  /* Photo tiles, and any group marked --fill, take the scene's whole height. */
  .srk-page .srpk-tiles.srpk-stack:is(.srpk-stack--fill, :has(> .srpk-tile)) {
    grid-template-rows: repeat(var(--srpk-rows, 1), minmax(0, 1fr));
  }

  .srk-page .srpk-stack > .srpk-tile { min-height: 0; }

  /* A card with a picture header: the picture at 4:3, the words whole. When
     the scene is short the picture gives up height, never the words. */
  .srk-page .srpk-stack > .srpk-htile {
    min-height: 0;
    max-height: 100%;
  }

  .srk-page .srpk-stack > .srpk-htile > .srpk-htile-head {
    height: auto;
    aspect-ratio: 4 / 3;
    flex: 0 1 auto;
    min-height: 88px;
  }

  .srk-page .srpk-stack > .srpk-htile > .srpk-htile-body { flex: 1 0 auto; }
}

/* Under 700px: one column, K cards (N on a last scene that has fewer). */
@media (max-width: 699px) {
  .srk-page .srpk-tiles.srpk-stack {
    max-width: 520px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(var(--srpk-n, var(--srpk-rows, 1)), minmax(0, auto));
  }

  .srpk-stack--1 { --srpk-rows: 1; }
  .srpk-stack--2 { --srpk-rows: 2; }
  .srpk-stack--3 { --srpk-rows: 3; }

  .srk-page .srpk-stack--1 > :nth-child(n + 2),
  .srk-page .srpk-stack--2 > :nth-child(n + 3),
  .srk-page .srpk-stack--3 > :nth-child(n + 4) { display: none !important; }

  /* The last scene with fewer cards than K: each card the size it has on the
     other scenes, the group centred. */
  .srk-page .srpk-tiles.srpk-stack:is(.srpk-stack-n--1, .srpk-stack-n--2):is(.srpk-stack--fill, :has(> .srpk-tile)) {
    grid-template-rows: repeat(var(--srpk-n), calc((100% - (var(--srpk-rows) - 1) * var(--srpk-stack-gap)) / var(--srpk-rows)));
  }
}

.srpk-stack-n--1 { --srpk-n: 1; }
.srpk-stack-n--2 { --srpk-n: 2; }
.srpk-stack-n--3 { --srpk-n: 3; }

/* 700 to 999px: K side by side (2 x 2 for a tablet K of 4). */
@media (min-width: 700px) and (max-width: 999px) {
  .srk-page .srpk-tiles.srpk-stack {
    --srpk-col: calc((100% - (var(--srpk-cols, 1) - 1) * var(--srpk-stack-gap)) / var(--srpk-cols, 1));
    grid-template-columns: repeat(var(--srpk-cols, 1), minmax(0, 1fr));
  }

  /* A tablet scene has the height for a square picture: a bigger visual, still whole. */
  .srk-page .srpk-stack > .srpk-htile > .srpk-htile-head { aspect-ratio: 1 / 1; }

  .srpk-stack--1 { --srpk-cols: 1; --srpk-rows: 1; }
  .srpk-stack--2 { --srpk-cols: 2; --srpk-rows: 1; }
  .srpk-stack--3 { --srpk-cols: 3; --srpk-rows: 1; }
  .srpk-stack.srpk-stack-t--1 { --srpk-cols: 1; --srpk-rows: 1; }
  .srpk-stack.srpk-stack-t--2 { --srpk-cols: 2; --srpk-rows: 1; }
  .srpk-stack.srpk-stack-t--3 { --srpk-cols: 3; --srpk-rows: 1; }
  .srpk-stack.srpk-stack-t--4 { --srpk-cols: 2; --srpk-rows: 2; }

  .srk-page .srpk-stack--1:not([class*="srpk-stack-t--"]) > :nth-child(n + 2),
  .srk-page .srpk-stack--2:not([class*="srpk-stack-t--"]) > :nth-child(n + 3),
  .srk-page .srpk-stack--3:not([class*="srpk-stack-t--"]) > :nth-child(n + 4),
  .srk-page .srpk-stack-t--1 > :nth-child(n + 2),
  .srk-page .srpk-stack-t--2 > :nth-child(n + 3),
  .srk-page .srpk-stack-t--3 > :nth-child(n + 4),
  .srk-page .srpk-stack-t--4 > :nth-child(n + 5) { display: none !important; }

  /* One card to a scene: a comfortable width, centred. */
  .srk-page .srpk-tiles.srpk-stack:is(.srpk-stack--1:not([class*="srpk-stack-t--"]), .srpk-stack-t--1) { max-width: 560px; }

  /* The last scene with fewer cards than columns: each card one column wide, centred. */
  .srk-page .srpk-tiles.srpk-stack.srpk-stack-n--1 {
    grid-template-columns: var(--srpk-col);
    justify-content: center;
  }

  .srk-page .srpk-tiles.srpk-stack.srpk-stack-n--2:is(.srpk-stack--3, .srpk-stack-t--3) {
    grid-template-columns: repeat(2, var(--srpk-col));
    justify-content: center;
  }

  .srk-page .srpk-tiles.srpk-stack.srpk-stack-t--4:is(.srpk-stack-n--1, .srpk-stack-n--2):is(.srpk-stack--fill, :has(> .srpk-tile)) {
    grid-template-rows: calc((100% - var(--srpk-stack-gap)) / 2);
  }

  .srk-page .srpk-stack-t--4.srpk-stack-n--3 > :nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: var(--srpk-col);
  }
}

/* ---------------------------------------------------------------- Photo tile */

/*
 * A tile on its photograph, under a dark gradient so the text holds 4.5:1 or
 * better. The whole tile is the link where it has one: lift, an accent border
 * and a slight zoom on hover.
 */
.srk-page .srpk-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: var(--srpk-tile-h, 300px);
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  border: 1px solid rgba(77, 138, 255, 0.22);
  background: var(--srh-navy);
  transition: transform 260ms var(--srk-ease), border-color 260ms var(--srk-ease);
}

.srpk-tile-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--srk-ease);
}

.srk-page .srpk-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(5, 10, 32, 0.1) 0%, rgba(5, 10, 32, 0.72) 48%, rgba(5, 10, 32, 0.95) 100%);
}

.srk-page a.srpk-tile:hover,
.srk-page a.srpk-tile:focus-visible {
  transform: translateY(-4px);
  border-color: var(--srk-accent-live, var(--srh-accent));
}

.srk-page a.srpk-tile:hover .srpk-tile-bg,
.srk-page a.srpk-tile:focus-visible .srpk-tile-bg {
  transform: scale(1.05);
}

.srpk-tile-body {
  display: grid;
  justify-items: start;
  gap: 6px;
  width: 100%;
  padding: clamp(14px, 1.6vw, 22px);
}

.srpk-tile-body .srpk-ic--s {
  margin-bottom: 4px;
  background: rgba(5, 10, 32, 0.55);
}

.srk-page.srpk-root .srpk-tile-title {
  font-size: var(--srpk-card-title);
  font-weight: 600;
  line-height: 1.2;
  color: var(--srh-pale);
}

.srk-page.srpk-root .srpk-tile-line {
  font-size: var(--srpk-card);
  line-height: 1.42;
  color: var(--srh-ink);
}

/*
 * The glyph tile (industries): the same dark overlay on every photograph and
 * the glyph large and white with a soft shadow, no circle and no border,
 * centred in the space above the name, so a title that wraps moves the glyph
 * up rather than under the text.
 */
.srk-page .srpk-tile--badge {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
}

.srk-page .srpk-tile--badge::before {
  background: linear-gradient(180deg, rgba(5, 10, 32, 0.52) 0%, rgba(5, 10, 32, 0.66) 45%, rgba(5, 10, 32, 0.93) 100%);
}

.srpk-tile-badge {
  display: flex;
  flex: 0 0 auto;
  align-self: center;
  width: var(--srpk-glyph, 56px);
  height: var(--srpk-glyph, 56px);
  margin: auto auto 0;
  color: #ffffff;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 18px rgba(0, 0, 0, 0.35));
}

.srpk-tile-badge .srm-glyph {
  display: block;
  width: 100%;
  height: 100%;
}

.srk-page .srpk-tile--badge .srpk-tile-body { margin-top: auto; }

/* ---------------------------------------------------------------- Picture-header tile */

.srk-page .srpk-htile {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  background: rgba(10, 36, 114, 0.42);
  border: 1px solid rgba(77, 138, 255, 0.22);
  transition: transform 260ms var(--srk-ease), border-color 260ms var(--srk-ease);
}

.srk-page a.srpk-htile:hover,
.srk-page a.srpk-htile:focus-visible {
  transform: translateY(-4px);
  border-color: var(--srk-accent-live, var(--srh-accent));
}

.srpk-htile-head {
  position: relative;
  height: var(--srpk-head-h, auto);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #050d2c;
}

/* A photograph: cover-fitted. Never used for a product screen. */
.srpk-htile-head--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The brand gradient every screen and panel sits on. */
.srpk-htile-head--screen,
.srpk-htile-head--panel,
.srpk-panel {
  background:
    radial-gradient(120% 120% at 20% 10%, var(--srh-lapis) 0%, transparent 55%),
    radial-gradient(120% 120% at 90% 100%, var(--srh-accent) 0%, transparent 50%),
    var(--srh-navy-mid);
}

/* A real screen, WHOLE: the largest box of the screen's own shape that fits. */
.srpk-htile-head--screen {
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 1.4vw, 16px);
}

.srpk-htile-screen {
  width: min(100cqw, calc(100cqh * var(--srpk-r, 1)));
  aspect-ratio: var(--srpk-r, 1);
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 14px 34px rgba(0, 0, 0, 0.42);
}

.srk-page .srpk-htile-screen img {
  display: block;
  width: 100%;
  height: 100%;
}

/*
 * No phone-top head (fix pass 3, Rohan's rule: the whole phone, always). A
 * phone in a card is srpk_phone(), whole, with the floor under Phone below:
 * at least 240px wide under 1000px and 150px at 1000px and up.
 */

/* The branded panel as a card head: the same inside as srpk_panel() (below). */
.srpk-htile-head--panel {
  display: flex;
  align-items: center;
  justify-content: center;
}

.srpk-htile-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 1;
  padding: clamp(14px, 1.6vw, 22px);
}

.srk-page.srpk-root .srk-scene .srpk-htile h3 {
  margin: 0;
  font-size: var(--srpk-card-title);
  line-height: 1.2;
}

.srk-page.srpk-root .srk-scene .srpk-htile p {
  margin: 0 0 8px;
  font-size: var(--srpk-card);
  line-height: 1.42;
  color: var(--srh-ink);
}

/* The pill sits at the foot of every tile, on one line across the row. */
.srk-page .srpk-htile-body .srpk-pill { margin-top: auto; }

@media (max-width: 699px) {
  .srpk-htile-body { padding: 12px 14px; }
}

/* ---------------------------------------------------------------- Industries */

/*
 * Twelve tiles: 4 x 3 at a full desktop, 6 x 2 on a short one, a two-row swipe
 * under 1000px. The page sets --srpk-ind-head, the height its heading block
 * takes, and the tile height comes from what is left of the scene. The glyph
 * is sized as on the ShareRing Me page: 56px, 48px on a phone, 40px on a
 * short desktop.
 */
.srpk-tiles--industries { --srpk-tile-h: 270px; }

.srpk-tiles--industries .srpk-tile-body {
  gap: 2px;
  padding: 8px 14px 12px;
}

@media (min-width: 1000px) {
  .srpk-tiles--industries {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: clamp(14px, 2.4vh, 26px);
    --srpk-glyph: 56px;
    --srpk-tile-h: calc((var(--srpk-avail) - var(--srpk-ind-head, 150px)) / 3);
  }
  .srk-page.srpk-root .srpk-tiles--industries .srpk-tile-title { font-size: 19px; }
}

@media (min-width: 1000px) and (max-height: 820px) {
  .srpk-tiles--industries {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
    --srpk-glyph: 40px;
    --srpk-tile-h: calc((var(--srpk-avail) - var(--srpk-ind-head, 100px)) / 2);
  }
  .srpk-tiles--industries .srpk-tile-body { padding: 6px 10px 10px; }
  .srk-page.srpk-root .srpk-tiles--industries .srpk-tile-title { font-size: 17px; line-height: 1.15; }
  .srk-page.srpk-root .srpk-tiles--industries .srpk-tile-line { line-height: 1.3; }
}

@media (max-width: 699px) {
  .srpk-tiles--industries { --srpk-tile-h: 205px; --srpk-glyph: 48px; }
}

/* ---------------------------------------------------------------- Phone */

/*
 * The kit phone is scene-kit's .srk-phone (the screen keeps its own aspect
 * ratio, so nothing is cropped) with a slimmer bezel for pages that show more
 * than one. A page sets the width; .srpk-fit fits it to a box instead.
 *
 * ONE FRAME. Every phone the kit draws (srpk_phone(), always whole)
 * takes the same bezel, rule and shadow from the
 * tokens below; a page sizes a phone but never restyles its frame. Two
 * things made the ShareRing Link page's two phones (stop 09) read as two
 * different devices, and both are fixed here or in the screens:
 *   1. scene-kit's shadow, 0 30px 90px at 0.62, reaches about 90px sideways,
 *      so the second phone of a pair painted its shadow across the first
 *      one's screen: a dark band down its right side, like a curved glass
 *      edge the other phone did not have. The shadow is now cast DOWN only
 *      (a negative spread larger than its sideways reach), so phones side by
 *      side never shade each other.
 *   2. app-screens/v3-share-request.webp has the device's own black rounded
 *      corners baked into the image (about 38px of 786), a second corner
 *      inside the kit's whenever the screen is drawn over about 240px wide
 *      on a phone or 410px on a desktop. v3-share-request-clean.webp is the
 *      same screen with square corners (and the comma retouch), so the kit's
 *      frame draws the only corner.
 */
.srpk-root {
  --srpk-ph-pad: 7px;
  --srpk-ph-bezel: #050d2c;
  --srpk-ph-rule: rgba(234, 240, 255, 0.2);
  --srpk-ph-shadow: 0 26px 40px -24px rgba(0, 0, 0, 0.8);
}

@media (max-width: 699px) {
  .srpk-root { --srpk-ph-pad: 4px; }
}

.srpk-root .srk-phone.srpk-phone {
  max-width: none;
  margin: 0;
  padding: var(--srpk-ph-pad);
  border-radius: 28px;
  background: var(--srpk-ph-bezel);
  border: 1px solid var(--srpk-ph-rule);
  box-shadow: var(--srpk-ph-shadow);
}

.srpk-root .srpk-phone .srk-phone-screen { border-radius: 21px; }

@media (max-width: 699px) {
  .srpk-root .srk-phone.srpk-phone { border-radius: 16px; }
  .srpk-root .srpk-phone .srk-phone-screen { border-radius: 12px; }
}

.srpk-fit > .srk-phone.srpk-phone {
  flex: 0 0 auto;
  width: min(100cqw, calc((100cqh - 2 * var(--srpk-ph-pad) - 4px) * var(--srpk-r, 0.46) + 2 * var(--srpk-ph-pad) + 2px));
}

/*
 * PHONE FLOOR (fix pass 2): at least 240px wide under 1000px, at least 150px
 * at 1000px and up, OR NOT SHOWN. A tiny filler phone is never drawn. A phone
 * fitted into a .srpk-fit box (every scene box, and every card head that is a
 * .srpk-fit) is width min(box width, (box height - frame) x screen shape +
 * frame), so the floor is a size the BOX must have, and the box is the query
 * container. For the site's phone screens (0.458 to 0.461 wide per unit
 * tall; 556x1213 is the narrowest) a 240px phone needs a box at least 240px
 * wide and 514px tall under 700px (4px bezel), 507px tall from 700 to 999px
 * (7px bezel); a 150px phone at 1000px and up needs 311px. Below that the
 * phone is not drawn (a phone on a wider screen shape would reach the floor
 * a little lower: it is still hidden, never shown small).
 *
 * The box keeps its place in the layout, so a page that lets a phone fall
 * under its floor gets an empty box: give the box the height (copy shorter,
 * or the phone a scene of its own), or hide the box with a hide class
 * (srpk-hide-ph, -tab, -mob, -short) and let the copy centre.
 *
 * A phone a page sizes ITSELF (not in a .srpk-fit box) has the same floor as
 * a minimum width: it is drawn at 240px (150px at 1000px and up) however
 * narrow the page sets it. Where that does not fit, the page gives it room or
 * a hide class; it is never shown smaller.
 */
@media (max-width: 999px) {
  .srpk-root .srk-phone.srpk-phone { min-width: 240px; }
}

@media (min-width: 1000px) {
  .srpk-root .srk-phone.srpk-phone { min-width: 150px; }
}

@media (max-width: 699px) {
  @container (width < 240px) or (height < 514px) {
    .srpk-fit > .srk-phone.srpk-phone { display: none !important; }
  }
}

@media (min-width: 700px) and (max-width: 999px) {
  @container (width < 240px) or (height < 507px) {
    .srpk-fit > .srk-phone.srpk-phone { display: none !important; }
  }
}

@media (min-width: 1000px) {
  @container (width < 150px) or (height < 311px) {
    .srpk-fit > .srk-phone.srpk-phone { display: none !important; }
  }
}

/* ---------------------------------------------------------------- Browser frame */

/*
 * One desktop screen, whole, in a browser frame: one ground, one hairline, one
 * shadow, and a bar that is a shape only (three dots and an empty address
 * pill), so there is no text in it to fall under the type floor.
 */
.srpk-root { --srpk-bar-h: 26px; }

@media (max-width: 699px) {
  .srpk-root { --srpk-bar-h: 20px; }
}

.srpk-browser {
  width: 100%;
  border-radius: clamp(10px, 1.2vw, 16px);
  overflow: hidden;
  background: #0b0b14;
  border: 1px solid rgba(234, 240, 255, 0.2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.srpk-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--srpk-bar-h);
  padding: 0 10px;
  background: #1a1b2b;
  border-bottom: 1px solid rgba(234, 240, 255, 0.12);
}

.srpk-browser-bar i {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(234, 240, 255, 0.28);
}

.srpk-browser-bar span {
  flex: 0 1 46%;
  height: 52%;
  margin-left: 10px;
  border-radius: 999px;
  background: rgba(234, 240, 255, 0.1);
}

.srpk-browser-screen {
  position: relative;
  background: #f4f6fb;
}

.srk-page .srpk-browser-screen img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.srpk-fit > .srpk-browser {
  flex: 0 0 auto;
  width: min(100cqw, calc((100cqh - var(--srpk-bar-h) - 4px) * var(--srpk-r, 1.6)));
}

/* ---------------------------------------------------------------- Tablet frame */

/*
 * THE KIT TABLET (Secondary pages 1, 9 Oct 2026): srpk_tablet() in
 * inc/product-kit.php. One frame, CSS only, of the kit phone's family: the
 * phone's ground, its 1px rule and its downward shadow (the --srpk-ph-
 * tokens above), an even bezel all round, and corners concentric (the
 * screen's corner is the frame's less the bezel and the rule), so the bezel
 * is as wide at a corner as along an edge. A small camera dot sits centred in
 * the bezel of the long edge: the top in landscape, the left in portrait (the
 * same device turned a quarter).
 *
 * The aspect ratio lives on the SCREEN, never on the frame (scene-kit's box
 * model note), and is one of the two shapes srpk_tablet_screens() names:
 * 1180 / 820 landscape, 820 / 1180 portrait. The frame is as wide as its
 * container up to --srpk-tablet-max and its height follows from the screen,
 * so it is never cropped and never stretched; in a .srpk-fit box it is fitted
 * whole to the box, like the phone and the browser frame.
 *
 * A page may set:
 *   --srpk-tablet-max  the frame's largest width (default none: its container's width)
 *   --srpk-tb-pad      the bezel (default 14px, 10px under 700px)
 *   --srpk-tb-radius   the frame's corner (default 28px, 20px under 700px)
 */
.srpk-root {
  --srpk-tb-pad: 14px;
  --srpk-tb-radius: 28px;
}

@media (max-width: 699px) {
  .srpk-root {
    --srpk-tb-pad: 10px;
    --srpk-tb-radius: 20px;
  }
}

.srpk-tablet {
  --srpk-r: 1.439;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--srpk-tablet-max, none);
  margin-inline: auto;
  padding: var(--srpk-tb-pad, 14px);
  border-radius: var(--srpk-tb-radius, 28px);
  background: var(--srpk-ph-bezel, #050d2c);
  border: 1px solid var(--srpk-ph-rule, rgba(234, 240, 255, 0.2));
  box-shadow: var(--srpk-ph-shadow, 0 26px 40px -24px rgba(0, 0, 0, 0.8));
}

.srpk-tablet::before {
  content: "";
  position: absolute;
  top: calc(var(--srpk-tb-pad, 14px) / 2);
  left: 50%;
  width: calc(var(--srpk-tb-pad, 14px) * 0.4);
  height: calc(var(--srpk-tb-pad, 14px) * 0.4);
  border-radius: 50%;
  background: #1b2a57;
  box-shadow: inset 0 0 0 1px rgba(234, 240, 255, 0.16);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.srpk-tablet-screen {
  position: relative;
  aspect-ratio: 1180 / 820;
  border-radius: calc(var(--srpk-tb-radius, 28px) - var(--srpk-tb-pad, 14px) - 1px);
  overflow: hidden;
  background: linear-gradient(180deg, #0a1a4d 0%, #071238 100%);
}

.srpk-tablet--portrait { --srpk-r: 0.6949; }
.srpk-tablet--portrait .srpk-tablet-screen { aspect-ratio: 820 / 1180; }

.srpk-tablet--portrait::before {
  top: 50%;
  left: calc(var(--srpk-tb-pad, 14px) / 2);
}

.srk-page .srpk-tablet-screen > img,
.srk-page .srpk-tablet-screen > video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* A picture of another shape: whole, centred, on the screen's 'bg'. */
.srk-page .srpk-tablet-screen > .srpk-tablet-contain {
  object-fit: contain;
  object-position: center;
  background: transparent;
}

/* clip_390: the clip under 700px, and the screen's shape there. */
@media (max-width: 699px) {
  .srk-page .srpk-tablet-screen > .srpk-tablet-wide { display: none; }

  .srpk-tablet--ph-landscape { --srpk-r: 1.439; }
  .srpk-tablet--ph-landscape .srpk-tablet-screen { aspect-ratio: 1180 / 820; }

  .srpk-tablet--ph-landscape::before {
    top: calc(var(--srpk-tb-pad, 14px) / 2);
    left: 50%;
  }

  .srpk-tablet--ph-portrait { --srpk-r: 0.6949; }
  .srpk-tablet--ph-portrait .srpk-tablet-screen { aspect-ratio: 820 / 1180; }

  .srpk-tablet--ph-portrait::before {
    top: 50%;
    left: calc(var(--srpk-tb-pad, 14px) / 2);
  }
}

@media (min-width: 700px) {
  .srk-page .srpk-tablet-screen > .srpk-tablet-ph { display: none; }
}

.srpk-fit > .srpk-tablet {
  flex: 0 0 auto;
  width: min(100cqw, calc((100cqh - 2 * var(--srpk-tb-pad, 14px) - 4px) * var(--srpk-r, 1.439) + 2 * var(--srpk-tb-pad, 14px) + 2px));
}

/* ---------------------------------------------------------------- Branded panel */

/*
 * For a [SCREEN NEEDED] slot, and the LAST resort: the product's or module's
 * ICON LARGE on the brand gradient, its lockup or name beneath (fix pass 2;
 * never a small lockup floating in gradient, never the same key twice on a
 * page). srpk_panel() and the 'panel' head of srpk_htile() print the same
 * inside, .srpk-panel-in: a size container that takes the panel's whole box,
 * so every size below is a share of the panel itself, whatever size and
 * shape the page gives it (16:10 by default).
 *
 *   product mark   46 per cent of the panel's height (each mark file is
 *                  cropped to its artwork), never wider than 82 per cent
 *   line icon      a 54 per cent box: Lucide draws inside 2 to 22 of its 24
 *                  grid, so its strokes span about 45 per cent; one stroke
 *                  (1.5 of 24) for all five modules
 *   lockup         beneath, at the matched size (k), 12 per cent of the
 *                  panel's height for Link, never wider than 86 per cent
 *   module name    beneath, at least the card text size
 *
 * The outer .srpk-panel rules are unchanged, so a page's own box using the
 * class (a lockup pair on the gradient, Link's brand kit) looks as before.
 */
.srpk-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: clamp(14px, 1.6vw, 22px);
  overflow: hidden;
  border: 1px solid rgba(77, 138, 255, 0.22);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.srpk-panel-in {
  flex: 1 1 0%;
  align-self: stretch;
  min-width: 0;
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.srpk-panel-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
}

.srk-page .srpk-panel-mark {
  display: block;
  width: auto;
  max-width: none;
  height: min(46cqh, calc(82cqw / var(--srpk-ar, 1)));
}

.srpk-panel-icon--line {
  width: min(54cqh, 82cqw);
  height: min(54cqh, 82cqw);
}

.srpk-panel-icon--line .srpk-icon {
  display: block;
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
}

/* The icon alone, where the card around it already carries the lockup or the
   name (srpk_htile(), srpk_panel( ..., false )): drawn larger, 56 per cent. */
.srk-page .srpk-panel-in--solo .srpk-panel-mark { height: min(56cqh, calc(82cqw / var(--srpk-ar, 1))); }

.srpk-panel-in--solo .srpk-panel-icon--line {
  width: min(64cqh, 82cqw);
  height: min(64cqh, 82cqw);
}

.srpk-panel-name {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  max-width: 88cqw;
  margin-top: 5cqh;
}

/* Each lockup's drawn width per unit of matched height: k times its own width. */
.srpk-panel-logo.srpk-lockup--link { --srpk-lr: 6.65; }
.srpk-panel-logo.srpk-lockup--me { --srpk-lr: 5.995; }
.srpk-panel-logo.srpk-lockup--modules { --srpk-lr: 5.666; }
.srpk-panel-logo.srpk-lockup--prove { --srpk-lr: 6.981; }
.srpk-panel-logo.srpk-lockup--ledger { --srpk-lr: 5.717; }

.srk-page .srpk-panel-logo {
  width: auto;
  height: calc(min(12cqh, 86cqw / var(--srpk-lr, 6.65)) * var(--srpk-k, 1));
  object-position: center;
}

.srk-page.srpk-root .srpk-panel-text {
  font-size: max(var(--srpk-card, 15px), min(10cqh, 9cqw));
  font-weight: 525;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: #ffffff;
  text-align: center;
}

/* ---------------------------------------------------------------- Seals */

/* The approved credential labels from sr_active_seals(), never anything else. */
.srpk-seals {
  list-style: none;
  padding: 0;
  margin: clamp(24px, 4vh, 48px) auto 0;
  display: grid;
  gap: 12px;
  justify-content: center;
  text-align: left;
}

@media (min-width: 900px) {
  .srpk-seals { grid-template-columns: repeat(3, auto); gap: 28px; }
}

.srk-page.srpk-root .srpk-seals li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--srpk-card);
  line-height: 1.4;
  color: var(--srh-ink);
}

.srpk-seals img {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
}

.srpk-seals span { max-width: 26ch; }

/* ---------------------------------------------------------------- Chapter chrome */

/*
 * The chevrons and back-to-top are <button>s that scene-kit.js appends to the
 * body, and the Elementor kit paints every button on hover and focus
 * (.elementor-kit-5 button:focus, 0-2-1, beats the chevron's own 0-2-0). A
 * chevron keeps focus after a click, so without this it sat on a dark navy
 * square for the rest of the visit. Scoped to pages that carry the kit.
 */
body:has(.srpk-root) .srk-chrome.srk-nav:is(:hover, :focus) {
  background: none;
}

body:has(.srpk-root) .srk-chrome.srk-top:is(:hover, :focus) {
  background: rgba(234, 240, 255, 0.06);
}

/* ---------------------------------------------------------------- Footer stop */

/*
 * THE FOOTER STOP CLEARS THE STICKY HEADER ON EVERY KIT PAGE (8 Oct 2026, fix
 * pass 4 rule 1d). On a touch screen up to 768px the footer is the last
 * scroll-snap beat (scene-kit.css) and the chevron aims at its top less the
 * header; with no scroll margin the mandatory snap then pulled the footer's
 * own top under the sticky header, and the ShareRing logo sat behind it
 * (prove-page-v2 at 390x844: 8.8px of the logo hidden). footer.css on
 * footer-cleanup (4c86839) carries the same rule for every page; the kit
 * carries it too, so a product page lands its footer stop the same way on its
 * own branch. The scenes' own number, from the same source; identical in
 * effect where both are present.
 */
@media (max-width: 768px) and (pointer: coarse) {
  .sr-footer {
    scroll-margin-top: var(--srk-header-h, 0px);
  }
}

/* ---------------------------------------------------------------- Motion */

@media (prefers-reduced-motion: reduce) {
  .srk-page .srpk-tile,
  .srk-page .srpk-htile,
  .srpk-tile-bg { transition: none; }
  .srk-page a.srpk-tile:hover,
  .srk-page a.srpk-htile:hover { transform: none; }
  .srk-page a.srpk-tile:hover .srpk-tile-bg { transform: none; }
}

/* ---------------------------------------------------------------- Product suite */

/*
 * srpk_suite() (fix pass 6, fix list 3b and 4): ONE product suite tile
 * component, the look of ShareLedger's suite scene. Each tile is a two-row
 * subgrid, its media in the first row and its lockup and line in the second,
 * so every media area of a row is the same size (and so is every phone in
 * it) and every body lines up. 1000px and up: one row of up to four, or five
 * and six as 3 x 2, the whole scene inside --srpk-avail. Under 1000px the
 * kit's split shows whole tiles, k to a scene; the scene a phone tile is on
 * gives its phone 240px or more at 390x844 (a 240px kit phone is 517px
 * tall: the eyebrow, its count and the body take the other 126px).
 *
 * The phone is scene-kit's own (.srk-phone: 12px padding, a 1px rule, a 38px
 * corner, the screen at 760/1744), the frame R2 measures against, never the
 * kit's slimmer srpk-phone bezel; it is drawn as large as its media area
 * allows, whole.
 */
.srpk-suite {
  --srpk-brand-h: 26px;
  --srpk-suite-my: 16px;
  --srpk-suite-mx: 14px;
}

@media (max-width: 699px) {
  .srpk-suite {
    --srpk-brand-h: 20px;
    --srpk-suite-my: 6px;
    --srpk-suite-mx: 10px;
  }
}

/* A section that also carries a page's own class (Prove's srn-prove-cross,
   whose snippet styles a narrow light block) stays a full scene. */
.srk-page .srk-scene.srpk-suite {
  max-width: none;
  margin: 0;
}

/* The heading: white on navy, never blue on blue. */
.srk-page.srpk-root .srk-scene.srpk-suite h2 {
  margin: 0;
  color: #ffffff;
  text-align: left;
}

.srk-page.srpk-root .srk-scene.srpk-suite .srk-lede {
  max-width: 62ch;
  color: var(--srh-ink);
}

/* An eyebrow the page did not give ("The product suite") carries the count
   under 1000px only. */
@media (min-width: 1000px) {
  .srk-page .srpk-suite .srpk-suite-brow--auto { display: none; }
}

/* Rows: desktop (rd), phone (rph = k) and tablet (rtab: 2 for a 2 x 2). */
.srpk-suite-r1 { --srpk-suite-rd: 1; }
.srpk-suite-r2 { --srpk-suite-rd: 2; }
.srpk-suite-k1 { --srpk-suite-rph: 1; }
.srpk-suite-k2 { --srpk-suite-rph: 2; }
.srpk-suite-kt1,
.srpk-suite-kt2,
.srpk-suite-kt3 { --srpk-suite-rtab: 1; }
.srpk-suite-kt4 { --srpk-suite-rtab: 2; }
.srpk-suite-c1 { --srpk-suite-c: 1; }
.srpk-suite-c2 { --srpk-suite-c: 2; }
.srpk-suite-c3 { --srpk-suite-c: 3; }
.srpk-suite-c4 { --srpk-suite-c: 4; }

.srpk-suite-tiles { --srpk-suite-r: var(--srpk-suite-rd, 1); }

@media (max-width: 699px) {
  .srpk-suite-tiles { --srpk-suite-r: var(--srpk-suite-rph, 1); }
}

@media (min-width: 700px) and (max-width: 999px) {
  .srpk-suite-tiles { --srpk-suite-r: var(--srpk-suite-rtab, 1); }
}

.srk-page.srpk-root .srpk-suite .srpk-tiles.srpk-suite-tiles {
  min-height: 0;
  grid-template-rows: repeat(var(--srpk-suite-r, 1), minmax(0, 1fr) auto);
}

@media (min-width: 1000px) {
  .srk-page .srpk-suite-inner {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: var(--srpk-avail);
  }
  .srk-page.srpk-root .srpk-suite .srpk-tiles.srpk-suite-tiles {
    grid-template-columns: repeat(var(--srpk-suite-c, 4), minmax(0, 1fr));
    gap: clamp(14px, 1.4vw, 22px);
  }
}

/* The tile: a two-row subgrid (media, body), the whole tile the link. */
.srk-page .srpk-suite-tile {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-width: 0;
  min-height: 0;
}

/*
 * Under 1000px the scene that carries the heading shows the tiles the kit
 * chose for it (srpk-suite-ph on a phone, srpk-suite-tab on a tablet: on a
 * phone the first tile that is not a phone), not simply the first K.
 */
@media (max-width: 699px) {
  .srk-page .srpk-suite:not(.srpk-more) .srpk-suite-tiles.srpk-stack > .srpk-suite-tile { display: none !important; }
  .srk-page .srpk-suite:not(.srpk-more) .srpk-suite-tiles.srpk-stack > .srpk-suite-tile.srpk-suite-ph { display: grid !important; }
  .srk-page.srpk-root .srpk-suite.srpk-more .srpk-tiles.srpk-suite-tiles { margin-top: 6px; }
  .srk-page.srpk-root .srpk-suite.srpk-more .srpk-more-head .srk-eyebrow { margin-bottom: 4px; }
}

@media (min-width: 700px) and (max-width: 999px) {
  .srk-page .srpk-suite:not(.srpk-more) .srpk-suite-tiles.srpk-stack > .srpk-suite-tile { display: none !important; }
  .srk-page .srpk-suite:not(.srpk-more) .srpk-suite-tiles.srpk-stack > .srpk-suite-tile.srpk-suite-tab { display: grid !important; }
}

/* The media area: the first row, a size container, the brand gradient. */
.srpk-suite-media {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 120% at 20% 10%, var(--srh-lapis) 0%, transparent 55%),
    radial-gradient(120% 120% at 90% 100%, var(--srh-accent) 0%, transparent 50%),
    var(--srh-navy-mid);
}

.srpk-suite-media--photo,
.srpk-suite-media--fill { background: #050d2c; }

.srk-page .srpk-suite-media--photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* A whole kit phone, as large as the area allows. */
.srk-page .srpk-suite-phone.srk-phone {
  flex: 0 0 auto;
  width: min(calc(100cqw - 2 * var(--srpk-suite-mx)), calc((100cqh - 2 * var(--srpk-suite-my) - 26px) * 760 / 1744 + 26px));
  min-width: 0;
  max-width: none;
  margin: 0;
  box-shadow: var(--srpk-ph-shadow, 0 26px 40px -24px rgba(0, 0, 0, 0.8));
}

.srk-page .srpk-suite-screen img,
.srk-page .srpk-suite-screen video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* A screen of another shape: whole, top aligned, on its own ground. */
.srk-page .srpk-suite-screen--contain { background: #ffffff; }

.srk-page .srpk-suite-screen--contain img {
  object-fit: contain;
  object-position: top center;
}

/* A clip in the area: whole on the gradient, or covering it (fill). */
.srk-page .srpk-suite-media--video .srpk-suite-clip {
  display: block;
  width: calc(100% - 2 * var(--srpk-suite-mx));
  height: calc(100% - 2 * var(--srpk-suite-my));
  object-fit: contain;
}

.srk-page .srpk-suite-media--fill .srpk-suite-clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A desktop screen, whole, as large as the area allows. */
.srpk-suite-shot {
  flex: 0 0 auto;
  width: min(calc(100cqw - 2 * var(--srpk-suite-mx)), calc((100cqh - 2 * var(--srpk-suite-my)) * var(--srpk-r, 1)));
  aspect-ratio: var(--srpk-r, 1);
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 14px 34px rgba(0, 0, 0, 0.42);
}

.srk-page .srpk-suite-shot img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* The body: the lockup (or glyph and title) on one line, then the line. */
.srpk-suite-body { gap: 6px; }

.srk-page.srpk-root .srk-scene .srpk-suite-name {
  display: flex;
  align-items: center;
  gap: 10px;
  height: calc(var(--srpk-brand-h) * 1.414);
  margin: 0;
}

.srk-page.srpk-root .srk-scene .srpk-suite-name--text {
  font-size: var(--srpk-card-title);
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
}

.srpk-suite-glyph {
  display: flex;
  flex: 0 0 auto;
  width: calc(var(--srpk-brand-h) * 1.25);
  height: calc(var(--srpk-brand-h) * 1.25);
  color: #ffffff;
}

.srpk-suite-glyph svg {
  display: block;
  width: 100%;
  height: 100%;
}

.srk-page.srpk-root .srk-scene .srpk-suite-tile p { margin: 0; }

/* A line that ends in a lockup ("Identity mini apps inside" + ShareRing Me):
   the words at the card text's cap height, "inside" travelling with it. */
.srk-page.srpk-root .srk-scene .srpk-suite-inside { --srpk-lw-h: calc(var(--srpk-card) / 0.67); }

.srk-page .srpk-suite-inside .srpk-lw-tail { white-space: nowrap; }

@media (max-width: 699px) {
  .srk-page .srpk-suite .srpk-suite-body {
    gap: 4px;
    padding: 8px 14px;
  }
  .srk-page .srpk-suite-inside .srpk-lw { column-gap: 5px; flex-wrap: nowrap; }
  .srk-page .srpk-suite-inside .srpk-lw-tail { gap: 5px; }
}

/* An all-phone suite on a phone: the heading's scene shows the lockups. */
.srpk-suite-marks { display: none; }

@media (max-width: 699px) {
  .srk-page .srpk-suite--intro .srpk-suite-marks {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 32px;
  }
  .srk-page .srpk-suite-marks .srpk-brand { height: calc(28px * var(--srpk-k, 1)); }
}

/* ---------------------------------------------------------------- Product suite: no tile chrome */

/*
 * About hero 3, part 7 (Rohan, 10 Oct 2026: no tiles, text on the
 * background). A suite of photographs (the Prove page's industries) keeps its
 * row, but nothing is boxed: no tile ground, no border, no media gradient. The
 * photograph keeps rounded corners; its words sit on the scene.
 */
.srk-page .srpk-suite--bare .srpk-suite-tile {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.srk-page .srpk-suite--bare a.srpk-suite-tile:hover,
.srk-page .srpk-suite--bare a.srpk-suite-tile:focus-visible { border-color: transparent; }

.srk-page .srpk-suite--bare .srpk-suite-media {
  background: none;
  border-radius: 16px;
}

.srk-page.srpk-root .srpk-suite--bare .srpk-suite-body { padding-inline: 0; }

/* ---------------------------------------------------------------- Monitor frame */

/*
 * The kit monitor (srpk_monitor_html()), of the kit phone's family: the
 * phone's dark ground and 1px rule as a thin bezel round a 16:10 screen (the
 * ratio lives on the screen, never on the bezel, so nothing is cropped), a
 * slim stand, and a soft shadow falling on the scene. Nothing behind it. Its
 * width is its container's; --srpk-bz sets the bezel.
 *
 * About hero 4: a shorter stand (the neck 4/9 of its width tall, the foot
 * 1.2 units), so more of the scene's height goes to the screen. The screen
 * can hold a clip (.srpk-monitor-clip: the VIDEO MONITOR, its poster the
 * still) and a phone view (.srpk-monitor--m: the MOBILE CROP, shown under
 * 700px in place of the whole screen). The view not shown is display:none,
 * so its picture is never fetched and its clip never plays.
 */
.srk-page .srpk-monitor {
  position: relative;
  width: 100%;
  --srpk-bz: clamp(5px, calc(var(--srpk-u, 0.7px) * 12), 12px);
}

.srk-page .srpk-monitor-screen {
  position: relative;
  padding: var(--srpk-bz);
  border-radius: calc(var(--srpk-bz) + 6px);
  background: #050d2c;
  border: 1px solid rgba(234, 240, 255, 0.2);
  box-shadow: 0 34px 80px -18px rgba(0, 0, 0, 0.7), 0 10px 26px -14px rgba(0, 0, 0, 0.6);
}

.srk-page .srpk-monitor-screen img,
.srk-page .srpk-monitor-screen video.srpk-monitor-clip {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: left top;
  border-radius: 4px;
  background: #000000;
}

.srk-page .srpk-monitor--m .srpk-monitor-view--m { display: none; }

@media (max-width: 699px) {
  .srk-page .srpk-monitor--m .srpk-monitor-view--d { display: none; }
  .srk-page .srpk-monitor--m .srpk-monitor-view--m { display: block; }
}

.srk-page .srpk-monitor-neck {
  display: block;
  width: 9%;
  aspect-ratio: 9 / 4;
  margin: -1px auto 0;
  background: linear-gradient(90deg, #121a38 0%, #27325c 48%, #121a38 100%);
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
}

.srk-page .srpk-monitor-base {
  display: block;
  width: 30%;
  aspect-ratio: 30 / 1.2;
  margin: 0 auto;
  border-radius: 999px;
  background: linear-gradient(180deg, #2c3866 0%, #131b3a 100%);
  box-shadow: 0 12px 22px -8px rgba(0, 0, 0, 0.75);
}

/* ---------------------------------------------------------------- Product suite: the set */

/*
 * srpk_suite_set() (About hero 3, part 7): the devices of the suite straight
 * on the scene, the desktop products on the kit monitor with their screens
 * full, the phones in front of its lower corners, each label under its device
 * as text. No tile, no panel, no box.
 *
 * The set is a size container under the heading; the row inside takes ONE
 * unit, --srpk-u, the largest that fits both its width (the set's natural
 * width, --srpk-nw units, printed by the component, plus room for the outer
 * labels) and its height (692 units: the monitor and its stand, plus the
 * label band). A monitor is 1000 units wide, a phone 255 and never under the
 * kit's 150px desktop floor, so every phone in a set is the same size (R2)
 * and the whole set grows and shrinks together.
 *
 * About hero 4, item 9 (Rohan: the monitor LARGER, as large as the scene
 * allows): the stand is shorter and the phones stand level with its foot
 * (the 26 unit step is gone), the label band is sized to the labels it holds
 * (a lockup and two lines), the outer labels may run into the scene's side
 * padding (40px kept, not 150), and the set starts right under the heading.
 * The phones stay in front of the monitor's lower corners, whole, and keep
 * the motion Rohan loved, unchanged.
 */
.srpk-suite--set { --srpk-brand-h: 26px; }

@media (max-width: 699px) {
  .srpk-suite--set { --srpk-brand-h: 20px; }
}

.srk-page .srpk-set {
  position: relative;
  min-width: 0;
  min-height: 0;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1000px) {
  .srk-page .srpk-suite--set .srpk-suite-inner > .srpk-set { margin-top: clamp(6px, 1.2vh, 14px); }

  /*
   * A suite set's scene keeps a 48px foot, not 80: the down chevron (44px,
   * fixed at the screen's foot, centred) and the back-to-top button (at the
   * left, clear of the labels) still have their band, and the monitor gains
   * the rest (About hero 4, item 9).
   */
  .srk-page.srpk-root .srk-scene.srpk-suite--set {
    --srpk-gutter: 48px;
    --srpk-avail: calc(var(--vph, 100dvh) - var(--srpk-header) - var(--srpk-top) - 48px);
  }
}

.srk-page .srpk-stackbox > .srpk-set {
  flex: 1 1 0;
  min-height: 0;
}

.srk-page .srpk-set-row {
  --srpk-n: var(--srpk-nw, 1306);
  --srpk-side: min(var(--srpk-sd, 150px), 40px);
  --srpk-lab: calc(var(--srpk-brand-h) * 1.414 + 18px + 2.75 * var(--srpk-card));
  --srpk-u: min(calc((100cqw - var(--srpk-side)) / var(--srpk-n)), calc((100cqh - var(--srpk-lab)) / 692));
  --srpk-mw: calc(var(--srpk-u) * 1000);
  --srpk-pw: max(150px, calc(var(--srpk-u) * 255));
  --srpk-labw: clamp(190px, calc(var(--srpk-mw) / 2 - var(--srpk-pw) * 0.1 - 16px), 330px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  max-width: 100%;
}

/* One device and its label: the whole a link. */
.srk-page .srpk-dev {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.srk-page .srpk-dev--monitor {
  width: var(--srpk-mw);
  z-index: 1;
}

.srk-page .srpk-dev--phone {
  width: var(--srpk-pw);
  z-index: 2;
}

/* A phone in front of a monitor's corner overlaps it by 40 per cent of its width. */
.srk-page .srpk-dev--ovr { margin-right: calc(var(--srpk-pw) * -0.4); }
.srk-page .srpk-dev--ovl { margin-left: calc(var(--srpk-pw) * -0.4); }

/* Between two monitors the phone stands in front of both inner corners, a quarter of it over each. */
.srk-page .srpk-dev--mid { margin-inline: calc(var(--srpk-pw) * -0.25); }

/* A phone beside a phone keeps room for both labels. */
.srk-page .srpk-dev--gap { margin-left: max(24px, calc(var(--srpk-labw) - var(--srpk-pw) + 18px)); }
.srk-page .srpk-dev--mgap { margin-left: calc(var(--srpk-u) * 60); }

.srk-page .srpk-dev-device {
  width: 100%;
  transition: transform 320ms var(--srk-ease);
}

/* The monitor's foot stands level with the phones' feet (About hero 4: no step, a larger monitor). */
.srk-page .srpk-dev--monitor .srpk-dev-device { margin-bottom: 0; }

.srk-page .srpk-dev .srpk-suite-phone.srk-phone {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
}

.srk-page a.srpk-dev:hover .srpk-dev-device { transform: translateY(-4px); }

.srk-page a.srpk-dev:focus-visible { outline: none; }

.srk-page a.srpk-dev:focus-visible .srpk-dev-label .srpk-suite-name {
  outline: 2px solid var(--srk-accent-live, var(--srh-accent));
  outline-offset: 4px;
  border-radius: 4px;
}

/* The label: the lockup, then the one line, centred under the device, on the scene. */
.srk-page .srpk-dev-label {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: var(--srpk-labw);
  height: var(--srpk-lab);
  padding-top: 12px;
  text-align: center;
}

/*
 * THE COMING FLAG (About hero 4, S3): an unreleased product's lockup line
 * carries the registry's words (srpk_coming(), "Coming soon") as text on the
 * scene, small caps in the accent, beside the lockup; never a pill or a box.
 * Where the line is narrow it wraps under the lockup.
 */
.srk-page.srpk-root .srk-scene .srpk-suite-name--coming {
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 4px;
  height: auto;
  min-height: calc(var(--srpk-brand-h) * 1.414);
}

.srk-page .srpk-coming {
  display: inline-block;
  font-family: var(--srk-font-eyebrow, inherit);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--srk-accent-live, var(--srh-accent, #7FB2FF));
}

.srk-page.srpk-root .srk-scene .srpk-dev-label .srpk-suite-name {
  justify-content: center;
  flex: 0 0 auto;
}

.srk-page.srpk-root .srk-scene .srpk-dev-label p {
  margin: 0;
  max-width: none;
  font-size: var(--srpk-card);
  line-height: 1.35;
  color: var(--srh-ink);
}

.srk-page .srpk-dev-label .srpk-lw { justify-content: center; }

/*
 * Under 1000px the set splits as the kit splits: the heading's scene shows
 * its first monitor alone, full width, and each other device follows in a
 * scene of its own (srpk_stack_more(), counted in the eyebrow), the phone as
 * large as its scene allows and never under the kit's 240px floor.
 */
@media (max-width: 999px) {
  .srk-page .srpk-set-row {
    --srpk-n: 1000;
    --srpk-side: 0px;
    --srpk-labw: min(100cqw, 340px);
  }

  .srk-page .srpk-suite--set:not(.srpk-more) .srpk-set:not(.srpk-set--solo) .srpk-dev:not(.srpk-dev--lead) { display: none; }

  .srk-page .srpk-dev--lead,
  .srk-page .srpk-dev--solo { margin: 0; }

  .srk-page .srpk-dev--lead .srpk-dev-device,
  .srk-page .srpk-dev--solo .srpk-dev-device { margin-bottom: 0; }

  .srk-page .srpk-set--solo .srpk-set-row {
    --srpk-pw: max(240px, min(100cqw, 380px, calc((100cqh - var(--srpk-lab) - 26px) * 760 / 1744 + 26px)));
  }

  .srk-page.srpk-root .srpk-suite .srpk-tiles.srpk-stack.srpk-suite-stack {
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    height: 100%;
    align-content: stretch;
  }

  .srk-page .srpk-suite-stack > .srpk-set--solo {
    height: 100%;
    width: 100%;
  }

  .srk-page.srpk-root .srpk-suite.srpk-suite--set.srpk-more .srpk-tiles.srpk-suite-stack { margin-top: 6px; }
}

/*
 * Motion: the monitor rises in, then the phones slide in from their sides on
 * --srk-spring, then the labels. The start state is only under .srpk-armed,
 * which the component's script sets when motion is allowed, so with
 * scripting off or reduced motion the set is drawn finished. A reset is made
 * under .sr-snap (transitions off), never seen running backwards.
 */
.srk-page .srpk-set.srpk-armed .srpk-dev {
  transition: transform 900ms var(--srk-spring, cubic-bezier(0.34, 1.56, 0.64, 1)), opacity 520ms var(--srk-ease, ease);
}

.srk-page .srpk-set.srpk-armed .srpk-dev--monitor {
  transition: transform 820ms var(--srk-ease, ease), opacity 700ms var(--srk-ease, ease);
}

.srk-page .srpk-set.srpk-armed .srpk-dev-label { transition: opacity 520ms var(--srk-ease, ease); }

.srk-page .srpk-set.srpk-armed.is-on .srpk-dev--phone.srpk-dev--from-l { transition-delay: 300ms; }
.srk-page .srpk-set.srpk-armed.is-on .srpk-dev--phone.srpk-dev--from-up { transition-delay: 340ms; }
.srk-page .srpk-set.srpk-armed.is-on .srpk-dev--phone.srpk-dev--from-r { transition-delay: 400ms; }
.srk-page .srpk-set.srpk-armed.is-on .srpk-dev--phone.srpk-dev--gap { transition-delay: 500ms; }
.srk-page .srpk-set.srpk-armed.is-on .srpk-dev--monitor.srpk-dev--mgap { transition-delay: 160ms; }
.srk-page .srpk-set.srpk-armed.is-on .srpk-dev-label { transition-delay: 640ms; }

.srk-page .srpk-set.srpk-armed:not(.is-on) .srpk-dev--monitor {
  opacity: 0;
  transform: translateY(56px);
}

.srk-page .srpk-set.srpk-armed:not(.is-on) .srpk-dev--phone.srpk-dev--from-l {
  opacity: 0;
  transform: translateX(-110px);
}

.srk-page .srpk-set.srpk-armed:not(.is-on) .srpk-dev--phone.srpk-dev--from-r {
  opacity: 0;
  transform: translateX(110px);
}

.srk-page .srpk-set.srpk-armed:not(.is-on) .srpk-dev--phone.srpk-dev--from-up {
  opacity: 0;
  transform: translateY(90px);
}

.srk-page .srpk-set.srpk-armed:not(.is-on) .srpk-dev-label { opacity: 0; }

.srk-page .srpk-set.sr-snap,
.srk-page .srpk-set.sr-snap * {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .srk-page .srpk-set .srpk-dev,
  .srk-page .srpk-set .srpk-dev-label,
  .srk-page .srpk-set .srpk-dev-device {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/*
 * About hero 4, item 9 (Rohan: "at 390 the monitor full width and legible,
 * phones in front, whole"). Under 700px the heading's scene holds the first
 * monitor FULL WIDTH (the screen's width less 8px a side, so it runs past the
 * scene's padding to the screen's edges), showing the screen's phone version
 * (its most important area, readable, still edge to edge in the bezel), and
 * the phones at its lower corners standing whole in front of it (the left
 * one at its lower left, the right one at its lower right). The labels sit in
 * one row under them, a column each, in the order of the devices above.
 *
 * Sizes: --srpk-mm is the monitor's width, --srpk-ms its height. A phone is
 * the narrower of: half the monitor less a 14px gap (two phones) or 0.48 of
 * it (one), 240px, and the height that keeps the top of the
 * monitor's screen in view above it (72 per cent), never under the kit's
 * 150px floor, so the monitor reads as the scene's lead and the phones stand
 * at its corners rather than over its middle.
 *
 * Every piece is placed against the row (the devices' links are position
 * static, so their children are absolutely placed in the row), and the motion
 * moves the devices, not the links: a transform on a link would make it the
 * containing block of its device for the length of the animation.
 */
@media (max-width: 699px) {
  .srpk-set--comp { --srpk-brand-h: 16px; }
  .srpk-set--comp1 { --srpk-brand-h: 19px; }

  .srk-page .srpk-set--comp:not(.srpk-set--solo) > .srpk-set-row {
    --srpk-mm: calc(100vw - 16px);
    --srpk-mx: calc(50% - 50vw + 8px);
    --srpk-bz: 6px;
    --srpk-ms: calc((var(--srpk-mm) - 12px) * 0.625 + 14px);
    --srpk-lh: calc(var(--srpk-brand-h) * 1.414 + 26px + 3.9 * var(--srpk-card));
    --srpk-ph: calc((100cqh - var(--srpk-lh) - 8px - 0.72 * var(--srpk-ms) - 26px) * 760 / 1744 + 26px);
    --srpk-pp: max(150px, min(240px, calc(var(--srpk-mm) * 0.48), var(--srpk-ph)));
    --srpk-cw: calc(var(--srpk-mm) / 3);
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }

  .srk-page .srpk-set--comp2:not(.srpk-set--solo) > .srpk-set-row {
    --srpk-pp: max(150px, min(240px, calc((var(--srpk-mm) - 14px) / 2 - 6px), var(--srpk-ph)));
  }

  .srk-page .srpk-set--comp:not(.srpk-set--solo) .srpk-dev--lead,
  .srk-page .srpk-suite--set:not(.srpk-more) .srpk-set.srpk-set--comp:not(.srpk-set--solo) .srpk-dev.srpk-dev--comp {
    display: block;
    position: static;
    width: auto;
    margin: 0;
  }

  /* The monitor: full width, at the top. */
  .srk-page .srpk-set--comp:not(.srpk-set--solo) .srpk-dev--lead .srpk-dev-device {
    position: absolute;
    top: 0;
    left: var(--srpk-mx);
    width: var(--srpk-mm);
    margin: 0;
    z-index: 1;
  }

  .srk-page .srpk-set--comp:not(.srpk-set--solo) .srpk-dev--lead .srpk-monitor { --srpk-bz: 6px; }

  /* The phones: whole, in front of its lower corners, their feet on the label row. */
  .srk-page .srpk-set--comp:not(.srpk-set--solo) .srpk-dev--comp .srpk-dev-device {
    position: absolute;
    bottom: calc(var(--srpk-lh) + 8px);
    width: var(--srpk-pp);
    z-index: 2;
  }

  .srk-page .srpk-set--comp:not(.srpk-set--solo) .srpk-dev--comp-l .srpk-dev-device { left: calc(var(--srpk-mx) + 6px); }
  .srk-page .srpk-set--comp:not(.srpk-set--solo) .srpk-dev--comp-r .srpk-dev-device { left: calc(var(--srpk-mx) + var(--srpk-mm) - var(--srpk-pp) - 6px); }

  /* The labels: one row at the foot, a column each, in the order of the devices. */
  .srk-page .srpk-set--comp:not(.srpk-set--solo) .srpk-dev-label {
    position: absolute;
    bottom: 0;
    width: var(--srpk-cw);
    height: var(--srpk-lh);
    padding: 0 4px;
    gap: 4px;
    align-items: center;
    text-align: center;
    z-index: 3;
  }

  .srk-page .srpk-set--comp2:not(.srpk-set--solo) .srpk-dev--comp-l .srpk-dev-label { left: var(--srpk-mx); }
  .srk-page .srpk-set--comp2:not(.srpk-set--solo) .srpk-dev--lead .srpk-dev-label { left: calc(var(--srpk-mx) + var(--srpk-cw)); }
  .srk-page .srpk-set--comp2:not(.srpk-set--solo) .srpk-dev--comp-r .srpk-dev-label { left: calc(var(--srpk-mx) + 2 * var(--srpk-cw)); }

  /* One corner phone: the monitor's label takes the room at the phone's left, the phone's sits under it. */
  .srk-page .srpk-set--comp1:not(.srpk-set--solo) .srpk-dev--lead .srpk-dev-label {
    left: var(--srpk-mx);
    width: calc(var(--srpk-mm) - var(--srpk-pp) - 12px);
  }

  .srk-page .srpk-set--comp1:not(.srpk-set--solo) .srpk-dev--comp-l .srpk-dev-label { left: calc(var(--srpk-mx) + 6px); width: var(--srpk-pp); }
  .srk-page .srpk-set--comp1:not(.srpk-set--solo) .srpk-dev--comp-r .srpk-dev-label { left: calc(var(--srpk-mx) + var(--srpk-mm) - var(--srpk-pp) - 6px); width: var(--srpk-pp); }

  .srk-page .srpk-set--comp1:not(.srpk-set--solo) .srpk-dev--comp-l ~ .srpk-dev--lead .srpk-dev-label,
  .srk-page .srpk-set--comp1:not(.srpk-set--solo) .srpk-dev--lead:has(~ .srpk-dev--comp-l) .srpk-dev-label { left: calc(var(--srpk-mx) + var(--srpk-pp) + 12px); }

  .srk-page .srpk-set--comp:not(.srpk-set--solo) .srpk-dev-label .srpk-suite-name { justify-content: center; }

  .srk-page .srpk-set--comp:not(.srpk-set--solo) .srpk-dev-label .srpk-lw { justify-content: center; flex-wrap: wrap; }

  .srk-page .srpk-set--comp:not(.srpk-set--solo) .srpk-suite-inside .srpk-lw-tail { flex-wrap: wrap; white-space: normal; justify-content: center; }

  .srk-page.srpk-root .srk-scene .srpk-set--comp:not(.srpk-set--solo) .srpk-dev-label p { line-height: 1.3; }

  .srk-page .srpk-set--comp:not(.srpk-set--solo) .srpk-coming { flex-basis: 100%; text-align: center; font-size: 11px; letter-spacing: 0.1em; }

  /* Motion: the same as on a desktop (the monitor rises, the phones slide in from their own sides), on the devices. */
  .srk-page .srpk-set.srpk-set--comp:not(.srpk-set--solo).srpk-armed .srpk-dev { transform: none !important; }

  .srk-page .srpk-set.srpk-set--comp:not(.srpk-set--solo).srpk-armed .srpk-dev-device {
    transition: transform 900ms var(--srk-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
  }

  .srk-page .srpk-set.srpk-set--comp:not(.srpk-set--solo).srpk-armed .srpk-dev--monitor .srpk-dev-device {
    transition: transform 820ms var(--srk-ease, ease);
  }

  .srk-page .srpk-set.srpk-set--comp:not(.srpk-set--solo).srpk-armed.is-on .srpk-dev--comp-l .srpk-dev-device { transition-delay: 300ms; }
  .srk-page .srpk-set.srpk-set--comp:not(.srpk-set--solo).srpk-armed.is-on .srpk-dev--comp-r .srpk-dev-device { transition-delay: 400ms; }

  .srk-page .srpk-set.srpk-set--comp:not(.srpk-set--solo).srpk-armed:not(.is-on) .srpk-dev--monitor .srpk-dev-device { transform: translateY(56px); }
  .srk-page .srpk-set.srpk-set--comp:not(.srpk-set--solo).srpk-armed:not(.is-on) .srpk-dev--comp-l .srpk-dev-device { transform: translateX(-110px); }
  .srk-page .srpk-set.srpk-set--comp:not(.srpk-set--solo).srpk-armed:not(.is-on) .srpk-dev--comp-r .srpk-dev-device { transform: translateX(110px); }
}

/* A monitor in a scene of its own on a phone (the second monitor of a set) is full width too. */
@media (max-width: 699px) {
  .srk-page .srpk-set--solo .srpk-dev--solo.srpk-dev--monitor {
    width: calc(100vw - 16px);
    margin-inline: calc(50% - 50vw + 8px);
  }

  .srk-page .srpk-set--solo .srpk-dev--solo.srpk-dev--monitor .srpk-monitor { --srpk-bz: 6px; }
}

@media (max-width: 699px) and (prefers-reduced-motion: reduce) {
  .srk-page .srpk-set.srpk-set--comp .srpk-dev-device { transform: none !important; transition: none !important; }
}

/*
 * Chain 7, row 4: no faint background marks behind a suite. While a suite
 * scene holds the middle of the screen the component's script sets
 * html.srpk-suite-here, and the house-style texture's marks fade out; its
 * grid and glow stay, and every other scene keeps its marks.
 */
.srpk-root .srh-grid-texture .srh-cell-mark { transition: opacity 360ms ease; }

.srpk-suite-here .srpk-root .srh-grid-texture .srh-cell-mark { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .srpk-root .srh-grid-texture .srh-cell-mark { transition: none; }
}

/*
 * A phone's own scene on a short phone under a sticky header (360x780 on
 * /shareledger/ and /prove/): a 240px kit phone, its label and the eyebrow
 * need about 630px and the scene holds 579. The phone keeps its 240px floor
 * and its label; the eyebrow (the count, decorative) gives way, and the label
 * tightens, so nothing covers anything.
 */
@media (max-width: 699px) {
  .srk-page .srpk-suite--set.srpk-more .srpk-suite-inner { container: srpk-stop / size; }
}

@container srpk-stop (max-height: 628px) {
  .srk-page .srpk-suite--set.srpk-more:has(.srpk-dev--phone) .srpk-more-head { display: none; }
  .srk-page .srpk-suite--set.srpk-more:has(.srpk-dev--phone) .srpk-tiles.srpk-suite-stack { margin-top: 0; }
  .srk-page .srpk-suite--set.srpk-more:has(.srpk-dev--phone) .srpk-dev-label { padding-top: 6px; gap: 4px; }
  .srk-page .srpk-suite--set.srpk-more:has(.srpk-dev--phone) .srpk-set--solo .srpk-set-row { --srpk-lab: calc(var(--srpk-brand-h) * 1.414 + 12px + 1.5 * var(--srpk-card)); }
}