/*
 * ShareRing scene kit.
 *
 * The shared vocabulary for narrative product pages, extracted from the two
 * pages that already work: DigitalMe and ShareRing Link. Nothing here knows
 * which product page it is on, which is the whole point. A page stylesheet
 * consumes these and adds only what is genuinely about its own product.
 *
 * Loaded only on templates that opt in, never sitewide. It pairs with
 * house-style.css, which supplies the ground, the glow field and the glyph
 * grid; this file supplies the things that sit on top of them.
 *
 * Precedent notes are explicit throughout, because the point of a shared kit
 * is that a later reader can tell what was inherited and what was invented.
 */

:root {
  /* Type scale, taken from ShareRing Link so the two pages set type the same way. */
  --srk-display-xl: clamp(56px, 9vw, 132px);
  --srk-display-l: clamp(44px, 6.5vw, 96px);
  --srk-display-m: clamp(32px, 4.6vw, 62px);
  --srk-display-s: clamp(26px, 3.2vw, 40px);
  --srk-body-l: clamp(18px, 1.7vw, 23px);
  --srk-body: clamp(16px, 1.1vw, 18px);
  --srk-eyebrow: clamp(12px, 0.9vw, 14px);

  /* Rhythm. */
  --srk-scene-pad: clamp(24px, 4vw, 64px);
  --srk-scene-gap: clamp(80px, 11vh, 180px);
  --srk-measure: 62ch;

  /*
   * HOW BIG A PRODUCT LOGOTYPE IS DRAWN ON A TILE. One number, three rows.
   *
   * Rohan, 2026-09-01: "Make all instances of ShareRing product tiles the same
   * with the rich images we have on some pages." Three separate rows draw one:
   * the home page's suite of four, ShareLedger page's suite of five, and
   * the ShareRing Link card in ShareRing Me's "where it fits" row. Each used to
   * carry its own multiplier, which is precisely how three rows that are meant
   * to match stop matching.
   *
   * This is a MULTIPLIER, not a size. Every actual dimension still comes from
   * the per-product optical registry in tokens.css (--sr-logo-h / -r / -x),
   * because the marks are not the same shape and cannot take the same height:
   * a tall narrow mark and a wide flat wordmark set optically equal look
   * nothing like it measured. This scales that registry as a whole.
   *
   * 1.15 was chosen against the industry cards beside it on /sharering-me/,
   * which are 22px semibold headings. At 0.95 the wordmark's ink measured the
   * same 15px cap height and still read lighter, because brand artwork is drawn
   * at its own weight and a heading is not. The mark has to be a little larger
   * to carry the same weight as the type it sits beside.
   */
  --srk-tile-logo-k: 1.15;

  /* The device. Link's reference phone scale, kept identical so a visitor moving
     between the two pages sees the same object at the same size. */
  /*
   * ONE DEVICE SIZE, EVERYWHERE. Rohan, 2026-09-02: "please make sure 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."
   *
   * Measured at 1440x900 before this: Prove 301px, Me Modules and ShareRing Me
   * 346px, the industry heroes 364px. Three sizes from three mechanisms.
   * Prove carried a bespoke height budget in product-prove.css, written for a
   * real clipping bug where the device ran to y -28 and 101px of it sat behind
   * the header. The industry hero was sized off its own viewport-height cap.
   * Everything else took the width clamp alone and had no height guard at all,
   * which is the same bug Prove had, waiting.
   *
   * So Prove's idea is promoted rather than deleted: the width clamp is the
   * design size, and the second term is the height the hero can actually hold,
   * whichever is smaller. 2.295 is the bezel's own 1744/760. The 90px reserve
   * is the header plus air, and it is deliberately loose: measured across four
   * product and four industry heroes at 900, 800 and 1080 tall, no hero clips,
   * and at 900 the guard does not engage at all, so a full-height desktop gets
   * the design width and a short laptop gets a smaller phone on every page at
   * once instead of on one.
   *
   * Change this line and every device on the site moves together. That is the
   * point of it.
   */
  --srk-phone-width: min(clamp(260px, 24vw, 380px), calc((100svh - 90px) / 2.295));
  --srk-phone-radius: 38px;
  --srk-phone-screen-radius: 26px;

  /* Motion. Link's curves. */
  --srk-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --srk-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------------------------------------------------------------------------
   Page shell
   ------------------------------------------------------------------------ */

/*
 * overflow-x is clip, never hidden. Standing project rule: hidden creates a
 * scroll container and silently kills position:sticky on descendants, which is
 * exactly what this kit depends on.
 */
.srk-page {
  position: relative;
  overflow-x: clip;
  color: var(--srh-ink);
  font-size: var(--srk-body);
  line-height: 1.6;
}

.srk-page .srk-scene h1,
.srk-page .srk-scene h2,
.srk-page .srk-scene h3 {
  /*
   * Headings state their colour rather than inheriting it. The theme's own
   * heading rules beat inheritance on a dark ground, which cost a session once
   * already on the Team page.
   */
  color: var(--srh-pale);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

.srk-page .srk-scene p {
  margin: 0;
  max-width: var(--srk-measure);
}

/* ---------------------------------------------------------------------------
   Scenes
   ------------------------------------------------------------------------ */

.srk-scene {
  position: relative;
  z-index: 1;
  padding: var(--srk-scene-gap) var(--srk-scene-pad);
}

.srk-scene-inner {
  max-width: 1180px;
  margin-inline: auto;
}

/* The two-column scene: copy beside a device. */
.srk-scene-split {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

@media (min-width: 900px) {
  .srk-scene-split {
    grid-template-columns: 1fr minmax(0, var(--srk-phone-width));
  }
  /* Device first on alternate scenes, set per page. */
  .srk-scene-split.is-flipped {
    grid-template-columns: minmax(0, var(--srk-phone-width)) 1fr;
  }
  .srk-scene-split.is-flipped .srk-scene-copy { order: 2; }
  .srk-scene-split.is-flipped .srk-stage { order: 1; }
}

.srk-page .srk-eyebrow {
  display: block;
  font-size: var(--srk-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--srk-accent-live, var(--srh-accent));
  margin-bottom: 1.1em;
}

.srk-page .srk-lede {
  font-size: var(--srk-body-l);
  color: var(--srh-ink);
  margin-top: 1.2em;
}

.srk-page .srk-accent { color: var(--srk-accent-live, var(--srh-accent)); }

/*
 * The inline mark.
 *
 * DigitalMe colours the words inside a paragraph that carry the argument
 * ("What you ask is recorded. What you say is uploaded.") rather than leaving
 * body copy as one flat block. It is the single technique that most separates
 * its prose from a normal marketing page, and it costs nothing but a span.
 *
 * It takes the live accent, so the emphasis travels with the journey. Weight
 * carries it as well as colour, because colour alone is never the only signal.
 */
.srk-page .srk-mark {
  color: var(--srk-accent-live, var(--srh-accent));
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   The device
   ------------------------------------------------------------------------ */

/*
 * Box model note, inherited from Link's round 16: the aspect ratio lives on the
 * screen, not on the bezel. Putting it on the bezel makes the padding part of
 * the ratio and quietly crops the artwork.
 */
.srk-phone {
  position: relative;
  width: 100%;
  max-width: var(--srk-phone-width);
  margin-inline: auto;
  padding: 12px;
  border-radius: var(--srk-phone-radius);
  background: #050d2c;
  border: 1px solid rgba(234, 240, 255, 0.2);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.62);
}

.srk-phone-screen {
  position: relative;
  aspect-ratio: 760 / 1744;
  border-radius: var(--srk-phone-screen-radius);
  overflow: hidden;
  background: linear-gradient(180deg, #0a1a4d 0%, #071238 100%);
}

/*
 * One screen per phone, one phone per scene.
 *
 * An earlier draft used a single phone shared across scenes with the screen
 * swapped by observer. It was dropped: under prefers-reduced-motion, and on
 * narrow viewports where the phone cannot be sticky, every scene after the
 * first is left with no image at all. Link solves the same problem by giving
 * each scene its own phone (shift-phone, scan-phone, user-phone) and that is
 * the precedent followed here. It also means the device works with scripting
 * off, which the swap version could not.
 */
.srk-phone-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * The stage is sticky within its own scene, so the device holds while the copy
 * beside it is read and releases at the scene boundary. Sticky, not fixed.
 */
.srk-stage { position: relative; }

@media (min-width: 900px) {
  .srk-stage.is-sticky {
    position: sticky;
    /* Clear of the site header, expressed in svh so mobile browser chrome
       cannot make the value taller than the visible viewport. Never 100vh,
       standing project rule. */
    top: clamp(90px, 14svh, 160px);
  }
}

/* ---------------------------------------------------------------------------
   Reveal
   ------------------------------------------------------------------------ */

/*
 * The reveal only ever adds. Elements are visible by default and the observer
 * animates them in; it never starts them hidden. With scripting off the page is
 * a normal readable document.
 */
.srk-reveal {
  opacity: 1;
  transform: none;
}

.js .srk-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--srk-ease), transform 700ms var(--srk-ease);
}

.js .srk-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------ */

.srk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 2em;
}

.srk-page .srk-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  font-size: var(--srk-body);
  font-weight: 600;
  text-decoration: none;
  transition: transform 260ms var(--srk-spring), background-color 260ms var(--srk-ease);
}

