/* The free counter kit (owner, 15 October 2026; since 17 October 2026 a
   stand-up card posted by our print partner): "Go live today, and we'll post
   you a stand-up card". One picture of it arriving: the card drops onto a
   counter, opens to show the steps inside, closes again with the poster
   facing out, then the inside and the till side are shown beside it, each
   gets a label, and "Posted free when you go live" is stamped on.

   One snippet, this stylesheet and rl-scenes.js (which plays it once, when
   it scrolls into view), so the merchant app can port it as it is:

   .rl-kit                        the picture (role="img" with a label)
     .rl-kit__stage               data-rl-scene="kit"
       .rl-kit__scene             the counter, the card and the two views
         .rl-kit__counter         the counter top
         .rl-kit__shadow          the card's shadow on the counter
         .rl-kit__card            the stand-up card, folded along the top
           .rl-kit__inner         the inside of the back half (seen open)
           .rl-kit__flap          the front half, which lifts to open it
             .rl-kit__face--front   the shop's poster, facing customers
             .rl-kit__face--inside  the steps inside, with two QR squares
         .rl-kit__view--inside    the inside, close up: the steps for staff
         .rl-kit__view--till      the back, close up: what to say at the
                                  till; [data-trade-till] holds the line
                                  (the trade's own on the landing pages, the
                                  shop's own in the app)
       .rl-kit__tag (x3) > span   "Your poster on the front", ...
       .rl-kit__posted > span     "Posted free when you go live"

   Sizes are in cqw (1cqw is 1% of the picture's width), so the picture
   scales as a whole; positions are numbers in those units, set below for
   phones and again for wider pictures. The markup alone shows the finished
   picture: without JavaScript, with reduced motion and when printed nothing
   moves. rl-scenes.js adds .rl-scene and .is-pending (the animations wait,
   holding their first frame: the card still above the picture), then swaps
   in .is-playing. The stage's own children always finish untransformed and
   fully opaque; tilts live on the elements inside them. */

