/*
 * Prove: the page's own layer.
 *
 * The scene kit supplies scenes, reveals, cards, buttons and the journey, and
 * house-style.css supplies the ground. This file adds only what belongs to this
 * page: the hero measure and the release line.
 *
 * Selectors are scoped under .srk-page for the reason the other product pages
 * are: Elementor's Global Kit prints .elementor-kit-5 h1 and .elementor-kit-5 a
 * AFTER the theme's stylesheets, so anything at equal specificity loses the tie.
 */

.srp-root {
  max-width: none;
  padding: 0;
}

.srp-hero {
  padding-top: clamp(64px, 11vh, 150px);
  padding-bottom: clamp(64px, 9vh, 140px);
}

.srk-page .srp-hero h1 {
  font-size: var(--srk-display-m); /* was display-l. See the shared note in scene-kit.css. */
}

.srp-narrow {
  max-width: 900px;
}

/*
 * The release line. Prove has not shipped, and this is the sentence that says
 * so in the hero, before a reader has scrolled far enough to reach #c-coming.
 * It is deliberately not a .srk-lede: it should read as a status, set apart
 * from the description above it, rather than as a second paragraph of pitch.
 */
.srk-page .srp-status {
  margin-top: clamp(14px, 2.2vh, 22px);
  margin-bottom: 0;
  font-size: var(--srk-body-s, 0.9375rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--srk-accent, #3D8BFF);
  opacity: 0.92;
}

/*
 * The caption under the split scene's copy. The phone beside it is a real
 * capture of Prove, from a PRE-RELEASE build. The page says the feature is
 * coming, so this line stops a genuine screen being read as one you can open
 * today. Quiet, but not decorative.
 */
.srk-page .srp-note {
  margin-top: clamp(16px, 2.4vh, 26px);
  margin-bottom: 0;
  max-width: 46ch;
  font-size: var(--srk-body-s, 0.9375rem);
  line-height: 1.55;
  color: var(--srk-ink-dim, rgba(234, 240, 255, 0.72));
}

.srp-coming {
  padding-bottom: clamp(110px, 16vh, 220px);
}

/*
 * The hero is a split now, copy left and device right, matching ShareRing Me.
 * Its padding comes down to that page's value: the taller figure it inherited
 * was set when the hero was a narrow column with nothing beside it, and with a
 * phone in the scene it pushed the CTAs toward the fold. ShareLedger's hero
 * hit exactly that, where the buttons ended up inside the viewport but below
 * .srk-reveal's trigger, so they never appeared at all.
 */
.srp-hero {
  padding-top: clamp(56px, 9vh, 130px);
  padding-bottom: clamp(48px, 7vh, 110px);
}

@media (min-width: 900px) {
  .srp-hero .srk-stage { margin-top: clamp(0px, 2vh, 28px); }
}

/*
 * HEIGHT BUDGET for the hero device: MOVED, not removed.
 *
 * Rohan: "Prove with phone has distorted in shape." It was not distorted, it
 * was CLIPPED: the phone came out 759px tall against 827px of usable hero, ran
 * to y -28, and 101px of it sat behind the header.
 *
 * The cap that fixed it lived here, so Prove was the only page that had one,
 * and it was also the only page 45px narrower than its neighbours. Rohan,
 * 2026-09-02: "the phone hero is exactly the same size whenever you use it.
 * Right now it is different for Me Modules than it is for Prove."
 *
 * Both halves of that are fixed by promoting the idea instead of dropping it.
 * --srk-phone-width in scene-kit.css now carries the height term for every
 * device on the site, so no hero can clip and no two heroes disagree. The
 * reserve is looser than the 210px used here, which was measured against this
 * hero alone; 90px is what the eight heroes actually need.
 */