/* The room, as the front door to the whole site. The opening is untouched;
   these are the few things the room needs now that it leads everywhere:
   the site's menu in the header, room for six worlds in one of the
   previews, and the page below the room in another. */

/* the new pages are English first; the other two languages follow */
body:not(.live) .langs {
  display: none !important;
}
/* the live room: the three languages stay in the header on a computer, and
   move into the menu on a phone, where the header has no room left */
.pv-nav .langs {
  display: flex;
  gap: 8px;
  width: min(100%, 980px);
  margin: 26px auto 0;
}
.pv-nav .langs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 44px;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--ink-3);
  border: 1px solid rgba(241, 236, 228, 0.2);
}
.pv-nav .langs a[aria-current="true"] {
  color: var(--night);
  background: var(--ink);
  border-color: var(--ink);
}
@media (max-width: 700px) {
  .live .hud .langs {
    display: none;
  }
}

/* ---------------- the whole site, from the header ---------------- */
.pv-open {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 10px;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
}
.pv-open i {
  display: grid;
  gap: 5px;
  width: 18px;
}
.pv-open i::before,
.pv-open i::after {
  content: "";
  height: 1px;
  background: currentColor;
}
.pv-nav {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  align-content: center;
  padding: calc(var(--hud) + 20px) var(--pad) 40px;
  background: rgba(5, 6, 8, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
.pv-nav.on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease;
}
.pv-nav ol {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 60px;
}
.pv-nav li {
  break-inside: avoid;
}
.pv-nav a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  min-height: 58px;
  padding: 8px 0;
  text-decoration: none;
  color: var(--ink-2);
  border-bottom: 1px solid rgba(227, 172, 78, 0.14);
  transition: color 0.3s ease;
}
.pv-nav a:hover {
  color: var(--ink);
}
.pv-nav small {
  flex: none;
  width: 9em;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.pv-nav a span {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 30px);
}
.pv-nav-x {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 14px);
  right: var(--pad);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--ink);
  background: none;
  border: 1px solid rgba(241, 236, 228, 0.3);
  border-radius: 50%;
  cursor: pointer;
}
.pv-nav-x svg {
  width: 16px;
  height: 16px;
}
@media (max-width: 860px) {
  .pv-open span {
    display: none;
  }
  .pv-nav ol {
    columns: 1;
  }
  .pv-nav a {
    min-height: 48px;
  }
  .pv-nav small {
    width: 7.5em;
    font-size: 10.5px;
  }
}

/* the worlds are named the way the companies were: in capitals, spaced */
.co-t {
  text-transform: uppercase;
}
/* the four paths name who is behind each one, briefly */
.co-s {
  max-width: 30ch;
}

/* ---------------- six worlds in the room ---------------- */
.six .co-t {
  font-size: clamp(22px, 2.1vw, 34px);
}
.six .co-s {
  display: none;
}
.six .co {
  width: min(28ch, 24vw);
  gap: 5px;
}
@media (max-width: 860px) {
  .six .callouts.stack {
    gap: 2px;
  }
  .six .callouts.stack .co {
    padding: 6px 12px 7px 14px;
  }
  .six .co-t {
    font-size: 24px;
  }
  .six .co-w {
    font-size: 14px;
  }
}
/* six names on a phone: the names and their numbers; the lines under them wait for a bigger screen */
@media (max-width: 860px) {
  .six .callouts.stack .co-w {
    display: none;
  }
}
/* on a phone the four paths keep their one line; who is behind each is on its page */
@media (max-width: 860px) {
  .co-s {
    display: none !important;
  }
  .pv-nav small {
    display: none;
  }
}

/* marks the page as a preview, and leads back to the way in */
.pv-tag {
  position: fixed;
  left: 12px;
  top: calc(env(safe-area-inset-top) + 70px);
  z-index: 95;
  padding: 5px 9px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--night);
  background: var(--gold);
  opacity: 0.85;
}

