#movo-content {
  --section-gap: 144px;
  --paper: #fff;
  --ink: #131313;
  --muted: #696969;
  --panel: #f1f0ef;
  --accent: #7800ff;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.4 Inter, Arial, sans-serif;
  padding: 110px max(24px, 8vw) 96px;
}
#movo-content * { box-sizing: border-box; }
#movo-content :is(section, .formats, .feature-action) { max-width: 1200px; margin-inline: auto; }
#movo-content a { color: inherit; }
#movo-content :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
#movo-content p { color: var(--muted); margin: 0 0 1.3em; }
#movo-content p:last-child { margin-bottom: 0; }
#movo-content h1,
#movo-content h2,
#movo-content h3 { color: inherit; font-weight: 650; line-height: 1.05; }
#movo-content h1 { font-size: clamp(40px, 4.6vw, 60px); letter-spacing: -.06em; margin: 24px 0 28px; }
#movo-content h2 { font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -.05em; margin: 0 0 28px; }
#movo-content h3 { font-size: 26px; letter-spacing: -.04em; margin: 18px 0 22px; }
#movo-content textarea:focus { outline: none; }
#movo-content form:has(textarea:focus) { border-color: #767676; }
#movo-content .script-hero { margin-block: 64px 0; padding: 0; text-align: center; }
#movo-content .script-kicker { color: var(--muted); font-size: 14px; }
#movo-content .mark { display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: var(--accent); color: #fff; margin-right: 8px; }
#movo-content form {
  max-width: 680px;
  margin: 40px auto 0;
  padding: 16px 20px;
  background: var(--paper);
  border: 1px solid #dcdada;
  border-radius: 28px;
  box-shadow: 0 10px 30px #13131312;
  text-align: left;
}
#movo-content textarea {
  width: 100%;
  min-height: 80px;
  padding: 8px 6px;
  resize: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  scroll-margin-top: 110px;
}
#movo-content .controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#movo-content select {
  appearance: none;
  color: var(--ink);
  background: #f3f3f3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23131313' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center / 12px 8px no-repeat;
  border: 0;
  border-radius: 100px;
  padding: 9px 32px 9px 12px;
  max-width: 100%;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
#movo-content select:focus-visible {
  outline-color: #767676;
  outline-offset: -2px;
}
#movo-content :is(button, .cta, .textlink) {
  display: inline-grid;
  place-items: center;
  background: #fff;
  color: var(--ink);
  border: 1px solid #dcdada;
  border-radius: 100px;
  min-height: 44px;
  padding: 10px 22px;
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}
#movo-content .script-hero .controls button[type="submit"] { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; margin-left: auto; }
#movo-content button svg { display: block; }
#movo-content :is(button, .cta, .textlink):is(:hover, :focus-visible) {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
#movo-content .formats { display: flex; align-items: center; gap: 24px; padding-block: 56px 88px; color: var(--muted); font-weight: 650; }
#movo-content .format-label { flex: none; padding: 10px 14px; background: var(--panel); color: var(--ink); border-radius: 10px; font-size: 14px; }
#movo-content .format-window { flex: 1; min-width: 0; overflow: hidden; }
#movo-content .format-track { display: flex; width: max-content; animation: script-format-loop 48s linear infinite; }
#movo-content .format-group { display: flex; flex: none; gap: 28px; padding-right: 28px; white-space: nowrap; }

@keyframes script-format-loop {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  #movo-content .format-track { width: auto; animation: none; }
  #movo-content .format-group { flex: 1; flex-wrap: wrap; gap: 8px 20px; padding-right: 0; }
  #movo-content .format-group[aria-hidden="true"] { display: none; }
}

#movo-content .intro { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; background: var(--panel); border-radius: 16px; padding: clamp(30px, 8vw, 104px) 24px; }
#movo-content .intro-with-image { align-items: center; gap: clamp(20px, 4vw, 48px); }
#movo-content .intro-with-image > h2 { grid-column: 1 / -1; margin: 0; text-align: center; }
#movo-content :is(.how, .faq, .examples) { padding-block: 80px; }
#movo-content .how { padding-block-end: 68px; }
#movo-content .examples { padding-block: 68px 0; }
#movo-content .community + .faq { padding-block-start: var(--section-gap); }
#movo-content :is(.how, .faq, .examples) > h2 { text-align: center; }
#movo-content .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 44px; }
#movo-content .steps > * { padding: 32px 24px; border-radius: 16px; }
#movo-content .steps article { background: var(--ink); color: #fff; }
#movo-content .steps article :is(p, span) { color: #b8b8b8; }
#movo-content .feature { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; padding-block: 42px; }
#movo-content .f1 .visual { order: 2; }
#movo-content .visual { min-width: 0; border-radius: 16px; overflow: hidden; }
#movo-content .visual img,
#movo-content .end img { display: block; width: 100%; height: auto; }
#movo-content .feature-action { text-align: center; margin-top: 32px; }
#movo-content details { border-bottom: 1px solid #ddd; padding: 20px 0; }
#movo-content details p { margin-top: 14px; }
#movo-content summary { cursor: pointer; font-size: 18px; font-weight: 600; list-style: none; padding-right: 32px; position: relative; }
#movo-content summary::-webkit-details-marker { display: none; }
#movo-content summary::after { content: '+'; position: absolute; right: 4px; }
#movo-content details[open] summary::after { content: '−'; }
#movo-content .example-window { overflow: hidden; container-type: inline-size; }
#movo-content .example-track { animation-duration: 56s; }
#movo-content .example-track .format-group { gap: 12px; padding-right: 12px; white-space: normal; }
#movo-content .example-track article {
  flex: 0 0 min(80cqi, 300px);
  padding: 30px 24px;
  background: var(--panel);
  border-radius: 16px;
}

