/*
 * ShareRing Link: the page's own layer.
 *
 * The scene kit supplies scenes, the phone, reveals, buttons and the chevron;
 * the product kit (product-kit.css) supplies lockups, tiles, the browser frame,
 * the branded panel, the type floors and the scene padding. This file is the
 * page's layout: which visual sits where, and how big, at each size.
 *
 * Every visual is fitted to the height a scene has left (--srpk-avail and the
 * kit's .srpk-fit box), so each scene is one screen with nothing cut.
 */

/* ---------------------------------------------------------------- Splits */

/*
 * Copy beside a visual from 900px: the visual column is exactly the scene's
 * usable height and the screen inside it is fitted, whole. Under 900px the
 * copy comes first and the visual takes whatever height is left.
 */
.srlk-split {
  display: grid;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}

@media (min-width: 900px) {
  .srlk-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .srlk-split--wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .srlk-split > .srlk-visual,
  .srlk-split > .srlk-duo { height: var(--srpk-avail); }
  .srlk-split--flip > .srlk-visual { order: -1; }

  /* Fix pass 6 (every Link screen larger): the screen's column is the wider
     one, on whichever side the screen sits. */
  .srlk-split--big { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .srlk-split--big.srlk-split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

@media (max-width: 899px) {
  .srlk-split {
    height: var(--srpk-avail);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(16px, 2.4vh, 26px);
  }
  .srlk-split > .srlk-visual,
  .srlk-split > .srlk-duo { min-height: 0; }
}

.srlk-copy { min-width: 0; }

/* A phrase that must not break across lines (a hyphenated word, "No lock in."). */
.srlk-nw { white-space: nowrap; }

/*
 * A line a phone scene of its own carries under 700px is not printed in the
 * desktop scene there too (.srlk-not-ph), so no sentence shows twice on one
 * screen size. On a short phone a soft line gives way (.srlk-not-short-ph) so
 * the scene's visual keeps the column's width.
 */
@media (max-width: 699px) {
  .srk-page.srlk-root .srlk-not-ph { display: none; }
}

@media (max-width: 699px) and (max-height: 880px) {
  .srk-page.srlk-root .srlk-not-short-ph { display: none; }
}

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

.srk-page.srlk-root .srlk-hero h1 { max-width: 13ch; }

/* The hero's close cut (fix pass 6): one cut per size in one browser frame. On a
   phone the frame takes the phone cut's shape (666 x 440). */
.srk-page .srlk-hero-shot picture,
.srk-page .srlk-hero-shot picture img { display: block; width: 100%; height: 100%; }

@media (max-width: 699px) {
  .srk-page .srlk-hero-shot > .srpk-browser { --srpk-r: 1.5136 !important; }
  .srk-page .srlk-hero-shot .srpk-browser-screen { aspect-ratio: 666 / 440 !important; }
}

.srlk-hero .srk-actions { margin-top: clamp(22px, 3.4vh, 34px); }

/* Two buttons side by side on a phone: a tighter pill, never under 48px tall. */
@media (max-width: 699px) {
  .srk-page.srlk-root .srk-actions { gap: 10px; margin-top: 18px; }
  .srk-page.srlk-root .srk-btn { padding: 12px 18px; }
}

/* ---------------------------------------------------------------- The builder's nodes */

.srlk-nodes {
  list-style: none;
  padding: 0;
  margin: clamp(16px, 2.6vh, 28px) 0 0;
  display: grid;
  gap: 10px;
}

.srk-page.srlk-root .srlk-nodes li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--srpk-body);
  line-height: 1.35;
  color: var(--srh-ink);
}

.srlk-nodes li > span:last-child {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5em;
}

.srlk-nodes strong,
.srlk-rows strong {
  color: #ffffff;
  font-weight: 600;
}

.srlk-rows li > span:last-child {
  display: flex;
  flex-direction: column;
}

/*
 * "And eight more." (the lede's 13 task types are these five and eight more):
 * a plain line, never a card. In the rows it lines up with the names (the
 * icon's 36px and the 14px gap).
 */
.srk-page.srlk-root .srlk-nodes li.srlk-nodes-more { padding-left: 50px; }

/*
 * Under 900px the five nodes WRAP, never a sideways row that cuts a card at
 * the edge: three to a row on a tablet, two on a phone. Each card is an icon
 * and its name on one line, the gloss under them across the card's width.
 */