/* ---------------- straight to a service, or a free tool, from the room ---------------- */
.pv-cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-left: 6px;
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--night);
  text-shadow: none;
  background: var(--gold-grad) 0% 50% / 280% 100%;
  border: 0;
  cursor: pointer;
  transition: background-position 0.9s cubic-bezier(0.16, 0.84, 0.26, 1);
}
.pv-cta:hover {
  background-position: 100% 50%;
}
@media (max-width: 860px) {
  .pv-cta {
    min-height: 36px;
    padding: 0 11px;
    font-size: 11.5px;
    letter-spacing: 0.08em;
  }
}

/* A: two doors under the worlds */
.cv-doors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  pointer-events: auto;
}
.cv-door {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 26px;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, background-position 0.9s ease;
}
.cv-door small {
  font-size: 11px;
  letter-spacing: 0.14em;
  opacity: 0.8;
}
.cv-door.paid {
  color: var(--night);
  background: var(--gold-grad) 0% 50% / 280% 100%;
  border: 0;
  box-shadow: 0 14px 34px -18px var(--gold-glow);
}
.cv-door.paid:hover {
  background-position: 100% 50%;
}
.cv-door.free {
  color: var(--ink);
  background: rgba(4, 5, 7, 0.45);
  border: 1px solid rgba(241, 236, 228, 0.45);
}
.cv-door.free:hover {
  border-color: var(--gold);
  background: rgba(227, 172, 78, 0.12);
}
.doors .choose {
  gap: 14px;
}
.doors .talkway {
  gap: 4px;
}
.doors .tw-a {
  min-height: 40px;
  padding: 0 16px;
  font-size: 12px;
  border-color: rgba(227, 172, 78, 0.35);
  background: none;
}
@media (max-width: 860px) {
  .doors .callouts.stack {
    padding-bottom: clamp(250px, 32vh, 290px);
  }
  .cv-door {
    min-height: 48px;
    padding: 0 18px;
    font-size: 12.5px;
    letter-spacing: 0.1em;
  }
  .doors .tw-q {
    display: none;
  }
}

/* A: the drawer the doors open, in the company pages' panel */
.cv {
  position: fixed;
  inset: 0;
  z-index: 75;
  display: flex;
  justify-content: flex-end;
  background: rgba(3, 4, 6, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
.cv.on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease;
}
.cv-panel {
  position: relative;
  width: min(560px, 100vw);
  height: 100%;
  overflow-y: auto;
  padding: calc(env(safe-area-inset-top) + 76px) clamp(22px, 3vw, 40px) 40px;
  background: linear-gradient(180deg, rgba(227, 172, 78, 0.08), rgba(5, 6, 8, 0.97) 34%), #07080a;
  border-left: 1px solid var(--gold-a30);
  box-shadow: -40px 0 80px -40px #000;
  transform: translateX(40px);
  transition: transform 0.6s cubic-bezier(0.16, 0.84, 0.26, 1);
  overscroll-behavior: contain;
}
.cv.on .cv-panel {
  transform: none;
}
.cv-x {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 16px);
  right: 18px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--ink);
  background: none;
  border: 1px solid rgba(241, 236, 228, 0.3);
  border-radius: 50%;
  cursor: pointer;
}
.cv-x svg {
  width: 16px;
  height: 16px;
}
.cv-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 22px;
}
.cv-tabs button {
  flex: 1;
  min-height: 48px;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: none;
  border: 1px solid rgba(241, 236, 228, 0.22);
  cursor: pointer;
}
.cv-tabs button[aria-pressed="true"] {
  color: var(--night);
  background: var(--ink);
  border-color: var(--ink);
}
@media (max-width: 700px) {
  .cv {
    align-items: flex-end;
  }
  .cv-panel {
    width: 100%;
    height: min(88svh, 760px);
    padding-top: 70px;
    border-left: 0;
    border-top: 1px solid var(--gold-a30);
    transform: translateY(40px);
  }
}