.srk-page .srk-btn:hover { transform: translateY(-2px); }

.srk-page .srk-btn-primary {
  /* The primary button rides the live accent. Its ink is computed from the
     same value rather than fixed, so the label stays legible whatever hue the
     journey is currently on. */
  background: var(--srk-accent-live, var(--srh-accent));
  color: color-mix(in srgb, var(--srk-accent-live, var(--srh-accent)) 18%, #01120b);
}

.srk-page .srk-btn-secondary {
  background: transparent;
  color: var(--srh-pale);
  border: 1px solid rgba(234, 240, 255, 0.32);
}

.srk-page .srk-btn-secondary:hover { border-color: var(--srk-accent-live, var(--srh-accent)); }

/* ---------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------ */

.srk-grid {
  display: grid;
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(32px, 5vh, 64px);
}

@media (min-width: 700px)  { .srk-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .srk-grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px)  { .srk-grid-2 { grid-template-columns: repeat(2, 1fr); } }

.srk-card {
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: 18px;
  background: rgba(10, 36, 114, 0.42);
  border: 1px solid rgba(77, 138, 255, 0.22);
  backdrop-filter: blur(6px);
}

/*
 * A CARD HEADING IS NOT A SECTION HEADING.
 *
 * This was --srk-display-s, which is the same clamp the section h2 resolves to:
 * at 1440 both landed on 40px, so "Global Support" was set as loudly as "Verify
 * once. Reuse indefinitely." above it, six times over. With everything shouting
 * there is no hierarchy to read, and "Human Uniqueness Verification" took three
 * lines of a card that then had nothing else in it.
 *
 * Sized between the body and the section heading instead, which is what a card
 * heading is. Used by exactly three templates - the ShareRing Me, Me Modules and
 * ShareLedger pages - and all three were checked after the change.
 */
.srk-page .srk-card h3 {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.25;
  margin-bottom: 0.55em;
}

.srk-page .srk-card p { color: var(--srh-ink); }

/* ---------------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------------ */

.srk-faq { margin-top: clamp(32px, 5vh, 64px); }

.srk-faq-item {
  border-top: 1px solid rgba(77, 138, 255, 0.24);
  padding: 20px 4px;
}

.srk-faq-item:last-child { border-bottom: 1px solid rgba(77, 138, 255, 0.24); }

.srk-page .srk-faq-item summary {
  position: relative;
  padding-right: 34px;
  font-size: var(--srk-body-l);
  font-weight: 600;
  color: #FFFFFF; /* Rohan 2026-09-01: FAQ text white. Was --srh-pale (#EDF3FF), a pale blue. */
  cursor: pointer;
  list-style: none;
}

.srk-faq-item summary::-webkit-details-marker { display: none; }

.srk-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -2px;
  font-size: 26px;
  line-height: 1;
  color: var(--srk-accent-live, var(--srh-accent));
}