.rl-kit {
  --kit-teal: #0F2D32;
  --kit-teal-soft: #143F47;
  --kit-ink: #120C0B;
  --kit-orange: #F4AB4B;
  --kit-cream: #FFF0DE;
  --kit-cream-deep: #FEEAD7;
  --kit-paper: #FFF8EF;
  --kit-muted: #53666B;
  --kit-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --kit-font: var(--rl-font-heading, "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif);
  container-type: inline-size;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

/* Phones first. Positions and sizes are numbers of cqw. */
.rl-kit__stage {
  /* The card (an A5 landscape half): left, top, width and height, and
     where the counter starts. Opened, the front half lifts as far above
     the card's top as the card is tall, so it needs that room. */
  --kx: 26;
  --ky: 32.1;
  --kw: 48;
  --kh: 33.9;
  --counter: 62;
  /* Type: the till line, card headings and small print on the card. */
  --kit-line: max(8px, 3.25cqw);
  --kit-head: max(6px, 2.3cqw);
  --kit-small: max(5px, 1.55cqw);
  position: relative;
  aspect-ratio: 100 / 116;
  overflow: hidden;
  border-radius: clamp(1rem, 4.4cqw, 1.5rem);
  background:
    radial-gradient(62% 40% at 50% 92%, rgba(244, 171, 75, 0.2), transparent 72%),
    linear-gradient(180deg, #FFF8F0 0%, #FDEBD9 100%);
  box-shadow: inset 0 0 0 1px rgba(15, 45, 50, 0.06);
  font-family: var(--kit-font);
  line-height: 1.2;
}

.rl-kit__scene {
  position: absolute;
  inset: 0;
  isolation: isolate;
}

/* ---------- The counter ---------- */

.rl-kit__counter {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: calc(var(--counter) * 1cqw);
  bottom: 0;
  border-top: 1px solid rgba(15, 45, 50, 0.08);
  background:
    linear-gradient(180deg, #FFF5E8 0, #FFF5E8 0.8cqw, #F4DABB 0.8cqw, #EDCCA8 100%);
}

.rl-kit__shadow {
  position: absolute;
  z-index: 1;
  left: calc((var(--kx) - var(--kw) * 0.08) * 1cqw);
  width: calc(var(--kw) * 1.16 * 1cqw);
  top: calc((var(--ky) + var(--kh) - var(--kh) * 0.06) * 1cqw);
  height: calc(var(--kh) * 0.16 * 1cqw);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15, 45, 50, 0.3), transparent);
}

/* ---------- The stand-up card ---------- */

.rl-kit__card {
  position: absolute;
  z-index: 2;
  left: calc(var(--kx) * 1cqw);
  top: calc(var(--ky) * 1cqw);
  width: calc(var(--kw) * 1cqw);
  height: calc(var(--kh) * 1cqw);
  perspective: 160cqw;
  transform-origin: 50% 100%;
}

.rl-kit__inner,
.rl-kit__flap,
.rl-kit__face {
  position: absolute;
  inset: 0;
}

/* The inside of the back half: seen only while the card is open. */
.rl-kit__inner {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  overflow: hidden;
  padding: 7% 8% 0;
  border-radius: 0.6cqw;
  background: #FBEEDD;
  box-shadow: 0 0 0 1px rgba(15, 45, 50, 0.1);
  color: var(--kit-teal);
  font-size: var(--kit-small);
  font-weight: 800;
}

.rl-kit__inner-head {
  display: block;
  font-size: var(--kit-head);
  line-height: 1.1;
}

/* Lines of text, drawn as bars. */
.rl-kit__bars {
  display: grid;
  gap: 0.55em;
}

.rl-kit__bars > span {
  display: block;
  height: 0.6em;
  border-radius: 999px;
  background: rgba(15, 45, 50, 0.18);
}

.rl-kit__bars > span:nth-child(2) { margin-right: 22%; }
.rl-kit__bars > span:nth-child(3) { margin-right: 40%; }

.rl-kit__inner::after {
  content: "";
  margin: auto -9% 0;
  height: 18%;
  background: var(--kit-teal);
}

/* The front half turns up about the fold to open the card. */
.rl-kit__flap {
  z-index: 1;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}

.rl-kit__face {
  overflow: hidden;
  border-radius: 0.6cqw;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* The front: the shop's poster on a cream mat, centred on teal, with an
   arrow to the QR code on one side and a stamp card on the other. */
.rl-kit__face--front {
  background: linear-gradient(180deg, var(--kit-teal-soft) 0%, var(--kit-teal) 100%);
  box-shadow: 0 1.2cqw 2.6cqw rgba(15, 45, 50, 0.24), inset 0 0.45cqw 0 rgba(255, 255, 255, 0.1);
}

.rl-kit__face--front img {
  position: absolute;
  top: 7%;
  left: 50%;
  display: block;
  width: auto;
  height: 86%;
  aspect-ratio: 320 / 453;
  transform: translateX(-50%);
  object-fit: cover;
  border: 0.45cqw solid #FFF7EC;
  border-radius: 0.35cqw;
  background: #FFF7EC;
}

.rl-kit__face--front::before,
.rl-kit__face--front::after {
  content: "";
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.rl-kit__face--front::before {
  left: 6%;
  top: 55%;
  width: 16%;
  height: 12%;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'><path d='M3 10 H35 M27 3 L36 10 L27 17' fill='none' stroke='%23F4AB4B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.rl-kit__face--front::after {
  right: 8%;
  top: 30%;
  width: 11%;
  height: 40%;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 38'><g fill='%23F4AB4B'><circle cx='5' cy='5' r='3.6'/><circle cx='15' cy='5' r='3.6'/><circle cx='5' cy='15' r='3.6'/><circle cx='15' cy='15' r='3.6'/><circle cx='5' cy='25' r='3.6'/></g><g fill='none' stroke='%23FFF0DE' stroke-opacity='0.6' stroke-width='1.2'><circle cx='15' cy='25' r='3.2'/><circle cx='5' cy='34' r='3.2'/><circle cx='15' cy='34' r='3.2'/></g></svg>");
}

/* The inside of the front half: printed so it reads the right way up once
   the half has turned up over the fold. */
.rl-kit__face--inside {
  display: flex;
  flex-direction: column;
  padding: 6% 7% 5%;
  background: var(--kit-paper);
  box-shadow: 0 0 0 1px rgba(15, 45, 50, 0.1);
  color: var(--kit-teal);
  transform: rotateX(180deg);
}

.rl-kit__inside-head {
  display: block;
  margin-bottom: 0.4em;
  font-size: var(--kit-head);
  font-weight: 800;
  line-height: 1.1;
}

.rl-kit__face--inside .rl-kit__note-body {
  padding: 0;
  font-size: var(--kit-small);
}

/* ---------- The two close-ups: the inside and the till side ---------- */

.rl-kit__view {
  position: absolute;
  left: calc(var(--x) * 1cqw);
  top: calc(var(--y) * 1cqw);
  width: calc(var(--w) * 1cqw);
  height: calc(var(--h) * 1cqw);
  z-index: 3;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.1cqw;
  background: var(--kit-paper);
  box-shadow: 0 1.4cqw 3cqw rgba(15, 45, 50, 0.2), 0 0 0 1px rgba(15, 45, 50, 0.08);
  transform: rotate(var(--r, 0deg));
  /* Where each starts, at the card's middle, as an offset from where it settles. */
  --in-x: calc((var(--kx) + var(--kw) / 2 - var(--x) - var(--w) / 2) * 1cqw);
  --in-y: calc((var(--ky) + var(--kh) / 2 - var(--y) - var(--h) / 2) * 1cqw);
}

.rl-kit__view--inside { --x: 3; --y: 75; --w: 45.5; --h: 28.4; --r: -2.5deg; }
.rl-kit__view--till { --x: 51.5; --y: 76; --w: 45.5; --h: 28.4; --r: 2.5deg; }

.rl-kit__card-head {
  display: block;
  padding: 0.7em 0.95em 0.62em;
  border-bottom: 0.45cqw solid var(--kit-orange);
  background: var(--kit-teal);
  color: var(--kit-cream);
  font-size: var(--kit-head);
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.rl-kit__till-line {
  display: block;
  flex: 1;
  margin: 0.6em 0.7em 0;
  padding-left: 0.5em;
  border-left: 0.55cqw solid var(--kit-orange);
  color: var(--kit-teal);
  font-size: var(--kit-line);
  font-weight: 800;
  line-height: 1.17;
  text-wrap: pretty;
}

.rl-kit__till-line::before {
  content: "\201C";
}

.rl-kit__till-line::after {
  content: "\201D";
}

.rl-kit__card-foot {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 0 0.95em 0.75em;
  color: var(--kit-muted);
  font-size: var(--kit-head);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* A small scan mark before "Scan every visit". */
.rl-kit__card-foot::before {
  content: "";
  flex: 0 0 auto;
  width: 1.3em;
  height: 1.3em;
  border-radius: 0.3em;
  background:
    linear-gradient(var(--kit-orange), var(--kit-orange)) center / 70% 16% no-repeat,
    var(--kit-teal);
}

.rl-kit__note-body {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 4%;
  padding: 0 6% 0 6%;
}

.rl-kit__steps {
  display: grid;
  flex: 1;
  gap: 0.55em;
  font-size: var(--kit-head);
}

.rl-kit__face--inside .rl-kit__steps {
  font-size: inherit;
}

/* Numbered steps, drawn as lines of text. */
.rl-kit__step {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.rl-kit__step::before {
  content: "";
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: var(--kit-orange);
}

.rl-kit__step::after {
  content: "";
  flex: 1;
  height: 0.55em;
  border-radius: 999px;
  background: rgba(15, 45, 50, 0.2);
}

.rl-kit__step:nth-child(2)::after {
  margin-right: 18%;
}

.rl-kit__step:nth-child(3)::after {
  margin-right: 34%;
}

/* QR-like squares: a picture of a code, not one that scans. */
.rl-kit__qr {
  flex: 0 0 auto;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 12%;
  background: #FFFFFF url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21' shape-rendering='crispEdges'><path fill='%230F2D32' d='M0 0h7v1h-7zM11 0h1v1h-1zM14 0h7v1h-7zM0 1h1v1h-1zM6 1h1v1h-1zM9 1h2v1h-2zM14 1h1v1h-1zM20 1h1v1h-1zM0 2h1v1h-1zM2 2h3v1h-3zM6 2h1v1h-1zM9 2h4v1h-4zM14 2h1v1h-1zM16 2h3v1h-3zM20 2h1v1h-1zM0 3h1v1h-1zM2 3h3v1h-3zM6 3h1v1h-1zM10 3h1v1h-1zM14 3h1v1h-1zM16 3h3v1h-3zM20 3h1v1h-1zM0 4h1v1h-1zM2 4h3v1h-3zM6 4h1v1h-1zM10 4h1v1h-1zM14 4h1v1h-1zM16 4h3v1h-3zM20 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM8 5h1v1h-1zM10 5h2v1h-2zM14 5h1v1h-1zM20 5h1v1h-1zM0 6h7v1h-7zM8 6h1v1h-1zM11 6h2v1h-2zM14 6h7v1h-7zM12 7h1v1h-1zM0 8h1v1h-1zM10 8h1v1h-1zM13 8h2v1h-2zM17 8h1v1h-1zM20 8h1v1h-1zM0 9h6v1h-6zM8 9h1v1h-1zM12 9h2v1h-2zM19 9h1v1h-1zM0 10h3v1h-3zM4 10h1v1h-1zM11 10h1v1h-1zM13 10h2v1h-2zM17 10h2v1h-2zM0 11h2v1h-2zM3 11h2v1h-2zM6 11h1v1h-1zM9 11h2v1h-2zM12 11h1v1h-1zM16 11h1v1h-1zM18 11h1v1h-1zM1 12h1v1h-1zM3 12h2v1h-2zM6 12h1v1h-1zM11 12h1v1h-1zM13 12h1v1h-1zM16 12h1v1h-1zM18 12h1v1h-1zM20 12h1v1h-1zM8 13h3v1h-3zM15 13h2v1h-2zM19 13h2v1h-2zM0 14h7v1h-7zM10 14h1v1h-1zM12 14h1v1h-1zM14 14h1v1h-1zM16 14h1v1h-1zM20 14h1v1h-1zM0 15h1v1h-1zM6 15h1v1h-1zM8 15h1v1h-1zM13 15h1v1h-1zM15 15h5v1h-5zM0 16h1v1h-1zM2 16h3v1h-3zM6 16h1v1h-1zM8 16h2v1h-2zM11 16h2v1h-2zM17 16h4v1h-4zM0 17h1v1h-1zM2 17h3v1h-3zM6 17h1v1h-1zM8 17h1v1h-1zM14 17h5v1h-5zM20 17h1v1h-1zM0 18h1v1h-1zM2 18h3v1h-3zM6 18h1v1h-1zM8 18h1v1h-1zM10 18h2v1h-2zM13 18h1v1h-1zM16 18h3v1h-3zM0 19h1v1h-1zM6 19h1v1h-1zM8 19h4v1h-4zM13 19h5v1h-5zM19 19h1v1h-1zM0 20h7v1h-7zM8 20h2v1h-2zM13 20h2v1h-2zM17 20h1v1h-1z'/></svg>") center / 78% no-repeat;
  box-shadow: 0 0 0 1px rgba(15, 45, 50, 0.14);
}

/* ---------- Labels and the closing line ---------- */

/* Each label sits in a wide, still box centred on its point; the pill
   inside is what appears. */
.rl-kit__tag {
  position: absolute;
  left: calc((var(--tx) - 30) * 1cqw);
  top: calc(var(--ty) * 1cqw);
  width: 60cqw;
  max-width: none;
  margin: 0;
  text-align: center;
  pointer-events: none;
}

.rl-kit__tag > span {
  display: inline-block;
  padding: 0.34em 0.75em;
  border: 1px solid rgba(15, 45, 50, 0.14);
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 0.3em 0.8em rgba(15, 45, 50, 0.1);
  color: var(--kit-teal);
  font-size: clamp(10px, 3.4cqw, 12.5px);
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.rl-kit__tag--front { --tx: 50; --ty: 24.6; }
.rl-kit__tag--inside { --tx: 25.75; --ty: 107; }
.rl-kit__tag--till { --tx: 74.25; --ty: 107; }

/* "Posted free when you go live": on phones, stamped across the space the
   card opens into; on wider pictures, on the counter under the card. */
.rl-kit__posted {
  position: absolute;
  left: 0;
  width: 100cqw;
  top: 9cqw;
  z-index: 2;
  max-width: none;
  margin: 0;
  text-align: center;
  pointer-events: none;
}

.rl-kit__posted > span {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.45em 0.85em;
  border-radius: 0.6em;
  background: var(--kit-orange);
  box-shadow: 0 0.35em 0.9em rgba(15, 45, 50, 0.24), inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
  color: var(--kit-teal);
  font-size: clamp(10px, 3.5cqw, 13.5px);
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  transform: rotate(-3deg);
}

/* A tick in a circle. */
.rl-kit__posted > span::before {
  content: "\2713";
  display: inline-grid;
  place-items: center;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  background: var(--kit-teal);
  color: var(--kit-orange);
  font-size: 0.82em;
}

/* ---------- Wider pictures: the card on the left, close-ups on the right ---------- */

@container (min-width: 500px) {
  .rl-kit__stage {
    --kx: 6;
    --ky: 24.2;
    --kw: 34;
    --kh: 24;
    --counter: 44.6;
    --kit-line: max(8px, 1.78cqw);
    --kit-head: max(6px, 1.24cqw);
    --kit-small: max(5px, 0.95cqw);
    aspect-ratio: 100 / 56;
  }

  .rl-kit__view--inside { --x: 49.5; --y: 3; --w: 46; --h: 20; --r: 2deg; }
  .rl-kit__view--till { --x: 51; --y: 30.4; --w: 44; --h: 19; --r: -2deg; }

  .rl-kit__tag > span,
  .rl-kit__posted > span {
    font-size: clamp(10px, 2.2cqw, 12.5px);
  }

  .rl-kit__posted {
    left: calc(var(--kx) * 1cqw);
    width: calc(var(--kw) * 1cqw);
    top: calc((var(--ky) + var(--kh) + 1.8) * 1cqw);
  }

  .rl-kit__tag--front { --tx: 23; --ty: 16.9; }
  .rl-kit__tag--inside { --tx: 72.5; --ty: 24.2; }
  .rl-kit__tag--till { --tx: 73; --ty: 50.6; }
}

/* ---------- The animation ---------- */

@media screen and (prefers-reduced-motion: no-preference) {
  .rl-scene[data-rl-scene="kit"].is-pending,
  .rl-scene[data-rl-scene="kit"].is-pending * {
    animation-play-state: paused !important;
  }

  /* It drops onto the counter and settles. */
  .rl-scene[data-rl-scene="kit"] .rl-kit__card {
    animation: rl-kit-drop 680ms var(--kit-ease) both;
  }

  .rl-scene[data-rl-scene="kit"] .rl-kit__shadow {
    animation: rl-kit-shadow 680ms var(--kit-ease) both;
  }

  /* It opens to show the steps inside, then closes with the poster out. */
  .rl-scene[data-rl-scene="kit"] .rl-kit__flap {
    animation: rl-kit-open 1400ms cubic-bezier(0.45, 0, 0.3, 1) 760ms both;
  }

  .rl-scene[data-rl-scene="kit"] .rl-kit__view {
    animation: rl-kit-rise 720ms var(--kit-ease) both;
  }

  .rl-scene[data-rl-scene="kit"] .rl-kit__view--inside { animation-delay: 2120ms; }
  .rl-scene[data-rl-scene="kit"] .rl-kit__view--till { animation-delay: 2240ms; }

  .rl-scene[data-rl-scene="kit"] .rl-kit__tag > span {
    animation: rl-kit-tag 360ms var(--kit-ease) both;
    animation-delay: calc(2700ms + var(--rl-i, 1) * 100ms);
  }

  .rl-scene[data-rl-scene="kit"] .rl-kit__posted > span {
    animation: rl-kit-stamp 480ms cubic-bezier(0.2, 0.8, 0.25, 1.15) 3100ms both;
  }
}

@keyframes rl-kit-drop {
  0% {
    opacity: 0;
    transform: translateY(-46cqw) rotate(-7deg);
  }

  22% {
    opacity: 1;
  }

  72% {
    transform: translateY(0.6cqw) rotate(0.6deg) scaleY(0.97);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes rl-kit-shadow {
  0% {
    opacity: 0;
    transform: scaleX(0.35);
  }

  72% {
    opacity: 1;
    transform: scaleX(1.06);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

/* Up and over the fold, a pause to read, then back down. */
@keyframes rl-kit-open {
  0% {
    transform: rotateX(0deg);
  }

  32% {
    transform: rotateX(180deg);
  }

  66% {
    transform: rotateX(180deg);
  }

  100% {
    transform: rotateX(0deg);
  }
}

/* From the card's middle, over to its place, then settle. */
@keyframes rl-kit-rise {
  0% {
    opacity: 0;
    transform: translate(var(--in-x), var(--in-y)) scale(0.3) rotate(0deg);
  }

  30% {
    opacity: 1;
  }

  80% {
    transform: translate(0, -0.6cqw) scale(1.02) rotate(calc(var(--r) * 1.15));
  }

  100% {
    opacity: 1;
    transform: rotate(var(--r));
  }
}

@keyframes rl-kit-tag {
  0% {
    opacity: 0;
    transform: translateY(0.7em) scale(0.9);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes rl-kit-stamp {
  0% {
    opacity: 0;
    transform: scale(1.7) rotate(-12deg);
  }

  55% {
    opacity: 1;
    transform: scale(0.94) rotate(-2deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(-3deg);
  }
}

/* ---------- The words beside the picture ---------- */

/* The kit, item by item, with ticks. */
.rl-kit-list {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.rl-kit-list li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--rl-text-strong, #0F2D32);
  font-weight: 700;
  line-height: 1.45;
}

.rl-kit-list li::before {
  content: "\2713";
  position: absolute;
  top: 0.12em;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #F4AB4B;
  color: #0F2D32;
  font-size: 0.7rem;
  font-weight: 900;
}

/* The words beside the picture, in pages without a layout of their own. */
.rl-kit-panel {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
}

.rl-kit-panel__copy {
  min-width: 0;
}

.rl-kit-panel__copy h2 {
  max-width: 16ch;
  text-wrap: balance;
}

.rl-kit-panel__lede {
  max-width: 46ch;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.6;
}

.rl-kit-panel__note {
  max-width: 52ch;
  color: var(--rl-text-muted, #4C5A5F);
  font-size: 0.86rem;
  line-height: 1.55;
}

@media (min-width: 900px) {
  .rl-kit-panel {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
}