/*
 * ShareProtect, pass 2: the pitch (templates/shareprotect/pitch.php). Pass 1's
 * layer is frozen beside it as product-shareprotect-pass1.css (?pass=1).
 *
 * Ten scenes, each its own composition so the page reads as ShareProtect
 * and not as /digital-me/ or /prove/ (Rohan, 20 Oct: the same phone
 * silhouette everywhere, but each product unique without leaving the site
 * style). The site's tokens, type, colour journey and stop system are the
 * kit's; this file says where things sit and how they move:
 *   hero    a real room, soft, bleeding off the right edge; the phone set
 *           hard right in front of it; a heavy headline on the left.
 *   how     the phone on the left, the nine steps ticking down beside it.
 *   moveout the same composition again, with a lede under the heading.
 *   proof   the phone big in the middle, the heading leaning in from the
 *           left and the caption from the right. Written as section 2 and
 *           drawn as scene 4; it is the one block in this file that is not in
 *           page order, because the scene moved and the composition did not.
 *   send    the check scene's composition, with the report's own page, its QR
 *           code and its link in the phone (SHA-81).
 *   check   the phone on the left, the words on the right (a browser frame until 25 Oct 2026).
 *   tpls    the check scene's composition again, with the app's New set sheet
 *           in the phone and the six templates read out beside it (SHA-97).
 *   who     the business line on its own, centred.
 *   limits  the seal rows and notice, the FAQ beside them.
 *   closer  one centred group.
 * Everything is scoped to .srsp-pitch (this page's <main>), so no other page
 * changes. The DigitalMe phone's own rules (dm-phone.css) are untouched: this
 * file only sets --phone-width and never draws a frame (S9).
 *
 * Breakpoints: 1000px (columns), 700px (phone layouts). No tiles (S2): no
 * box, ground or border round any text.
 */

/* ---------------------------------------------------------------- Drawn at a width */

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

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

@media (min-width: 700px) {
  .srk-page .srsp-xs { display: none !important; }
}

.srk-page.srsp-pitch { --srsp-dm-wh: 0.45998; }

/* The house-style grid's faint marks are not drawn on this page (as /prove/). */
.srsp-page .srh-cell-mark { display: none; }

/* ---------------------------------------------------------------- Get ShareRing Me + Talk to us (S5, as pass 1) */

.srsp-pitch .srsp-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px clamp(24px, 3vw, 44px);
}

.srsp-pitch .srsp-get { display: grid; gap: 12px; }

.srk-page.srsp-pitch .srsp-get-label { --srpk-lw-h: 30px; }

.srk-page.srsp-pitch .srsp-get .srpk-badges { margin-top: 0; }

.srk-page.srsp-pitch .srk-btn.srsp-talk {
  box-sizing: border-box;
  height: 48px;
  min-height: 48px;
  padding: 0 24px;
  gap: 10px;
  white-space: nowrap;
}

/* One colour on every scene (Cowork 12:46, pass 1): the suite blue, /prove/'s label ink. */
.srk-page.srsp-pitch .srk-btn.srk-btn-primary.srsp-talk {
  background: #3d8bff;
  color: color-mix(in srgb, #3d8bff 6%, #01120b);
}

.srsp-talk-arrow { flex: 0 0 auto; }

@media (max-width: 699px) {
  .srk-page.srsp-pitch .srsp-get-label { --srpk-lw-h: 24px; }
  .srsp-pitch .srsp-ctas { gap: 12px 16px; }
  .srk-page.srsp-pitch .srk-btn.srsp-talk { height: 44px; min-height: 44px; padding: 0 20px; }
}

/* ---------------------------------------------------------------- 1. Hero */

.srk-page.srsp-pitch .srsp-p-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/*
 * The room: a real photograph of an empty rented room, its door and doorway,
 * soft (shot out of focus behind a phone; the phone and hand are cropped
 * out). It is atmosphere, not a product screen, so it is a small file drawn
 * large, and it fades up just after first paint so the browser does not
 * count it as the largest paint: the phone's Compare screen is the LCP image
 * (a short opacity fade, kept under reduced motion; the push is not). From
 * 1000px it bleeds off the right edge and fades into the scene's ground on
 * the left; under 1000px it fills the stop behind a navy scrim.
 *
 * MEASURED, SHA-90, 26 Oct 2026. Rohan reported colour bleeding out of the
 * phone's corners and the phone not reading like Digital Me's. SHA-88 fixed a
 * real corner clip leak but proved it rendered black on black here, so the
 * symptom was still unexplained. It is this layer, and it is not a leak: it is
 * the ground the phone is cut out against.
 *
 * Luminance of the page 4px outside the phone's silhouette, left edge / top
 * left / right edge / bottom right, as the page ships:
 *
 *   1440x900   124 / 131 /  61 / 15   range 115
 *   1920x1080  104 / 111 /  53 / 37   range  74
 *   390x844    124 / 105 /  44 / 20   range 104
 *
 * With this layer display:none, the same eight points sit between L18 and L28,
 * one flat navy, range 6. So the photograph is the whole of it. Attribution at
 * 1440, left edge: ::after off moves L124 to L124 (it is a top and foot scrim
 * and contributes nothing at the phone's waist); .phone-hero's drop-shadow off
 * moves L124 to L174, so the shadow DARKENS the surround by 50 and is already
 * working to separate the phone, not making a halo; the layer off moves L124
 * to L21. The photograph's brightest region, the out of focus doorway, lands
 * directly behind and to the left of the phone, which puts an L130 ground
 * against a black bezel on one side and an L15 ground on the other. That edge
 * contrast is what reads as light leaking around the corners, and Digital Me
 * has no equivalent layer, which is the other half of the report.
 *
 * Captures and the measuring scripts:
 * ~/.paperclip/local-notes/shareprotect-hero-room-glow/
 *
 * LANDED: toned, Rohan's call of 26 Oct 2026 over off and as is. The lever is
 * brightness on this layer, 0.8 to 0.42 here and 0.86 to 0.45 on the --ph
 * stop, because it is the only one of the three candidates that is a single
 * number and holds at both breakpoints: the mask is none under 1000px, so
 * pushing its start does nothing at 390, and the ::after ramp differs between
 * the two stops, so raising it is two edits and tints rather than separates.
 * Toned measures 65 / 70 / 32 / 10, range 59 at 1440, and 65 / 58 / 24 / 16,
 * range 49 at 390. Do not raise it back without re-measuring: at 0.8 the
 * ground beside the phone is brighter than the bezel and the hero inverts.
 */
.srsp-p-room {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%);
  mask-image: linear-gradient(to right, transparent 0%, #000 42%);
}

.srsp-p-room::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/products/shareprotect/photos/hero-room.webp") 50% 58% / cover no-repeat;
  filter: brightness(0.42) saturate(0.85);
  transform-origin: 70% 50%;
}