.srk-faq-item[open] summary::after { content: "\2212"; }

.srk-page .srk-faq-answer {
  padding: 14px 0 4px;
  color: #FFFFFF; /* Rohan 2026-09-01: FAQ answers white too. Was --srh-ink. */
  line-height: 1.7;
}

/* ---------------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------------ */

/*
 * Not optional. Under reduce, the device stops being sticky, every screen
 * resolves to its own scene inline, and nothing drifts, fades or springs.
 * This is the difference between an ambient page and an accessibility problem.
 */
@media (prefers-reduced-motion: reduce) {
  .srk-stage.is-sticky { position: relative; top: auto; }

  .js .srk-reveal,
  .js .srk-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .srk-phone-screen img { transition: none; }
  .srk-page .srk-btn { transition: none; }
  .srk-page .srk-btn:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Page navigation
   ------------------------------------------------------------------------ */

/*
 * THE CHEVRONS AND THE BACK TO TOP ARE IN "Cinema chrome" BELOW, NOT HERE.
 *
 * There were two implementations of this one control and both shipped:
 * .srk-pagenav here, drawn by scene-flow.js, and .srk-chrome.srk-nav below,
 * drawn by scene-kit.js. Every cinema page enqueues both scripts, so every
 * cinema page carried FIVE buttons, with the two down-chevrons twelve pixels
 * apart at the same x, both 48x34, at opacities 0.52 and 0.72. It read as one
 * chevron with a rendering fault and it was two controls.
 *
 * .srk-chrome won because its rules were already the closer match to Digital
 * Me: the split placement, up at the top of the screen and down at the bottom,
 * where these stacked both at the bottom two pixels apart; plus the drop shadow
 * that a dark ground carrying photography needs and a light canvas does not.
 *
 * What crossed over from here is the bob on the down arrow, which .srk-chrome
 * never had and which DigitalMe does. Its keyframes stay in this block because
 * this is where they were declared and moving them would only make the diff
 * harder to read; the rule that uses them is a little further down.
 */

@keyframes srk-chev {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* ---------------------------------------------------------------------------
   The flow: one scene, one screen
   ------------------------------------------------------------------------ */

/*
 * A page opts in with `srk-flow` beside `srk-page` on its <main>, and every
 * scene becomes exactly one screen. This is what makes a page play like
 * ShareRing Link and DigitalMe rather than reading as a long document with
 * headings in it:
 *
 *   ShareRing Link   .srl-pin  { min-height: var(--vph, 100vh)  }
 *   DigitalMe       .chapter  { min-height: var(--vph, 100dvh) }
 *
 * Measured at 1280x900 before About Us adopted it, its six scenes were 965,
 * 804, 695, 469, 416 and 405px against a 900px viewport, so a chevron press
 * landed the reader mid-document with the tail of one section and the head of
 * the next both on screen. There was no page to arrive at.
 *
 * Written here rather than a third time in a page stylesheet. About Us and
 * Pricing each carried their own copy for one build; STARS and Contact would
 * have made four, and four copies of a layout rule is how two pages quietly
 * stop matching.
 *
 * --vph and --srk-header-h come from assets/js/scene-flow.js. --vph is declared
 * in tokens.css as 100dvh, which is the right CSS-only fallback but resizes as
 * a mobile URL bar retracts and re-lays out every scene mid-scroll; the script
 * replaces it with a stable pixel value.
 *
 * min-height, never height. A scene whose content is taller than the screen —
 * a price table at 390px, a grid of product tiles — has to grow rather than
 * clip, and the media query below top-aligns it when it has, so it starts at
 * the top of the screen instead of being centred with its head and foot both
 * cut off. Link does the same at its own breakpoint.
 */
.srk-flow .srk-scene {
  min-height: calc(var(--vph, 100dvh) - var(--srk-header-h, 0px));
  display: flex;
  /*
   * flex-start plus margin:auto on the child, NOT align-items:center.
   *
   * They look equivalent and are not. align-items:center on a flex container
   * whose content is TALLER than it centres the overflow in both directions,
   * so the top of the content is pushed above the container and clipped by the
   * scroll. margin-block:auto centres it while it fits and then simply stops,
   * leaving the content top-aligned and fully reachable when it does not.
   *
   * That is the whole difference on mobile, where a price table or a stack of
   * product tiles is routinely twice the height of the screen.
   */
  align-items: flex-start;
}

/*
 * As a flex item, .srk-scene-inner shrink-wraps to its content and the page
 * silently loses its measure and its left alignment. It needs the width handed
 * back explicitly.
 */
.srk-flow .srk-scene > .srk-scene-inner {
  width: 100%;
  /* Centres while it fits, top-aligns when it does not. See above. */
  margin-block: auto;
}

/*
 * The first scene is the one that has to clear the header.
 *
 * Flowing pages run in cinema mode (inc/cinema.php), where the header is
 * position:absolute and OVERLAYS the top of the page rather than pushing it
 * down. Without this the first scene's top content renders behind it — on About
 * Us the hero's product logotype started at y=52 under a header ending at y=72,
 * and twenty pixels of a wordmark were simply gone.
 *
 * Only the first scene needs it. Every scene below is reached by scrolling, by
 * which point the header has scrolled away with the page.
 *
 * :first-of-type rather than a class, because "the first scene" is what the
 * rule is actually about and a class would be a second thing to keep in sync.
 *
 * GATED ON body.sr-cinema, and that gate is load-bearing. The rule exists to
 * clear a header that OVERLAYS the page, which is only true in cinema mode
 * (inc/cinema.php makes .sr-header position:absolute there). The four product
 * pages flow without being cinema: their header is sticky, which is in flow and
 * already occupies that band, so applying this to them would count the header
 * twice and drop the hero a further 88 to 112 pixels down the screen.
 */
body.sr-cinema .srk-flow .srk-scene:first-of-type {
  padding-top: calc(var(--srk-header-raw, 72px) + clamp(16px, 3vh, 40px));
}

/* ---------------------------------------------------------------------------
   Page to page on a phone
   ------------------------------------------------------------------------ */

/*
 * Rohan, 2026-09-01: "Each page should scroll from page to page on mobile or
 * with the click of the chevron."
 *
 * This is that, and it is CSS rather than an engine.
 *
 * DigitalMe answers the same brief with a touch hijack: it calls
 * preventDefault on every touchmove, owns the scroll outright, and tweens 900ms
 * to a hand-authored beat. It has to. Its chapters are PINNED TRACKS taller
 * than the viewport, so a beat lives at a fraction inside one
 * (offsetTop + (offsetHeight - vh) * 0.15) and no native mechanism can find it.
 *
 * A flow scene is exactly one viewport. offsetHeight - vh is zero, every one of
 * those fractions collapses to the scene's own top, and the browser can do the
 * whole job natively. So it does.
 *
 * scroll-snap-stop: always is the load-bearing declaration. Without it a fast
 * flick sails through several scenes and the page is merely sticky; with it the
 * browser is forbidden to pass a snap point in a single gesture, which is what
 * makes one flick equal one page. That is the behaviour the hijack was written
 * to produce, with none of the risk: nothing here can leave a phone unable to
 * scroll.
 *
 * `pointer: coarse` as well as a width, which is DigitalMe's fix 45b: a narrow
 * window on a desktop is a resized browser, not a phone, and it keeps ordinary
 * scrolling.
 *
 * The targets are [data-nav-stop], which assets/js/scene-flow.js guarantees is
 * the same set the chevron walks. That is the whole reason it marks them: if
 * these rules said .srk-scene instead, then on the pages that group scenes into
 * chapters a swipe and a chevron press would stop in different places.
 */
@media (max-width: 768px) and (pointer: coarse) {
  html {
    scroll-snap-type: y mandatory;
  }

  .srk-flow [data-nav-stop] {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    /*
     * A sticky header covers the top of the scrollport, and a snap lands the
     * beat's top THERE, behind it. This pulls the landing down by the header's
     * real height, and is 0 in cinema mode where the header does not occupy the
     * band. Same number the chevron subtracts, from the same source.
     */
    scroll-margin-top: var(--srk-header-h, 0px);
  }

  /*
   * The footer is a beat, so arriving at it is arriving at a page rather than
   * dangling off the end of the last scene. It is taller than the screen, and
   * an over-tall snap area stays freely scrollable once entered, which is what
   * lets a reader work through it normally.
   */
  .sr-footer {
    scroll-snap-align: start;
  }
}

/*
 * Snapping moves the content under the reader without being asked, which is
 * exactly what this setting is about, so it comes off entirely.
 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-snap-type: none;
  }
}

/* ---------------------------------------------------------------------------
   Scene clips and the frame they sit in
   ------------------------------------------------------------------------ */

/*
 * The browser frame, shared.
 *
 * Same materials as the About Us hero's own frame — one ground, one hairline,
 * one shadow — so a workflow canvas reads as the same object wherever it turns
 * up. The bar is a plain strip rather than drawn chrome, because three fake
 * traffic-light dots would be pretending to be an operating system.
 *
 * Rendered by sr_scene_video_frame() in inc/scene-video.php.
 */
.srk-vframe {
  width: 100%;
  padding: 10px;
  border-radius: 16px;
  background: #050d2c;
  border: 1px solid rgba(234, 240, 255, 0.2);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.62);
}

.srk-vframe-bar {
  display: block;
  height: 8px;
  width: 62px;
  margin: 2px auto 10px;
  border-radius: 999px;
  background: rgba(234, 240, 255, 0.18);
}

/*
 * The aspect ratio is set inline per clip, because the captures are not all the
 * same shape: the workflow tour is 1232x770 and the results canvas is square.
 * Declaring it on the SCREEN rather than on the video means the box is the
 * right height before a single byte of video arrives, so nothing shifts when a
 * clip finally loads. That is the difference between a poster that swaps in and
 * a layout that jumps.
 */
.srk-vframe-screen {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #0a1a4d;
}

.srk-scene-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  background: #0a1a4d;
}

