/* ============================================================
   Receipt — case study
   Figma: IG Post – Second Set, frame 1014:1512 (1400 x 5179)
   Panel follows the same pinned-accordion pattern as Baseline.
   ============================================================ */

.case-rc {
  --baseline-black: #060608;
  --rc-green: #c7ec5e;
  --rc-pink:  #f2399c;
  --rc-purple:#c65eec;
  --rc-lpink: #ec5eb3;

  --font-pixel: "Pixelta", "Pixelify Sans", "Courier New", monospace;
  --font-pixelify: "Pixelify Sans", "Courier New", monospace;
  --font-shedry: "Shedry", "Instrument Serif", Georgia, serif;

  --h: 5179;
  background: var(--baseline-black);
  overflow: clip;              /* clip, not hidden — keeps sticky working */
}

.case-rc .t { margin: 0; line-height: normal; word-break: break-word; color: #fff; }
.case-rc .t-in { font-family: var(--font-sans); font-variation-settings: "wdth" 100; }
.case-rc .t.abs { height: auto; }

@font-face {
  font-family: "Pixelta";
  src: url("assets/fonts/Pixelta-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* This page uses --font-shedry for the sachet type but does not load
   motion.css, which is where the other pages pick Shedry up. */
@font-face {
  font-family: "Shedry";
  src: url("assets/fonts/Shedry-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Shedry";
  src: url("assets/fonts/Shedry-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- Pinned panel (same pattern as Baseline) ---------- */
.rc-panel {
  position: sticky;
  top: calc(40 * var(--px));
  z-index: 2;
  margin-left: calc(23 * var(--px));
  width: calc(470 * var(--px));
  height: auto;
  max-height: calc(100vh - (80 * var(--px)));
  background: var(--baseline-black);
  border: calc(2 * var(--px)) solid #fff;
  border-radius: calc(40 * var(--px));
  /* 2px border + 28px padding = the 30px content inset Figma uses (x = 53 on
     a panel whose left edge is 23). */
  padding: calc(10 * var(--px)) calc(28 * var(--px)) calc(28 * var(--px));
  display: flex; flex-direction: column;
  overflow: hidden;
}
.rc-panel-head { display: flex; align-items: flex-start; justify-content: space-between; flex: 0 0 auto; }
.rc-wordmark {
  margin: 0;
  font-family: var(--font-pixel);
  font-size: calc(64 * var(--px));
  line-height: 0.9;
  color: var(--rc-pink);
}
.rc-year {
  margin-top: calc(21 * var(--px));
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-weight: 500; font-size: calc(20 * var(--px)); color: #fff; line-height: 1.2;
}
.rc-intro {
  margin: calc(35 * var(--px)) 0 0;
  width: calc(328 * var(--px));
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-size: calc(20 * var(--px)); line-height: 1.25; color: #fff;
  flex: 0 0 auto;
}
.rc-acc-list {
  margin-top: calc(34 * var(--px));
  flex: 0 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.35) transparent;
}
.rc-acc-list::-webkit-scrollbar { width: calc(4 * var(--px)); }
.rc-acc-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: calc(4 * var(--px)); }
.rc-item + .rc-item { margin-top: calc(22 * var(--px)); }

.rc-acc {
  display: flex; align-items: baseline; justify-content: space-between;
  width: 100%; margin: 0; padding: 0;
  background: none; border: 0; text-align: left; cursor: pointer;
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-weight: 500; font-size: calc(24 * var(--px));
  letter-spacing: calc(-0.72 * var(--px)); line-height: 1.2; color: #fff;
  transition: color 180ms ease, opacity 180ms ease;
}
.rc-acc:hover { color: var(--octodraws-icon-purple); }
.rc-acc:focus-visible { outline: calc(2 * var(--px)) solid #fff; outline-offset: calc(6 * var(--px)); }
.rc-acc .sign { flex: 0 0 auto; margin-left: calc(16 * var(--px)); }

.rc-body {
  display: grid; grid-template-rows: 0fr; padding-top: 0;
  transition: grid-template-rows 380ms cubic-bezier(0.4, 0, 0.2, 1),
              padding-top 380ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rc-body > div { overflow: hidden; }
.rc-body p {
  margin: 0;
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-size: calc(19 * var(--px)); letter-spacing: calc(-0.38 * var(--px));
  line-height: 1.35; color: #fff;
  opacity: 0; transition: opacity 220ms ease;
}
.rc-body p + p { margin-top: calc(12 * var(--px)); }
.rc-body.is-open { grid-template-rows: 1fr; padding-top: calc(14 * var(--px)); }
.rc-body.is-open p { opacity: 1; transition: opacity 280ms ease 110ms; }

.rc-next-row {
  flex: 0 0 auto; margin-top: calc(24 * var(--px)); padding-top: calc(20 * var(--px));
  border-top: calc(1 * var(--px)) solid rgba(255,255,255,0.18);
  display: block; text-decoration: none; transition: color 180ms ease;
}
.rc-next-row:hover,
.rc-next-row:hover .rc-next-label { color: var(--octodraws-icon-purple); }
.rc-next-row:focus-visible { outline: calc(2 * var(--px)) solid #fff; outline-offset: calc(4 * var(--px)); }
/* Figma places the five parts at fixed x positions rather than spacing them
   evenly, so they are positioned rather than laid out with flex. Coordinates
   are Figma's, shifted so 0 = the panel's 30px content inset. */
.rc-next-label {
  display: block; margin-left: calc(-1 * var(--px));
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-weight: 500; font-size: calc(24 * var(--px)); letter-spacing: calc(-0.72 * var(--px));
  color: #fff; line-height: 1.2;
}
.rc-next-line {
  display: block; position: relative;
  margin-top: calc(7 * var(--px)); height: calc(23 * var(--px));
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-size: calc(15 * var(--px)); color: #fff; line-height: 1.2;
}
.rc-next-line > * { position: absolute; }
.rc-badge {
  left: calc(-1 * var(--px)); top: 0;
  width: calc(21 * var(--px)); height: calc(23 * var(--px));
  background: #54110f; border-radius: calc(4 * var(--px)); overflow: hidden;
}
/* Figma masks a 17.159 x 13.611 box — not the tile — to the shape of an "m",
   and the photo's percentages are relative to that box. The mask sits 15 x 13
   at 1.078, 0.319 inside it, which is what puts the letter at 3, 5 on the
   tile. Applied to the tile instead, the whole frame is off. */
.rc-badge-m {
  position: absolute;
  left: calc(1.922 * var(--px)); top: calc(4.681 * var(--px));
  width: calc(17.159 * var(--px)); height: calc(13.611 * var(--px));
  overflow: hidden;
  mask-image: url("assets/receipt/image299.svg");
  -webkit-mask-image: url("assets/receipt/image299.svg");
  mask-size: calc(15 * var(--px)) calc(13 * var(--px));
  -webkit-mask-size: calc(15 * var(--px)) calc(13 * var(--px));
  mask-position: calc(1.078 * var(--px)) calc(0.319 * var(--px));
  -webkit-mask-position: calc(1.078 * var(--px)) calc(0.319 * var(--px));
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
}
.rc-badge img {
  position: absolute; max-width: none;
  left: 3.71%; top: -34.94%; width: 92.54%; height: 175%;
}
.rc-next-name { left: calc(24 * var(--px)); top: calc(3 * var(--px)); font-weight: 500; }
.rc-next-type { left: calc(153 * var(--px)); top: calc(3 * var(--px)); width: calc(105 * var(--px)); opacity: 0.75; }
.rc-next-year {
  right: calc(-2 * var(--px)); top: calc(3 * var(--px));
  width: calc(105 * var(--px)); text-align: right; opacity: 0.75;
}

/* ---------- Cards ---------- */
.rc-card { border: calc(2 * var(--px)) solid #000; border-radius: calc(40 * var(--px)); overflow: hidden; }
.rc-crop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.rc-crop img { position: absolute; max-width: none; }

/* 1 — wordmark */
.rc-c1 { --l: 538; --t: 40; --w: 805; --h: 390; background: var(--rc-green); }
.rc-c1 p {
  position: absolute; margin: 0;
  left: calc(116 * var(--px)); top: calc(84 * var(--px));
  width: calc(570 * var(--px)); height: calc(213 * var(--px));
  font-family: var(--font-pixel); font-size: calc(200 * var(--px));
  color: var(--rc-pink); text-align: center; line-height: 1;
}

/* 2 — white card + icon grid */
.rc-c2 { --l: 538; --t: 458; --w: 445; --h: 390; background: #fff; }
.rc-tile { --w: 104; --h: 114; border-radius: calc(10 * var(--px)); overflow: hidden; }

/* Figma nests each face in its own inset box inside the tile — insets are in
   Figma's own order (top right bottom left). The box is a plain div, so
   `inset` resolves on it; the img then fills the box. The inset cannot go
   straight on the img: an absolutely positioned replaced element ignores
   right/bottom while its width/height are auto and falls back to its
   intrinsic size. */
.rc-ico { position: absolute; inset: 24.37% 20.36% 24.68% 20%; }
.rc-ico img { position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; max-width: none; }
.rc-ico--a { inset: 24.56% 21.83% 24.7% 21.15%; }
.rc-ico--b { inset: 23.73% 20.33% 25.32% 19.98%; }
.rc-ico--c { inset: 24.68% 20.31% 24.37% 20%; }
.rc-ico--full { inset: 0; }

/* image 163 (1017:4286) is a sprite sheet of faces. Figma shows one of them
   through a 60 x 58 window centred in the tile, with the sheet blown up to
   468% / 453% and pushed up and left — so the window lands on a single face. */
.rc-ico--win {
  inset: auto; overflow: hidden;
  left: 50%; top: 50%;
  width: calc(60 * var(--px)); height: calc(58 * var(--px));
  transform: translate(-50%, -50%);
}
.rc-ico--win img {
  inset: auto;
  left: -122.26%; top: -352.82%; width: 468.11%; height: 452.88%;
}

/* Each tile flickers on like a neon sign, then holds lit for the rest of the
   8s loop. Same 400ms flicker throughout; only the start moves, by 500ms per
   tile across the grid. Transcribed from Figma's timeline. */
.rc-fl0, .rc-fl1, .rc-fl2, .rc-fl3, .rc-fl4,
.rc-fl5, .rc-fl6, .rc-fl7, .rc-fl8 { animation: 8s linear infinite; }
.rc-fl0 { animation-name: rc-flick-0; }
.rc-fl1 { animation-name: rc-flick-1; }
.rc-fl2 { animation-name: rc-flick-2; }
.rc-fl3 { animation-name: rc-flick-3; }
.rc-fl4 { animation-name: rc-flick-4; }
.rc-fl5 { animation-name: rc-flick-5; }
.rc-fl6 { animation-name: rc-flick-6; }
.rc-fl7 { animation-name: rc-flick-7; }
.rc-fl8 { animation-name: rc-flick-8; }

@keyframes rc-flick-0 {
  0% { opacity: 0 } 0.625% { opacity: .8 } 1.25% { opacity: 0 }
  2.125% { opacity: .6 } 2.75% { opacity: .1 } 3.5% { opacity: .9 }
  4.125% { animation-timing-function: ease-out; opacity: .4 }
  5% { opacity: 1 } 100% { opacity: 1 }
}
@keyframes rc-flick-1 {
  0%, 6.25% { opacity: 0 } 6.875% { opacity: .8 } 7.5% { opacity: 0 }
  8.375% { opacity: .6 } 9% { opacity: .1 } 9.75% { opacity: .9 }
  10.375% { animation-timing-function: ease-out; opacity: .4 }
  11.25% { opacity: 1 } 100% { opacity: 1 }
}
@keyframes rc-flick-2 {
  0%, 12.5% { opacity: 0 } 13.125% { opacity: .8 } 13.75% { opacity: 0 }
  14.625% { opacity: .6 } 15.25% { opacity: .1 } 16% { opacity: .9 }
  16.625% { animation-timing-function: ease-out; opacity: .4 }
  17.5% { opacity: 1 } 100% { opacity: 1 }
}
@keyframes rc-flick-3 {
  0%, 18.75% { opacity: 0 } 19.375% { opacity: .8 } 20% { opacity: 0 }
  20.875% { opacity: .6 } 21.5% { opacity: .1 } 22.25% { opacity: .9 }
  22.875% { animation-timing-function: ease-out; opacity: .4 }
  23.75% { opacity: 1 } 100% { opacity: 1 }
}
@keyframes rc-flick-4 {
  0%, 25% { opacity: 0 } 25.625% { opacity: .8 } 26.25% { opacity: 0 }
  27.125% { opacity: .6 } 27.75% { opacity: .1 } 28.5% { opacity: .9 }
  29.125% { animation-timing-function: ease-out; opacity: .4 }
  30% { opacity: 1 } 100% { opacity: 1 }
}
@keyframes rc-flick-5 {
  0%, 31.25% { opacity: 0 } 31.875% { opacity: .8 } 32.5% { opacity: 0 }
  33.375% { opacity: .6 } 34% { opacity: .1 } 34.75% { opacity: .9 }
  35.375% { animation-timing-function: ease-out; opacity: .4 }
  36.25% { opacity: 1 } 100% { opacity: 1 }
}
@keyframes rc-flick-6 {
  0%, 37.5% { opacity: 0 } 38.125% { opacity: .8 } 38.75% { opacity: 0 }
  39.625% { opacity: .6 } 40.25% { opacity: .1 } 41% { opacity: .9 }
  41.625% { animation-timing-function: ease-out; opacity: .4 }
  42.5% { opacity: 1 } 100% { opacity: 1 }
}
@keyframes rc-flick-7 {
  0%, 43.75% { opacity: 0 } 44.375% { opacity: .8 } 45% { opacity: 0 }
  45.875% { opacity: .6 } 46.5% { opacity: .1 } 47.25% { opacity: .9 }
  47.875% { animation-timing-function: ease-out; opacity: .4 }
  48.75% { opacity: 1 } 100% { opacity: 1 }
}
@keyframes rc-flick-8 {
  0%, 50% { opacity: 0 } 50.625% { opacity: .8 } 51.25% { opacity: 0 }
  52.125% { opacity: .6 } 52.75% { opacity: .1 } 53.5% { opacity: .9 }
  54.125% { animation-timing-function: ease-out; opacity: .4 }
  55% { opacity: 1 } 100% { opacity: 1 }
}

/* 3 — typography */
.rc-c3 { --l: 1010; --t: 458; --w: 333; --h: 390; background: #fff; }
.rc-c3-top { --l: -2; --t: -2;  --w: 333; --h: 195; background: #fff; }
.rc-c3-bot { --l: -2; --t: 193; --w: 333; --h: 195; background: var(--rc-pink); }
.rc-c3 p, .rc-c3 div.spec { position: absolute; margin: 0; }
.rc-s1 { --l: 18;  --t: 20;  --w: 124; --h: 53; font-size: calc(24 * var(--px)); color: #000; }
.rc-s2 { --l: 203; --t: 96;  --w: 100; --h: 80; font-size: calc(81 * var(--px)); color: #000; text-align: right; font-family: var(--font-pixel); }
.rc-s3 { --l: 199; --t: 280; --w: 104; --h: 91; font-size: calc(81 * var(--px)); color: #fff; text-align: right; font-family: var(--font-shedry); }
.rc-s4 { --l: 18;  --t: 89;  --w: 124; --h: 14; font-size: calc(11 * var(--px)); color: #000; }
.rc-s5 { --l: 228; --t: 28;  --w: 76;  --h: 14; font-size: calc(14 * var(--px)); color: #000; text-align: right; font-family: var(--font-shedry); }
.rc-s6 { --l: 190; --t: 206; --w: 114; --h: 22; font-size: calc(14 * var(--px)); color: #fff; text-align: right; font-family: var(--font-shedry); }
.rc-s7 { --l: 18;  --t: 275; --w: 124; --h: 91; font-size: calc(11 * var(--px)); color: #fff; }
.rc-s7 p { position: static; line-height: calc(14 * var(--px)); }
.rc-s8 { --l: 18;  --t: 205; --w: 124; --h: 62; font-size: calc(24 * var(--px)); color: #fff; }

/* 4 — colour bands */
.rc-c4 { --l: 538; --t: 890; --w: 805; --h: 390; }
.rc-bands { --l: -2; --t: -2; --w: 805; --h: 390; background: #fff; display: flex; flex-direction: column; }
.rc-band {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-weight: 600; font-size: calc(14 * var(--px));
  letter-spacing: calc(-1.12 * var(--px));
  text-transform: lowercase; color: #fff;
}

/* 5 — firefly image */
.rc-c5 { --l: 538; --t: 1322; --w: 386; --h: 422; }
.rc-c5-in { --l: -11; --t: -62; --w: 404; --h: 542; }
.rc-c5-in img { left: -0.22%; top: 9.86%; width: 100.16%; height: 100%; }

/* 6 — IG post grid */
.rc-c6 { --l: 957; --t: 1322; --w: 386; --h: 422; }
.rc-c6-in { --l: -2; --t: -2; --w: 386; --h: 422; background: #f395c6; overflow: hidden; }
.rc-ph { border-radius: calc(3.4 * var(--px)); overflow: hidden; }
.rc-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rc-blk { background: var(--rc-pink); }
.rc-lime { background: var(--rc-green); border-radius: calc(3.4 * var(--px)); }
/* Figma anchors each caption on a centre point (translate -50%), which keeps
   it on its tile whatever the fallback face does to the line box. */
.rc-t { position: absolute; margin: 0; text-transform: lowercase; line-height: 1.15; }
.rc-t--c { transform: translate(-50%, -50%); text-align: center; }
.rc-t--l { transform: translateY(-50%); text-align: left; }
.rc-t--r { transform: translate(-100%, -50%); text-align: right; }
.rc-c6 .mini { font-family: var(--font-shedry); color: var(--rc-pink); }
.rc-c6 .pix  { font-family: var(--font-pixel); }

/* 7 — laptop carousel */
.rc-c7 { --l: 538; --t: 1786; --w: 805; --h: 390; }
.rc-lid {
  --l: -2; --t: -2; --w: 805; --h: 390;
  background: #fff;
  border: calc(0.582 * var(--px)) solid #3a3a3c;
  border-radius: calc(6.985 * var(--px)) calc(6.985 * var(--px)) 0 0;
  overflow: hidden;
}
.rc-webcam { --l: 398; --t: 1.75; --w: 9.313; --h: 2.328; }
.rc-webcam img { width: 100%; height: 100%; }
.rc-screen { --l: 108.42; --t: 12.42; --w: 591.403; --h: 364.388; background: #fff; overflow: hidden; }
.rc-slide { position: absolute; inset: 0; opacity: 0; }
.rc-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rc-cursor { pointer-events: none; }
.rc-cursor i {
  position: absolute; display: block; background: #000;
  width: calc(1.746 * var(--px)); height: calc(1.746 * var(--px));
  left: calc(var(--x) * 1.746 * var(--px));
  top: calc(var(--y) * 1.746 * var(--px));
}
.rc-slide-1 { animation: rc-slide1 9s linear infinite; }
.rc-slide-2 { animation: rc-slide2 9s linear infinite; }
.rc-slide-3 { animation: rc-slide3 9s linear infinite; }
@keyframes rc-slide1 { 0%,28% { opacity:1 } 33%,95% { opacity:0 } 100% { opacity:1 } }
@keyframes rc-slide2 { 0%,28% { opacity:0 } 33%,61% { opacity:1 } 66%,100% { opacity:0 } }
@keyframes rc-slide3 { 0%,61% { opacity:0 } 66%,95% { opacity:1 } 100% { opacity:0 } }

/* 8 — app strip marquee */
.rc-c8 { --l: 538; --t: 2218; --w: 805; --h: 620; }
.rc-strip {
  position: absolute; left: 0; top: calc(25 * var(--px));
  height: calc(566 * var(--px));
  display: flex; width: max-content;
  animation: rc-marquee 48s linear infinite;
  will-change: transform;
}
.rc-c8:hover .rc-strip { animation-play-state: paused; }
@keyframes rc-marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }

.rc-app {
  position: relative; flex: 0 0 auto;
  width: calc(322 * var(--px)); height: calc(566 * var(--px));
  margin-right: calc(19 * var(--px));
  border-radius: calc(40 * var(--px));
}
.rc-app-inner {
  position: absolute; left: calc(29 * var(--px)); top: calc(36 * var(--px));
  width: calc(264 * var(--px)); height: calc(494 * var(--px));
  background: #fff; border-radius: calc(40 * var(--px)); overflow: hidden;
}
.rc-app-inner p { position: absolute; margin: 0; }
.rc-app-ttl,
.rc-app-day { font-family: var(--font-sans); font-variation-settings: "wdth" 100; font-size: calc(15 * var(--px)); letter-spacing: calc(-1 * var(--px)); color: #000; }
/* Bar + its centred label (Pixelify Sans, uppercase, per Figma — the size
   drops to 16 on the screens whose label is too long for 20). */
.rc-bar {
  position: absolute;
  height: calc(29 * var(--px));
  display: flex; align-items: center; justify-content: center;
}
.rc-bar img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rc-bar span {
  position: relative;
  font-family: var(--font-pixelify); font-weight: 400;
  line-height: 1;
  color: #000; text-transform: uppercase; white-space: nowrap;
}
.rc-app-art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.rc-app-art i { position: absolute; background: #000; display: block; }
/* Positioned by the meter's own top; each screen carries its own offset. */
.rc-stat { position: absolute; width: calc(216 * var(--px)); height: calc(17 * var(--px)); }
.rc-stat span {
  position: absolute; left: 0; top: 0;
  font-family: var(--font-pixelify); font-weight: 600;
  font-size: calc(14 * var(--px)); line-height: calc(17 * var(--px));
  color: #1a1a1a; text-transform: uppercase; white-space: nowrap;
}
.rc-blocks { position: absolute; left: calc(73 * var(--px)); top: 0; width: calc(143 * var(--px)); height: calc(17 * var(--px)); }
.rc-blocks img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rc-blocks b {
  position: absolute; top: calc(0.5 * var(--px)); height: calc(16 * var(--px));
  border-style: solid; border-color: #1a1a1a;
}

/* 9 — THE DAILY RESET (a built layout, not an image) */
.rc-c9 { --l: 538; --t: 2880; --w: 805; --h: 849; background: #fff; }
.rc-routine {
  /* Figma centres this in the card's full 805 x 849 box, i.e. 52 / 25 in from
     the inside of the 2px border. */
  --l: 52; --t: 25; --w: 697; --h: 795;
  background: #faf8f0; border-radius: calc(36 * var(--px)); overflow: hidden;
  display: flex; flex-direction: column;
}
.rc-routine-head {
  height: calc(76 * var(--px)); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: calc(40 * var(--px));
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-weight: 500; font-size: calc(20 * var(--px)); color: #201b15;
  white-space: nowrap;
}
.rc-step {
  height: calc(190 * var(--px)); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(32 * var(--px)) calc(40 * var(--px));
}
.rc-step-l { display: flex; flex-direction: column; gap: calc(10 * var(--px)); flex: 1 1 0; min-width: 0; }
.rc-step-t {
  margin: 0; font-family: var(--font-pixel); font-size: calc(50 * var(--px));
  line-height: 1.1; letter-spacing: normal; color: #201b15;
}
.rc-step-s {
  margin: 0; font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-size: calc(25 * var(--px)); color: #000;
}
.rc-step-n {
  margin: 0; flex: 0 0 auto;
  font-family: var(--font-pixel); font-size: calc(50 * var(--px));
  color: #201b15; white-space: nowrap;
}
.rc-total { height: calc(149 * var(--px)); flex: 0 0 auto; position: relative; background: var(--rc-purple); }
.rc-total p {
  position: absolute; margin: 0;
  font-family: var(--font-pixel); font-size: calc(50 * var(--px));
  color: #000; white-space: nowrap;
}
.rc-total .a { left: calc(40 * var(--px));  top: calc(48 * var(--px)); }
.rc-total .b { left: calc(448 * var(--px)); top: calc(48 * var(--px)); }

/* 10 — two phone mockups */
.rc-c10 { --l: 538; --t: 3767; --w: 798; --h: 744; background: #fff; }
.rc-phone-l { --l: 54;  --t: 32; --w: 329; --h: 680; background: #fff; border: calc(2 * var(--px)) solid #000; border-radius: calc(40 * var(--px)); }
/* Figma's code export reports this stroke as white, but the frame actually
   renders it black — sampled straight off Figma's own PNG, the border reads
   rgb(0,0,0) at every edge, exactly like the left phone. Trust the render. */
.rc-phone-r { --l: 408; --t: 32; --w: 336; --h: 680; border: calc(2 * var(--px)) solid #000; border-radius: calc(40 * var(--px)); }
/* Figma draws each burger line as a zero-height node whose 2px stroke hangs
   above it (inset: -2px 0 0 0), so the stroke sits on top of the given y
   rather than below it. */
.rc-burger { position: absolute; height: calc(2 * var(--px)); transform: translateY(-100%); }
.rc-burger img { width: 100%; height: 100%; display: block; }
.rc-brand {
  position: absolute; margin: 0;
  font-family: var(--font-pixel); font-size: calc(40 * var(--px));
  letter-spacing: calc(0.5 * var(--px)); color: var(--rc-pink);
}
.rc-screen-fill { border-radius: calc(40 * var(--px)); }
.rc-shot { border-radius: 0 0 calc(40 * var(--px)) calc(40 * var(--px)); overflow: hidden; }
.rc-shot img { position: absolute; max-width: none; }
.rc-phone-h {
  position: absolute; margin: 0; text-align: center;
  font-family: var(--font-pixel); font-size: calc(32 * var(--px));
  letter-spacing: calc(0.5 * var(--px));
}
.rc-phone-h p { margin: 0; }
.rc-cta {
  position: absolute; background: #fff;
  border: calc(2 * var(--px)) solid #fff; border-radius: calc(40 * var(--px));
  display: flex; align-items: center; justify-content: center;
}
.rc-cta span {
  font-family: var(--font-sans); font-variation-settings: "wdth" 100;
  font-weight: 500; font-size: calc(12 * var(--px));
  letter-spacing: calc(0.5 * var(--px));
}

/* 11 — closing */
.rc-c11 { --l: 538; --t: 4549; --w: 798; --h: 588; border-radius: calc(40 * var(--px)); overflow: hidden; }
.rc-c11-bg { --l: -141; --t: -426; --w: 1080; --h: 1440; background: #f395c6; overflow: hidden; }
.rc-c11-img { --l: 131; --t: 413; --w: 818; --h: 610; }
.rc-c11-img img { left: -1.16%; top: -41.26%; width: 102.44%; height: 184%; }

@media (prefers-reduced-motion: reduce) {
  .case-rc * { animation: none !important; }
  .rc-slide-1 { opacity: 1; }
  .rc-body, .rc-body p { transition: none; }
}

/* The next-project label sets its own colour, so it needs the hover
   transition too or it would snap while the row around it eases. */
.rc-next-label { transition: color 180ms ease; }