.srsp-p-room { animation: srsp-p-fade 600ms ease 150ms both; }

@media (max-width: 999px) {
  .srsp-p-room::before { background-image: url("../img/products/shareprotect/photos/hero-room-m.webp"); }
}

.srsp-p-room::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 24, 51, 0.35) 0%, rgba(8, 24, 51, 0) 30%, rgba(8, 24, 51, 0) 70%, rgba(8, 24, 51, 0.55) 100%);
}

.srsp-p-herogrid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-rows: auto auto auto;
  column-gap: clamp(32px, 4vw, 72px);
  align-content: center;
  height: var(--srpk-avail);
}

.srsp-p-herohead { grid-column: 1; grid-row: 1; }
.srk-page.srsp-pitch .srsp-p-heroline { grid-column: 1; grid-row: 2; margin: clamp(16px, 2.4vh, 26px) 0 0; max-width: 34ch; }
.srsp-p-heroctas { grid-column: 1; grid-row: 3; margin-top: clamp(22px, 3.4vh, 38px); }

.srk-page.srsp-pitch .srsp-p-hero .srsp-new { margin: 0 0 clamp(12px, 2vh, 20px); }
.srk-page.srsp-pitch .srsp-p-hero .srsp-new .srpk-lw { --srpk-lw-h: 26px; }

/*
 * The header's clearance (FIX-P1). The hero runs up UNDER the sticky header by
 * the header's own height and pads its content down by the same, so the
 * eyebrow clears the header wherever the hero sits: at the top of the page
 * below the launch bar, with the bar dismissed or absent, or scrolled to its
 * own top (an anchor, the snap, a reviewer's scroll), where it used to sit
 * half under the header at 390, 768 and 1440. The content keeps the same
 * room (--srpk-avail), so the stop does not grow; the header is opaque and
 * covers only the hero's ground. Its snap lands it at its own top, the header
 * over that padding, which is where the page already rested.
 */
.srk-page.srpk-root.srk-flow > .srk-scene.srsp-p-hero {
  margin-top: calc(-1 * var(--srpk-header));
  padding-top: calc(var(--srpk-top) + var(--srpk-header));
  min-height: var(--vph, 100dvh);
  scroll-margin-top: 0;
}

