/*
 * ShareRing Me: the page's own layer.
 *
 * The scene kit supplies scenes, the device, reveals, cards, buttons and the
 * FAQ. house-style.css supplies the ground. This file adds only what is
 * genuinely about this page, which is mostly type scale at the two moments the
 * page raises its voice, and the one card variant that is a link.
 */

.srm-root {
  /* The page owns its full width; the theme's content gutter would fight the
     scenes, which set their own padding. */
  max-width: none;
  padding: 0;
}

/* ---------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------ */

.srm-hero {
  padding-top: clamp(56px, 9vh, 130px);
}

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

/*
 * The hero device sits slightly proud of its scene, the way DigitalMe lets its
 * first frame break the top rhythm. Small, and only where there is room.
 */
@media (min-width: 900px) {
  .srm-hero .srk-stage { margin-top: clamp(0px, 2vh, 28px); }
}

/* ---------------------------------------------------------------------------
   The problem scene
   ------------------------------------------------------------------------ */

/*
 * This is the one scene with no device and no card grid, and it is the page's
 * only full-voice moment before the closer. It gets the large display size so
 * the argument lands, and a wider measure than body copy so the three short
 * sentences do not fragment into a column.
 */
.srm-cost {
  padding-top: clamp(90px, 14vh, 200px);
  padding-bottom: clamp(90px, 14vh, 200px);
}

.srk-page .srm-cost h2 {
  font-size: var(--srk-display-m);
  max-width: 18ch;
}

.srk-page .srm-cost .srk-lede {
  max-width: 52ch;
  margin-top: 1.4em;
}

/* ---------------------------------------------------------------------------
   Section headings
   ------------------------------------------------------------------------ */

.srm-root .srk-scene h2 {
  font-size: var(--srk-display-s);
}

.srk-page .srm-cost h2,
.srk-page .srm-closer h2 {
  font-size: var(--srk-display-m);
}

/* ---------------------------------------------------------------------------
   The "where it fits" cards, which are links
   ------------------------------------------------------------------------ */

.srk-page .srm-fit {
  display: block;
  text-decoration: none;
  transition: border-color 260ms var(--srk-ease), transform 260ms var(--srk-ease);
}

.srk-page .srm-fit:hover {
  border-color: var(--srh-accent);
  transform: translateY(-3px);
}

/*
 * The kind label was --srh-lapis, which measured 3.03:1 on the card against a
 * 4.5 floor for small text. --sr-brand-lift is the theme's existing answer to
 * exactly this problem, and its token comment says so: the brand blue raised
 * until it carries on a dark ground, because the brand blue itself is only
 * 1.75:1 there. Reusing it beats inventing a value.
 */
.srk-page .srm-fit-kind {
  display: block;
  font-size: var(--srk-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sr-brand-lift);
  margin-bottom: 0.7em;
}

/*
 * Only the PRODUCT card in this row carries a logotype; the three industry
 * cards keep their name in type and keep the heading rules they always had.
 *
 * So this collapses the type box for that one card, where the heading's text is
 * visually hidden behind the artwork and an inherited display size would
 * otherwise reserve a line box for something nobody sees.
 */
/*
 * THREE CLASSES, and that is the whole point of the extra one. scene-kit.css
 * styles `.srk-page .srk-scene h3`, which is (0,2,1); a two-class rule here ties
 * nothing and simply loses, and this declaration was discarded outright, leaving
 * the heading at 22px with a 27.5px line box reserved for text that is visually
 * hidden. Going through .srm-fit makes it (0,3,0) and settles it.
 */
.srk-page .srm-fit .srm-fit-name--logo {
  margin: 0 0 var(--space-2, 8px);
  font-size: 0;
  line-height: 0;
}

/*
 * The size comes from --srk-tile-logo-k in scene-kit.css, the one number the
 * three product-tile rows share. This row is where that number was chosen: the
 * industry cards beside it are 22px semibold headings, and the mark has to hold
 * its own against them. See the long note in scene-kit.css.
 */
.srk-page .srm-fit-name--logo .srk-eyebrow--logo {
  --sr-hero-logo-k: var(--srk-tile-logo-k, 1.15);
  margin: 0;
}

/*
 * A whole card is the link target, so the heading must not also read as one to
 * assistive tech or paint as one visually.
 */
.srk-page .srm-fit h3 { color: var(--srh-pale); }

@media (prefers-reduced-motion: reduce) {
  .srk-page .srm-fit { transition: none; }
  .srk-page .srm-fit:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Utilities
   ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
   Rhythm
   ------------------------------------------------------------------------ */

/*
 * A HEADING AND ITS LEDE WERE WELDED TOGETHER on every scene of this page.
 *
 * scene-kit gives .srk-lede a 1.2em top margin, and scene-kit then resets
 * `.srk-page .srk-scene p { margin: 0 }`. Two classes and an element beats two
 * classes, so the reset wins and the lede loses its space: eight of the nine
 * ledes on this page computed to margin-top 0. The About Us page does not show
 * the fault because its own stylesheet puts the gap on the h2 instead, which is
 * why this went unnoticed until a new scene was added here.
 *
 * Fixed by specificity rather than by !important, and scoped to this page:
 * three classes beats two-classes-and-an-element, and seven other templates use
 * .srk-lede without this fault showing, so there is no reason to move them.
 */
.srk-page .srm-root .srk-lede,
.srm-root .srk-page .srk-lede,
.srk-page.srm-root .srk-scene .srk-lede {
  margin-top: 0.85em;
}

/* ---------------------------------------------------------------------------
   Prove
   ------------------------------------------------------------------------ */

/*
 * The logotype stands in for the heading's first line, so it is sized against
 * the eyebrow above it rather than picked by eye: about two and a half times
 * the eyebrow's cap height puts it between the eyebrow and the h2 in weight,
 * which is where a product mark belongs when the h2 is doing the talking.
 */
.srk-page .srm-prove-mark {
  display: block;
  height: clamp(30px, 3.2vw, 44px);
  width: auto;
  margin: clamp(10px, 1.4vh, 16px) 0 clamp(14px, 2vh, 22px);
}

/*
 * The three cards are a definition rather than a feature list, so they read
 * better a little narrower than the full measure.
 */
.srk-page .srm-prove .srk-grid {
  margin-top: clamp(20px, 3vh, 34px);
}

.srm-narrow {
  max-width: 820px;
}

.srm-centre {
  text-align: center;
}

.srk-page .srm-centre p { margin-inline: auto; }

.srm-centre-actions { justify-content: center; }

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