/* ------------------------------------------ the product logotype in a hero

   Rohan, 2026-09-01, chose the eyebrow slot for it: the mark replaces the
   product's name where that name was already set in type, so the <h1> below is
   untouched.

   Everything about how the two pieces relate is inherited, not restated. The
   markup is the same mark-slot-plus-wordmark the menu and the footer print, and
   it carries the same .sr-product--<key> class, so tokens.css binds the same cap
   multiplier, the same cap midline and the same optical scale it uses
   everywhere else. What this block sets is the SIZE for this context.

   --sr-hero-logo-k is a MULTIPLIER and not a new --sr-logo-cap, and that is not
   a stylistic choice. tokens.css computes every --sr-logo-h-* at :root, where
   --sr-logo-cap is resolved and frozen; a scope that rebinds the cap changes
   nothing, because the heights were already worked out. The file says so in its
   own comment. So the scale has to be applied where the length is USED, which is
   here, and it multiplies the height, the shift and the mark together so the
   three stay in the proportion the registry set. */
.srk-page .srk-eyebrow--logo {
  /*
   * Rohan, 2026-09-02: "all the logos/icons headers in the heros for Product
   * have become too small."
   *
   * Measured: the logotype's cap was 16.2px, against the 13px eyebrow type it
   * replaced and the 62px h1 directly under it. The mark stood in for the
   * product's name and read as a caption. 2.25 puts the cap at about 27px,
   * which is a lockup rather than a label and still clearly subordinate to the
   * h1 it introduces.
   *
   * One number moves the whole pair: the gap, the mark column, the mark and the
   * wordmark height all multiply by it, so the registry's cap matching and the
   * icon's position on the cap midline survive the change untouched.
   */
  --sr-hero-logo-k: 2.25;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--sr-mark-gap) * var(--sr-hero-logo-k));
  /* The eyebrow's own tracking and uppercasing would style the clipped name and
     nothing else, but they also set a text baseline the flex line would honour.
     Zeroed so the line is decided by the artwork. */
  letter-spacing: normal;
  text-transform: none;
  line-height: 1;
}