@media (max-width: 899px) {
  .srlk-nodes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .srk-page.srlk-root .srlk-nodes li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "ic name" "gloss gloss";
    align-items: center;
    gap: 4px 8px;
    padding: 8px 10px 10px;
    border-radius: 14px;
    background: rgba(10, 36, 114, 0.42);
    border: 1px solid rgba(77, 138, 255, 0.22);
    font-size: var(--srpk-card);
    line-height: 1.3;
  }
  .srlk-nodes li > .srpk-ic { grid-area: ic; width: 28px; height: 28px; border-radius: 8px; }
  .srlk-nodes li > .srpk-ic svg { width: 16px; height: 16px; }
  .srlk-nodes li > span:last-child { display: contents; }
  .srlk-nodes li strong { grid-area: name; line-height: 1.2; }
  .srlk-nodes li .srlk-gloss { grid-area: gloss; }

  /* "And eight more." takes the grid's sixth place as a line, not a card. */
  .srk-page.srlk-root .srlk-nodes li.srlk-nodes-more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 0;
    background: none;
    text-align: center;
  }
}

/*
 * A phone: the five task types are tiles, two to a row, each headed by the
 * task's own icon LARGE on the brand gradient (fix pass 5: the node crops of
 * pass 3 read about 6px here), then its name and gloss; "And eight more."
 * takes the sixth place. Every tile is the same height. The canvas is the next
 * scene (#c-builder-2, the kit's srpk-more--ph): beside the copy it would be a
 * thumbnail, and the conditional logic line is its copy there.
 */
@media (max-width: 699px) {
  .srlk-nodes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 10px;
  }
  .srk-page.srlk-root .srlk-nodes li {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
  }
  .srk-page.srlk-root .srlk-nodes li > .srpk-ic {
    display: flex;
    flex: 0 0 auto;
    width: 100%;
    height: 68px;
    border: 0;
    border-bottom: 1px solid rgba(77, 138, 255, 0.22);
    border-radius: 0;
    background:
      radial-gradient(120% 120% at 20% 10%, var(--srh-lapis) 0%, transparent 55%),
      radial-gradient(120% 120% at 90% 100%, var(--srh-accent) 0%, transparent 50%),
      var(--srh-navy-mid);
    color: #ffffff;
  }
  .srk-page.srlk-root .srlk-nodes li > .srpk-ic svg { width: 40px; height: 40px; }
  .srk-page.srlk-root .srlk-nodes li > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px 10px;
  }
  .srk-page.srlk-root .srlk-nodes li strong { font-size: 16px; line-height: 1.25; }
  .srk-page.srlk-root .srlk-nodes li.srlk-nodes-more {
    justify-content: center;
    align-items: center;
    padding: 8px;
    overflow: visible;
    font-size: var(--srpk-body);
  }
  .srk-page.srlk-root .srlk-nodes li.srlk-nodes-more > span { display: block; padding: 0; }
  .srlk-builder .srlk-split { height: auto; grid-template-rows: auto; }
  .srlk-builder .srlk-split > .srlk-visual { display: none; }
}

/* A short phone (360x780, where the lede takes three lines): the icon header
   is slimmer and the tiles closer, so the scene stays whole. */
@media (max-width: 699px) and (max-height: 800px) {
  .srlk-nodes { gap: 8px; }
  .srk-page.srlk-root .srlk-nodes li > .srpk-ic { height: 54px; }
  .srk-page.srlk-root .srlk-nodes li > .srpk-ic svg { width: 32px; height: 32px; }
  .srk-page.srlk-root .srlk-nodes li > span:last-child { padding: 6px 10px 8px; }
}

/* The builder's and the picker's phone scenes: the repeated heading, the
   line, then the canvas or the clip, whole and as large as the height the
   words leave. */
.srk-page.srlk-root .srlk-builder-more .srlk-builder-line,
.srk-page.srlk-root .srlk-workflows-more .srlk-builder-line { margin-top: 0.7em; }

.srk-page .srlk-builder-more .srlk-builder-canvas,
.srk-page .srlk-workflows-more .srlk-builder-canvas {
  flex: 1 1 0;
  min-height: 0;
  margin-top: clamp(12px, 2vh, 20px);
}

/* ---------------------------------------------------------------- Clips */

