/* First-frame hero preview. Brand, reassurance and CTA belong to the
   illustration's responsive composition, not its 20-second animation clock. */
html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay]{isolation:isolate}
html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-composition{
 position:relative;display:block;flex:0 0 auto;box-sizing:border-box;
 width:min(100%,1040px,calc((100dvh - var(--ralph-nav-height,76px) - 96px)*1.42));
 max-width:100%;max-height:calc(100dvh - var(--ralph-nav-height,76px) - 30px);
 aspect-ratio:1.42;margin:0 auto;
}
html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-composition > .ralph-reception-slot{
 position:absolute!important;inset:auto 0 0!important;z-index:1;
 box-sizing:border-box;width:100%!important;max-width:100%!important;
 height:auto!important;max-height:none!important;aspect-ratio:9/5;
 margin:0!important;padding:0!important;opacity:1!important;
 visibility:visible!important;pointer-events:auto!important;transition:none!important;
}
html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay].ralph-reception-finished .ralph-reception-slot{
 opacity:1!important;pointer-events:auto!important;
}
html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard{
 position:absolute!important;inset:0!important;z-index:3!important;
 box-sizing:border-box;display:flex!important;flex-direction:column!important;
 align-items:center!important;justify-content:flex-start!important;
 gap:clamp(6px,1.35vh,13px)!important;width:100%!important;height:100%!important;
 margin:0!important;padding:clamp(6px,1.6vh,18px) 8px 0!important;
 background:transparent!important;opacity:1!important;visibility:visible!important;
 transform:none!important;animation:none!important;transition:none!important;
 pointer-events:none!important;
}
html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard::before{
 content:none!important;display:none!important;
}
html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard .ralph-ending-wordmark{
 position:relative!important;order:0!important;z-index:2;
 width:100%!important;margin:0!important;
 font-size:clamp(43px,7.2vw,100px)!important;line-height:1!important;
 text-align:center!important;opacity:1!important;visibility:visible!important;
 transform:none!important;animation:none!important;
}
html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard .trust{
 position:relative!important;inset:auto!important;order:1!important;z-index:2;
 display:flex!important;flex-wrap:wrap!important;align-items:center!important;
 justify-content:center!important;gap:clamp(9px,2.2vw,28px)!important;
 max-width:100%!important;margin:0!important;padding:0!important;
 background:transparent!important;opacity:1!important;visibility:visible!important;
 transform:none!important;transition:none!important;pointer-events:none!important;
}
html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard .trust span{
 display:inline-flex!important;flex-direction:row!important;align-items:center!important;
 justify-content:center!important;gap:6px!important;min-width:0;
 font-size:clamp(11px,1.05vw,14px)!important;line-height:1.35!important;
 color:#3d5271!important;white-space:normal;text-align:center;
}
html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard .trust .ico{
 width:16px!important;height:16px!important;flex:0 0 16px!important;color:#2f6bdb!important;
}
html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard .cta-group{
 position:absolute!important;inset:auto auto clamp(34px,8.5%,78px) 50%!important;
 z-index:5!important;order:2!important;display:flex!important;
 align-items:center!important;justify-content:center!important;
 width:max-content!important;max-width:calc(100% - 24px)!important;
 margin:0!important;padding:0!important;
 opacity:1!important;visibility:visible!important;
 transform:translateX(-50%)!important;animation:none!important;transition:none!important;
 pointer-events:none!important;
}
html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard .cta-group .pill{
 position:relative;display:inline-flex!important;min-width:0!important;width:auto!important;
 max-width:100%!important;min-height:52px!important;padding:12px 28px!important;border-radius:999px!important;
 color:#fff!important;-webkit-text-fill-color:#fff!important;
 font-size:14px!important;font-weight:700!important;white-space:nowrap;
 opacity:1!important;visibility:visible!important;
 transform:none!important;animation:none!important;pointer-events:auto!important;
}
html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard .cta-group .pill:focus-visible{
 outline:3px solid #2674cd!important;outline-offset:4px!important;
}
/* Phone: readable branding above the drawing. CTA still overlays the desk,
   while playback controls have a dedicated space under the illustration. */
@media(max-width:750px){
 html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-composition{
  display:grid!important;grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto auto;row-gap:clamp(8px,2vw,14px);
  width:min(100%,560px)!important;height:auto!important;min-height:0!important;
  max-height:none!important;aspect-ratio:auto!important;padding:4px 0 70px;
 }
 html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard{display:contents!important}
 html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard .ralph-ending-wordmark{
  grid-area:1/1;font-size:clamp(35px,9.2vw,66px)!important;align-self:center;
 }
 html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-ending-wordmark .ralph-brand-lockup--hero{
  font-size:inherit!important;
 }
 html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard .trust{
  grid-area:2/1;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(5px,2vw,12px)!important;width:100%!important;max-width:100%!important;justify-items:center;
 }
 html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard .trust span{
  flex-direction:column!important;gap:4px!important;
  font-size:clamp(9px,2.6vw,11px)!important;line-height:1.3!important;overflow-wrap:break-word;
 }
 html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-composition > .ralph-reception-slot{
  position:relative!important;inset:auto!important;grid-area:3/1;
  max-height:none!important;align-self:start;
 }
 html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard .cta-group{
  position:relative!important;inset:auto!important;grid-area:3/1;
  align-self:end!important;justify-self:center!important;
  width:max-content!important;max-width:95%!important;
  margin:0 0 clamp(3px,1vw,9px)!important;transform:none!important;
 }
 html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard .cta-group .pill{
  width:auto!important;min-width:0!important;max-width:min(78vw,310px)!important;
  min-height:42px!important;padding:9px 16px!important;font-size:clamp(11px,3vw,13px)!important;
 }
 html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-slot .ralph-story-player{
  right:0!important;bottom:-59px!important;
 }
}
@media(prefers-reduced-motion:reduce){
 html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard :is(.ralph-ending-wordmark,.trust,.cta-group,.pill){
  opacity:1!important;visibility:visible!important;animation:none!important;transition:none!important;
 }
}

/* Legacy end-card CSS previously removed the artwork and moved player controls
   outside the SVG on completion. Keep the animation's final frame and its
   controls in their original composition instead. */
html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-composition > .ralph-reception-slot {
 display:block!important;
}
html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay].ralph-reception-finished .ralph-reception-slot :is(.ralph-illustration-motion,.ralph-illustration-still):not([hidden]) {
 display:block!important;
}
html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-composition > .ralph-reception-slot .ralph-story-player {
 position:absolute!important;right:clamp(6px,1vw,14px)!important;
 bottom:clamp(-10px,-.4vw,-5px)!important;z-index:20!important;
 pointer-events:auto!important;
}
@media(max-width:750px){
 html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-composition > .ralph-reception-slot .ralph-story-player {
  right:0!important;bottom:-59px!important;
 }
}

/* Tablet-width browser emulation must not inherit desktop CTA minimum widths. */
@media(min-width:751px) and (max-width:1050px){
 html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard .cta-group .pill{
  min-width:0!important;width:auto!important;max-width:100%!important;
  min-height:44px!important;padding:9px 19px!important;font-size:13px!important;
 }
 html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard .trust{
  gap:clamp(8px,1.5vw,18px)!important;
 }
 html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard .trust span{
  font-size:clamp(10px,1.15vw,12px)!important;
 }
}
@media(max-width:350px){
 html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard .cta-group .pill{
  max-width:90vw!important;padding:8px 13px!important;font-size:11px!important;
 }
}