.srk-page .srk-eyebrow--logo .sr-product__mark {
  flex: 0 0 calc(var(--sr-mark-col) * var(--sr-hero-logo-k));
  width: calc(var(--sr-mark-col) * var(--sr-hero-logo-k));
  height: calc(var(--sr-product-row-h) * var(--sr-hero-logo-k));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.srk-page .srk-eyebrow--logo .sr-product__mark-img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(var(--sr-mark-size) * var(--sr-hero-logo-k) * var(--sr-mark-scale, 1));
  max-height: calc(var(--sr-mark-size) * var(--sr-hero-logo-k) * var(--sr-mark-scale, 1));
  object-fit: contain;
}

.srk-page .srk-eyebrow--logo .sr-product__word {
  display: block;
  flex: none;
  width: auto;
  height: calc(var(--sr-logo-h) * var(--sr-hero-logo-k));
  transform: translateY(calc(var(--sr-logo-h) * var(--sr-hero-logo-k) * (0.5 - var(--sr-logo-capmid, 0.5))));
}

/* The name stays in the document for a screen reader, because the artwork
   carries an empty alt. Clipped, not display:none, which would take it out of
   the accessibility tree along with the pixels. */
.srk-page .srk-eyebrow--logo .sr-product__name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Chrome: chapter chevrons and back to top
   ------------------------------------------------------------------------

   Injected by scene-kit.js, so these rules style elements that only exist when
   the script runs. Matched to the ShareRing Link and DigitalMe controls, which
   are where the pattern comes from.

   The chevrons are FIXED at the top and bottom of the viewport and the scenes
   travel past them, so they carry their own separation rather than depending on
   what is behind them at any moment. Link learned that the hard way: a hairline
   glyph over a busy photograph simply disappears, and it cannot be fixed by
   resizing the photograph. Two shadows, a tight one for edge definition against
   mid tones and a soft halo to lift it off texture.
   ------------------------------------------------------------------------ */