/*
 * A process clip (fix pass 6, R4) in the theme's clip frame
 * (sr_scene_video_frame(): 10px of frame round the screen, the 20px bar and
 * 1px rules), fitted WHOLE into its box like the kit's browser frame: as wide
 * as the box allows, capped by the box's height and the clip's own shape
 * (--srlk-vr, set by srlk_clip_style()). The frame's aspect ratio is set on
 * its screen before a byte of video arrives, so nothing shifts when it loads.
 */
.srpk-fit.srlk-clip > .srk-vframe {
  flex: 0 0 auto;
  width: min(100cqw, calc((100cqh - 42px) * var(--srlk-vr, 1.6) + 22px));
}

/* The picker scene's still stands in for the clip on a phone, where the clip
   has a stop of its own (#c-workflows-2). */
@media (min-width: 700px) {
  .srk-page.srlk-root .srlk-ph-only { display: none; }
}

/*
 * The picker clip is a landscape screen, so on a wide screen it is given the
 * room to the scene's right edge: the copy keeps the left edge every other
 * scene has (the kit's 1180px measure, centred), and the clip's column runs on
 * to the scene padding. At 1440 the clip is about 770px wide, so its card
 * titles read about 13px and their descriptions 12px (the manifest's sizes).
 */
@media (min-width: 1300px) {
  .srk-page .srlk-workflows > .srk-scene-inner.srlk-split {
    max-width: none;
    width: calc(100% - (100% - 1180px) / 2);
    margin-left: calc((100% - 1180px) / 2);
    margin-right: 0;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  }
}

/* ---------------------------------------------------------------- Notes and links */

.srk-page.srlk-root .srk-scene .srlk-note {
  display: flex;
  align-items: center;
  gap: 12px;
}

.srlk-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: clamp(18px, 3vh, 30px);
}

.srk-page.srlk-root .srlk-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--srpk-body);
  font-weight: 600;
  color: var(--srh-pale);
  text-decoration: underline;
  text-decoration-color: var(--srk-accent-live, var(--srh-accent));
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.srk-page.srlk-root .srlk-links a:hover { color: #ffffff; }

/* ---------------------------------------------------------------- Sheets (a drawer, whole) */

/*
 * A side drawer from the app, shown as what it is: a sheet, whole, not a full
 * browser window. Fitted to its box like the browser frame.
 */
.srlk-sheet {
  flex: 0 0 auto;
  border-radius: clamp(10px, 1.2vw, 16px);
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(234, 240, 255, 0.2), 0 30px 80px rgba(0, 0, 0, 0.55);
}

.srk-page .srlk-sheet picture,
.srk-page .srlk-sheet img {
  display: block;
  width: 100%;
  height: auto;
}

.srpk-fit > .srlk-sheet { width: min(100cqw, calc((100cqh - 2px) * var(--srpk-r, 0.42))); }

/*
 * Webhooks: two real screens, both whole. In a box taller than it is wide (the
 * desktop column, and a short laptop's nearly square one) the run history runs
 * across the top, at most 45 per cent of the height, and the drawer takes what
 * is left below it. In a clearly wide box (a tablet, 7:5 or wider) they sit
 * side by side at one height. Sizes come from the box, so the
 * pair always fills it without a crop. On a phone the drawer stands alone.
 */
.srlk-shots {
  --srlk-r1: 1.8757; /* run history, 1026 x 547 */
  --srlk-r2: 0.7417; /* drawer, 448 x 604 */
  --srlk-sg: clamp(14px, 2.4vh, 24px);
  container-type: size;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.srlk-shots-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--srlk-sg);
}

.srlk-shots .srpk-browser {
  flex: 0 0 auto;
  width: min(100cqw, calc((45cqh - var(--srpk-bar-h) - 4px) * var(--srlk-r1)));
}

.srlk-shots .srlk-sheet {
  width: min(100cqw, calc((100cqh - var(--srlk-sg) - var(--srpk-bar-h) - 4px - min(100cqw / var(--srlk-r1), 45cqh - var(--srpk-bar-h) - 4px)) * var(--srlk-r2)));
}

@container (min-aspect-ratio: 7 / 5) {
  .srlk-shots-in {
    --srlk-h: min(100cqh, calc((100cqw - var(--srlk-sg) + (var(--srpk-bar-h) + 4px) * var(--srlk-r1)) / (var(--srlk-r1) + var(--srlk-r2))));
    flex-direction: row;
  }
  .srlk-shots .srpk-browser { width: calc((var(--srlk-h) - var(--srpk-bar-h) - 4px) * var(--srlk-r1)); }
  .srlk-shots .srlk-sheet { width: calc(var(--srlk-h) * var(--srlk-r2)); }
}

