.social-marks {
  width: 100%;
  margin: 14px 0 0;
  padding: 0;
  text-align: center;
}
.social-marks .sm-kicker {
  margin: 0 0 10px;
  color: #c8ff2e;
  font: 600 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* Grille 2 x 2 : quatre pastilles ne tiennent pas sur une ligne sous le telephone,
   et 3 + 1 laissait YouTube orphelin. */
.social-marks .sm-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  justify-items: stretch;
  gap: 8px;
  max-width: 260px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.social-marks .sm-item {
  margin: 0;
  padding: 0;
}
.social-marks .sm-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 8px 4px 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(12, 13, 16, 0.55);
}
.social-marks .sm-glyph {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.social-marks .sm-tt {
  overflow: visible;
}
.social-marks b {
  color: #f4f0e8;
  font: 650 11px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -0.03em;
}
.social-marks .sm-caption {
  margin: 10px 2px 0;
  color: #9a9b9f;
  font: 500 12px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -0.01em;
}
.phone-frame {
  overflow: visible;
}
.phone-glass .social-ui {
  z-index: 6;
}
/* Platform picker: real logomark instead of the ♪ ◎ ▶ f stand-ins. */
.platform-control button > i.me-platform-stand,
.platform-block button > i.me-platform-stand {
  display: none !important;
}
.me-platform-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.me-platform-mark svg {
  display: block;
  width: 18px;
  height: 18px;
}
.me-platform-mark .sm-tt {
  overflow: visible;
}
/* Brand colour only on the selected one, so the row stays calm. */
.platform-control button:not(.active) .me-platform-mark,
.platform-block button:not(.active) .me-platform-mark {
  filter: grayscale(1) brightness(1.55);
  opacity: 0.72;
}

.phone-island,
.phone-home {
  z-index: 8;
}
.phone-glass,
.studio-social-preview .device-screen,
.hero-stage .stage-image {
  overflow: hidden !important;
  isolation: isolate;
  contain: paint;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  clip-path: inset(0 round 38px);
  -webkit-clip-path: inset(0 round 38px);
  -webkit-mask-image: linear-gradient(#000 0 0);
  mask-image: linear-gradient(#000 0 0);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.phone-glass > video,
.phone-glass > .phone-screen,
.phone-glass > img,
.hero-stage .stage-image video,
.studio-social-preview .device-screen video {
  border-radius: inherit !important;
  clip-path: none;
}
.phone-glare,
.studio-social-preview .phone-glare,
.hero-stage .phone-glare {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: normal;
  opacity: 0.42;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 12%, transparent 28%);
}
.phone-glare::after,
.studio-social-preview .phone-glare::after,
.hero-stage .phone-glare::after {
  content: none !important;
  display: none !important;
}
.phone-live {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.phone-live-feed {
  position: absolute;
  left: 5.5%;
  right: 28%;
  bottom: 11%;
  height: 44%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%);
}
.phone-live-feed li {
  display: none;
  align-items: flex-end;
  gap: 6px;
  max-width: 100%;
  overflow: hidden;
  margin: 0;
  opacity: 0;
}
.phone-live-feed li.me-in {
  display: flex;
  opacity: 1;
  animation: meSpawnIn 0.42s ease-out;
}
.phone-live-feed i {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #fff;
  font: 700 8px/16px system-ui, sans-serif;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.phone-live-feed span {
  max-width: calc(100% - 22px);
  padding: 5px 8px 6px;
  border-radius: 13px;
  background: rgba(8, 8, 10, 0.46);
  backdrop-filter: blur(10px);
  color: #fff;
  font: 500 10px/1.25 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.phone-live-feed b {
  display: block;
  margin: 0 0 1px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.phone-live-likes {
  position: absolute;
  right: 5%;
  bottom: 58%;
  display: grid;
  justify-items: center;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.phone-live-likes em {
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  animation: meLikePulse 1.7s ease-in-out infinite;
}
.phone-live-likes b {
  position: relative;
  display: block;
  width: 34px;
  height: 12px;
  margin-top: 3px;
}
.phone-live-likes b span,
.phone-live-likes .me-like-n {
  position: static;
  display: block;
  text-align: center;
  font: 700 10px/12px system-ui, sans-serif;
  letter-spacing: -0.03em;
  opacity: 1;
  animation: none;
}
.phone-live-hearts {
  position: absolute;
  right: 4%;
  bottom: 16%;
  width: 24%;
  height: 40%;
}
.phone-live-hearts i {
  position: absolute;
  bottom: 0;
  left: 28%;
  font-style: normal;
  font-size: 15px;
  line-height: 1;
  opacity: 0;
  animation: meHeartUp 2.7s ease-out infinite;
  animation-delay: var(--d);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}
.phone-live-burst {
  display: none !important;
}
.phone-glass:has(.social-ui) .phone-live-feed {
  bottom: 23%;
  height: 34%;
}
.phone-glass:has(.social-ui) .phone-live-hearts {
  bottom: 24%;
  height: 34%;
}
.phone-glass:has(.social-ui) .phone-live-likes {
  bottom: 60%;
}
.phone-glass:has(.phone-live) .social-ui > span {
  opacity: 0;
}
.social-16-9 .phone-live,
.social-1-1 .phone-live {
  display: none;
}
@keyframes meSpawnIn {
  from { opacity: 0; transform: translateY(36px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes meHeartUp {
  0% { opacity: 0; transform: translate(0, 8px) scale(0.45); }
  14% { opacity: 1; transform: translate(calc(var(--x, 0px) * 0.2), -12px) scale(1); }
  100% { opacity: 0; transform: translate(var(--x, 8px), -120px) scale(0.82); }
}
@keyframes meLikePulse {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.18); }
}
@keyframes meLikeTick {
  0%, 11.5% { opacity: 1; }
  12.5%, 100% { opacity: 0; }
}
@keyframes meBurst {
  0%, 58% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  66% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.18); }
  86% { opacity: 0; transform: translate(-50%, -62%) scale(0.9); }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .phone-live-feed li,
  .phone-live-hearts i,
  .phone-live-likes em,
  .phone-live-likes b span,
  .phone-live-burst {
    animation: none !important;
  }
  .phone-live-feed li { display: none; opacity: 0; transform: none; }
  .phone-live-feed li.me-in,
  .phone-live-feed li:nth-child(-n+2) { display: flex; opacity: 1; }
  .phone-live-hearts i { opacity: 0; }
  .phone-live-hearts i:nth-child(-n+2) { opacity: 1; transform: none; }
  .phone-live-likes b span,
  .phone-live-likes .me-like-n { opacity: 1; }
  .phone-live-burst { display: none; }
}

.phone-shell,
.studio-social-preview .social-device,
.hero-stage .stage-frame,
.hero-stage .hero-phone .phone-shell {

  container-type: inline-size !important;
  contain: none !important;
  overflow: visible !important;
  isolation: auto !important;
  padding: 2.7% 2.5% 2.85% !important;
  border: 0 !important;
  border-radius: 48px !important;
  background:
    linear-gradient(160deg, #8a8780 0%, #5c5a55 8%, #2a2927 18%, #141413 32%, #0a0a0a 50%, #161615 68%, #4a4945 88%, #2e2d2a 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.62),
    inset 1.8px 0 0 rgba(255, 255, 255, 0.16),
    inset -1.2px 0 0 rgba(255, 255, 255, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.08),
    0 28px 60px rgba(0, 0, 0, 0.62),
    0 8px 18px rgba(0, 0, 0, 0.4) !important;

}
html body .phone-frame .phone-shell,
.phone-frame .phone-shell {
  border-radius: 17.6cqi !important;
}
.phone-shell::before,
.studio-social-preview .social-device::before,
.hero-stage .stage-frame::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background: none !important;
  animation: none !important;
  mix-blend-mode: normal !important;
  box-shadow:
    inset 0 0 0 1.55px #080808,
    inset 0 0 0 2.45px rgba(255, 255, 255, 0.09) !important;
}
.phone-btn,
.hero-stage .phone-btn,
.studio-social-preview .phone-btn {
  position: absolute !important;
  z-index: 0 !important;
  width: 4px !important;
  pointer-events: none !important;
  background: linear-gradient(#9a9790, #3a3936 40%, #121211) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.45) !important;
}
.phone-frame .phone-btn {
  width: 1.45cqi !important;
}
.phone-btn-silent,
.hero-stage .phone-btn-silent,
.studio-social-preview .phone-btn-silent {
  left: -4px !important;
  top: 16.5% !important;
  height: 8.2% !important;
  border-radius: 2px 0 0 2px !important;
}
.phone-btn-vol-up,
.hero-stage .phone-btn-vol-up,
.studio-social-preview .phone-btn-vol-up {
  left: -4px !important;
  top: 24.2% !important;
  height: 7.4% !important;
  border-radius: 2px 0 0 2px !important;
}
.phone-btn-vol-down,
.hero-stage .phone-btn-vol-down,
.studio-social-preview .phone-btn-vol-down {
  left: -4px !important;
  top: 32.4% !important;
  height: 7.4% !important;
  border-radius: 2px 0 0 2px !important;
}
.phone-btn-power,
.hero-stage .phone-btn-power,
.studio-social-preview .phone-btn-power {
  right: -4px !important;
  top: 25.8% !important;
  height: 12.4% !important;
  border-radius: 0 2px 2px 0 !important;
  background: linear-gradient(90deg, #121211, #3a3936 55%, #9a9790) !important;
}
.phone-frame .phone-btn-silent,
.phone-frame .phone-btn-vol-up,
.phone-frame .phone-btn-vol-down {
  left: -1.35cqi !important;
}
.phone-frame .phone-btn-power {
  right: -1.35cqi !important;
}
.phone-glass,
.studio-social-preview .device-screen,
.studio-social-preview .phone-glass,
.hero-stage .stage-image {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;
  display: block !important;
  overflow: hidden !important;
  isolation: isolate !important;
  contain: paint !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 9 / 19.5 !important;
  border-radius: 38px !important;
  background: #000 !important;
  transform: translateZ(0) !important;
  clip-path: inset(0 round 38px) !important;
  -webkit-clip-path: inset(0 round 38px) !important;
  -webkit-mask-image: linear-gradient(#000 0 0) !important;
  mask-image: linear-gradient(#000 0 0) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
}
.studio-social-preview .device-screen video,
.studio-social-preview .device-screen > img,
.studio-social-preview .device-screen > .photo-preview-media,
.studio-social-preview .device-screen .phone-screen,
.studio-social-preview .social-device > video,
.hero-stage .stage-image video,
.hero-stage .stage-image img,
.hero-stage .stage-image .phone-screen,
.phone-glass > video,
.phone-glass > .phone-screen,
.phone-glass > img {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  aspect-ratio: 9 / 19.5 !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  background: #000 !important;
  border-radius: inherit !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}
.phone-island,
.hero-stage .phone-island,
.studio-social-preview .phone-island {
  position: absolute !important;
  z-index: 8 !important;
  top: 10px !important;
  left: 50% !important;
  width: 82px !important;
  height: 24px !important;
  transform: translateX(-50%) !important;
  border-radius: 12px !important;
  background: #050505 !important;
  box-shadow: 0 0 0 1px #101010, inset 0 1px 2px rgba(255, 255, 255, 0.06) !important;
  pointer-events: none !important;
}
.phone-frame .phone-island {
  top: 3.6cqi !important;
  width: 33cqi !important;
  height: 9.2cqi !important;
  border-radius: 5cqi !important;
  box-shadow: 0 0 0 0.4cqi #101010, inset 0 0.4cqi 0.8cqi rgba(255, 255, 255, 0.06) !important;
}
.phone-island::after,
.hero-stage .phone-island::after,
.studio-social-preview .phone-island::after {
  content: "" !important;
  position: absolute !important;
  right: 5px !important;
  top: 50% !important;
  width: 12px !important;
  height: 12px !important;
  transform: translateY(-50%) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 34% 32%, #6aa0c8 0%, #1a3d58 38%, #070b12 72%) !important;
  box-shadow: inset 0 0 0 1px #0c0c0e !important;
}
.phone-frame .phone-island::after {
  right: 2.2cqi !important;
  width: 5.2cqi !important;
  height: 5.2cqi !important;
  box-shadow: inset 0 0 0 0.35cqi #0c0c0e !important;
}
.phone-home,
.hero-stage .phone-home,
.studio-social-preview .phone-home {
  position: absolute !important;
  z-index: 8 !important;
  left: 50% !important;
  bottom: 8px !important;
  width: 80px !important;
  height: 4px !important;
  transform: translateX(-50%) !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.42) !important;
  pointer-events: none !important;
}
.phone-frame .phone-home {
  bottom: 2.2cqi !important;
  width: 34cqi !important;
  height: 1.35cqi !important;
  border-radius: 1cqi !important;
}
.studio-social-preview .social-device,
.studio-fullscreen .studio-social-preview .social-device,
.studio-fullscreen .studio-social-preview .social-device.social-16-9,
.studio-fullscreen .studio-social-preview .social-device.social-9-16,
.studio-fullscreen .studio-social-preview .social-device.social-1-1 {
  width: min(280px, 100%) !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  border-radius: 48px !important;
  margin: auto;
}
.studio-social-preview .social-device::after {
  content: none !important;
  display: none !important;
  background: none !important;
  mix-blend-mode: normal !important;
  animation: none !important;
}
.phone-glass::before,
.hero-stage .stage-image::before,
.hero-stage .phone-glass::before,
.studio-social-preview .device-screen::before,
.studio-social-preview .phone-glass::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 8 !important;
  top: 10px !important;
  left: 50% !important;
  width: 92px !important;
  height: 25px !important;
  inset: auto !important;
  transform: translateX(-50%) !important;
  border-radius: 14px !important;
  pointer-events: none !important;
  background: radial-gradient(circle at 78% 50%, #6aa0c8 0 2.2px, #1a3d58 3.4px, #070b12 6.5px, transparent 7.2px), #050505 !important;
  box-shadow: 0 0 0 1px #101010 !important;
  mix-blend-mode: normal !important;
  animation: none !important;
}
.phone-glass::after,
.hero-stage .stage-image::after,
.hero-stage .phone-glass::after,
.studio-social-preview .device-screen::after,
.studio-social-preview .phone-glass::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 8 !important;
  left: 50% !important;
  bottom: 8px !important;
  width: 94px !important;
  height: 4px !important;
  inset: auto !important;
  transform: translateX(-50%) !important;
  border-radius: 4px !important;
  pointer-events: none !important;
  background: rgba(255, 255, 255, 0.42) !important;
  mix-blend-mode: normal !important;
  animation: none !important;
}
.phone-glass:has(.phone-island)::before,
.hero-stage .stage-image:has(.phone-island)::before,
.hero-stage .phone-glass:has(.phone-island)::before,
.studio-social-preview .device-screen:has(.phone-island)::before,
.studio-social-preview .phone-glass:has(.phone-island)::before,
.phone-glass:has(.phone-home)::after,
.hero-stage .stage-image:has(.phone-home)::after,
.hero-stage .phone-glass:has(.phone-home)::after,
.studio-social-preview .device-screen:has(.phone-home)::after,
.studio-social-preview .phone-glass:has(.phone-home)::after {
  content: none !important;
  display: none !important;
}
.studio-social-preview .phone-glare,
.studio-social-preview .phone-glare::before,
.studio-social-preview .phone-glare::after {
  mix-blend-mode: normal !important;
  animation: none !important;
}
.studio-fullscreen .orbit-one,
.studio-fullscreen .orbit-two,
.studio-fullscreen .hero-orbit,
.studio-social-preview .orbit-one,
.studio-social-preview .orbit-two {
  display: none !important;
  visibility: hidden !important;
}
.studio-social-preview .social-ui { z-index: 6; }
.studio-social-preview .social-marks {
  max-width: 320px;
  margin-left: 50%;
  transform: translateX(-50%);
}
.hero-orbit,
.hero-orbit.orbit-one,
.hero-orbit.orbit-two,
.orbit-one,
.orbit-two,
.cursor-glow,
.hero-stage .stage-glow,
.hero-stage .hero-orbit,
.hero-stage .orbit-one,
.hero-stage .orbit-two,
.gyro-enabled .hero-orbit,
.gyro-enabled .orbit-one,
.gyro-enabled .orbit-two {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  animation: none !important;
}
html, body, .hero {
  overflow-x: clip !important;
}
.hero-stage {
  animation: none !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  justify-items: center !important;
}
.hero-stage .hero-phone,
.hero-stage .phone-frame {
  width: min(268px, 78%) !important;
  max-width: calc(100vw - 48px) !important;
  margin: 0 auto 24px !important;
  padding: 4px 10px 0 !important;
  justify-self: center !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.hero-stage:has(.stage-frame),
.hero-stage:has(.hero-phone) {
  height: auto !important;
  min-height: 720px !important;
  contain: none !important;
  overflow: visible !important;
  isolation: isolate !important;
  z-index: 6 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  grid-template-areas:
    "card phone ."
    "rail rail rail" !important;
  align-items: center !important;
  justify-items: center !important;
  column-gap: 36px !important;
  row-gap: 18px !important;
}
.hero-stage:has(.stage-frame) .stage-glow,
.hero-stage:has(.hero-phone) .stage-glow { grid-area: phone; }
.hero-stage:has(.stage-frame) .stage-frame,
.hero-stage:has(.hero-phone) .hero-phone,
.hero-stage:has(.hero-phone) .phone-frame {
  grid-area: phone;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  height: auto !important;
  margin: 8px auto 0 !important;
}
.hero-stage:has(.stage-frame) .stage-frame {
  width: min(278px, 68vw) !important;
}
.hero-stage:has(.stage-frame) .stage-glow {
  display: none !important;
}
.hero-stage:has(.stage-frame) .stage-topline,
.hero-stage:has(.stage-frame) .stage-caption,
.hero-stage:has(.stage-frame) .stage-corners,
.hero-stage:has(.stage-frame) .formats-card,
.hero-stage:has(.stage-frame) .stage-play {
  content: none !important;
  display: none !important;
  background: none !important;
}
.hero-stage:has(.stage-frame) .enhance-card {
  grid-area: card;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  justify-self: end !important;
  margin: 0 !important;
  z-index: 1 !important;
  max-width: 190px;
  margin-right: 12px !important;
}
.hero-stage:has(.stage-frame) .shot-rail {
  grid-area: rail;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  margin-top: 18px !important;
}
.hero-lede,
.hero-purchase-note,
.hero-proof strong,
.hero-proof small,
.delivery-chip,
.pricing-grid article p,
.pricing-grid article li,
.membership-legal {
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #c5cbd4 !important;
}
.hero-lede { font-size: 17px !important; color: #e8eaee !important; }
.hero-proof small,
.floating-card small,
.delivery-chip {
  font-size: 13px !important;
  color: #b4bac4 !important;
  letter-spacing: 0.04em !important;
}
.button,
.nav-cta,
.nav-links a {
  min-height: 44px !important;
  font-size: 14px !important;
}
.hero-actions .button-primary { font-size: 15px !important; }
.me-pay-note {
  margin: 18px 0 0;
  color: #b8bec8;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}
.me-nap {
  margin: 12px 0 0;
  color: #b8bec8;
  font-size: 13px;
  line-height: 1.5;
}
.me-nap a { color: #e8eaee; }
.me-retract {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 0;
  color: #c5cbd4;
  font-size: 13px;
  line-height: 1.45;
}
.me-retract input { margin-top: 3px; flex: 0 0 auto; }
@media (max-width: 1100px) {
  html body .hero,
  .hero {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
  }
  html body .hero-copy,
  .hero-copy {
    margin-inline: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }
  html body .hero-copy .hero-proof,
  .hero-copy .hero-proof {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  .hero-stage:has(.stage-frame),
  .hero-stage:has(.hero-phone) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "card"
      "phone"
      "rail" !important;
    min-height: 0 !important;
  }
  .hero-stage:has(.stage-frame) .enhance-card,
  .hero-stage:has(.hero-phone) .enhance-card {
    justify-self: center !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 0 16px !important;
  }
}
.studio-fullscreen {
  scroll-padding-top: 76px;
  scroll-padding-bottom: 48dvh;
  overflow-x: clip !important;
}
@media (max-width: 760px) {
  html, body, .hero, .hero-stage {
    overflow-x: clip !important;
  }
  html body .hero,
  .hero,
  html body .hero-copy,
  .hero-copy,
  .hero-stage {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    justify-items: center !important;
  }
  html body .hero {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: none !important;
    justify-items: center !important;
    align-items: start !important;
    min-height: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  html body .hero-copy,
  .hero-copy {
    text-align: center !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-self: center !important;
    padding-inline: 0 !important;
  }
  html body .hero-copy > *,
  .hero-copy > * {
    margin-inline: auto !important;
    max-width: 100% !important;
  }
  html body .hero-copy .eyebrow,
  html body .hero-copy .hero-proof,
  html body .hero-copy .hero-actions,
  .hero-copy .eyebrow,
  .hero-copy .hero-proof {
    justify-content: center !important;
    flex-wrap: wrap !important;
    text-align: center !important;
  }
  html body .hero-stage,
  .hero-stage {
    justify-self: center !important;
    min-height: 0 !important;
    min-width: 0 !important;
  }
  html body .hero-stage:has(.stage-frame),
  html body .hero-stage:has(.hero-phone) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body .hero-stage .shot-rail,
  .hero-stage .shot-rail {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  html body .hero-stage .enhance-card,
  .hero-stage .enhance-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    justify-self: center !important;
    margin: 0 auto 16px !important;
  }
  html body .hero h1,
  .hero h1 {
    font-size: clamp(32px, 8.6vw, 42px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.045em !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
  .hero-actions {
    justify-content: center !important;
  }
  .visual-ticker > div {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
  }
  .visual-ticker span {
    display: inline-flex !important;
    flex-direction: row !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
  }
  html body .hero-stage .stage-frame,
  html body .hero-stage:has(.stage-frame) .stage-frame,
  html body .hero-stage .hero-phone,
  html body .hero-stage .phone-frame,
  .hero-stage .stage-frame,
  .hero-stage:has(.stage-frame) .stage-frame,
  .hero-stage .hero-phone,
  .hero-stage .phone-frame,
  .hero-stage:has(.hero-phone) .hero-phone,
  .studio-social-preview .social-device,
  .studio-fullscreen .studio-social-preview .social-device,
  .studio-fullscreen .studio-social-preview .social-device.social-16-9,
  .studio-fullscreen .studio-social-preview .social-device.social-9-16,
  .studio-fullscreen .studio-social-preview .social-device.social-1-1 {
    width: min(228px, 72vw) !important;
    max-width: calc(100vw - 48px) !important;
    margin-inline: auto !important;
    justify-self: center !important;
    position: relative !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    height: auto !important;
  }
  .hero-stage .stage-frame,
  .hero-stage .hero-phone .phone-shell,
  .studio-social-preview .social-device {
    border-radius: 40px !important;
  }
  .hero-stage .stage-image,
  .hero-stage .phone-glass,
  .studio-social-preview .device-screen,
  .studio-social-preview .phone-glass {
    border-radius: 34px !important;
    clip-path: inset(0 round 34px) !important;
    -webkit-clip-path: inset(0 round 34px) !important;
  }
  html body .phone-frame .phone-shell {
    border-radius: 17.6cqi !important;
  }
  .studio-fullscreen {
    scroll-padding-top: 84px;
    scroll-padding-bottom: 48dvh;
  }
  [data-tour] {
    scroll-margin-block: 84px 48dvh;
  }
}
/* ---------- Landing: promo banner (only shown when ?code= is present) ---------- */
.promo-banner {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--acid, #c8ff00);
  background: rgba(200, 255, 0, 0.07);
}
.promo-banner[hidden] { display: none !important; }
.promo-banner .promo-main {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
}
.promo-banner .promo-main b { color: var(--acid, #c8ff00); }
.promo-banner .promo-sub {
  margin: 6px 0 0;
  color: var(--muted, #8b8c90);
  font-size: 13px;
  line-height: 1.5;
}
.promo-copy {
  margin-left: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line, #2a2a2a);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.promo-copy:hover { border-color: var(--acid, #c8ff00); }

/* ---------- Landing: conversion bands at 30 / 50 / 70 % ---------- */
.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 34px 0;
  padding: 20px 22px;
  border: 1px solid var(--line, #2a2a2a);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0));
}
.cta-band strong { display: block; font-size: 20px; letter-spacing: -0.02em; }
.cta-band p { margin: 6px 0 0; color: #cfcfcf; font-size: 15px; line-height: 1.5; }
.cta-band small { display: block; margin: 8px 0 0; color: var(--muted, #8b8c90); font-size: 12px; }
.cta-band-action { display: grid; gap: 8px; justify-items: end; }
.cta-band-action span { color: var(--muted, #8b8c90); font-size: 12px; }
.cta-band-final { border-color: var(--acid, #c8ff00); }

/* ---------- Landing: offer + limits ---------- */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}
.offer-grid li {
  padding: 12px 14px;
  border: 1px solid var(--line, #2a2a2a);
  font-size: 15px;
  line-height: 1.45;
}
.offer-note { color: var(--muted, #8b8c90); font-size: 13px; }
.hero-price { margin: 10px 0 0; color: #e7e7e7; font-size: 15px; }
.campaign-grid-quiet a { opacity: 0.72; }
.other-render { display: grid; justify-items: center; margin: 8px 0 28px; }

/* ---------- Landing: stills slideshow inside the phone ---------- */
.phone-slideshow { position: relative; display: block; width: 100%; aspect-ratio: 9 / 19.5; background: #000; }
.phone-slideshow .phone-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Two animations on purpose: the crossfade, and the slow push-in that makes a
     still photo read as a moving shot — the actual MOTIONEST output. */
  animation: mePhoneSlides 16s linear infinite, mePhoneKen 16s ease-out infinite;
  animation-delay: calc(var(--i) * 4s);
  will-change: opacity, transform;
}
/* Ecran noir interdit : si l'animation ne tourne pas, la premiere photo reste visible. */
.phone-slideshow .phone-slide[style*="--i:0"] { opacity: 1; }
@keyframes mePhoneSlides {
  0% { opacity: 0; }
  3% { opacity: 1; }
  22% { opacity: 1; }
  25% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes mePhoneKen {
  0% { transform: scale(1.1) translate3d(0, 1.2%, 0); }
  25% { transform: scale(1.02) translate3d(0, -0.6%, 0); }
  100% { transform: scale(1.02) translate3d(0, -0.6%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .phone-slideshow .phone-slide { animation: none; opacity: 0; transform: none; }
  .phone-slideshow .phone-slide[style*="--i:0"] { opacity: 1; }
}

/* ---------- Studio on a phone: readable, one close button, tour out of the way ----------
 * Measured on an iPhone viewport: the studio printed 7px to 10px labels for the
 * step names, the file hints and the demo badge, the three steps overflowed the
 * width, the injected exit chip sat on top of the tour's own button, and the
 * tour card covered the very dropzone it was pointing at.
 */
@media (max-width: 760px) {
  .studio-fullscreen .section-heading > span,
  .studio-context small,
  .studio-fullscreen .field-line span,
  .studio-fullscreen .dropzone label small,
  .studio-fullscreen .dropzone label span,
  .studio-fullscreen .example-row span {
    font-size: 12px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.02em !important;
  }
  .studio-section.studio-fullscreen .studio-shell .steps {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .studio-section.studio-fullscreen .studio-shell .steps .step,
  .studio-section.studio-fullscreen .studio-shell .steps .step > span,
  .studio-section.studio-fullscreen .studio-shell .steps .step strong,
  .studio-section.studio-fullscreen .studio-shell .steps .step small {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .studio-section.studio-fullscreen .studio-shell .steps .step {
    align-items: flex-start !important;
    padding-right: 0 !important;
  }
  /* The origin draws a connector between steps that assumed a wider row. */
  .studio-section.studio-fullscreen .studio-shell .steps .step::after,
  .studio-section.studio-fullscreen .studio-shell .steps .step::before { display: none !important; }
  .studio-fullscreen .studio-shell { overflow-x: hidden !important; }
  .studio-section.studio-fullscreen .studio-shell .steps .step strong { font-size: 12.5px !important; line-height: 1.3 !important; }
  .studio-section.studio-fullscreen .studio-shell .steps .step small { font-size: 12px !important; line-height: 1.3 !important; }
  .studio-section.studio-fullscreen .studio-shell .steps .step b { font-size: 11px !important; }
  .studio-fullscreen .type-grid button { font-size: 13px !important; }
  .studio-fullscreen .demo-badge { font-size: 11px !important; }
  .studio-fullscreen .demo-badge i { transform: scale(1.4); }
  /* The studio's own × is fixed at the top on a phone, so the injected chip is
     duplicate chrome — and it landed exactly on the tour's primary button. */
  .me-studio-exit { display: none !important; }
  /* A bottom sheet, short enough that the highlighted zone stays visible above
     it — the card used to sit on top of the dropzone it was pointing at. */
  .studio-tour-card {
    position: fixed !important;
    top: auto !important;
    right: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    padding: 12px !important;
    overflow: visible !important;
  }
  .studio-tour-card > p:not(.studio-tour-live-hint) {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 4px 0 10px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
  /* The hint repeats what the highlight already shows and cost a third of the
     sheet, pushing the two buttons out of reach. */
  .studio-tour-card .studio-tour-live-hint { display: none !important; }
  .studio-tour-card .studio-tour-actions { margin-top: 2px !important; }
  .studio-tour-card small { font-size: 11px !important; }
  .studio-tour-card h3,
  .studio-tour-card strong { font-size: 17px !important; line-height: 1.2 !important; }
  .studio-fullscreen .demo-badge,
  .studio-fullscreen .dropzone button,
  .studio-fullscreen .example-row button,
  .studio-fullscreen .creator-head small,
  .studio-fullscreen .dropzone label b { font-size: 12px !important; }
  /* The pane is 664px tall on an iPhone: every pixel the header takes is a pixel
     the actual step does not get. The tagline duplicates the title. */
  .studio-fullscreen .section-heading { padding-top: 10px !important; padding-bottom: 10px !important; }
  .studio-fullscreen .section-heading h2 { font-size: 18px !important; margin-bottom: 2px !important; }
  .studio-fullscreen .section-heading > span { display: none !important; }
}

/* ---------- Venue variants ---------- */
.venue-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 10px;
}
.venue-card {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #101012;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.venue-card img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.75, 0.2, 1);
}
.venue-card:hover img { transform: scale(1.035); }
.venue-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  margin: -22px 0 0 -22px;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5));
}
.venue-play svg { display: block; width: 100%; height: auto; }
.venue-play circle { fill: rgba(10, 10, 12, 0.4); stroke: rgba(255, 255, 255, 0.8); stroke-width: 1.6; }
.venue-play path { fill: #f4f0e8; }
.venue-card figcaption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 26px 12px 11px;
  background: linear-gradient(to top, rgba(8, 8, 9, 0.9), rgba(8, 8, 9, 0));
  color: #f4f0e8;
  font: 600 13px/1.2 inherit;
}
.venue-card figcaption b {
  color: var(--acid, #c8ff2e);
  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
}
@media (max-width: 760px) {
  /* Three portrait cards side by side are unreadable on a phone: scroll them. */
  .venue-grid {
    grid-template-columns: repeat(3, 62vw);
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .venue-card { scroll-snap-align: center; }
}

/* ---------- Closing result band ---------- */
.result-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 216px;
  gap: 26px;
  align-items: center;
  margin: 34px 0 26px;
  padding: 26px;
  border-radius: 20px;
  border: 1px solid rgba(200, 255, 46, 0.28);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(200, 255, 46, 0.12), transparent 58%),
    #101012;
}
.result-copy > small {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--acid, #c8ff2e);
  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.result-copy h2 { margin: 0 0 8px; }
.result-copy > p { margin: 0 0 14px; }
.result-specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.result-specs li {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.result-specs b {
  color: #9a9b9f;
  font: 600 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.result-specs span { color: #f4f0e8; font-weight: 650; font-size: 13px; }
.result-note { display: block; margin-top: 9px; color: #7d7e82; font-size: 12px; }
.result-glass {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
}
.result-glass img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}
.result-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54px;
  margin: -27px 0 0 -27px;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.55));
}
.result-play svg { display: block; width: 100%; height: auto; }
.result-play circle { fill: rgba(10, 10, 12, 0.42); stroke: rgba(255, 255, 255, 0.82); stroke-width: 1.6; }
.result-play path { fill: #f4f0e8; }
.result-bar {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 12px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.26);
  overflow: hidden;
}
.result-bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--acid, #c8ff2e);
  transform-origin: left center;
  transform: scaleX(0);
  animation: mePhoneProgress 15s linear infinite;
}
.result-chip {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 6px;
  border-radius: 5px;
  background: rgba(10, 10, 12, 0.55);
  color: #f4f0e8;
  font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (max-width: 760px) {
  .result-band { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .result-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Show the file before asking for the payment. */
  .result-media { order: -1; max-width: 200px; margin: 0 auto 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .result-bar i { animation: none; transform: scaleX(0.35); }
  .venue-card img { transition: none; }
}

/* ---------- Scroll reveal: children rise in sequence ---------- *
 * The animation is declared only under .is-in, so a block is never hidden by
 * CSS alone: if the observer never fires, everything stays where it is.
 */
.reveal.is-in > * { animation: meRise 0.52s cubic-bezier(0.2, 0.75, 0.2, 1) both; }
.reveal.is-in > *:nth-child(2) { animation-delay: 0.06s; }
.reveal.is-in > *:nth-child(3) { animation-delay: 0.12s; }
.reveal.is-in > *:nth-child(4) { animation-delay: 0.18s; }
.reveal.is-in > *:nth-child(5) { animation-delay: 0.24s; }
.reveal.is-in > *:nth-child(6) { animation-delay: 0.3s; }
.reveal.is-in > *:nth-child(n + 7) { animation-delay: 0.36s; }
@keyframes meRise {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: none; }
}
/* The phone must never animate twice, and a sticky bar must not slide. */
.reveal.is-in > .phone-frame,
.sticky-cta.is-in > *,
.cta-band.is-in > .btn { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal.is-in > * { animation: none; }
}

/* ---------- Landing: video affordance inside the glass ---------- */
.phone-hud {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  grid-template-rows: 1fr auto auto;
  justify-items: center;
  pointer-events: none;
}
.phone-hud-play {
  grid-row: 1;
  align-self: center;
  width: 30%;
  max-width: 84px;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.55));
}
.phone-hud-play svg { display: block; width: 100%; height: auto; }
.phone-hud-play circle {
  fill: rgba(10, 10, 12, 0.42);
  stroke: rgba(255, 255, 255, 0.82);
  stroke-width: 1.6;
}
.phone-hud-play path { fill: #f4f0e8; }
.phone-hud-mark {
  grid-row: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(10, 10, 12, 0.5);
  color: #f4f0e8;
  font: 800 9px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.16em;
  backdrop-filter: blur(6px);
}
.phone-hud-mark b {
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--acid, #c8ff2e);
  color: #0b0b0c;
  font-size: 8px;
  letter-spacing: 0.14em;
}
.phone-hud-meta {
  position: absolute;
  top: 7%;
  right: 6%;
  display: grid;
  gap: 4px;
  justify-items: end;
}
.phone-hud-meta i {
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(10, 10, 12, 0.52);
  color: #f4f0e8;
  font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-style: normal;
  letter-spacing: 0.06em;
}
.phone-hud-bar {
  grid-row: 3;
  align-self: end;
  width: 78%;
  height: 3px;
  margin-bottom: 7%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.26);
  overflow: hidden;
}
.phone-hud-bar i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--acid, #c8ff2e);
  transform-origin: left center;
  transform: scaleX(0);
  animation: mePhoneProgress 16s linear infinite;
}
.phone-hud-video .phone-hud-bar i { animation-duration: 15s; }
/* When a real video drives the bar, JS sets the scale and the play mark only
   shows while the video is paused. */
.phone-hud-sync .phone-hud-bar i { animation: none; transition: transform 0.2s linear; }
.phone-hud-sync .phone-hud-play { opacity: 0; transition: opacity 0.22s ease; }
.phone-hud-sync.is-paused .phone-hud-play { opacity: 1; }
.phone-hud-sync .phone-hud-mark { opacity: 0.85; }
/* The studio preview already prints the account name and the chosen style at the
   bottom of the screen, and the badge landed straight on that caption. The play
   mark, the duration and the bar carry the "this is a video" message on their own
   there, so only the badge steps aside. */
.studio-social-preview .phone-hud-mark,
.social-device .phone-hud-mark {
  display: none !important;
}
.studio-social-preview .phone-hud-bar,
.social-device .phone-hud-bar {
  margin-bottom: 3%;
}
@keyframes mePhoneProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
/* The label is for screen readers and search engines, not for the layout. */
.phone-hud-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .phone-hud-bar i { animation: none; transform: scaleX(0.35); }
}
@media (max-width: 760px) {
  .cta-band { grid-template-columns: 1fr; }
  .cta-band-action { justify-items: stretch; }
  .cta-band-action .cta { text-align: center; }
  .offer-grid { grid-template-columns: 1fr; }
  .sticky-cta span { display: none; }
  .sticky-cta .cta { width: 100%; text-align: center; }
}

/* ---------- Studio: the close button must never scroll away (B6) ---------- */
.studio-fullscreen .section-heading .studio-launch,
.studio-fullscreen > .studio-launch {
  position: fixed !important;
  top: calc(10px + env(safe-area-inset-top)) !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 600 !important;
  min-width: 44px;
  min-height: 44px;
}
.me-studio-exit {
  position: fixed;
  z-index: 601;
  right: 10px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: none;
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(8, 8, 8, 0.92);
  color: #fff;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
html.me-studio-open .me-studio-exit { display: block; }
@media (min-width: 761px) {
  html.me-studio-open .me-studio-exit { display: none; }
}

/* ---------- Studio: thumbnails are reachable on touch (I7) ---------- */
.upload-move-actions { pointer-events: none; }
.upload-thumb:hover .upload-move-actions,
.upload-thumb:focus-within .upload-move-actions { pointer-events: auto; }
@media (hover: none) {
  .upload-move-actions { opacity: 1 !important; pointer-events: auto !important; }
}
.upload-thumb button[aria-label^="Retirer"],
.upload-thumb button[aria-label^="Remove"] {
  min-width: 44px;
  min-height: 44px;
}

/* ---------- Studio: promo reminder chip ---------- */
.me-promo-chip {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--acid, #c8ff00);
  background: rgba(200, 255, 0, 0.08);
  font-size: 13px;
  line-height: 1.45;
}
.me-promo-chip strong { display: block; color: var(--acid, #c8ff00); }
.me-promo-chip small { display: block; margin-top: 4px; color: #b9b9b9; }
.me-promo-chip button {
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

/* ---------- Studio: what happened when the guided tour ends ---------- */
.me-tour-done {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 2px solid var(--acid, #c8ff00);
  background: rgba(200, 255, 0, 0.06);
  color: #d6d6d6;
  font-size: 13px;
  line-height: 1.5;
}

/* ---------- Studio: one panel at a time on mobile (B3 support) ---------- */
@media (max-width: 760px) {
  .studio-fullscreen[data-studio-step] .steps {
    display: flex;
    gap: 8px;
    overflow-x: auto;
  }
  .studio-fullscreen[data-studio-step="1"] .direction-panel,
  .studio-fullscreen[data-studio-step="2"] .creator-panel > .field-block,
  .studio-fullscreen[data-studio-step="1"] .studio-social-preview {
    display: none !important;
  }
}

/* ---------- Studio: photos → brief → style → preview → pay ---------- */
.me-journey {
  display: none;
  position: sticky;
  top: 0;
  z-index: 18;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 16px 10px;
  background: linear-gradient(180deg, rgba(8, 8, 8, 0.98), rgba(8, 8, 8, 0.88));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
html.me-studio-open .me-journey { display: block; }
.me-journey ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.me-journey li {
  min-width: 0;
  padding: 4px 2px 6px;
  text-align: center;
  color: #8c8d91;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 2px solid rgba(255, 255, 255, 0.08);
}
.me-journey li b {
  display: block;
  color: #5c5d61;
  font-size: 9px;
  letter-spacing: 0.12em;
}
.me-journey li.is-done {
  color: #c8c9cc;
  border-bottom-color: rgba(200, 255, 0, 0.28);
}
.me-journey li[aria-current="step"] {
  color: #f4f4f2;
  border-bottom-color: var(--acid, #c8ff00);
}
.me-journey li[aria-current="step"] b { color: var(--acid, #c8ff00); }
@media (max-width: 760px) {
  .me-journey li {
    font-size: 10px;
    letter-spacing: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .me-journey li { transition: none; }
}