.srk-chrome.srk-nav,
.srk-chrome.srk-top {
  position: fixed;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(234, 240, 255, 0.72);
  cursor: pointer;
  transition: opacity 240ms var(--srh-ease), color 240ms var(--srh-ease);
}

.srk-chrome.srk-nav {
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
}

/*
 * DigitalMe's placement and its two heights, matched.
 *
 * The heights differ on purpose there: 44px for the down arrow, 40px for the
 * up. They are not only cosmetic here either. The glyph is now DigitalMe's
 * 28px chevron rather than the 20x13 this file used to draw, and 28px in the
 * old 34px box left three pixels of air on each side.
 *
 * The down arrow sits hard on the bottom edge, as DigitalMe's does.
 *
 * THE UP ARROW IS DERIVED RATHER THAN COPIED, and it lands in the same place.
 * DigitalMe writes `top: 0`, which is clear there because by the time the up
 * arrow appears the reader has scrolled and its header has gone with the page.
 * That is true of the eleven cinema pages here too, where --srk-header-h is 0
 * and this resolves to DigitalMe's exact zero. It is NOT true of the four
 * product pages: their header is sticky and never leaves, so a literal `top: 0`
 * would park the arrow underneath it forever. Reading the same variable the
 * scene heights and the chevron's scroll target already use means one number
 * governs all three and they cannot disagree.
 */