/*
 * A tablet: the pair side by side is about 2.5 times as wide as it is tall, so
 * the box takes that shape and the scene centres copy and pair together,
 * instead of the pair floating in a box twice its height.
 */
@media (min-width: 700px) and (max-width: 899px) {
  .srlk-webhooks .srlk-split { height: auto; grid-template-rows: auto auto; }
  .srlk-webhooks .srlk-shots { aspect-ratio: 2.5; max-height: calc(var(--srpk-avail) - 280px); }
}

/*
 * From 700px (fix pass 6, the fix round): the two screens are each in the
 * kit's browser frame, larger, each cut to the part that reads 12px or more:
 * the top of Workflow history at 1.28 times its 1x capture (490 x 286, shown
 * up to 627px wide) and the top of the webhook drawer at 0.78 (424 x 320,
 * shown up to 331px wide), stacked in the wider column, the drawer to the
 * right as it opens in the app. On a phone the drawer's top stands alone
 * (.srlk-shots, below).
 */
.srk-page .srlk-hooks { display: none; }

@media (min-width: 700px) {
  .srk-page .srlk-webhooks .srlk-shots { display: none; }
  .srk-page .srlk-hooks {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(12px, 2vh, 18px);
    min-width: 0;
    min-height: 0;
  }
  .srk-page .srlk-hooks-hist { width: min(100%, 627px); }
  .srk-page .srlk-hooks-sheet { width: min(100%, 331px); align-self: flex-end; }
}

/* On a phone the drawer stands alone, and only its top (fix pass 5): the
   title, the URL and the token, link-webhook-sheet-top.webp (424 x 320), so
   its labels read 12px or more. */
@media (max-width: 699px) {
  .srk-page .srlk-shots { --srlk-r2: 1.325; }
  .srk-page .srlk-shots .srpk-browser { display: none; }
  .srk-page .srlk-shots .srlk-sheet { width: min(100cqw, calc(100cqh * var(--srlk-r2))); }
}

/*
 * Branding: three labelled examples (Logo, Banner, Badge) of what a business
 * brands, on the brand gradient. The examples are the visual, with no lockup
 * over them, so the box is never a lockup-on-gradient panel. Two cards over
 * one from 700px, where the column has the height for larger cards; a row of
 * three on a phone. The box is as wide as its column allows, capped by the
 * column's height (--srlk-bk-r, its width over its height, rounded down so it
 * never overflows), and as tall as its cards. The labels never go under the
 * card floor.
 */
.srk-page .srlk-brandkit {
  --srlk-bk-r: 1.2;
  --srlk-bk-gap: 20px;
  flex: 0 0 auto;
  width: min(100cqw, 680px, calc(100cqh * var(--srlk-bk-r)));
  padding: clamp(16px, 4.6%, 34px);
  border-radius: clamp(14px, 1.6vw, 22px);
  border: 1px solid rgba(77, 138, 255, 0.22);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  background:
    radial-gradient(120% 120% at 20% 10%, var(--srh-lapis) 0%, transparent 55%),
    radial-gradient(120% 120% at 90% 100%, var(--srh-accent) 0%, transparent 50%),
    var(--srh-navy-mid);
}

.srlk-brandkit-row {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--srlk-bk-gap);
}

/* The third card alone on its row, centred, at the others' width. */
.srlk-brandkit-row li:nth-child(3) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc((100% - var(--srlk-bk-gap)) / 2);
}

.srk-page.srlk-root .srlk-brandkit-row li {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  font-size: var(--srpk-card);
  line-height: 1.2;
}

@media (max-width: 699px) {
  .srk-page .srlk-brandkit { --srlk-bk-r: 2.6; --srlk-bk-gap: 10px; padding: 14px 12px; }
  .srlk-brandkit-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .srlk-brandkit-row li:nth-child(3) { grid-column: auto; justify-self: stretch; width: auto; }
  .srk-page.srlk-root .srlk-brandkit-row li { gap: 6px; }
  .srk-page.srlk-root .srlk-thumb-label { padding: 2px 8px; }
}

.srlk-thumb {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.35));
}