@media (prefers-reduced-motion: reduce) {
  #movo-content .example-track .format-group { padding-right: 0; }
  #movo-content .example-track article { flex: 1 1 min(100%, 260px); }
}
#movo-content .discovery { padding-block: 30px; }
#movo-content .link-pills { display: flex; flex-wrap: wrap; gap: 8px; }
#movo-content .link-pills a { padding: 10px 16px; border-radius: 100px; background: var(--panel); text-decoration: none; }
#movo-content .link-pills a:hover { background: #e5e4e3; }
#movo-content .end { margin-block: clamp(24px, 4vw, 48px); display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; background: var(--ink); color: white; border-radius: 16px; padding: 36px; }
#movo-content .end img { border-radius: 12px; }
#movo-content #script-cta-title { margin: var(--section-gap) 0 0; text-align: center; }
#movo-content .end h3 { margin-top: 16px; }
#movo-content .f0 { row-gap: clamp(16px, 3vw, 32px); }
#movo-content .end :is(p, .script-kicker) { color: #c0c0c0; }
#movo-content .end p { margin-top: 12px; font-size: 14px; }
#movo-content .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (forced-colors: active) {
  #movo-content select { appearance: auto; background-image: none; border: 1px solid ButtonText; padding-right: 12px; }
}

@media (max-width: 720px) {
  #movo-content { --section-gap: 76px; }
  #movo-content { padding: 92px 16px 48px; }
  #movo-content .script-hero { margin-top: 48px; }
  #movo-content form { margin-top: 28px; padding: 14px; }
  #movo-content .controls { gap: 6px; }
  #movo-content select { font-size: 13px; }
  #movo-content .formats { flex-direction: column; align-items: stretch; gap: 16px; padding-block: 36px 48px; font-size: 14px; }
  #movo-content .format-label { align-self: center; }
  #movo-content .format-window { flex: auto; }
  #movo-content :is(.intro, .feature, .steps, .end) { grid-template-columns: 1fr; gap: 16px; }
  #movo-content .f1 .visual { order: 0; }
  #movo-content :is(.how, .faq, .examples) { padding-block: 44px; }
  #movo-content .how { padding-block-end: 36px; }
  #movo-content .examples { padding-block: 36px 0; }
  #movo-content .feature { padding-block: 24px; }
  #movo-content .end { padding: 24px; }
}

/* Community panel from the dev homepage. */
#movo-content .community {
  margin-block-start:var(--section-gap);padding:0;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:0;
  overflow:hidden;border:1px solid #2a2b2e;border-radius:24px;background:#000;
}
#movo-content .community .community-copy {
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:62%;min-height:400px;padding:56px 0;gap:28px;text-align:center;
}
#movo-content .community #community-title {
  margin:0;color:#fff;-webkit-text-fill-color:#fff;
  font-size:clamp(32px,3.5vw,56px);line-height:1.1;font-weight:700;
  letter-spacing:-.035em;white-space:normal;
}
#movo-content .community .community-description {
  width:100%;max-width:540px;margin:0;color:#babac0;opacity:1;
  font:400 18px/1.5 Inter,sans-serif;white-space:normal;text-wrap:pretty;
}
#movo-content .community .community-social-panel {width:100%;height:auto;min-height:0;}
#movo-content .community .socials {display:flex;justify-content:center;flex-wrap:wrap;gap:10px;}
#movo-content .community .social {
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:10px 14px;border-radius:10px;border:1px solid #fff;text-decoration:none;
  background:#fff;color:#111;font:500 14px/1.25 Inter,sans-serif;
}
#movo-content .community .social:hover,
#movo-content .community .social:focus-visible {
  background:#7544d4;border-color:#7544d4;color:#fff;
}
#movo-content .community .social svg {width:18px;height:18px;}
#movo-content .community .community-art {position:absolute;top:32px;bottom:0;width:34%;pointer-events:none;z-index:0;}
#movo-content .community .community-art-left {left:0;overflow:hidden;clip-path:polygon(0 0,100% 44%,100% 100%,0 100%);mask-image:linear-gradient(90deg,#000 42%,transparent 100%);}
#movo-content .community .community-art-right {right:0;mask-image:linear-gradient(270deg,#000 42%,transparent 100%);}
#movo-content .community .community-art img {position:absolute;top:0;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:0;filter:brightness(.8) saturate(.85);}
#movo-content .community .community-art-left img {object-position:60% center;transform:scale(1.6);transform-origin:60% 30%;}
#movo-content .community .community-art-right img {clip-path:polygon(0 44%,100% 0,100% 100%,0 100%);}
#movo-content .community .community-art-left img {left:0;}
#movo-content .community .community-art-right img {right:0;object-position:35% center;}
@media(max-width:900px) {
  #movo-content .community .community-art-left img {object-position:50% center;}
  #movo-content .community .community-copy {width:72%;padding:48px 0;}
  #movo-content .community .community-art {width:40%;opacity:.7;}
}
@media(max-width:600px) {
  #movo-content .community .community-copy {width:100%;min-height:440px;padding:44px 20px;gap:24px;}
  #movo-content .community #community-title {font-size:32px;}
  #movo-content .community .community-description {font-size:16px;line-height:1.5;}
  #movo-content .community .community-art {top:24px;width:55%;opacity:.45;}
  #movo-content .community .community-art-left {mask-image:linear-gradient(90deg,#000 0%,transparent 90%);}
  #movo-content .community .community-art-right {mask-image:linear-gradient(270deg,#000 0%,transparent 90%);}
  #movo-content .community .community-art-right img {object-position:50% center;}
  #movo-content .community .social {padding:10px 12px;font-size:13px;}
}
