/* Rec's opening product story. Scoped so the homepage stays unchanged. */
#rec-hero {
  width:calc(100% - 64px);max-width:1440px;margin:12px auto 0;
  padding:40px clamp(24px,5vw,80px) 30px;border-radius:40px;
  background:var(--ds-background,#fff);color:var(--ds-text,#000c1f);
}
html[data-ds-theme="dark"] #rec-hero {background:var(--ds-surface,#171e28)}
#rec-hero #rec-page-title {margin:12px auto 20px;font-size:clamp(60px,7.6vw,112px)}
#rec-hero .new-dek {margin:0 auto 34px;font-size:clamp(17px,1.8vw,24px);line-height:1.5}
#rec-hero .rec-showcase {width:100%;max-width:1200px;margin:0 auto;position:relative}
#rec-hero .rec-showcase-stage {position:relative;width:100%;height:auto;aspect-ratio:2.8;border-radius:32px;overflow:hidden;isolation:isolate;background:#d8d9d8}
html[data-ds-theme="dark"] #rec-hero .rec-showcase-stage {background:#434445}
#rec-hero .rec-showcase-slide {position:absolute;inset:0}
#rec-hero [hidden] {display:none!important}
#rec-hero .rec-showcase-art {position:relative;width:100%;height:100%;overflow:hidden}
#rec-hero .rec-showcase-art img {position:absolute;display:block;height:auto;max-width:none;object-fit:contain;background:transparent;cursor:default;user-select:none;-webkit-user-drag:none}
/* A large desktop interface, with the two member devices in front. */
#rec-hero .rec-membership-desktop {width:72%;left:1%;top:4%;transform:rotate(-2deg);filter:drop-shadow(0 16px 22px #0002)}
#rec-hero .rec-membership-mobile {width:37%;right:3%;top:13%;filter:drop-shadow(0 12px 18px #0002)}
/* Two distinct, readable views of the same workflow. */
#rec-hero .rec-rentals-main {width:70%;left:3%;top:8%;transform:rotate(-2deg)}
#rec-hero .rec-rentals-detail {width:48%;right:3%;top:34%;transform:rotate(3deg)}
#rec-hero .rec-programming-main {width:69%;left:4%;top:8%;transform:rotate(-2deg)}
#rec-hero .rec-programming-detail {width:43%;right:4%;top:26%;transform:rotate(3deg)}
#rec-hero .rec-screen {border:1px solid #ffffff80;border-radius:12px;box-shadow:0 18px 40px #0003}
#rec-hero .rec-showcase-cta {position:relative;z-index:3;display:flex;justify-content:center;margin-top:-26px;pointer-events:none}
#rec-hero .rec-showcase-cta a {pointer-events:auto;margin:0}
#rec-hero .rec-showcase-meta {display:flex;align-items:center;justify-content:space-between;gap:24px;margin:20px 4px 0;min-height:48px;text-align:left}
#rec-hero .rec-showcase-caption {margin:0;max-width:65%;font:400 13px/1.5 var(--sans,Arial,sans-serif);color:var(--ds-muted,#646c78)}
#rec-hero .rec-showcase-controls {display:flex;align-items:center;gap:8px;flex-shrink:0}
#rec-hero .rec-showcase-controls button {display:grid;place-items:center;width:46px;height:46px;min-width:46px;padding:0;border:1px solid transparent;border-radius:50%;background:var(--ds-surface,#f7f8fa);color:var(--ds-text,#000c1f);font:400 20px/1 var(--sans,Arial,sans-serif);cursor:pointer;transition:background .2s,border-color .2s}
html[data-ds-theme="dark"] #rec-hero .rec-showcase-controls button {background:var(--ds-background,#0b111c)}
#rec-hero .rec-showcase-controls button:hover {border-color:var(--ds-muted,#646c78)}
#rec-hero .rec-showcase-controls button:focus-visible {outline:2px solid #df624f;outline-offset:4px}
#rec-hero .rec-pause-icon {width:12px;height:14px;border-left:2px solid currentColor;border-right:2px solid currentColor}
#rec-hero .rec-pause-icon.is-paused {width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid currentColor;border-right:0;margin-left:3px}
@media(min-width:901px) and (max-height:800px){
  #rec-hero {padding-top:18px}
  #rec-hero #rec-page-title {font-size:clamp(60px,6vw,88px);margin:6px auto 16px}
  #rec-hero .new-dek {font-size:18px;margin-bottom:26px}
  #rec-hero .rec-showcase-stage {aspect-ratio:3.1}
}
@media(prefers-reduced-motion:no-preference){#rec-hero .rec-showcase-slide:not([hidden]){animation:rec-showcase-in .65s ease-out}@keyframes rec-showcase-in{from{opacity:0}to{opacity:1}}}
body:is(.is-editing,.pro-editing) #rec-hero .rec-showcase-slide {animation:none}
@media(max-width:900px){
  #rec-hero {width:calc(100% - 40px);padding:28px 30px 26px;border-radius:32px}
  #rec-hero .rec-showcase-stage {aspect-ratio:2.35;border-radius:26px}
  #rec-hero .rec-membership-desktop {width:80%;left:-2%;top:8%}
  #rec-hero .rec-membership-mobile {width:39%;right:2%;top:16%}
  #rec-hero .rec-rentals-main,#rec-hero .rec-programming-main {width:76%}
  #rec-hero .rec-rentals-detail {width:51%;top:41%}
  #rec-hero .rec-programming-detail {width:47%;top:35%}
}
@media(max-width:600px){
  #rec-hero {width:calc(100% - 24px);padding:24px 16px 22px;border-radius:26px;margin-top:4px}
  #rec-hero #rec-page-title {font-size:clamp(42px,10.5vw,62px);margin:10px auto 18px}
  #rec-hero .new-dek {font-size:16px;margin-bottom:26px}
  #rec-hero .rec-showcase-stage {aspect-ratio:1.45;border-radius:22px}
  #rec-hero .rec-membership-desktop {width:116%;left:-15%;top:6%;transform:rotate(-3deg)}
  #rec-hero .rec-membership-mobile {width:50%;right:2%;top:27%}
  #rec-hero .rec-rentals-main,#rec-hero .rec-programming-main {width:94%;left:3%;top:10%}
  #rec-hero .rec-rentals-detail {width:76%;right:-3%;top:48%}
  #rec-hero .rec-programming-detail {width:70%;right:1%;top:48%}
  #rec-hero .rec-screen {border-radius:7px;box-shadow:0 12px 24px #0002}
  #rec-hero .rec-showcase-cta {margin-top:-24px}
  #rec-hero .rec-showcase-meta {gap:12px;margin:20px 0 0;align-items:center}
  #rec-hero .rec-showcase-caption {font-size:11px;max-width:calc(100% - 140px)}
  #rec-hero .rec-showcase-controls {gap:5px}
  #rec-hero .rec-showcase-controls button {width:40px;height:40px;min-width:40px;font-size:18px}
}

/* A single laptop uses the full stage height without fixed editor dimensions. */
#rec-hero .rec-showcase-art .rec-membership-single {position:absolute;width:92%;height:96%;max-width:100%;left:4%;top:2%;transform:none;object-fit:contain}