.srlk-t-card { fill: #ffffff; }
.srlk-t-brand { fill: var(--srh-lapis, #3458e0); }
.srlk-t-ink { fill: #ffffff; }
.srlk-t-dot { fill: var(--srh-accent, #2ce5a7); }
.srlk-t-line { fill: #dbe1ee; }
.srlk-t-tick { fill: none; stroke: var(--srh-lapis, #3458e0); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* A dark pill, so a label holds its contrast over the gradient's green corner. */
.srk-page.srlk-root .srlk-thumb-label {
  padding: 2px 12px;
  border-radius: 999px;
  background: rgba(5, 10, 32, 0.78);
  font-weight: 600;
  color: #ffffff;
}

/* ---------------------------------------------------------------- Channels */

/*
 * From 1000px the three cards share one row and the pictures take the height
 * the heading leaves. Under 1000px the kit's phone split lays them out
 * (srpk_stack_class() and srpk_stack_more() in the template): whole cards,
 * one per scene on a phone, two on a tablet. Each card's focal point is its
 * own 'pos', so it holds in whichever scene the card lands.
 */
@media (min-width: 1000px) {
  .srlk-channels-inner {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: var(--srpk-avail);
  }

  .srk-page.srlk-root .srlk-channels .srlk-channel-tiles {
    margin-top: clamp(18px, 3vh, 32px);
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
  }

  .srlk-channel-tiles .srpk-htile-head {
    aspect-ratio: auto;
    flex: 1 1 0;
    min-height: 0;
  }

  /* The picture takes the height; the body is only as tall as its words. */
  .srlk-channel-tiles .srpk-htile-body { flex: 0 0 auto; }
}

.srlk-channel-tiles > .srpk-htile { min-height: 0; }

.srlk-channel-tiles .srpk-htile-head--image img { object-position: 50% 55%; }

/*
 * The QR card's head is the drawer's code card at every size (fix pass 6,
 * link-qr-drawer-code-r1.webp, 376 x 349): on the gradient with clear padding
 * on every side, never against the card's edge, as large as the head allows,
 * so "Copy content of QR code" reads 12px or more. On a phone its card has a
 * scene to itself and the head takes the code card's own shape.
 */
.srk-page .srlk-channel-tiles .srpk-htile-head--screen { padding: clamp(18px, 2vw, 28px); }

/* In the 1440 row the heads are short: the code card takes all but a thin
   margin of gradient, so its button label reads 12px or more. */
@media (min-width: 1000px) {
  .srk-page .srlk-channel-tiles .srpk-htile-head--screen { padding: 12px 18px; }
}

@media (max-width: 699px) {
  .srk-page .srlk-channel-tiles.srpk-stack > .srpk-htile > .srpk-htile-head--screen {
    aspect-ratio: 1.07 / 1;
    padding: 16px;
  }
}

/* The standee's phone scene (#c-channels-2) carries a line under its heading,
   as the first carries the lede (fix pass 3). */
.srk-page.srlk-root .srlk-channels .srlk-more-line { margin: 0.6em 0 0; text-wrap: balance; }

/* ---------------------------------------------------------------- The ShareRing Me side */

/* Both lockups, their logotypes the same size, joined on the centre line. */
.srlk-pair {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 18px;
  margin-bottom: clamp(14px, 2.4vh, 24px);
  --srpk-match-h: clamp(24px, 2.2vw, 32px);
}

.srlk-pair-link {
  position: relative;
  flex: 0 0 auto;
  width: clamp(40px, 5vw, 72px);
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--srk-accent-live, var(--srh-accent)), #ffffff);
}

.srlk-pair-link::before,
.srlk-pair-link::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--srk-accent-live, var(--srh-accent));
}

.srlk-pair-link::before { left: -4px; }
.srlk-pair-link::after { right: -4px; background: #ffffff; }

.srlk-pair-link span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  animation: srlk-pulse 2.4s ease-in-out infinite;
}

@keyframes srlk-pulse {
  0% { left: 0; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: calc(100% - 14px); opacity: 0; }
}

/*
 * Two whole phones in the kit's one phone frame, side by side and level,
 * fitted to the height left. The page sets their SIZE only; the frame (bezel,
 * rule, shadow, radius) is the kit's and is never restyled here.
 */
.srlk-duo {
  --srlk-gap: clamp(14px, 2vw, 28px);
  container-type: size;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--srlk-gap);
}

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

@media (max-width: 899px) {
  .srlk-badges { display: none; }
}

/* Fix pass 6: the phones' column is the wider one from 900px, so the copy's
   column is narrower; the pair keeps one line, both logotypes still matched
   (the same --srpk-match-h), with a shorter link between them. */
@media (min-width: 900px) {
  .srlk-split--big .srlk-pair { flex-wrap: nowrap; --srpk-match-h: clamp(22px, 1.9vw, 27px); }
  .srlk-split--big .srlk-pair-link { width: clamp(36px, 3.4vw, 52px); }
}

@media (max-width: 699px) {
  .srlk-pair { --srpk-match-h: 20px; gap: 10px; flex-wrap: nowrap; }
  .srlk-pair-link { width: 28px; }
}

/*
 * A phone: three scenes, each a whole phone fitted to the height its sentence
 * leaves, 240px wide or more. #c-me (fix pass 4) is the eyebrow, its sentences
 * and the ShareRing Me home screen in place of the photograph it had; its
 * phone needs about 517px of the scene's 643px at 390x844, so the pair and the
 * heading are drawn from 700px only (the heading stays for screen readers),
 * and the copy sits as tight as on #c-me-2 and #c-me-3: eyebrow, 10px,
 * sentence, 14px, phone. #c-me-2 and #c-me-3 each carry a sentence and a
 * phone.
 */
.srk-page .srlk-me-home { display: none; }

@media (max-width: 699px) {
  .srlk-me .srlk-split > .srlk-duo { display: none; }

  .srk-page .srlk-me .srlk-pair { display: none; }

  .srk-page.srlk-root .srlk-me .srlk-sr-ph {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .srk-page.srlk-root #c-me .srlk-split { gap: 14px; }
  .srk-page.srlk-root #c-me .srk-eyebrow { margin: 0 0 10px; }
  .srk-page.srlk-root #c-me .srk-lede { margin: 0; text-wrap: balance; }

  .srk-page .srlk-me-home { display: flex; }

  .srlk-me-step {
    display: grid;
    height: var(--srpk-avail);
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 14px;
  }

  .srk-page.srlk-root .srlk-me-step .srk-lede { margin: 0; text-wrap: balance; }

  /* Fix pass 3: each phone scene carries the section's eyebrow and its place,
     "Your customer's minute (2 of 3)", so it never reads as orphaned. */
  .srk-page.srlk-root .srlk-me-step .srlk-me-brow { margin: 0 0 -4px; }
}

/* A short phone (360x780): the kit draws a fitted phone only when its box is
   517px tall or more (240px wide), so the sentence sits at body size, closer. */
@media (max-width: 699px) and (max-height: 800px) {
  .srlk-me-step { gap: 6px; }
  .srk-page.srlk-root #c-me .srlk-split { gap: 6px; }
  /* #c-me's three lines would take its phone under 240px here (360x780), so
     "No app download required." gives way and the sentence keeps two lines. */
  .srk-page.srlk-root #c-me .srlk-me-soft { display: none; }
  .srk-page.srlk-root .srlk-me-step .srk-lede,
  .srk-page.srlk-root #c-me .srk-lede { font-size: var(--srpk-body); line-height: 1.45; }
}

/* Under 820px tall the eyebrow would take the phone under its 240px floor, so
   the eyebrows (#c-me's too, now that it carries a phone) give way there and
   the phone keeps its size (360x780, 375x812). */
@media (max-width: 699px) and (max-height: 819px) {
  .srlk-me-step { grid-template-rows: auto minmax(0, 1fr); }
  .srk-page.srlk-root .srlk-me-step .srlk-me-brow,
  .srk-page.srlk-root #c-me .srk-eyebrow { display: none; }
}

/* ---------------------------------------------------------------- Pricing */

.srlk-prices {
  align-self: center;
  padding: clamp(18px, 2.6vw, 34px);
  border-radius: clamp(18px, 2vw, 24px);
  border: 1px solid rgba(77, 138, 255, 0.28);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(52, 88, 224, 0.55) 0%, transparent 60%),
    radial-gradient(90% 90% at 100% 100%, rgba(44, 229, 167, 0.16) 0%, transparent 60%),
    rgba(10, 36, 114, 0.55);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.srlk-prices-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(10px, 1.8vh, 18px);
}

.srk-page.srlk-root .srlk-prices-label {
  font-size: var(--srpk-card);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--srh-pale);
  white-space: nowrap;
}

.srlk-price-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.srk-page.srlk-root .srlk-price-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(12px, 1.9vh, 18px) 0;
  border-top: 1px solid rgba(234, 240, 255, 0.16);
  font-size: var(--srpk-card-title);
  line-height: 1.3;
}

.srk-page.srlk-root .srlk-price-name {
  font-weight: 600;
  color: #ffffff;
}

.srk-page.srlk-root .srlk-price-num {
  flex: 0 0 auto;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
  white-space: nowrap;
  text-align: right;
}

.srk-page.srlk-root .srlk-price-num small {
  display: block;
  margin-top: 2px;
  font-size: var(--srpk-card);
  font-weight: 500;
  color: var(--srh-ink);
}

/* A row inc/pricing.php could not supply: a link to /pricing/, never a
   typed figure (see srlk_price() in the template). */
.srk-page.srlk-root .srlk-price-num--missing a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--srpk-card-title);
  font-weight: 600;
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: var(--srk-accent-live, var(--srh-accent));
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

@media (max-width: 899px) {
  .srlk-prices { align-self: start; }
}

@media (max-width: 699px) {
  .srlk-prices { padding: 12px 14px 6px; border-radius: 16px; }
  .srlk-prices-head { margin-bottom: 4px; }
  .srk-page.srlk-prices-head .srpk-lockup--row,
  .srk-page .srlk-prices-head .srpk-lockup--row { height: 22px; }
  .srk-page.srlk-root .srlk-price-rows li { padding: 7px 0; gap: 12px; font-size: var(--srpk-card); line-height: 1.25; }
  .srk-page.srlk-root .srlk-price-num { font-size: 20px; }
  .srk-page.srlk-root .srlk-price-num small { margin-top: 0; }
}

/* A short phone (360x780): the card keeps every row and gives up air, so it
   ends above the gutter the chevron and back-to-top sit in. */
@media (max-width: 699px) and (max-height: 800px) {
  .srk-page.srlk-root .srlk-pricing .srk-actions { margin-top: 12px; }
  .srk-page.srlk-root .srlk-pricing .srlk-note { margin-top: 0.7em; }
  .srk-page.srlk-root .srlk-price-rows li { padding: 4px 0; }
  .srk-page .srlk-prices { padding-top: 8px; }
}

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

/* Under 1000px the kit's phone split stacks the tiles (three per scene on a
   phone, 2 x 2 on a tablet) and they fill the height the heading leaves. */
.srlk-industries { --srpk-ind-head: 158px; }

/*
 * Only the first industries scene carries the heading. The others hold its
 * height (one line of --srpk-h2) under their eyebrow, so every tile is the
 * same size and in the same place in all four scenes: swiping through them,
 * only the photographs change.
 */
@media (max-width: 999px) {
  .srk-page .srlk-industries-more .srpk-more-head { margin-bottom: calc(var(--srpk-h2) * 1.14); }
}

/* ---------------------------------------------------------------- Closer */

/*
 * A banner: the copy on the left on the panel's navy, the photograph on the
 * right at the panel's full height (fix pass 6: a receptionist helping a
 * customer, both faces in its right two thirds), its left edge fading into
 * the navy, so no line of type crosses a face. Under 900px the photograph is
 * a strip above the copy instead.
 */
.srlk-closer-inner {
  display: grid;
  justify-items: center;
  text-align: center;
}

.srk-page .srlk-closer-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  padding: clamp(36px, 7vh, 80px) clamp(24px, 4vw, 64px);
  border-radius: 24px;
  border: 1px solid rgba(77, 138, 255, 0.22);
  background: var(--srh-navy);
  text-align: left;
}

.srk-page .srlk-closer-photo {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -2;
  width: auto;
  max-width: 68%;
  height: 100%;
  aspect-ratio: 1600 / 1119;
  object-fit: cover;
  object-position: 50% 35%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%);
}