/* the offers, in the room: the same rows as the pages' "start now" */
.cv-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 18px;
  padding: 18px 0;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid rgba(227, 172, 78, 0.16);
}
.cv-tag {
  grid-column: 1;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.cv-name {
  grid-column: 1;
  font-size: 21px;
  line-height: 1.25;
}
.cv-line {
  grid-column: 1;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-2);
}
.cv-go {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid rgba(241, 236, 228, 0.35);
}
.cv-row.paid .cv-go {
  color: var(--night);
  background: var(--ink);
  border-color: var(--ink);
}
.cv-row:hover .cv-go {
  background: var(--gold-grad) 0% 50% / 280% 100%;
  color: var(--night);
  border-color: transparent;
}
.cv-all {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 12px;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-decoration: none;
}
@media (max-width: 420px) {
  .cv-row {
    grid-template-columns: 1fr;
  }
  .cv-go {
    grid-column: 1;
    grid-row: auto;
    justify-content: center;
    margin-top: 8px;
  }
}

/* B: the offers themselves, along the foot of the room */
.rail .choose {
  display: none !important;
}
.cv-rail {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 21;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 0 26px;
  padding: 26px var(--pad) calc(env(safe-area-inset-bottom) + 18px);
  background: linear-gradient(0deg, rgba(4, 5, 7, 0.94) 0%, rgba(4, 5, 7, 0.82) 62%, rgba(4, 5, 7, 0));
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.9s ease, transform 1s cubic-bezier(0.16, 0.84, 0.26, 1);
}
.cv-rail.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.cv-rail-h {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  max-width: 11ch;
}
.cv-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cv-strip a {
  display: grid;
  align-content: start;
  gap: 5px;
  height: 100%;
  min-height: 112px;
  padding: 14px 16px 16px;
  text-decoration: none;
  color: var(--ink);
  background: rgba(12, 13, 16, 0.72);
  box-shadow: inset 0 1px 0 rgba(227, 172, 78, 0.35);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.cv-strip a:hover {
  background: rgba(227, 172, 78, 0.12);
  box-shadow: inset 0 2px 0 var(--gold);
}
.cv-strip .paid {
  box-shadow: inset 0 2px 0 var(--gold);
}
.cv-strip .cv-tag,
.cv-strip .cv-name,
.cv-strip .cv-go {
  grid-column: 1;
  grid-row: auto;
}
.cv-strip .cv-tag {
  font-size: 11.5px;
}
.cv-strip .cv-name {
  font-size: 17px;
  line-height: 1.25;
}
.cv-strip .cv-go {
  display: block;
  min-height: 0;
  margin-top: 4px;
  padding: 0;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  background: none !important;
  border: 0;
}
.cv-strip .paid .cv-go {
  color: var(--gold);
}
.rail .callouts.stack {
  padding-bottom: 196px;
}
@media (max-width: 1100px) {
  .cv-rail {
    grid-template-columns: 1fr;
  }
  .cv-rail-h {
    max-width: none;
    margin-bottom: 10px;
    font-size: 20px;
  }
}
@media (max-width: 860px) {
  .cv-rail {
    padding: 22px 0 calc(env(safe-area-inset-bottom) + 12px);
  }
  .cv-rail-h {
    padding: 0 var(--pad);
  }
  .cv-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 var(--pad) 4px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .cv-strip::-webkit-scrollbar {
    display: none;
  }
  .cv-strip li {
    flex: 0 0 62%;
    scroll-snap-align: start;
  }
  .cv-strip a {
    min-height: 104px;
  }
}

/* =====================================================================
   3B, made cinematic: the offers as part of the room, not a list under it.
   Three treatments share the rail's place at the foot of the room:
   frames (lit footage), plates (gold-edged plaques on the floor) and
   feature (the $297 review up front, the rest as tickets beside it).
   Each arrives with the worlds: rising in turn, a gold edge drawing on,
   the prices rolling to their figure. A light passes across them now and
   then, the way the beam crosses a name on the company pages.
   ===================================================================== */
:root {
  --e-out: cubic-bezier(0.16, 0.84, 0.26, 1);
  --e-set: cubic-bezier(0.16, 0.9, 0.28, 1);
}
.ofr .choose,
.ofr-body .choose {
  display: none !important;
}
.ofr {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 21;
  padding: 0 var(--pad) calc(env(safe-area-inset-bottom) + 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
.ofr.on {
  opacity: 1;
  pointer-events: auto;
}
.ofr::before {
  content: "";
  position: absolute;
  inset: -90px 0 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(4, 5, 7, 0.97), rgba(4, 5, 7, 0.82) 52%, rgba(4, 5, 7, 0));
}
.ofr-in {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(0, 5fr);
  align-items: end;
  gap: 24px;
  max-width: 1500px;
  margin: 0 auto;
}
.ofr-h {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
}
.ofr-help {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-top: 10px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold);
}
.ofr-help:hover {
  color: var(--ink);
}
.ofr-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ofr-list > li {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}
.ofr.on .ofr-list > li {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s ease calc(0.2s + var(--i) * 0.12s), transform 1s var(--e-out) calc(0.2s + var(--i) * 0.12s);
}

/* a price rolls to its figure, each digit down its own short column */
.roll {
  display: inline-flex;
  align-items: flex-start;
  font-variant-numeric: tabular-nums;
}
.roll .cur {
  font-size: 0.55em;
  line-height: 1.2;
  margin-right: 0.04em;
}
.roll .dg {
  display: block;
  height: 1em;
  overflow: hidden;
  line-height: 1;
}
.roll .dg-c {
  display: block;
  transform: translate3d(0, calc(-1 * var(--n) * 1em), 0);
}
.roll .dg-c i {
  display: block;
  height: 1em;
  line-height: 1;
  font-style: normal;
}
.ofr:not(.on) .roll .dg-c {
  transform: none;
}
.ofr.on .roll .dg-c {
  transition: transform 1.5s var(--e-set) calc(0.6s + var(--i, 0) * 0.12s + var(--k, 0) * 0.09s);
}
/* the one gold, through the figures and the word Free */
.gold-t,
.roll i,
.roll .cur {
  background: var(--gold-grad) 50% 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* now and then, a light crosses the offers, one after another */
.sheen {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 45%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(254, 230, 157, 0.26) 45%, rgba(255, 255, 255, 0.22) 52%, rgba(254, 230, 157, 0.26) 58%, transparent);
  filter: blur(6px);
  transform: translateX(-180%) skewX(-12deg);
}
.ofr.on .sheen {
  animation: ofr-sheen 9s cubic-bezier(0.4, 0, 0.25, 1) infinite;
  animation-delay: calc(2.2s + var(--i) * 0.28s);
}
@keyframes ofr-sheen {
  0% {
    transform: translateX(-180%) skewX(-12deg);
  }
  14%,
  100% {
    transform: translateX(320%) skewX(-12deg);
  }
}

/* ---------------- frames: each offer a lit frame of its own world ---------------- */
.fr {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: var(--ink);
  background: #000;
  box-shadow: 0 24px 50px -30px #000;
  transition: transform 0.7s var(--e-out), box-shadow 0.5s ease;
}
.fr-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.fr-media img,
.fr-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1) contrast(1.05) brightness(0.6) sepia(0.12);
  transform: scale(1.1);
  transition: filter 0.6s ease;
}
.ofr.on .fr-media img {
  animation: fr-drift 18s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -3s);
}
@keyframes fr-drift {
  from {
    transform: scale(1.1) translate3d(-2%, 1%, 0);
  }
  to {
    transform: scale(1.2) translate3d(2%, -1.5%, 0);
  }
}
.fr-media video {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.fr.play .fr-media video,
.ft.play .fr-media video {
  opacity: 1;
}
.fr::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(5, 6, 8, 0.05), rgba(5, 6, 8, 0.3) 38%, rgba(5, 6, 8, 0.94));
}
/* the gold edge draws itself on as the frame lands */
.fr::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(227, 172, 78, 0.6), inset 0 2px 0 rgba(254, 230, 157, 0.55);
  clip-path: inset(0 100% 0 0);
  opacity: 0.8;
}
.ofr.on .fr::before {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.3s var(--e-out) calc(0.45s + var(--i) * 0.12s), opacity 0.4s ease;
}
.fr-in {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 4px;
  padding: 14px 16px 14px;
}
.fr-price {
  font-size: clamp(30px, 2.5vw, 42px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.01em;
}
.fr-price small,
.pl-price small {
  display: inline-block;
  margin-right: 6px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  vertical-align: 0.9em;
  -webkit-text-fill-color: var(--ink-2);
  color: var(--ink-2);
}
.fr-name {
  font-size: 15px;
  line-height: 1.25;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
}
.fr-go {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.fr:hover,
.fr:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 34px 60px -26px #000, 0 0 44px -12px var(--gold-glow);
}
.fr:hover .fr-media img,
.fr:hover .fr-media video {
  filter: saturate(1.05) contrast(1.05) brightness(0.78) sepia(0.08);
}
.fr:hover::before {
  opacity: 1;
}

/* ---------------- plates: gold-edged plaques standing on the polished floor ---------------- */
.rv-plates .ofr {
  padding-bottom: calc(env(safe-area-inset-bottom) + 58px);
}
.rv-plates .ofr-list {
  gap: 16px;
  perspective: 1400px;
  perspective-origin: 50% 0%;
}
.rv-plates .ofr-list > li:nth-child(1) {
  --ry: 16deg;
}
.rv-plates .ofr-list > li:nth-child(2) {
  --ry: 8deg;
}
.rv-plates .ofr-list > li:nth-child(3) {
  --ry: 0deg;
}
.rv-plates .ofr-list > li:nth-child(4) {
  --ry: -8deg;
}
.rv-plates .ofr-list > li:nth-child(5) {
  --ry: -16deg;
}
.pl {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 10px;
  min-height: 178px;
  padding: 18px 18px 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(227, 172, 78, 0.16), rgba(0, 0, 0, 0) 60%),
    linear-gradient(165deg, #1a1b20, #08090b 68%);
  box-shadow: 0 34px 44px -30px #000, inset 0 0 0 1px rgba(227, 172, 78, 0.42), inset 0 1px 0 rgba(254, 230, 157, 0.5);
  transform: rotateY(var(--ry, 0deg)) rotateX(7deg);
  transform-origin: 50% 100%;
  transition: transform 0.9s var(--e-out), box-shadow 0.5s ease;
  -webkit-box-reflect: below 6px linear-gradient(transparent 70%, rgba(255, 255, 255, 0.07));
}
.pl:hover,
.pl:focus-visible {
  transform: rotateY(0deg) rotateX(0deg) translateY(-8px);
  box-shadow: 0 40px 60px -30px #000, inset 0 0 0 1px var(--gold), inset 0 1px 0 #fee69d, 0 0 60px -14px var(--gold-glow);
}
.pl-price {
  font-size: clamp(40px, 3.3vw, 58px);
  font-weight: 300;
  line-height: 0.95;
}
.pl-name {
  font-size: 15.5px;
  line-height: 1.25;
}
.pl-go {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.pl-word {
  font-size: clamp(34px, 2.8vw, 48px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: 0.04em;
}

/* ---------------- feature: the $297 review up front, the rest as tickets ---------------- */
.rv-feature .ofr-in {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 16px;
}
.ft {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 236px;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: var(--ink);
  background: #000;
  box-shadow: 0 30px 60px -34px #000;
  transition: box-shadow 0.5s ease;
}
.ft .fr-media img,
.ft .fr-media video {
  filter: saturate(1.02) contrast(1.06) brightness(0.55) sepia(0.14);
}
.ft::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(95deg, rgba(5, 6, 8, 0.94) 0%, rgba(5, 6, 8, 0.72) 48%, rgba(5, 6, 8, 0.2) 100%);
}
.ft::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(227, 172, 78, 0.55), inset 0 2px 0 rgba(254, 230, 157, 0.6);
  clip-path: inset(0 100% 0 0);
}
.ofr.on .ft::before {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.4s var(--e-out) 0.4s;
}
.ft:hover {
  box-shadow: 0 34px 70px -30px #000, 0 0 60px -14px var(--gold-glow);
}
.ft-in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 4px 26px;
  padding: 22px 24px;
}
.ft-price {
  grid-row: span 4;
  font-size: clamp(72px, 6.4vw, 112px);
  font-weight: 300;
  line-height: 0.9;
  filter: drop-shadow(0 0 30px rgba(227, 172, 78, 0.25));
}
.ft-tag {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.ft-line {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.15;
}
.ft-count {
  font-size: 14px;
  color: var(--ink-2);
}
.ft-count b {
  font-weight: 400;
  font-size: 1.25em;
  color: var(--ink);
}
.ft-go {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  margin-top: 8px;
  padding: 0 18px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--night);
  background: var(--ink);
  transition: background-position 0.9s var(--e-out);
}
.ft:hover .ft-go {
  background: var(--gold-grad) 0% 50% / 280% 100%;
}
.tk-wrap {
  display: grid;
  gap: 8px;
}
.rv-feature .ofr-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.tk {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 14px;
  min-height: 72px;
  padding: 10px 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  background: rgba(14, 15, 18, 0.82);
  box-shadow: inset 0 0 0 1px rgba(227, 172, 78, 0.22), inset 0 1px 0 rgba(254, 230, 157, 0.3);
  transition: box-shadow 0.4s ease, background 0.4s ease;
}
.tk:hover {
  background: rgba(227, 172, 78, 0.1);
  box-shadow: inset 0 0 0 1px var(--gold), 0 0 40px -16px var(--gold-glow);
}
.tk-price {
  grid-row: span 2;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  min-width: 3.2ch;
}
.tk-price small {
  display: block;
  margin-bottom: 2px;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  -webkit-text-fill-color: var(--ink-3);
  color: var(--ink-3);
}
.tk-name {
  font-size: 15px;
  line-height: 1.2;
}
.tk-go {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.rv-feature .ofr-help {
  margin-top: 2px;
}

/* the worlds step up to make room */
.rv-frames .callouts.stack,
.rv-plates .callouts.stack,
.rv-feature .callouts.stack {
  padding-bottom: 290px;
}

/* ---------------- phones: one row to swipe through ---------------- */
@media (max-width: 1100px) {
  .ofr-in {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ofr-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
  }
  .ofr-h {
    font-size: 21px;
  }
  .ofr-help {
    min-height: 0;
    margin: 0;
    white-space: nowrap;
    font-size: 11px;
  }
}
@media (max-width: 860px) {
  .ofr {
    padding: 0 0 calc(env(safe-area-inset-bottom) + 14px);
  }
  .ofr-head {
    padding: 0 var(--pad);
  }
  .ofr-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 var(--pad) 6px;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--pad);
    scrollbar-width: none;
  }
  .ofr-list::-webkit-scrollbar {
    display: none;
  }
  .ofr-list > li {
    flex: 0 0 64%;
    scroll-snap-align: start;
  }
  .fr {
    aspect-ratio: 5 / 4;
  }
  .rv-plates .ofr {
    padding-bottom: calc(env(safe-area-inset-bottom) + 44px);
  }
  .rv-plates .ofr-list {
    padding-top: 8px;
  }
  .rv-plates .ofr-list > li {
    flex-basis: 52%;
    --ry: 0deg !important;
  }
  .pl {
    min-height: 150px;
    transform: rotateX(6deg);
  }
  .rv-feature .ofr-in {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .rv-feature .ft {
    min-height: 150px;
    margin: 0 var(--pad);
  }
  .ft-in {
    gap: 2px 16px;
    padding: 14px 16px;
  }
  .ft-price {
    font-size: 64px;
  }
  .ft-line {
    font-size: 19px;
  }
  .ft-count {
    font-size: 12.5px;
  }
  .ft-go {
    min-height: 36px;
    margin-top: 4px;
    font-size: 11px;
  }
  .rv-feature .ofr-list > li {
    flex-basis: 74%;
  }
  .tk {
    min-height: 60px;
    gap: 2px 12px;
    padding: 8px 14px;
  }
  .tk-price {
    font-size: 22px;
  }
  .rv-feature .ft {
    min-height: 140px;
  }
  /* Work With Marla is in the menu; on a phone the space goes to the offers */
  .rv-feature .ofr-help {
    display: none;
  }
  .rv-frames .callouts.stack,
  .rv-plates .callouts.stack {
    padding-bottom: clamp(250px, 32vh, 280px);
  }
  .rv-feature .callouts.stack {
    padding-bottom: var(--room-foot, clamp(300px, 38vh, 320px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .ofr-list > li,
  .ofr .roll .dg-c,
  .fr::before,
  .ft::before {
    transition: none !important;
  }
  .ofr-list > li {
    opacity: 1;
    transform: none;
  }
  .fr::before,
  .ft::before {
    clip-path: none;
  }
  .sheen,
  .ofr.on .fr-media img {
    animation: none !important;
  }
}

/* ---------------- the $297 up front, in the room's own foot ----------------
   The six worlds keep exactly the places they have in preview 3. The offers
   take only what the room already leaves free at its foot: the review sits
   in the middle, between the lowest two worlds, where "Where would you like
   to begin?" used to be, and the other offers run in one slim line beneath
   everything. No wash across the width, so the worlds keep their light. */
.rv-feature .ofr {
  padding: 0 var(--pad) calc(env(safe-area-inset-bottom) + 12px);
}
.rv-feature .ofr::before {
  display: none;
}
.rv-feature .ofr-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 10px;
  max-width: none;
}
.rv-feature .ft {
  width: min(560px, 38vw);
  min-height: 150px;
}
.rv-feature .ft-in {
  gap: 2px 22px;
  padding: 16px 20px;
}
.rv-feature .ft-price {
  font-size: clamp(64px, 5.4vw, 92px);
}
.rv-feature .ft-line {
  font-size: clamp(20px, 1.6vw, 24px);
}
.rv-feature .tk-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  width: 100%;
}
.rv-feature .ofr-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.rv-feature .tk {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  background: rgba(8, 9, 11, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.rv-feature .tk-price {
  font-size: 19px;
  min-width: 0;
}
.rv-feature .tk-price small {
  display: inline;
  margin: 0 4px 0 0;
  font-size: 9.5px;
  vertical-align: 0.25em;
}
.rv-feature .tk-name {
  font-size: 14px;
  white-space: nowrap;
}
.rv-feature .tk-go {
  display: none;
}
.rv-feature .ofr-help {
  margin: 0;
  min-height: 44px;
  padding: 0 6px;
}
/* phones: the review across the width, the rest in one row to swipe, and the six as they were */
@media (max-width: 860px) {
  .rv-feature .ofr {
    padding: 0 0 calc(env(safe-area-inset-bottom) + 12px);
  }
  .rv-feature .ft {
    width: auto;
    min-height: 124px;
    margin: 0 var(--pad);
    justify-self: stretch;
  }
  .rv-feature .ft-in {
    padding: 12px 14px;
    gap: 2px 14px;
  }
  .rv-feature .ft-price {
    font-size: 56px;
  }
  .rv-feature .ft-tag {
    font-size: 10.5px;
    letter-spacing: 0.16em;
  }
  .rv-feature .ft-line {
    font-size: 17px;
  }
  .rv-feature .ft-go {
    min-height: 34px;
    padding: 0 14px;
  }
  .rv-feature .tk-wrap {
    display: block;
  }
  .rv-feature .ofr-list {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .rv-feature .ofr-list > li {
    flex: 0 0 auto;
  }
  .rv-feature .tk {
    min-height: 42px;
  }
  .rv-feature .callouts.stack {
    padding-bottom: var(--room-foot, clamp(212px, 27vh, 232px));
  }
}

/* ---------------- her opening words, in the room ----------------
   (scripts/build-site.ts crown(); the room's script decides where it sits:
   top center, or in the band above the offers, never on a world) */
.crown {
  position: fixed;
  left: 50%;
  top: calc(var(--hud, 72px) + 22px);
  z-index: 22;
  width: min(560px, calc(100vw - 40px));
  transform: translate(-50%, 10px);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1.1s cubic-bezier(.16, .84, .26, 1) .5s, transform 1.4s cubic-bezier(.16, .84, .26, 1) .5s, visibility 0s linear 1.6s;
}
.crown.on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
  transition-delay: .5s, .5s, 0s;
}
.crown.band { top: auto; bottom: var(--cr-bottom, 250px); }
/* above the offers it can cross a lit world: a soft dark halo keeps every word readable */
.crown.band::before {
  content: "";
  position: absolute;
  inset: -22px -34px -14px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(5, 6, 8, .8), rgba(5, 6, 8, .5) 62%, rgba(5, 6, 8, 0));
}
.crown.wrapped .cr-links a + a::before { display: none; }
.crown.gone { display: none; }
.crown p { margin: 0; }
.cr-tag {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.1;
  background: var(--gold-grad) 50% 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 18px rgba(0, 0, 0, .8));
}
.cr-pillars {
  margin-top: 8px !important;
  font-size: 11.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(241, 236, 228, .72);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .9);
}
.cr-line {
  margin-top: 12px !important;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.5;
  color: rgba(241, 236, 228, .84);
  text-shadow: 0 2px 22px rgba(0, 0, 0, .9);
}
.cr-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 22px;
  margin-top: 12px;
}
.cr-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 12.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .9);
  transition: color .3s ease;
}
.cr-links a:hover, .cr-links a:focus-visible { color: var(--gold); }
.cr-links a + a::before {
  content: "";
  width: 4px;
  height: 4px;
  margin: 0 18px 0 -4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .7;
}
/* tighter places: first the long line goes, then all but the three buttons */
.crown.lean .cr-line,
.crown.bare .cr-line,
.crown.bare .cr-pillars,
.crown.tight .cr-line,
.crown.tight .cr-pillars,
.crown.tight .cr-tag { display: none; }
.crown.tight .cr-links { margin-top: 0; }
@media (max-width: 760px) {
  .crown { width: calc(100vw - 32px); }
  .cr-tag { font-size: 22px; }
  .cr-line { font-size: 15px; }
  .cr-links { gap: 0 14px; }
  .cr-links a { font-size: 11px; letter-spacing: .14em; }
  .cr-links a + a::before { margin: 0 14px 0 -2px; }
}
@media (prefers-reduced-motion: reduce) {
  .crown { transition: opacity .01s, visibility 0s; transform: translate(-50%, 0); }
}