.srk-chrome.srk-nav--up { top: var(--srk-header-h, 0px); height: 40px; }
.srk-chrome.srk-nav--down { bottom: 0; height: 44px; }

.srk-chrome.srk-nav svg {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 10px rgba(0, 0, 0, 0.45));
}

/*
 * The down arrow bobs, exactly as DigitalMe's does. It is the one piece of
 * motion on the page whose whole job is to say "there is more below", and a
 * static arrow says it far less well. The keyframes are declared in the "Page
 * navigation" block above, where this animation came from.
 */
.srk-chrome.srk-nav--down svg {
  animation: srk-chev 1.8s ease-in-out infinite;
}

.srk-chrome.srk-nav:hover,
.srk-chrome.srk-top:hover { color: rgba(234, 240, 255, 0.98); }

.srk-chrome.srk-nav:focus-visible,
.srk-chrome.srk-top:focus-visible {
  outline: 2px solid var(--srk-accent-live, var(--srh-accent));
  outline-offset: 3px;
}

/* Hidden rather than removed, so the layout never shifts as they come and go. */
.srk-chrome.srk-nav.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.srk-chrome.srk-top {
  left: clamp(16px, 2vw, 36px);
  bottom: clamp(16px, 2.5vh, 28px);
  width: 44px;
  height: 44px;
  border: 1px solid rgba(234, 240, 255, 0.28);
  border-radius: 50%;
  background: rgba(234, 240, 255, 0.06);
  opacity: 0;
  pointer-events: none;
}