/* The headline carries the weight: large, heavy, tight. */
.srk-page.srpk-root.srsp-pitch .srsp-p-hero h1 {
  margin: 0;
  font-size: clamp(48px, 5.5vw, 92px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.03em;
  max-width: 11ch;
  text-wrap: balance;
}

/* The phone, set hard to the right in front of the room, a little under the scene's height. */
.srsp-p-herophone {
  grid-column: 2;
  grid-row: 1 / span 3;
  justify-self: end;
  align-self: center;
  margin-right: clamp(0px, 2vw, 40px);
}

.srk-page.srsp-pitch .srsp-p-herophone > .phone-hero {
  --phone-width: calc(min(var(--srpk-avail) * 0.9, 860px) * var(--srsp-dm-wh));
}

/* The compare's slow reveal in the hero (poster still only): the move-out set with Move-out still to add lies over the Compare screen and wipes away left to right, like the slider. At rest (and under reduced motion) it is wiped away. */
.srk-page.srsp-pitch .phone-hero > .phone-image.srsp-p-before {
  clip-path: inset(0 0 0 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .srk-page.srsp-pitch .phone-hero > .phone-image.srsp-p-before {
    animation: srsp-p-wipe 1800ms cubic-bezier(0.65, 0, 0.35, 1) 1100ms both;
  }

  .srsp-p-room::before { animation: srsp-p-push 14s cubic-bezier(0.2, 0.6, 0.2, 1) both; }

  .srsp-p-herophone { animation: srsp-p-slide 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }

  .srsp-p-herohead,
  .srk-page.srsp-pitch .srsp-p-heroline,
  .srsp-p-heroctas { animation: srsp-p-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }

  .srk-page.srsp-pitch .srsp-p-heroline { animation-delay: 120ms; }
  .srsp-p-heroctas { animation-delay: 220ms; }
}

@keyframes srsp-p-wipe {
  from { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(0 0 0 100%); }
}

@keyframes srsp-p-push {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

/* Transform only: the phone's screen is the LCP image, so it is never transparent. */
@keyframes srsp-p-slide {
  from { transform: translateX(56px); }
  to { transform: none; }
}

/* The room fades up after the phone has painted, so it is never counted as the largest paint. */
@keyframes srsp-p-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes srsp-p-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/*
 * Under 1000px: the room fills the stop behind a scrim, the words on top,
 * then the line beside the phone (the phone hard right), then the buttons.
 * One stop at 390x844 with the phone whole.
 */
@media (max-width: 999px) {
  .srsp-p-room {
    width: 100%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .srsp-p-room::after {
    background: linear-gradient(180deg, rgba(8, 24, 51, 0.92) 0%, rgba(8, 24, 51, 0.72) 34%, rgba(8, 24, 51, 0.5) 60%, rgba(8, 24, 51, 0.82) 100%);
  }

  .srsp-p-herogrid {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: 16px;
    row-gap: clamp(14px, 2vh, 22px);
    align-content: stretch;
  }

  .srsp-p-herohead { grid-column: 1 / -1; grid-row: 1; }
  .srk-page.srsp-pitch .srsp-p-heroline { grid-column: 1; grid-row: 2; margin: 0; align-self: center; max-width: none; }
  .srsp-p-heroctas { grid-column: 1 / -1; grid-row: 3; margin-top: 0; }

  .srsp-p-herophone {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    align-self: stretch;
    container-type: size;
    width: calc(var(--srpk-avail) * 0.6 * var(--srsp-dm-wh));
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .srk-page.srsp-pitch .srsp-p-herophone > .phone-hero {
    --phone-width: min(100cqw, calc(100cqh * var(--srsp-dm-wh)));
  }

  .srk-page.srpk-root.srsp-pitch .srsp-p-hero h1 { font-size: clamp(34px, 7vw, 56px); max-width: none; }
}

/*
 * Under 700px (FIX-P1, the 390 rule): the first stop is the words, full
 * width: eyebrow, lockup, headline, line, then Get ShareRing Me and Talk to
 * us. The phone leaves the hero for a whole stop of its own (#c-heroph, next),
 * in front of the room, where the photograph is let through: behind the words
 * it stays under the scrim, for contrast.
 */
@media (max-width: 699px) {
  .srsp-p-herogrid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: 0;
    align-content: center;
  }

  .srk-page.srsp-pitch .srsp-p-heroline { grid-column: 1; margin: 18px 0 0; align-self: start; }
  .srsp-p-heroctas { margin-top: 28px; }
  .srsp-p-herophone--in { display: none; }

  .srk-page.srsp-pitch .srsp-p-hero .srsp-new { margin-bottom: 10px; }
  .srk-page.srsp-pitch .srsp-p-hero .srsp-new .srpk-lw { --srpk-lw-h: 22px; }
  .srk-page.srsp-pitch .srsp-p-hero .srpk-lockup--hero { height: 36px; margin-bottom: 14px; }
  .srk-page.srpk-root.srsp-pitch .srsp-p-hero h1 { font-size: clamp(36px, 11.4vw, 46px); line-height: 1; }
  .srk-page.srpk-root.srsp-pitch .srsp-p-heroline { font-size: 18px; line-height: 1.45; }
}

/* Under 700px the headline is the first stop's largest paint (the phone has its own stop), so it rises without fading: drawn at once, it is never held back from the LCP. */
@media (max-width: 699px) and (prefers-reduced-motion: no-preference) {
  .srsp-p-herohead { animation-name: srsp-p-lift; }
}

@keyframes srsp-p-lift {
  from { transform: translateY(18px); }
  to { transform: none; }
}

/* ---------------------------------------------------------------- 1b. The hero's phone, its own stop under 700px */

.srk-page.srsp-pitch .srsp-p-heroph {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.srsp-p-phgrid {
  height: var(--srpk-avail);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* The stop's name: the seal's caption, or the compare's when the hero slot is empty (srsp_hero_is_seal()). */
.srk-page.srpk-root.srsp-pitch .srsp-p-phcap {
  flex: 0 0 auto;
  margin: 0;
  max-width: 30ch;
  text-align: center;
  text-wrap: balance;
  color: var(--srh-ink, #fff);
  text-shadow: 0 1px 12px rgba(8, 24, 51, 0.65);
}

/*
 * Under 700px the compare stop drops its caption, because #c-heroph says it
 * just above. On .srsp-herocut (the hero phone plays the seal, so #c-heroph
 * names the seal instead) the compare is named nowhere else, so the stop keeps
 * it. The two stops are no longer neighbours, but the line would still be said
 * twice on one page and the reason has not changed.
 */
@media (max-width: 699px) {
  .srk-page.srpk-root.srsp-pitch:not(.srsp-herocut) .srsp-p-proof .srsp-p-cap { display: none; }
}

.srsp-p-herophone.srsp-p-herophone--ph {
  flex: 1 1 0;
  min-height: 0;
  margin: 0;
  width: 100%;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: none;
}

.srk-page.srsp-pitch .srsp-p-herophone--ph > .phone-hero {
  --phone-width: min(100cqw, calc(100cqh * var(--srsp-dm-wh)));
}

/* The room, let through: a light scrim, darker only at the top and the foot where the page's chrome sits.
   Toned to 0.45 with the hero's 0.42 (SHA-90, Rohan's call of 26 Oct 2026), keeping the step up this stop
   has always had over the hero. This is the stop that draws the phone under 700px, so it is what the 390
   numbers in the block at the top of this file were measured on. */
.srsp-p-room.srsp-p-room--ph::before { filter: brightness(0.45) saturate(0.9); }

/* The scrim is this stop's own ground (data-bg #0A1B3C, SHA-69), not the hero's, so the masked edge of the photograph melts into the page instead of banding against it. */
.srsp-p-room.srsp-p-room--ph::after {
  background: linear-gradient(180deg, rgba(10, 27, 60, 0.62) 0%, rgba(10, 27, 60, 0.18) 26%, rgba(10, 27, 60, 0.12) 62%, rgba(10, 27, 60, 0.7) 100%);
}

/* Its compare reveal plays when the stop arrives, not at page load off screen. */
.srk-page.srsp-pitch .srsp-p-herophone--ph .phone-hero > .phone-image.srsp-p-before { animation: none; }

@media (prefers-reduced-motion: no-preference) {
  .srk-page.srsp-pitch .srsp-p-herophone--ph.is-in .phone-hero > .phone-image.srsp-p-before {
    animation: srsp-p-wipe 1800ms cubic-bezier(0.65, 0, 0.35, 1) 600ms both;
  }
}

/* Every eyebrow balances its lines, so no word is ever left alone (FIX-P1: "OUT." at 1920). */
.srk-page.srsp-pitch .srk-eyebrow { text-wrap: balance; }

/* ---------------------------------------------------------------- 2. The compare, big */

/*
 * The only composition on the page that centres a phone: the phone big in the
 * middle, the heading leaning in from the left, the caption from the right.
 * These rules stood for a week, were deleted for four hours on 26 Oct 2026
 * when the stop was retired, and are restored unchanged. The scene itself is
 * section 4 of the template now rather than section 2, because the compare is
 * the move-out verdict and belongs after the claim; the composition did not
 * have to move with it, and this file is in composition order, not page order,
 * for this one block. The heading it uses has no eyebrow above it any more, so
 * nothing here draws one.
 */
.srsp-p-proofgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(28px, 4vw, 64px);
  height: var(--srpk-avail);
}

.srsp-p-proofhead { grid-column: 1; text-align: right; justify-self: end; }
.srk-page.srsp-pitch .srsp-p-proofhead h2 { margin-left: auto; max-width: 11ch; font-size: clamp(36px, 3.8vw, 60px); line-height: 1.04; text-wrap: balance; }

.srk-page .srsp-p-proofvis { display: contents; margin: 0; }
.srsp-p-proofphone { grid-column: 2; }
.srk-page.srsp-pitch .srsp-p-proofphone > .phone-hero { --phone-width: calc(min(var(--srpk-avail), 920px) * var(--srsp-dm-wh)); }
.srk-page.srpk-root.srsp-pitch .srsp-p-cap { grid-column: 3; margin: 0; max-width: 18ch; text-wrap: balance; }

@media (max-width: 999px) {
  .srsp-p-proofgrid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    row-gap: clamp(12px, 2vh, 20px);
    justify-items: center;
  }
  .srsp-p-proofhead { grid-column: 1; text-align: center; justify-self: center; }
  .srk-page.srsp-pitch .srsp-p-proofhead h2 { margin: 0 auto; max-width: 20ch; font-size: clamp(26px, 5vw, 40px); }
  .srsp-p-proofphone { grid-column: 1; grid-row: 2; align-self: stretch; container-type: size; width: 100%; display: flex; align-items: center; justify-content: center; min-height: 0; }
  .srk-page.srsp-pitch .srsp-p-proofphone > .phone-hero { --phone-width: min(100cqw, calc(100cqh * var(--srsp-dm-wh))); }
  .srk-page.srpk-root.srsp-pitch .srsp-p-cap { grid-column: 1; grid-row: 3; text-align: center; max-width: none; }
}

/*
 * 2b. THE COMPARE CARD: the compare free of the phone, at 1000px and up.
 *
 * SHA-89, 26 Oct 2026. The stop above is called "the compare, big" and its
 * phone IS the biggest on the page, but the slider card lives inside that
 * phone, so a desktop reader sees 275 x 206 at 1440 x 900 and 345 x 259 at
 * 1920 x 1080: 19.1% and 18.0% of the viewport's width, on the one stop whose
 * whole job is the slider. At 390 the same card is 53.8% and reads, which is
 * why everything here is behind min-width and the phone keeps the small
 * screens. Measured again with the card in: 52.6% and 50.6%, so all three
 * widths now give the slider about the same share of the screen.
 *
 * THIS WHOLE BLOCK IS THE TREATMENT. Delete it and the stop is the phone again
 * at every width, with nothing else to undo.
 *
 * .srsp-p-proof--card IS A FILE DROP, not a flag. The template adds it only
 * when assets/video/shareprotect/compare-card.* are on disk, so with the clip
 * missing the stop is the phone at every width instead of an empty rectangle
 * where the card should be. Every video slot on this page behaves that way.
 *
 * THE CROP IS NOT HERE, AND IT WAS. The first build of this cropped the whole
 * 1140 x 2478 frame with a window and overflow:hidden. It rendered correctly
 * and never played: scene-flow.js starts a .srk-scene-video at
 * IntersectionObserver threshold 0.35, and a video element 74% hidden by its
 * own window tops out at a ratio of 0.256, so the observer never fired and the
 * stop showed a still card on desktop with every gate green. The crop is a
 * file now (bin/compose-compare-card.sh), the element is whole, and the only
 * number left here is the corner.
 */
.srsp-p-proofcard { display: none; }

/*
 * The card's own corner arc, so the clip's square cut corners are rounded back
 * to the shape the app draws. A percentage PER AXIS, because one percentage on
 * a 982 x 736 box gives an ellipse; this pair stays circular at every rendered
 * size, which is the same reason dm-phone.css carries a pair (SHA-88).
 * bin/compose-compare-card.sh measures the arc in the clip and fails when
 * these two stop matching it.
 */
/*
 * UNDOING scene-kit, NOT STYLING, and the first three lines are the whole of
 * it. scene-kit.css draws every .srk-scene-video as a full bleed layer
 * (position: absolute, inset: 0, object-fit: cover) over a navy ground,
 * because that is what it is everywhere else on the site. Here the clip IS the
 * picture and sizes its own box, so it has to come back into the flow first.
 * Left absolute it fills the initial containing block and lands at the top
 * left of the page, over the heading, which is what it did. industry.css
 * carries the same note for the same reason.
 */
.srsp-p-cardmedia {
  --srsp-card-rx: 4.583%;
  --srsp-card-ry: 6.114%;
  position: static;
  inset: auto;
  background: none;
  display: block;
  max-width: 100cqw;
  max-height: 100cqh;
  width: auto;
  height: auto;
  border-radius: var(--srsp-card-rx) / var(--srsp-card-ry);
}

@media (min-width: 1000px) {
  /* Three rows, not three columns: a landscape card wants the inner width, so the heading goes over it and the caption under it. */
  .srsp-p-proof--card .srsp-p-proofgrid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    row-gap: clamp(14px, 2.4vh, 28px);
    justify-items: center;
  }

  .srsp-p-proof--card .srsp-p-proofhead { grid-column: 1; grid-row: 1; text-align: center; justify-self: center; }
  .srk-page.srsp-pitch .srsp-p-proof--card .srsp-p-proofhead h2 { margin: 0 auto; max-width: 24ch; }

  .srsp-p-proof--card .srsp-p-proofphone { display: none; }

  /* The box the card measures itself against: the grid's middle row, at the full inner width. */
  .srsp-p-proof--card .srsp-p-proofcard {
    display: flex;
    grid-column: 1;
    grid-row: 2;
    align-self: stretch;
    width: 100%;
    min-height: 0;
    container-type: size;
    align-items: center;
    justify-content: center;
  }

  .srk-page.srpk-root.srsp-pitch .srsp-p-proof--card .srsp-p-cap { grid-column: 1; grid-row: 3; text-align: center; max-width: none; }
}

/* ---------------------------------------------------------------- 3. How it works: the phone plays the steps */

.srsp-p-howgrid {
  display: grid;
  grid-template-columns: auto minmax(0, 520px);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 96px);
  justify-content: center;
  align-content: center;
  height: var(--srpk-avail);
}

.srsp-p-howhead { grid-column: 2; grid-row: 1; align-self: end; }
.srk-page.srsp-pitch .srsp-p-howhead h2 { margin-bottom: 0; max-width: 16ch; }

.srsp-p-play { display: contents; }
/*
 * The 12% / 5.5% below shapes a keyboard focus ring and nothing else: this
 * element has no overflow and clips nothing. It is the WRONG number, kept on
 * purpose (SHA-88, 26 Oct 2026). It is iphone-frame-chrome.svg's APERTURE
 * radius (48 of 402) where the phone's SILHOUETTE radius is 54, the mix-up
 * that made dm-phone.css leak screen colour past the painted body on every
 * corner arc. dm-phone.css now clips at the silhouette and carries the
 * workings. Making the ring trace the phone's real corner is a look decision
 * and Rohan's, so it stayed; when he says so it is
 * `calc(var(--phone-width) * 0.13433)`.
 */
.srsp-p-playphone:focus-visible { outline: 3px solid var(--srk-accent-live, #7fb2ff); outline-offset: 8px; border-radius: 12% / 5.5%; }

.srsp-p-playphone { grid-column: 1; grid-row: 1 / span 2; align-self: center; cursor: pointer; }
.srk-page.srsp-pitch .srsp-p-playphone > .phone-hero { --phone-width: calc(min(var(--srpk-avail), 920px) * var(--srsp-dm-wh)); }

/*
 * The screens crossfade (this page's stepping, not the phone's own rules). Any
 * state, not img.srsp-state: #c-moveout's step 4 is a <video> and it has to
 * come and go the same way as the stills either side of it (SHA-91).
 */
.srk-page.srsp-pitch .srsp-p-playphone .phone-hero > .srsp-state { transition: opacity 450ms ease; }

.srsp-p-now { display: none; }

.srk-page.srsp-pitch .srsp-p-steps {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  list-style: none;
  margin: clamp(18px, 3vh, 30px) 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.srk-page.srsp-pitch .srsp-p-steps li {
  position: relative;
  margin: 0;
  padding-left: 18px;
}

/* The tick: a thin rule at each step's left edge; the step on the phone fills it while it plays. */
.srsp-p-tick {
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: rgba(234, 240, 255, 0.16);
  overflow: hidden;
}

.srsp-p-tick i {
  position: absolute;
  inset: 0;
  background: var(--srk-accent-live, #7fb2ff);
  transform: scaleY(0);
  transform-origin: top;
}

.srsp-p-steps li.is-done .srsp-p-tick i { transform: none; }
.srsp-p-steps li.is-on .srsp-p-tick i { transform: none; }

.srsp-p-play.is-auto .srsp-p-steps li.is-on .srsp-p-tick i {
  animation: srsp-p-tick var(--srsp-step-ms, 2500ms) linear both;
}

.srsp-p-play.is-paused .srsp-p-steps li.is-on .srsp-p-tick i { animation-play-state: paused; }

@keyframes srsp-p-tick {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.srk-page.srsp-pitch .srsp-p-stepbtn {
  all: unset;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 6px 0;
  cursor: pointer;
  color: var(--srh-ink-soft, #a9b8d6);
  font-size: 20px;
  line-height: 1.35;
}

.srsp-p-num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--srh-ink-soft, #a9b8d6);
  text-align: right;
}

.srsp-p-stepname { font-weight: 650; }

.srsp-p-stepline {
  grid-column: 2;
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 350ms ease, opacity 350ms ease;
  color: var(--srh-ink, #dfe7f7);
}

.srsp-p-steps li.is-on .srsp-p-stepbtn { color: var(--srh-pale, #fff); }
.srsp-p-steps li.is-on .srsp-p-num { color: var(--srk-accent-live, #7fb2ff); }
.srsp-p-steps li.is-on .srsp-p-stepline { max-height: 3.2em; opacity: 1; }

.srk-page.srsp-pitch .srsp-p-stepbtn:focus-visible { outline: 2px solid var(--srk-accent-live, #7fb2ff); outline-offset: 2px; }

/* Reduced motion: a still row of the key screens instead of the player. */
.srsp-p-still { display: none; }

@media (prefers-reduced-motion: reduce) {
  .srsp-p-play { display: none; }
  .srsp-p-howgrid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); justify-items: center; text-align: center; row-gap: clamp(18px, 3vh, 30px); }
  .srsp-p-howhead { grid-column: 1; }
  .srk-page.srsp-pitch .srsp-p-howhead h2 { margin-inline: auto; max-width: 22ch; }
  .srk-page.srsp-pitch .srsp-p-still {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: center;
    gap: clamp(16px, 3vw, 48px);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .srk-page.srsp-pitch .srsp-p-still li { margin: 0; display: grid; justify-items: center; gap: 12px; max-width: 26ch; }
  .srk-page.srsp-pitch .srsp-p-stillphone > .phone-hero { --phone-width: calc(min(var(--srpk-avail) - 220px, 560px) * var(--srsp-dm-wh)); }
  .srk-page.srsp-pitch .srsp-p-still p { margin: 0; font-size: 17px; line-height: 1.35; color: var(--srh-ink, #dfe7f7); }
  .srk-page.srsp-pitch .srsp-p-still strong { color: var(--srh-pale, #fff); }
  .srsp-p-still .srsp-p-num { color: var(--srk-accent-live, #7fb2ff); }
  .srsp-p-stillline { display: block; }
}

/* 700 to 999px: the phone and the steps side by side, a size down. */
@media (max-width: 999px) {
  .srsp-p-howgrid { grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; }
  .srk-page.srsp-pitch .srsp-p-stepbtn { font-size: 18px; }
  .srk-page.srsp-pitch .srsp-p-playphone > .phone-hero { --phone-width: calc(min(var(--srpk-avail), 640px) * 0.9 * var(--srsp-dm-wh)); }
}

/* Under 700px: heading, the phone, then the step it is on with a row of nine ticks under it. */
@media (max-width: 699px) {
  .srsp-p-howgrid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    row-gap: 12px;
    text-align: center;
  }
  .srsp-p-howhead { grid-column: 1; grid-row: 1; align-self: start; }
  .srk-page.srsp-pitch .srsp-p-howhead .srk-eyebrow { display: block; }
  .srk-page.srsp-pitch .srsp-p-howhead h2 { margin: 0 auto; font-size: 24px; max-width: 20ch; }
  .srsp-p-playphone { grid-column: 1; grid-row: 2; align-self: stretch; container-type: size; display: flex; align-items: center; justify-content: center; min-height: 0; }
  .srk-page.srsp-pitch .srsp-p-playphone > .phone-hero { --phone-width: min(100cqw, calc(100cqh * var(--srsp-dm-wh))); }

  .srk-page.srsp-pitch .srsp-p-now {
    grid-column: 1;
    grid-row: 3;
    display: block;
    margin: 0 auto;
    max-width: 34ch;
    min-height: 2.8em;
    font-size: 17px;
    line-height: 1.4;
    color: var(--srh-ink, #dfe7f7);
  }
  .srsp-p-now strong { color: var(--srh-pale, #fff); }
  .srk-page.srsp-pitch .srsp-p-now .srsp-p-stepline { display: block; max-height: none; opacity: 1; transition: none; }
  .srsp-p-now .srsp-p-num { color: var(--srk-accent-live, #7fb2ff); }

  .srk-page.srsp-pitch .srsp-p-steps {
    grid-column: 1;
    grid-row: 4;
    margin: 0 auto;
    width: min(100%, 300px);
    display: flex;
    gap: 6px;
  }
  /* The ticks only (the phone takes the taps and the keys; the step it is on reads above). */
  .srk-page.srsp-pitch .srsp-p-steps li { flex: 1 1 0; padding: 0; height: 12px; }
  .srk-page.srsp-pitch .srsp-p-stepbtn { display: none; }
  .srsp-p-tick { top: 4px; bottom: auto; left: 0; right: 0; width: auto; height: 4px; pointer-events: none; }
  .srsp-p-tick i { transform: scaleX(0); transform-origin: left; }
  .srsp-p-play.is-auto .srsp-p-steps li.is-on .srsp-p-tick i { animation-name: srsp-p-tickx; }

  .srk-page.srsp-pitch .srsp-p-still { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; }
  .srk-page.srsp-pitch .srsp-p-still li:nth-child(3) { display: none; }
  .srsp-p-stillphone { width: 100%; container-type: inline-size; display: flex; justify-content: center; }
  .srk-page.srsp-pitch .srsp-p-stillphone > .phone-hero { --phone-width: min(100cqw, calc((var(--srpk-avail) - 230px) * var(--srsp-dm-wh))); }
  .srk-page.srsp-pitch .srsp-p-still p { font-size: 15px; }
  .srsp-p-stillline { display: none !important; }
}

@keyframes srsp-p-tickx {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ---------------------------------------------------------------- 4. Moving out: section 3's player again, with a lede under the heading */

/*
 * The scene borrows .srsp-p-howgrid and .srsp-p-howhead whole, so every rule
 * above holds for it: the phone, the step list, the ticks, the reduced motion
 * still row and all three breakpoints. The only thing #c-how does not have is
 * a lede under the heading, so that is the only thing written here.
 *
 * It also had a closing line, .srsp-p-moveoutclose, for the four hours the
 * compare stop was retired on 26 Oct 2026. That line is the compare stop's
 * heading again (srsp_copy() proof_h), so its rules are gone rather than left
 * for a class no markup prints.
 */
.srk-page.srsp-pitch .srsp-p-moveoutlede { margin: 14px 0 0; max-width: 40ch; }

/* The head centres under reduced motion and under 700px, so the lede does too. */
@media (prefers-reduced-motion: reduce) {
  .srk-page.srsp-pitch .srsp-p-moveoutlede { margin-inline: auto; }
}

@media (max-width: 699px) {
  .srk-page.srsp-pitch .srsp-p-moveoutlede { margin: 8px auto 0; max-width: 32ch; font-size: 16px; }
}

/* ---------------------------------------------------------------- 5. The handoff: section 6's grid, with the report's own page in the phone */

/*
 * SHA-81. The scene borrows .srsp-p-checkgrid, .srsp-p-checkcopy and
 * .srsp-p-checkvis whole (section 6, written below it: this block overrides
 * nothing there, so the two sit in page order and not in cascade order), the
 * way #c-moveout borrows #c-how's grid. The phone is therefore the same size
 * and on the same side as #c-check's, which is the point: sending the proof
 * and checking it are two steps of one journey and neither outranks the other.
 *
 * The only thing #c-check does not have is an eyebrow over the heading, so
 * that is the only thing written here. It names the beat, as #c-how's and
 * #c-moveout's do, which is what makes the run of scenes read as a sequence.
 */
.srk-page.srsp-pitch .srsp-p-sendcopy .srk-eyebrow { display: block; margin-bottom: 0.7em; }

/* ---------------------------------------------------------------- 6. Anyone can check */

.srsp-p-checkgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  column-gap: clamp(32px, 5vw, 80px);
  align-items: center;
  height: var(--srpk-avail);
}

.srsp-p-checkcopy { grid-column: 2; grid-row: 1; }
.srsp-p-checkvis { grid-column: 1; grid-row: 1; height: var(--srpk-avail); }

/*
 * The check visual is the DigitalMe phone, like every other visual on this page (S9), not a
 * browser frame (Rohan, 25 Oct 2026). .srpk-fit already makes the cell a size container that
 * centres its child, so the phone sizes itself off the cell by height, capped so it does not run
 * away on a tall desktop, and by width so it never overflows the narrower grid column. The 920px
 * cap was the retired compare stop's, kept when that scene went so this one did not change size.
 */
.srk-page.srsp-pitch .srsp-p-checkvis > .phone-hero {
  --phone-width: min(100cqw, calc(min(100cqh, 920px) * var(--srsp-dm-wh)));
}

@media (max-width: 999px) {
  .srsp-p-checkgrid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); row-gap: clamp(14px, 2.4vh, 24px); align-items: stretch; }
  .srsp-p-checkcopy { grid-column: 1; grid-row: 1; text-align: center; }
  .srk-page.srsp-pitch .srsp-p-checkcopy .srk-lede { margin-inline: auto; }
  .srsp-p-checkvis { grid-column: 1; grid-row: 2; height: 100%; min-height: 0; }
  /* Under 1000px the phone takes the whole cell, as the player's does. */
  .srk-page.srsp-pitch .srsp-p-checkvis > .phone-hero {
    --phone-width: min(100cqw, calc(100cqh * var(--srsp-dm-wh)));
  }
}

/* ---------------------------------------------------------------- 7. A template for the job you're doing (SHA-97) */

/*
 * The scene BORROWS section 6's composition whole, the way #c-send does
 * (section 5): .srsp-p-checkgrid, .srsp-p-checkvis and .srsp-p-checkcopy are
 * written once, above, so this phone is the same size and on the same side as
 * #c-check's and no second copy of its sizing exists. Everything in this
 * section is a difference from that composition, and there are three.
 *
 * 1. THE WORDS' COLUMN IS WIDER. Six rows with a glyph each need more room
 *    than a heading and one sentence, so the ratio turns round: the phone
 *    keeps the height it has at #c-check (both are capped off --srpk-avail),
 *    and the slack that leaves in its column goes to the list.
 *
 * 2. THE TWO COLUMNS HOLD TO 700px, where #c-check's stack at 1000px. A
 *    tablet is wide enough to stand the phone beside six rows and not tall
 *    enough to stand it above them.
 *
 * 3. UNDER 700px THE LIST GOES BELOW THE PHONE, not above it with the
 *    heading, which is what stacking .srsp-p-checkgrid would give. Measured at
 *    390x844: a heading and six rows with their sublines leave the phone about
 *    370px of height, which is 170px of width, which is a screenshot of six
 *    cards with nothing on it a reader can read. So .srsp-p-tplcopy is
 *    display: contents at that width and the heading, the phone and the list
 *    become three rows of one grid, and the sublines go (see the note there).
 */

.srsp-p-tplgrid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }

.srk-page.srsp-pitch .srsp-p-tplcopy h2 { max-width: 20ch; }

.srk-page.srsp-pitch .srsp-p-tpl {
  list-style: none;
  margin: clamp(20px, 3.4vh, 36px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vh, 30px) clamp(24px, 3vw, 44px);
}

/* Beside the phone the list is one column, not two: the column is half the width the scene used to give it. */
.srk-page.srsp-pitch .srsp-p-tplgrid .srsp-p-tpl {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 2.2vh, 24px);
  margin-top: clamp(16px, 2.6vh, 30px);
}

.srk-page.srsp-pitch .srsp-p-tpl li {
  margin: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  line-height: 1.4;
  color: var(--srh-ink, #dfe7f7);
}

.srsp-p-glyph { display: flex; width: 34px; height: 34px; align-items: center; justify-content: center; color: var(--srk-accent-live, #7fb2ff); }
.srsp-p-glyph .srpk-icon { width: 28px; height: 28px; stroke-width: 1.75; }

.srsp-p-tpltext { padding-top: 4px; }
.srk-page.srsp-pitch .srsp-p-tpltext strong { display: block; color: var(--srh-pale, #fff); font-weight: 650; }
.srsp-p-tpltext > span { display: block; }

/*
 * 700 to 999px: the two columns hold, where section 6's stack. Written after
 * that block and at the same specificity, so it overrides by page order.
 */
@media (max-width: 999px) and (min-width: 700px) {
  .srsp-p-tplgrid { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: clamp(24px, 4vw, 48px); align-items: center; }
  .srsp-p-tplgrid > .srsp-p-checkvis { grid-column: 1; grid-row: 1; height: var(--srpk-avail); }
  .srsp-p-tplcopy { grid-column: 2; grid-row: 1; text-align: left; }
  .srk-page.srsp-pitch .srsp-p-tplcopy h2 { font-size: clamp(26px, 3.4vw, 34px); }
  .srk-page.srsp-pitch .srsp-p-tplgrid .srsp-p-checkvis > .phone-hero { --phone-width: min(100cqw, calc(100cqh * var(--srsp-dm-wh))); }
}

/*
 * Under 700px: the heading, then the phone, then the six names in the two
 * columns the sheet itself puts them in.
 *
 * THE SUBLINES ARE HIDDEN HERE and that is the one thing on this scene given
 * up to the width. 390x844 leaves about 740px of --srpk-avail; a heading and
 * six rows carrying their sublines take 340 of it and leave the phone 170px
 * of width, at which the sheet is a grey grid. Names only cost 79px, the
 * phone keeps about 265px of width, which is the size the player's phone gets
 * on the same screen, and the six names still say what the scene is for. The
 * sublines are not lost copy: they are back from 700px up.
 */
@media (max-width: 699px) {
  .srsp-p-tplgrid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 12px; }
  .srsp-p-tplcopy { display: contents; }
  .srsp-p-tplgrid > .srsp-p-checkvis { grid-column: 1; grid-row: 2; height: 100%; min-height: 0; }
  .srk-page.srsp-pitch .srsp-p-tplcopy h2 { grid-column: 1; grid-row: 1; align-self: start; font-size: 24px; text-align: center; max-width: none; }
  .srk-page.srsp-pitch .srsp-p-tplgrid .srsp-p-tpl { grid-column: 1; grid-row: 3; align-self: end; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; text-align: left; }
  .srk-page.srsp-pitch .srsp-p-tplgrid .srsp-p-tpltext > span { display: none; }
  .srk-page.srsp-pitch .srsp-p-tpl li { grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; font-size: 16px; line-height: 1.3; }
  .srsp-p-glyph { width: 28px; height: 28px; }
  .srsp-p-glyph .srpk-icon { width: 22px; height: 22px; }
  .srsp-p-tpltext { padding-top: 2px; }
}

/* ---------------------------------------------------------------- 8. Put it on your own site */

/*
 * The templates took the other column to #c-templates (SHA-97), and what was
 * left was a heading, one sentence and Talk to us: the sparsest stop on the
 * page. Rohan, 27 Oct 2026: "Give it something." The something is three rows
 * saying who does what, under the words and above the button, so the stop is
 * still one centred block and not a two column scene with a hole in it.
 *
 * WHY THE ROWS CARRY NO GLYPH. #c-templates is the stop immediately before
 * this one and it is a heading over a glyph list. A second glyph list one stop
 * later reads as the same slide twice, and the row's own subject is a role,
 * which no 28px mark says better than the word does.
 *
 * The rule that used to divide the two columns went with them. With nothing
 * beside it there is nothing for a line to divide, and a line drawn round text
 * standing on its own is a tile (S2). The rows get air between them instead.
 */
.srsp-p-whogrid {
  display: grid;
  align-content: center;
  justify-items: center;
  height: var(--srpk-avail);
  text-align: center;
}

.srsp-p-whobiz { max-width: 52ch; }
.srk-page.srsp-pitch .srsp-p-whobiz .srk-eyebrow { display: block; }
.srk-page.srsp-pitch .srsp-p-whobiz h2 { margin: 10px 0 0; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; color: var(--srh-pale, #fff); }
.srk-page.srsp-pitch .srsp-p-whobiz p { margin: 14px auto 0; color: var(--srh-ink, #dfe7f7); }
.srk-page.srsp-pitch .srsp-p-whogrid .srsp-talk { margin-top: clamp(20px, 3vh, 30px); }

/*
 * Three across from 1000px: the rows are a band, not a list, so the words above
 * them stay the thing read first. One grid gap in both directions, because S4
 * measures the space between neighbours in a row and three columns of unequal
 * height are still one row.
 */
.srk-page.srsp-pitch .srsp-p-biz {
  list-style: none;
  margin: clamp(22px, 3.6vh, 40px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 38px);
  max-width: 96ch;
  text-align: left;
}

.srk-page.srsp-pitch .srsp-p-biz li { margin: 0; line-height: 1.4; color: var(--srh-ink, #dfe7f7); }
.srk-page.srsp-pitch .srsp-p-biz strong { display: block; color: var(--srh-pale, #fff); font-weight: 650; }
.srk-page.srsp-pitch .srsp-p-biz span { display: block; margin-top: 4px; }

/*
 * 700 to 999px: one column. Three columns at tablet width are about 210px each,
 * which breaks a two line sentence into four, so the band becomes a list and
 * sits at the width of the sentence above it.
 */
@media (max-width: 999px) {
  .srk-page.srsp-pitch .srsp-p-biz {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(12px, 2vh, 20px);
    max-width: 52ch;
  }
}

/* The eyebrow was hidden here while the stop also carried six templates. It is not crowded now, and it is the line that says who the block is talking to. */
@media (max-width: 699px) {
  .srk-page.srsp-pitch .srsp-p-whobiz h2 { margin-top: 8px; font-size: 26px; }
  .srk-page.srsp-pitch .srsp-p-whobiz p { margin-top: 10px; font-size: 16px; line-height: 1.4; }
  .srk-page.srsp-pitch .srsp-p-whogrid .srsp-talk { margin-top: 18px; }
  .srk-page.srsp-pitch .srsp-p-biz { margin-top: 16px; font-size: 15px; }
  .srk-page.srsp-pitch .srsp-p-biz span { margin-top: 2px; }
}

/* ---------------------------------------------------------------- 9. What a seal shows, with the FAQ */

.srsp-p-limitsgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 96px);
  align-items: center;
  height: var(--srpk-avail);
}

.srk-page.srsp-pitch .srsp-p-limitrows {
  list-style: none;
  margin: clamp(16px, 2.6vh, 28px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(12px, 2vh, 20px);
}

.srk-page.srsp-pitch .srsp-p-limitrows li {
  margin: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 14px;
  line-height: 1.45;
  color: var(--srh-ink, #dfe7f7);
}

.srk-page.srsp-pitch .srsp-p-limitrows strong { color: var(--srh-pale, #fff); font-weight: 650; }
.srsp-p-limitrows .srsp-yes .srsp-p-glyph { color: #2ce5a7; }
.srsp-p-limitrows .srsp-no .srsp-p-glyph { color: #ff9b9b; }

.srk-page.srsp-pitch .srsp-p-limits .srsp-notice {
  margin: clamp(18px, 3vh, 32px) 0 0;
  padding-top: clamp(14px, 2.4vh, 24px);
  border-top: 1px solid rgba(234, 240, 255, 0.18);
  max-width: none;
  color: var(--srh-ink, #dfe7f7);
}

.srk-page.srsp-pitch .srsp-p-faqh { font-size: clamp(26px, 2.4vw, 36px); margin: 0 0 8px; }

/* Every question a tap target of 44px or more (Gate 4), rules between rows, no box (as pass 1 and /prove/). */
.srk-page.srsp-pitch .srsp-p-faq .srk-faq-item { padding: 2px 4px; }
.srk-page.srsp-pitch .srsp-p-faq .srk-faq-item summary { display: flex; align-items: center; box-sizing: border-box; min-height: 48px; padding-block: 10px; }
.srk-page.srsp-pitch .srsp-p-faq .srk-faq-item summary::after { top: 50%; transform: translateY(-50%); }
.srk-page.srsp-pitch .srsp-p-faq .srk-faq-answer { padding-top: 0; padding-bottom: 10px; }
.srk-page.srsp-pitch .srsp-p-faq .srk-faq-item:last-child { border-bottom: 0; }
.srk-page.srsp-pitch .srsp-p-faq + .srsp-p-faq .srk-faq-item:first-child { border-top: 1px solid rgba(234, 240, 255, 0.14); }

@media (max-width: 999px) {
  .srsp-p-limitsgrid { grid-template-columns: minmax(0, 1fr); }
  .srsp-p-faqinner { display: flex; flex-direction: column; justify-content: center; height: var(--srpk-avail); max-width: 760px; }
  .srk-page.srsp-pitch .srsp-p-faqstop .srsp-p-faq { margin-top: 0; }
}

@media (max-width: 699px) {
  .srk-page.srsp-pitch .srsp-p-limits h2,
  .srk-page.srsp-pitch .srsp-p-faqstop h2 { font-size: 26px; }
  .srk-page.srsp-pitch .srsp-p-limitrows li { grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; }
}

/* ---------------------------------------------------------------- 10. Closer: one centred group */

.srsp-p-closerinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: var(--srpk-avail);
}

.srk-page.srsp-pitch .srsp-p-closer .srpk-lockup--head { margin-inline: auto; }
.srk-page.srpk-root.srsp-pitch .srsp-p-closer h2 { margin: 0 auto; max-width: 16ch; font-size: clamp(34px, 4.6vw, 72px); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.srk-page.srsp-pitch .srsp-p-closer .srk-lede { margin: clamp(14px, 2.4vh, 24px) auto 0; }
.srk-page.srsp-pitch .srsp-p-closer .srsp-ctas { justify-content: center; margin-top: clamp(24px, 4vh, 44px); }
.srk-page.srsp-pitch .srsp-p-closer .srsp-get { justify-items: center; }