/* ---------------- the room on short and sideways screens ---------------- */
/* a short phone: the six names a little smaller, so all six fit above the offers */
@media (max-width: 860px) and (max-height: 760px) {
  .six .callouts.stack .co { padding: 4px 12px 5px 14px; }
  .six .co-t { font-size: 21px; }
  .six .co-n { font-size: 11px; }
}
/* a phone on its side: the six names in two columns, and the $297 as one slim line */
@media (max-height: 500px) and (orientation: landscape) {
  .six .callouts.stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: center;
    column-gap: 24px;
    row-gap: 0;
  }
  .six .callouts.stack .co[data-i="1"],
  .six .callouts.stack .co[data-i="3"] { margin-left: 0; }
  .six .callouts.stack .co { padding: 3px 12px 4px 14px; }
  .six .co-t { font-size: 18px; }
  .six .co-n { font-size: 10.5px; }
  .rv-feature .ft { min-height: 0; }
  .rv-feature .ft-in { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 18px; padding: 8px 16px; }
  .rv-feature .ft-price { grid-row: auto; font-size: 38px; }
  .rv-feature .ft-line,
  .rv-feature .ft-count { display: none; }
  .rv-feature .ft-go { margin-top: 0; }
  .rv-feature .tk-wrap { display: none; }
}