.srk-chrome.srk-top.is-shown {
  opacity: 1;
  pointer-events: auto;
}

.srk-chrome.srk-top:hover { border-color: rgba(234, 240, 255, 0.5); }

/* The down chevron and the back-to-top would collide in the same corner band on
   a narrow viewport, and the chevron is the less useful of the two once a
   reader is deep enough in the page to want the top again. */
/*
 * On a phone the down arrow comes up off the bottom edge, which is the one
 * place this departs from DigitalMe on purpose. DigitalMe hides these
 * entirely below 900px and so never faces the question; they are kept here
 * because the chevron is still the precise instrument on a phone, where the
 * swipe is a coarse one. A control sitting hard on the bottom edge of a phone
 * is inside the band the browser's own chrome and the home indicator occupy.
 */
@media (max-width: 640px) {
  .srk-chrome.srk-nav--down { bottom: clamp(10px, 1.6vh, 18px); }
  .srk-chrome.srk-top { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .srk-chrome.srk-nav,
  .srk-chrome.srk-top { transition: none; }

  /*
   * The bob stops, and the arrow holds at full opacity rather than at the 0.55
   * the animation would have parked it on. Without the opacity the arrow keeps
   * whatever value the keyframe left and reads as half disabled.
   */
  .srk-chrome.srk-nav--down svg {
    animation: none;
    opacity: 1;
  }
}

/*
 * HERO HEADLINE SIZE, shared note. Rohan, 2026-09-01: "Prove has massive text on
 * the hero page. This is wrong and all the pages should have the same size hero
 * headlines."
 *
 * Every product hero used --srk-display-l, which tops out at 96px. On a wide
 * viewport that is enormous, and it was worst on Prove, whose copy column is
 * full width because its device sits beside it rather than under it. Share
 * Ledger had already been brought down to --srk-display-m and approved, so the
 * others follow it: the token lives per page for historical reasons, and each
 * one now names display-m and points here for the reason.
 */