/* No shade over the photograph from 900px: the copy sits on the navy beside it. */
.srk-page .srlk-closer-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: none;
  pointer-events: none;
}

.srlk-closer-copy {
  display: grid;
  justify-items: start;
  gap: clamp(12px, 2.2vh, 24px);
  max-width: min(560px, 52%);
}

.srk-page.srlk-root .srlk-closer h2 {
  max-width: 14ch;
  font-size: clamp(34px, 4.4vw, 60px);
}

.srk-page .srlk-closer .srpk-lockup--closer {
  margin: 0;
  object-position: left center;
}

.srk-page .srlk-closer-actions {
  justify-content: flex-start;
  margin-top: clamp(4px, 1vh, 10px);
}

.srlk-links--closer { justify-content: center; }

/*
 * The trust lines (fix pass 4): the page's own icon chip (srpk-ic, as on the
 * branding and pricing rows) in place of the seal artwork, the label in
 * balanced lines (ShareLedger's audit scene does the same), side by side from
 * 900px and one under the other on a phone.
 */
.srk-page.srlk-root .srlk-trust li > span:last-child {
  max-width: 34ch;
  text-wrap: balance;
}

@media (min-width: 900px) {
  .srk-page.srlk-root .srlk-trust { grid-template-columns: repeat(2, auto); gap: 18px 40px; }
}

