/* Autoclave Clase B slide (3-nov-2026). Eastern Blue palette only; the photo's white background melts into the field
   with multiply, as the previous autoclave slide did. The field is white behind the unit, so it keeps its real colour. */
.rtg-b22l { background: radial-gradient(ellipse 55% 80% at 73% 52%, #fff 0, #fff 30%, var(--rtg-50, #EEFDFD) 62%, var(--rtg-100, #D3F9FA) 100%); color: var(--rtg-950, #0D343F); }
.rtg-b22l::before { content: none; }
.rtg-b22l__layout { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 46%) minmax(0, 1fr); align-items: center; width: 100%; height: 100%; padding: 24px calc(var(--rtg-hero-inset, 0px) + 40px) 40px calc(var(--rtg-hero-inset, 0px) + 76px); }
.rtg-b22l__copy { position: relative; z-index: 1; min-width: 0; }
.rtg-b22l__eyebrow { margin: 0 0 14px; color: var(--rtg-700, #197585); font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; }
/* The capacity sits next to the model in a light weight (Carlos, 3-nov). */
.rtg-b22l__eyebrow span { font-weight: 300; }
.rtg-b22l__title { margin: 0 0 10px; font-size: 48px; font-weight: 800; line-height: 1.05; }
.rtg-b22l__title em { color: var(--rtg-600, #1693A5); font-style: normal; }
/* Each title line is a mask its text rises into. */
.rtg-b22l__line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.rtg-b22l__line > span { display: block; }
.rtg-b22l__lead { margin: 0 0 18px; color: var(--rtg-900, #1C505D); font-size: 20px; font-weight: 500; line-height: 1.3; }
.rtg-b22l__features { display: grid; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.rtg-b22l__features li { position: relative; padding-left: 28px; color: var(--rtg-900, #1C505D); font-size: 16px; font-weight: 600; line-height: 1.35; }
.rtg-b22l__features li::before { content: ''; position: absolute; top: 2px; left: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--rtg-600, #1693A5); }
.rtg-b22l__features li::after { content: ''; position: absolute; top: 6px; left: 6px; width: 5px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rtg-b22l__cta { display: inline-block; padding: 13px 26px; border-radius: 999px; background: var(--rtg-950, #0D343F); color: #fff; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; transition: background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; }
.rtg-b22l__cta:hover, .rtg-b22l__cta:focus-visible { background: var(--rtg-800, #1D5F6D); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgb(13 52 63 / 22%); }
.rtg-b22l__cta:focus-visible { outline: 3px solid var(--rtg-400, #33D2DD); outline-offset: 3px; }
.rtg-b22l__visual { position: relative; align-self: stretch; min-width: 0; container-type: size; }
/* The photo's box fits its column both ways: 92% of the slide's height, or narrower when the column is. */
/* Centred with margins, not a transform: a transform would isolate the photo's multiply from the field. */
.rtg-b22l__stage { --rtg-b22l-w: min(96cqw, 110cqh); position: absolute; top: 50%; left: 50%; width: var(--rtg-b22l-w); height: calc(var(--rtg-b22l-w) / 1.2); margin: calc(var(--rtg-b22l-w) / -2.4) 0 0 calc(var(--rtg-b22l-w) / -2); }
.rtg-b22l__frame { position: absolute; inset: 0; overflow: hidden; }
/* A soft floor shadow under the unit's feet (the photo's multiply lets it show through). */
.rtg-b22l__shadow { position: absolute; top: 88%; left: 16%; width: 68%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgb(13 52 63 / 22%), rgb(13 52 63 / 0%)); }
.rtg-b22l__photo { position: absolute; top: 50%; left: 50%; display: block; width: auto; height: 133%; max-width: none; aspect-ratio: 1; transform: translate(-50%, -50%); mix-blend-mode: multiply; }

/* Entrance, each time the slide is shown after the first change (.is-moving, roentgen-slides.js): the title lines rise
   out of their masks, the rest of the copy fades up in sequence and the unit settles into place over its shadow. One
   long, soft ease for everything; nothing loops. */
@keyframes rtg-b22l-rise { from { transform: translate3d(0, 105%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes rtg-b22l-fade-up {
  from { opacity: 0; transform: translate3d(0, 14px, 0); filter: blur(6px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}
@keyframes rtg-b22l-photo-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 36px)) scale(.9); }
  55% { opacity: 1; }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes rtg-b22l-shadow-in { from { opacity: 0; transform: scaleX(.45); } to { opacity: 1; transform: scaleX(1); } }
.rtg-b22l { --rtg-b22l-ease: cubic-bezier(.22, 1, .36, 1); }
.rtg-hero.is-moving .rtg-b22l.is-current .rtg-b22l__eyebrow { animation: rtg-b22l-fade-up 900ms var(--rtg-b22l-ease) 200ms both; }
.rtg-hero.is-moving .rtg-b22l.is-current .rtg-b22l__line > span { animation: rtg-b22l-rise 1100ms var(--rtg-b22l-ease) 300ms both; }
.rtg-hero.is-moving .rtg-b22l.is-current em.rtg-b22l__line > span { animation-delay: 420ms; }
.rtg-hero.is-moving .rtg-b22l.is-current .rtg-b22l__lead { animation: rtg-b22l-fade-up 900ms var(--rtg-b22l-ease) 640ms both; }
.rtg-hero.is-moving .rtg-b22l.is-current .rtg-b22l__features li { animation: rtg-b22l-fade-up 800ms var(--rtg-b22l-ease) 760ms both; }
.rtg-hero.is-moving .rtg-b22l.is-current .rtg-b22l__features li:nth-child(2) { animation-delay: 840ms; }
.rtg-hero.is-moving .rtg-b22l.is-current .rtg-b22l__features li:nth-child(3) { animation-delay: 920ms; }
.rtg-hero.is-moving .rtg-b22l.is-current .rtg-b22l__features li:nth-child(4) { animation-delay: 1000ms; }
.rtg-hero.is-moving .rtg-b22l.is-current .rtg-b22l__cta { animation: rtg-b22l-fade-up 900ms var(--rtg-b22l-ease) 1120ms backwards; }
.rtg-hero.is-moving .rtg-b22l.is-current .rtg-b22l__photo { animation: rtg-b22l-photo-in 1700ms var(--rtg-b22l-ease) 150ms both; }
.rtg-hero.is-moving .rtg-b22l.is-current .rtg-b22l__shadow { animation: rtg-b22l-shadow-in 1700ms var(--rtg-b22l-ease) 350ms both; }

@media (max-width: 1199px) {
  .rtg-b22l__layout { grid-template-columns: minmax(0, 52%) minmax(0, 1fr); padding-left: calc(var(--rtg-hero-inset, 0px) + 40px); padding-right: 24px; }
  .rtg-b22l__title { font-size: 38px; }
  .rtg-b22l__lead { font-size: 18px; }
  .rtg-b22l__features li { font-size: 15px; }
}

/* Phones (hero 280px): copy and photo side by side, the features hidden. */
@media (max-width: 767px) {
  .rtg-b22l__layout { grid-template-columns: minmax(0, 54%) minmax(0, 1fr); padding: 14px 8px 30px 16px; }
  .rtg-b22l__eyebrow { margin-bottom: 8px; font-size: 9px; }
  .rtg-b22l__title { margin-bottom: 6px; font-size: 22px; }
  .rtg-b22l__lead { margin-bottom: 12px; font-size: 11px; }
  .rtg-b22l__features { display: none; }
  .rtg-b22l__cta { padding: 9px 14px; font-size: 10px; }
  .rtg-b22l__stage { --rtg-b22l-w: min(98cqw, 100cqh); }
}
@media (prefers-reduced-motion: reduce) {
  .rtg-b22l__cta { transition: none; }
  .rtg-hero.is-moving .rtg-b22l.is-current *, .rtg-hero.is-moving .rtg-b22l.is-current .rtg-b22l__line > span { animation: none; }
}