/*
 * Under 900px the photograph is the top of the card: a strip with its subject
 * in frame that fades into the card, the copy overlapping the fade, so no line
 * of type crosses the photo's subject. The strip takes the height the scene
 * has to spare (--srlk-ph), so the closer is one whole screen at every phone
 * height.
 */
@media (max-width: 899px) {
  .srlk-closer { --srlk-ph: clamp(120px, calc(var(--srpk-avail) - 520px), 300px); }
  .srk-page .srlk-closer-panel { padding: 0; text-align: center; }
  .srk-page .srlk-closer-photo {
    position: relative;
    right: auto;
    z-index: auto;
    display: block;
    width: 100%;
    max-width: none;
    height: var(--srlk-ph);
    aspect-ratio: auto;
    object-position: 50% 30%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .srk-page .srlk-closer-panel::before {
    inset: auto 0 auto 0;
    top: 0;
    z-index: 1;
    height: var(--srlk-ph);
    background: linear-gradient(180deg, rgba(5, 10, 32, 0) 0%, rgba(5, 10, 32, 0) 52%, rgba(5, 10, 32, 0.78) 86%, var(--srh-navy) 100%);
  }
  .srlk-closer-copy {
    position: relative;
    z-index: 2;
    max-width: none;
    justify-items: center;
    margin-top: -34px;
    padding: 0 16px clamp(18px, 3vh, 30px);
  }
  .srk-page.srlk-root .srlk-closer h2 { max-width: 16ch; margin-inline: auto; }
  .srk-page .srlk-closer .srpk-lockup--closer { object-position: center; }
  .srk-page .srlk-closer-actions { justify-content: center; }
}

/* Short desktop screens (1366x768, 1280x720): the closer gives up air, not words. */
@media (min-width: 1000px) and (max-height: 820px) {
  .srk-page .srlk-closer-panel { padding: 26px 48px; }
  .srlk-closer-copy { gap: 12px; }
  .srk-page.srlk-root .srlk-closer h2 { max-width: 20ch; font-size: clamp(32px, 3.4vw, 46px); }
  .srk-page .srlk-closer .srpk-lockup--closer { height: 38px; }
  .srlk-links--closer { margin-top: 10px; }
  .srk-page.srlk-root .srlk-closer .srpk-seals { margin-top: 12px; }
}

/* A phone keeps the photograph (above) and tightens the air around the rest.
   The trust lines are two rows since fix pass 4 (they were three), about 54px
   shorter, so the photograph takes 50px of that back (450 to 400 below). */
@media (max-width: 699px) {
  .srlk-closer { --srlk-ph: clamp(96px, calc(var(--srpk-avail) - 400px), 240px); }
  .srlk-closer-copy { gap: 10px; margin-top: -26px; padding-inline: 12px; }
  .srk-page.srlk-root .srlk-closer h2 { max-width: none; font-size: 30px; text-wrap: balance; }
  .srk-page .srlk-closer .srpk-lockup--closer { margin-bottom: 4px; }
  .srlk-links--closer { gap: 0 18px; margin-top: 8px; }
  .srk-page.srlk-root .srlk-closer .srpk-seals { margin-top: 10px; gap: 6px; }
}

/* The narrowest phones: the two buttons stay on one row, the heading on two lines. */
@media (max-width: 379px) {
  .srk-page.srlk-root .srlk-closer h2 { font-size: 26px; }
  .srk-page.srlk-root .srlk-closer-actions { gap: 8px; }
  .srk-page.srlk-root .srlk-closer-actions .srk-btn { padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .srlk-pair-link span { animation: none; opacity: 0; }
}